功能描述：
該游戲實質上是坦克大戰+推箱子。玩家控制坦克，在與敵人戰斗的同時把物資順利運送到目的地則可順利過關，共三個關卡。
繼上一個HTML5游戲小demo《HTML5超級瑪麗游戲demo》后，這次開發的游戲添加了更多元素並增強了可玩性，該游戲同樣基於本人開發的HTML5游戲框架cnGameJS。
游戲說明：上下左右方向鍵控制移動，空格鍵發射炮彈，推動所有物資箱子（
）到目的地（
），則可過關。
代碼分析：
由於該游戲分了幾個關卡，所以這里首先來看看關卡管理器是如果管理各個關卡的：
/* 關卡管理器 */
var LevelManager=(function(){
var optionsObj={};//所有關卡參數對象
return {
add:function(levelObj,gameObj){
var srcArr=[];
for(name in levelObj.srcObj){
if(levelObj.srcObj.hasOwnProperty(name)){
srcArr.push(levelObj.srcObj[name]);
}
}
var opt=optionsObj[levelObj.level]={};
opt.gameObj=gameObj;
opt.srcArray=srcArr;
opt.startOptions=levelObj.startOptions||{};
opt.startOptions.mapMatrix=levelObj.mapMatrix;
opt.startOptions.srcObj=levelObj.srcObj;
opt.startOptions.level=levelObj.level;
},
startLevel:function(num){
var op=optionsObj[num];
cnGame.loader.start(op.gameObj,op);
}
}
})();
在初始化階段，我們首先創建自己的每個關卡的對象，然后調用add方法添加進關卡管理器，之后就可以調用startLevel開始該關卡。這樣就可以方便我們之后在每個關卡中的跳轉。另外每個關卡所用到的游戲對象也可以在這里傳入。在該游戲中，由於每個關卡游戲的邏輯基本相同，因此使用相同的游戲對象。而該游戲的開始界面則使用另一個游戲對象。每個游戲對象的組織形式如下：
var gameObj={
initialize:function(options){//初始化
},
update:function(){//更新
},
draw:function(){//繪制
}
}
之后看看游戲對象gameObj具體的的初始化函數：
/* 初始化 */
initialize:function(options){
srcObj=options.srcObj;
this.level=options.level;
this.enemyBeginX=options.enemyBeginX;
this.enemyBeginY=options.enemyBeginY;
this.map=new cnGame.Map(options.mapMatrix,{cellSize:[40,40]});
this.goods=[];
cnGame.input.preventDefault(["left","right","up","down"]);
for(var i=0,len=options.goodsArr.length;i<len;i++){
this.goods.push(new goods({src:srcObj.goods,width:40,height:40,x:options.goodsArr[i].x,y:options.goodsArr[i].y}));
cnGame.spriteList.add(this.goods[this.goods.length-1]);
}
this.player=new player({src:srcObj.player,width:40,height:40,x:40,y:cnGame.height-80});
cnGame.spriteList.add(this.player);
var newEnemy=new enemy({src:srcObj.enemy,width:40,height:40,x:this.enemyBeginX,y:this.enemyBeginY});
newEnemy.getRandomDir(dirArr);
cnGame.spriteList.add(newEnemy);
}
初始化函數中，我們需要初始化的參數有：地圖對象，物資數組，玩家對象，還有敵人對象。地圖對象可以使用cnGameJS的map，而玩家和敵人對象則繼承cnGameJS的sprite。
在每次gameObj的update中，我們需要判斷是否所有物資對象已經就位，如果是，則可以跳入下一關。
if(_map.isMatchCell(_goods)&&(_map.getPosValue(_goods)==3)){//判斷所有物資是否已到達目的地
finishedNum+=1;
if(finishedNum==_goodsArr.length){
this.toNextLevel();
}
}
另外，在每次update 中，還需要判斷子彈是否擊中敵人，擊中玩家，或物資：
if(isGoods(list[j])||(isEnemy(list[j])&&list[i].from=="player")||(isPlayer(list[j])&&list[i].from=="enemy")){}
如果擊中的是敵人或玩家，則把對應對象從spriteList里刪除，這樣下次就不會更新和繪制該對象。另外每次子彈擊中物體，就產生一個spriteSheet的爆炸動畫：
/* 擊中后的爆炸動畫效果 */
bullet.prototype.explode=function(){
var self=this;
this.isExploding=true;
var spriteSheet=new cnGame.SpriteSheet("boom",srcObj.boom,{width:280,height:40,frameSize:[40,40],frameDuration:40,onFinish:function(){self.isDisappear=true}});
this.setCurrentAnimation(spriteSheet);
this.speedX=0;
this.speedY=0;
}
該動畫的spriteSheet圖片如下：
生成的動畫其實就是每次從不同位置開始把該圖片繪制在canvas上，關於spriteSheet動畫詳情請看：《HTML5游戲框架cnGameJS開發實錄：動畫篇》。
另外，不同於上次的游戲超級瑪麗，該游戲屬於地圖型。因此在游戲開始階段就需要設計地圖並繪制。地圖通過二維矩陣生成，例如第一關的游戲地圖對應的二維矩陣如下：
/* 地圖矩陣：0.空地 1.牆壁 2.石頭 3.目的地 4.敵人基地*/
mapMatrix:[
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,0,0,2,2,0,0,0,2,2,0,0,0,1],
[1,0,1,0,0,0,2,0,0,0,4,0,0,0,2,1],
[1,0,1,0,0,0,0,0,2,0,0,0,0,0,0,1],
[1,0,2,0,0,0,0,0,2,0,0,0,0,0,0,1],
[1,0,2,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,0,0,0,1,1,1,2,2,1],
[1,0,0,0,0,2,0,0,0,0,1,3,0,0,0,1],
[1,0,0,0,0,2,0,2,0,0,1,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
]
關於cnGameJS中的map對象如何生成地圖，並提供常用接口，可參考該文章：《HTML5游戲框架cnGameJS開發實錄（地圖篇）》
cnGameJS游戲框架以及游戲源碼下載：點擊這里
PS:部分圖片來自《坦克大戰online》。
歡迎轉載，請標明出處：http://www.cnblogs.com/Cson/archive/2012/02/18/2357323.html