【CSON原创】HTML5游戏《坦克后援队》发布
功能描述：
该游戏实质上是坦克大战+推箱子。玩家控制坦克，在与敌人战斗的同时把物资顺利运送到目的地则可顺利过关，共三个关卡。
继上一个HTML5游戏小demo《HTML5超级玛丽游戏demo》后，这次开发的游戏添加了更多元素并增强了可玩性，该游戏同样基于本人开发的HTML5游戏框架cnGameJS。
功能描述：
该游戏实质上是坦克大战+推箱子。玩家控制坦克，在与敌人战斗的同时把物资顺利运送到目的地则可顺利过关，共三个关卡。
继上一个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
