專案演示
專案演示地址：
專案原始碼：
程式碼結構
本節做完效果
遊戲主頁面
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