HTML5遊戲《戰車後援隊》的範例程式碼分享

功能描述：

　　該遊戲實質上是坦克大戰+推箱。玩家控制坦克，在與敵人戰鬥的同時把物資順利運送到目的地則可順利過關，共三個關卡。

遊戲說明：上下左右方向鍵控制移動，空白鍵發射砲彈，推動所有物資箱子（）到目的地（），則可過關。

 

程式碼分析：

　　由於該遊戲分了幾個關卡，所以這裡首先來看看關卡管理器是如果管理各個關卡的：

/*    关卡管理器    */
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中文網其他相關文章！