Beispielcode-Sharing für das HTML5-Spiel „Tank Support Team“

Funktionsbeschreibung:

Dieses Spiel ist im Wesentlichen Panzerschlacht + Push-Box . Der Spieler steuert den Panzer und kann im Kampf gegen den Feind die Vorräte erfolgreich zum Ziel transportieren, um das Level erfolgreich zu bestehen. Es gibt insgesamt drei Level.

Spiel Beschreibung: Mit den Pfeiltasten „Auf“, „Ab“, „Links“ und „Rechts“ steuern Sie die Bewegung, mit der Leertaste werden Kanonenkugeln abgefeuert, alle Materialkisten () werden an das Ziel geschoben (), können Sie bestehen.

Codeanalyse:

Wegen Das Spiel ist in mehrere Level unterteilt, also werfen wir zunächst einen Blick darauf, wie der Levelmanager jedes Level verwaltet:

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

    }

})();

In der Initialisierungsphase erstellen wir zunächst für jedes Level eigene Level Objekt und rufen Sie dann die Add-Methode auf, um es dem Level-Manager hinzuzufügen. Anschließend können Sie startLevel aufrufen, um das Level zu starten. Dies wird unsere nachfolgenden Sprünge in jedem Level erleichtern. Darüber hinaus können hier auch die in jedem Level verwendeten Spielgegenstände weitergegeben werden. Da in diesem Spiel die Logik jedes Levelspiels grundsätzlich dieselbe ist, werden dieselben Spielobjekte verwendet. Der Startbildschirm des Spiels verwendet ein anderes Spielobjekt. Die Organisationsform jedes Spielobjekts ist wie folgt

var gameObj={

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

}

Schauen wir uns die spezifische Initialisierungsfunktion des Spielobjekts gameObj an:

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

In der Initialisierung Funktion, die wir benötigen. Die initialisierten Parameter sind : Map Objekt, Material Array , Spielerobjekt und Feindobjekt . Kartenobjekte können die Karte von cnGameJS verwenden, während Spieler- und Feindobjekte das Sprite von cnGameJS erben.

Bei jedem Update von gameObj müssen wir feststellen, ob alle materiellen Objekte vorhanden sind. Wenn ja, können wir zum nächsten Level springen.

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

Darüber hinaus muss in jedem Update auch festgestellt werden, ob die Kugel den Feind, den Spieler oder das Material trifft:

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

Ob sie den Feind oder den Spieler trifft , löschen Sie das entsprechende Objekt aus SpriteList, damit das Objekt beim nächsten Mal nicht aktualisiert und gezeichnet wird. Darüber hinaus wird jedes Mal, wenn eine Kugel ein Objekt trifft, eine SpriteSheet-Explosions--Animation ausgelöst:

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

Das SpriteSheet-Bild dieser Animation ist wie folgt:

Die von generierte Animation zeichnet tatsächlich das Bild jedes Mal aus einer anderen Position auf die Leinwand, Details Informationen zur SpriteSheet-Animation finden Sie unter: „Aufzeichnung der Entwicklung des HTML5 Game Framework cnGameJS: Animation“.

Außerdem ist dieses Spiel im Gegensatz zum letzten Spiel Super Mario kartenbasiert. Daher muss die Karte zu Beginn des Spiels entworfen und gezeichnet werden. Die Karte wird durch eine zweidimensionale Matrix generiert. Die der Spielkarte der ersten Ebene entsprechende zweidimensionale Matrix lautet beispielsweise wie folgt:

Das obige ist der detaillierte Inhalt vonBeispielcode-Sharing für das HTML5-Spiel „Tank Support Team“. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!