【CSON原創(chuàng)】HTML5游戲《坦克后援隊(duì)》發(fā)布

功能描述：　　該游戲?qū)嵸|(zhì)上是坦克大戰(zhàn)+推箱子。玩家控制坦克，在與敵人戰(zhàn)斗的同時(shí)把物資順利運(yùn)送到目的地則可順利過(guò)關(guān)，共三個(gè)關(guān)卡。　　繼上一個(gè)HTML5游戲小demo《HTML5超級(jí)瑪麗游戲demo》后，這次開(kāi)發(fā)的游戲添加了更多元素并增強(qiáng)了可玩性，該游戲同樣基于本人開(kāi)發(fā)的HTML5游戲框架cnGameJS。

功能描述：

　　該游戲?qū)嵸|(zhì)上是坦克大戰(zhàn)+推箱子。玩家控制坦克，在與敵人戰(zhàn)斗的同時(shí)把物資順利運(yùn)送到目的地則可順利過(guò)關(guān)，共三個(gè)關(guān)卡。

　　繼上一個(gè)HTML5游戲小demo《HTML5超級(jí)瑪麗游戲demo》后，這次開(kāi)發(fā)的游戲添加了更多元素并增強(qiáng)了可玩性，該游戲同樣基于本人開(kāi)發(fā)的HTML5游戲框架cnGameJS。

游戲說(shuō)明：上下左右方向鍵控制移動(dòng)，空格鍵發(fā)射炮彈，推動(dòng)所有物資箱子（）到目的地（），則可過(guò)關(guān)。

代碼分析：

　　由于該游戲分了幾個(gè)關(guān)卡，所以這里首先來(lái)看看關(guān)卡管理器是如果管理各個(gè)關(guān)卡的：

/*    關(guān)卡管理器    */
var LevelManager=(function(){
    var optionsObj={};//所有關(guān)卡參數(shù)對(duì)象
    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);    
        }

    }

})();

　　　在初始化階段，我們首先創(chuàng)建自己的每個(gè)關(guān)卡的對(duì)象，然后調(diào)用add方法添加進(jìn)關(guān)卡管理器，之后就可以調(diào)用startLevel開(kāi)始該關(guān)卡。這樣就可以方便我們之后在每個(gè)關(guān)卡中的跳轉(zhuǎn)。另外每個(gè)關(guān)卡所用到的游戲?qū)ο笠部梢栽谶@里傳入。在該游戲中，由于每個(gè)關(guān)卡游戲的邏輯基本相同，因此使用相同的游戲?qū)ο蟆６撚螒虻拈_(kāi)始界面則使用另一個(gè)游戲?qū)ο蟆Ｃ總€(gè)游戲?qū)ο蟮慕M織形式如下：

var gameObj={

    initialize:function(options){//初始化
    },
    update:function(){//更新
    },
    draw:function(){//繪制
    }

}

　　之后看看游戲?qū)ο骻ameObj具體的的初始化函數(shù)：

        /*    初始化    */
        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);
        }

　　　初始化函數(shù)中，我們需要初始化的參數(shù)有：地圖對(duì)象，物資數(shù)組，玩家對(duì)象，還有敵人對(duì)象。地圖對(duì)象可以使用cnGameJS的map，而玩家和敵人對(duì)象則繼承cnGameJS的sprite。

　　在每次gameObj的update中，我們需要判斷是否所有物資對(duì)象已經(jīng)就位，如果是，則可以跳入下一關(guān)。

                if(_map.isMatchCell(_goods)&&(_map.getPosValue(_goods)==3)){//判斷所有物資是否已到達(dá)目的地
                    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")){}

　　如果擊中的是敵人或玩家，則把對(duì)應(yīng)對(duì)象從spriteList里刪除，這樣下次就不會(huì)更新和繪制該對(duì)象。另外每次子彈擊中物體，就產(chǎn)生一個(gè)spriteSheet的爆炸動(dòng)畫(huà)：

/*    擊中后的爆炸動(dòng)畫(huà)效果    */
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;
}

　　該動(dòng)畫(huà)的spriteSheet圖片如下：

　　生成的動(dòng)畫(huà)其實(shí)就是每次從不同位置開(kāi)始把該圖片繪制在canvas上，關(guān)于spriteSheet動(dòng)畫(huà)詳情請(qǐng)看：《HTML5游戲框架cnGameJS開(kāi)發(fā)實(shí)錄：動(dòng)畫(huà)篇》。

　　另外，不同于上次的游戲超級(jí)瑪麗，該游戲?qū)儆诘貓D型。因此在游戲開(kāi)始階段就需要設(shè)計(jì)地圖并繪制。地圖通過(guò)二維矩陣生成，例如第一關(guān)的游戲地圖對(duì)應(yīng)的二維矩陣如下：

    /* 地圖矩陣：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]
                   ]

　　關(guān)于cnGameJS中的map對(duì)象如何生成地圖，并提供常用接口，可參考該文章：《HTML5游戲框架cnGameJS開(kāi)發(fā)實(shí)錄（地圖篇）》

　　cnGameJS游戲框架以及游戲源碼下載：點(diǎn)擊這里

　　PS:部分圖片來(lái)自《坦克大戰(zhàn)online》。

　　歡迎轉(zhuǎn)載，請(qǐng)標(biāo)明出處：http://www.rzrgm.cn/Cson/archive/2012/02/18/2357323.html

posted @ 2012-02-18 19:22 Cson 閱讀(4805) 評(píng)論(11) 收藏舉報(bào)

刷新頁(yè)面返回頂部

【CSON原創(chuàng)】HTML5游戲《坦克后援隊(duì)》發(fā)布

公告