Project presentations

Project Demo Address:

Experience the

Project source code:

Program source code

The code structure

Finish the effects in this section

Game homepage

index.html

<! PUBLIC DOCTYPE HTML "- / / / / W3C DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; Charset = utF-8 "/> <meta http-equiv=" x-UA-compatible" /> <title> </head> <body> <img SRC ="img/enemy.png" id="enemy_img" style="display:none;" /> <img src="img/tower.png" id="tower_img" style="display:none;" /> <img src="img/bullet.png" id="bullet_img" style="display:none;" /> <img src="img/btn.png" id="btn_img" style="display:none;" /> <div id="game" style="position:relative; float:left; width:600px; height:500px;" > <canvas id="map" width="500" height="500" style="background:url(img/bg.png) repeat; position:absolute; left:0; top:0; z-index:99;" ></canvas> <canvas id="main" width="500" height="500" style="position:absolute; left:0; top:0; z-index:100;" ></canvas> <canvas id="tower" width="500" height="500" style="position:absolute; left:0; top:0; z-index:100;" ></canvas> <canvas id="select" width="500" height="500" style="position:absolute; left:0; top:0; z-index:101;" ></canvas> <canvas id="info" width="100" height="500" style="background-color:black; position:absolute; left:500px; top:0; z-index:102;" ></canvas> </div> <div style="float:left; width:500px; margin-left:50px;" > <p> Note: each tower can be upgraded to tier 3 for the same price as the original tower, or half of the total value if sold. <br/><br/> Tower 1: Level up to level 3 with thief function, stealing $1 per attack. <br/> Second tower: Slow down attack, both at level 3. <br/> Third tower: Multiple attacks. Attack multiple targets. <br/> Fourth tower: Pierce attack, attack a line, the highest damage. <br/> Fifth tower: second kill attack, has a certain chance to kill enemies in seconds. <br/><br /> Select map <select ID =" select_Map "><option Value ="1"> Map 1 </option><option value="2"> Map 2 </option></select> then press <input Type ="button" value=" startGame()" /> startGame! </p> </div> <script type="text/javascript" src="js/tools.js"></script> <script type="text/javascript" src="js/MapData.js"></script> <script type="text/javascript" src="js/Map.js"></script> <script type="text/javascript" src="js/Info.js"></script> <script type="text/javascript" src="js/Enemy.js"></script> <script type="text/javascript" src="js/Tower.js"></script> <script type="text/javascript" src="js/Bullet.js"></script> <script type="text/javascript" src="js/Game.js"></script> <script type="text/javascript"> var isStart = false; function startGame(){ if(! isStart)Game.start(); else Game.restart(); isStart = true; } </script> </body> </html>Copy the code

Main game module

game.js

Function (){this.initimg (); function(){this.initimg (); this.initCanvas(); InitImg: function(){this.imglist = {enemy_img: document.getelementById ("enemy_img"), tower_img: document.getElementById("tower_img"), bullet_img : document.getElementById("bullet_img"), btn_img : Document.getelementbyid ("btn_img")}}, // initialize canvas initCanvas: function(){this.canvasList = {map: document.getElementById("map").getContext("2d"), main : document.getElementById("main").getContext("2d"), info : document.getElementById("info").getContext("2d"), select : document.getElementById("select").getContext("2d"), tower : Document.getelementbyid ("tower").getContext("2d")}}, // start start: function(){ switch(document.getElementById("select_map").value){ case "1": MapData = MapOne; break; case "2": MapData = MapTwo; break; default: MapData = MapOne; break; } Map.draw(this.canvasList.map); this.timer = setInterval(Game.loop,20); }, / / the loop body loop: the function () {Canvas. The clear (Game. CanvasList. Main, 500500); } } Game.init();Copy the code

The code speaks for itself. A quick note: game.init () loads images and Canvas objects. There are five Canvas objects in this Game, which will be explained in the layers section later. Click the Start button on the web page to invoke the Start method. The start method loads the map and draws it on the canvas.

Map data

0 is the wall, 1 is the path. You can simply change the data to generate maps of different shapes. MapData.js

Var MapData = []; 2 / / map data var MapTwo = [,0,0,0,0,0,0,0,0,0 [0],,1,1,1,1,1,1,1,1,0 [1], [0,0,0,0,0,0,0,0,1,0], [0,0,0,0,0,0,0,0,1,0]. ,1,1,1,1,1,1,1,1,0 [0], [0,1,0,0,0,0,0,0,0,0], [0,1,0,0,0,0,0,0,0,0], [0,1,1,1,1,1,1,1,1,0], [0,0,0,0,0,0,0,0,1,0]. ,0,0,0,0,0,0,0,1,0 [0]]; / / a map data var MapOne = [,0,0,0,0,0,0,0,0,0 [0],,1,1,1,1,1,1,1,1,0 [1], [0,0,0,0,0,0,0,0,1,0], [0,0,0,0,0,0,0,0,1,0]. ,0,0,0,0,0,0,0,1,0 [0], [0,1,1,1,1,1,1,1,1,0], [0,1,0,0,0,0,0,0,0,0], [0,1,0,0,0,0,0,0,0,0], [0,1,0,0,0,0,0,0,0,0]. ,1,0,0,0,0,0,0,0,0 [0]];Copy the code

Draw a map

Map.js

Var Map = {draw: function(Map){var I,j; for(i = 0; i < 10; i++){ for(j = 0; j<10; J++) {/ / draw the background map the if (MapData [I] [j] = = 0) Canvas. The drawRect (map, 50, I * j * 50,50,50, "red"); Else Canvas. FillRect (map, I *50,j*50,50,50,'black'); }}}}Copy the code

Very simple, look at the comments to understand.

The game loop

// start: function(){switch(document.getelementById ("select_map").value){case "1": MapData = MapOne; break; case "2": MapData = MapTwo; break; default: MapData = MapOne; break; } Map.draw(this.canvasList.map); this.timer = setInterval(Game.loop,20); }, / / the loop body loop: the function () {Canvas. The clear (Game. CanvasList. Main, 500500); }Copy the code

Refresh the screen every 20 milliseconds. That’s All

Project source code:

Program source code