我的项目演示
我的项目演示地址：
体验一下
我的项目源码：
我的项目源码
代码构造
本节做完成果
游戏主页面
index.html
<!DOCTYPE html PUBLIC "-//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>塔防</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> 阐明：每种塔都能够降级到3级，降级的价格与自身建造雷同，卖掉的话就是总额的一半。<br/><br/> 第一种塔：降级到3级，有小偷性能，每攻打一次会偷取1块钱。<br/> 第二种塔：加速攻打，3级时能够同时加速两个。<br/> 第三种塔：多重攻打。攻打多个指标。<br/> 第四种塔：穿刺攻打，攻打一条线上，攻击力最高。<br/> 第五种塔：秒杀攻打，有肯定几率把敌人秒杀。<br/><br /> 抉择地图<select id="select_map"><option value="1">地图一</option><option value="2">地图二</option></select>,而后按<input type="button" value="开始" onclick="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>游戏主模块
game.js
//游戏数据管制类var Game = { //图片列表信息 imgList : {}, //画布列表信息 canvasList : {}, //初始化 init : 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") } }, //初始化画布 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 : 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); }, //循环体 loop : function(){ Canvas.clear(Game.canvasList.main,500,500); }}Game.init();代码不言自明。
简略阐明一下：
Game.init()加载图片和Canvas对象，本游戏有5个Canvas对象，具体用处咱们在前面图层章节进行阐明。
点击网页上的开始按钮，调用start办法。start办法加载地图，并画到canvas上。
地图数据
0是墙壁，1是能够走的门路。能够简略的扭转数据，生成不同形态的地图。
MapData.js
//地图类var MapData = [];//地图二数据var MapTwo = [[0,0,0,0,0,0,0,0,0,0], [1,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,0,1,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,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,0,1,0]];//地图一数据var MapOne = [[0,0,0,0,0,0,0,0,0,0], [1,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,0,1,0], [0,0,0,0,0,0,0,0,1,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], [0,1,0,0,0,0,0,0,0,0]];画地图
Map.js
//地图绘制类var Map = { //画出地图 draw : function(map){ var i,j; for(i = 0; i < 10;i++){ for(j = 0;j<10;j++){ //画背景地图 if(MapData[i][j] == 0)Canvas.drawRect(map,i*50,j*50,50,50,'red'); //画能够走的路 else Canvas.fillRect(map,i*50,j*50,50,50,'black'); } } }}很简略，看正文即可明确。
游戏循环
//开始 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); }, //循环体 loop : function(){ Canvas.clear(Game.canvasList.main,500,500); }每隔20毫秒，刷新一下界面。
That's All
我的项目源码：
我的项目源码