HTML5 게임 'Tank Support Team'의 샘플 코드 공유

기능 설명:

이 게임은 본질적으로 탱크 배틀 + 푸시박스입니다. 플레이어는 탱크를 제어하고 적과 싸우는 동안 플레이어는 성공적으로 보급품을 목적지까지 운반하여 레벨을 성공적으로 통과할 수 있습니다.

게임 설명: 위, 아래, 왼쪽 및 오른쪽 화살표 키로 이동을 제어하고, 스페이스바가 대포알을 발사하고, 모든 재료 상자()를 목적지() 합격할 수 있습니다.

코드 분석:

이 게임은 여러 레벨로 나누어져 있으므로 먼저 레벨 관리자가 각 레벨을 관리하는 방법을 살펴보겠습니다.

/*    关卡管理器    */
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의 지도를 사용할 수 있는 반면, 플레이어와 적 객체는 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에서 삭제됩니다.

그리고 총알이 물체에 맞을 때마다 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

그림은 다음과 같습니다. : <🎜 : "HTML5 게임 프레임워크 cnGameJS 개발 기록: 애니메이션".

게다가 이번 게임은 전작 슈퍼마리오와 달리 맵 기반이다. 따라서 게임 초반에 지도를 디자인하고 그려야 합니다. 지도는 2차원 행렬로 생성됩니다. 예를 들어 1레벨의 게임 지도에 해당하는 2차원 행렬은 다음과 같습니다.

/* 地图矩阵：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 게임 'Tank Support Team'의 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!