共计 4454 个字符，预计需要花费 12 分钟才能阅读完成。
我的项目演示
我的项目演示地址：
体验一下
我的项目源码：
我的项目源码
代码构造
本节做完成果
游戏主页面
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
我的项目源码：
我的项目源码
正文完
