功能描述:
该游戏实质上是坦克大战+推箱子。玩家控制坦克,在与敌人战斗的同时把物资顺利运送到目的地则可顺利过关,共三个关卡。
游戏说明:上下左右方向键控制移动,空格键发射炮弹,推动所有物资箱子()到目的地(),则可过关。
代码分析:
由于该游戏分了几个关卡,所以这里首先来看看关卡管理器是如果管理各个关卡的:
/* 关卡管理器 */ 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] ]
以上是HTML5游戏《坦克后援队》的示例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章!