HTML5ゲーム「Tank Support Team」のサンプルコード共有

機能の説明:

このゲームは基本的に戦車戦+押し箱です。プレイヤーは戦車を操作し、敵と戦いながら物資を目的地までうまく運ぶことができ、レベルは全部で 3 つあります。

ゲーム 説明: 上下左右の矢印キーを使用して動きを制御し、スペースバーを使用して砲弾を発射し、すべてのマテリアル ボックス () を目的地 () に押してレベルをクリアします。

コード分析:

ゲームはいくつかのレベルに分割されているため、レベルマネージャーが各レベルを管理する方法は次のとおりです:

/*    关卡管理器    */
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);
        }

初期化関数では、初期化する必要があるパラメータはです: mapオブジェクト、物資配列、プレイヤーオブジェクト、敵オブジェクト。マップ オブジェクトは cnGameJS のマップを使用できますが、プレイヤーと敵のオブジェクトは cnGameJS のスプライトを継承します。

gameObj を更新するたびに、すべてのマテリアル オブジェクトが配置されているかどうかを判断する必要があります。配置されている場合は、次のレベルにジャンプできます。

if(_map.isMatchCell(_goods)&&(_map.getPosValue(_goods)==3)){//判断所有物资是否已到达目的地
                    finishedNum+=1;
                    if(finishedNum==_goodsArr.length){
                        this.toNextLevel();
                    }
                }

さらに、各アップデートでは、弾丸が敵、プレイヤー、またはマテリアルに当たったかどうかを判断する必要もあります:

if(isGoods(list[j])||(isEnemy(list[j])&&list[i].from=="player")||(isPlayer(list[j])&&list[i].from=="enemy")){}

敵またはプレイヤーに当たった場合は、次のように spriteList から対応するオブジェクトを削除します。今回はオブジェクトは更新されず、描画されません。 さらに、弾丸がオブジェクトに当たるたびに、スプライトシートの爆発アニメーション:

/*    击中后的爆炸动画效果    */
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;
}

このアニメーションのスプライトシート画像は次のとおりです:

生成されたアニメーションは、実際には別の位置から始まります毎回canvas上に絵が描かれています。spriteSheetのアニメーションについては「HTML5ゲームフレームワーク cnGameJS開発記録：アニメーション」をご覧ください。

また、前作のスーパーマリオとは異なり、このゲームはマップ型です。したがって、ゲームの開始時にマップを設計して描画する必要があります。マップは 2 次元マトリックスによって生成されます。たとえば、第 1 レベルのゲーム マップに対応する 2 次元マトリックスは次のとおりです。

以上がHTML5ゲーム「Tank Support Team」のサンプルコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。