如何使用Createjs来编写HTML5游戏（七）完成一个简单的打飞机游戏（下）

有了游戏中需要的所有元素（战机、敌机、星空、子弹），剩下的东西就是让飞机和子弹动起来，并且检测游戏内各个元素的碰撞情况，也就是逐渐完善tick事件相应中的updateGame(),包含下面几个部分

function updateGame(){

    updateStar();
    updatePlayer();
    updateEnemy();
    updateFire();
    updateMsg();
}

首先是星空的移动，让星空从屏幕上方向下移动，这样可以造成一种飞机一直在前进的相对的错觉，所有的星星事先都已经保存在一个数组当中，只要通过循环，取出其中的每个星星，在tick中重设Y坐标就可以了。然后是玩家的飞机、玩家发射的子弹和敌机的部分，最后更新分数等信息。

//更新星星
function updateStar(){
    var i,star,yPos;
    for(i=0;i<200;i++){
        star = starArr[i];
        yPos = star.y + 5*star.alpha;
        if(yPos >= stage.canvas.height){
            yPos = 0;
        }
            star.y = yPos;
        }
}
//根据按键来更新战机的位置
function updatePlayer(){
    var nextX = player.x;
    if(leftKeyDown){
        nextX = player.x - speed;
        if(nextX<0){
            nextX = 0;
        }
    }else if(rightKeyDown){
        nextX = player.x + speed;
        if(nextX > (sWidth - 37)){
            nextX = sWidth - 37;
        }
    }

    player.x = nextX;
}

//更新战机发射的子弹
function updateFire(){
    var i, nextY,fire;
    for (i=0;i<fires.length;i++){
        fire = fires[i];
        nextY = fire.y - 10;

        if(nextY == 0){//如果子弹飞出屏幕，在子弹数组中去掉，并在stage中删除元素
            fires.splice(i,1)
            stage.removeChild(fire);
            continue;
        }
        fire.y = nextY;
    }
}
//敌机与子弹的碰撞检测
function updateEnemy(){
    var i, j,fire,enemy1;
    for(i=0;i<fires.length;i++){
        for(j=0;j<enemy.length;j++){
            fire = fires[i];
            enemy1 = enemy[j];
            var fx = fire.x;
            var fy = fire.y;
            var ex = enemy1.x;
            var ey = enemy1.y;
            var ew = enemy1.getBounds().width;
            var eh = enemy1.getBounds().height;

            if(ey>=800 || ex>=600){
                enemy.splice(j,1);
                stage.removeChild(enemy1);
            }
            if(fy < ey+eh && fy > ey && fx>ex && fx<ex+ew && ey > 0){
                score += 10;
                fires.splice(i,1);
                enemy.splice(j,1);
                stage.removeChild(fire);
                stage.removeChild(enemy1);
                createjs.Sound.play("explosion");
                var exp1 = new createjs.Sprite(spriteSheet,"exp");
                exp1.x = ex;
                exp1.y = ey;
                exp1.addEventListener('animationend',function(e){
                    stage.removeChild(e.target);
                });
                stage.addChild(exp1);

            }
        }
    }
}
//更新分数和剩余生命值
function updateMsg(){
    scoreTxt.text = "score:" + score;
    livesTxt.text = "lives:" + lives;
}

好了，只需要简单的几个部分，游戏基本就完成了，最后再添加一个checkGame()来检查一下游戏运行的状态，如果所有敌机都被消灭或者已经飞出屏幕，再添加新的敌机，而且，我把敌机与玩家的碰撞放在了这里，玩家飞机被撞毁后，召唤新的战机，并在一段时间内无敌。

function checkGame(){
    var i,en,pl;
    if(enemy.length==0){
        buildEnemis();
    }
    pl = player;
    plx = player.x;
    ply = player.y;
    plw = player.getBounds().width;
    plh = player.getBounds().height;

    for(i=0;i<enemy.length;i++){
        en = enemy[i];
        enx = en.x;
        eny = en.y;
        enw = en.getBounds().width;
        enh = en.getBounds().height;

        if(eny+enh<800 && eny+enh > ply && enx > plx && enx < plx+plw && breakAble){
            stage.removeChild(player);
            pl = null;
            player = null;
            fireAble = false;
            breakAble = false;
            setTime = setTimeout(newPlayer,10);
            break;
        }

    }

}

function newPlayer(){
    clearTimeout(setTime);
    player = new createjs.Sprite(spriteSheet,"ship");
    player.x = sWidth/2 ;
    player.y = sHeight - player.getBounds().height;
    player.alpha = 0;
    createjs.Tween.get(player).to({alpha:1},1000,createjs.Ease.getPowIn(1)).call(function(){
        lives--;
        fireAble = true;
        breakAble = true;
    });
    stage.addChildAt(player,0);
}

如何使用Createjs来编写HTML5游戏（七）完成一个简单的打飞机游戏（下）

猜你喜欢