如何使用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=800 || ex>=600){
                enemy.splice(j,1);
                stage.removeChild(enemy1);
            }
            if(fy < ey+eh && fy > ey && fx>ex && fx 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 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);
}


你可能感兴趣的:(Html5)