[知了堂学习笔记]_JS小游戏之打飞机（2）-小飞机发射子弹，敌军出现，并实现子弹打中小飞机

小飞机发射子弹的实现

1  子弹类的声明：

/**
 * 玩家游戏子弹的类
 * @param bulletsrc 子弹图片的路径
 * @param x 子弹出现的x轴的值
 * @param y 子弹出现 的y轴的值
 * @param speed 子弹射击（移动）的速度
 */
function createBullet(bulletsrc,x,y,speed){
    this.bulletsrc=bulletsrc;
    this.x=x;
    this.y=y;
    this.speed=speed;
    this.bulletNode=document.createElement("img");
    this.bulletState=true;//子弹的状态
    this.move=function(){
    this.bulletNode.style.top=parseInt(this.bulletNode.style.top)-this.speed+"px";
    }
    this.create=function(){
        this.bulletNode.src=this.bulletsrc;
        this.bulletNode.style.position="absolute";
        this.bulletNode.style.left=this.x+"px";
        this.bulletNode.style.top=this.y+"px";
        playDiv.appendChild(this.bulletNode);
    }
    this.create();
    this.move();
}

2 点击按钮发射子弹

/*============== 键盘事件  ============================*/
document.body.onkeydown = function(event){
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e.keyCode==74){
        bulletMove=true;
    }
}
document.body.onkeyup =function(event){
    var e = event || window.event || arguments.callee.caller.arguments[0];
   f(e.keyCode==74){
        bulletMove=false;
    }
}

3 通过setInterval方法控制子弹的发射并移动

/**
 * 子弹移动的方法
 */
function moveBullet(){
    if(bulletMove){
        myPlane.myPlaneShoot();//控制射击子弹
    }
    for(var i=0;i<myPlane.bulletArray.length;i++){
        myPlane.bulletArray[i].move();//控制子弹移动
        if(parseInt(myPlane.bulletArray[i].bulletNode.style.top)<=0){
            playDiv.removeChild(myPlane.bulletArray[i].bulletNode);
            myPlane.bulletArray.splice(i,1);//控制子弹打击敌人并从屏幕上移除子弹
        }
    }
}

 

4 声明子弹数组，并将子弹放入数组的目的：

 

　　通过将所有的子弹放入数组，可以方便的管理屏幕上的子弹的移动，碰撞，消失等效果。假设没有声明数组，并将子弹放入数组，无法操作屏幕上的那么多数组。

 

敌军小飞机的出现

1 类的声明：

/**
 * 定义敌方小飞机的方法
 * @param EnemyPlaneSrc
 * @param speed
 * @param x
 * @param y
 */
function createEnemyPlane(EnemyPlaneSrc,speed,x,y){
    this.y=y;
    this.x=x;
    this.speed=speed;
    this.enemyPlaneSrc=EnemyPlaneSrc;
    this.enemyPlaneNode=document.createElement("img");
    this.enemyState=false;
    this.dieTime=10;
    this.create=function(){
        this.enemyPlaneNode.src=this.enemyPlaneSrc;
        this.enemyPlaneNode.style.position="absolute";
        this.enemyPlaneNode.style.left=this.x+"px";
        this.enemyPlaneNode.style.top=this.y+"px";
        playDiv.appendChild(this.enemyPlaneNode);
    }
    this.move=function(){
        this.enemyPlaneNode.style.top=parseInt(this.enemyPlaneNode.style.top)+this.speed+"px";
    }
    this.create();
    this.move();
}

2 敌军小飞机的出现

　　在创建出敌军的小飞机之后，我们同样的需要把敌军的小飞机放入一个数组中，这样的好处和子弹数组同样，便于我们去管理屏幕上的小飞机。

 

　　例如：可以通过遍历的方式判断每一个小飞机的位置，在和子弹的位置做判断就可以达到子弹打中敌军小飞机的效果。

 

 

/**
 * 定义敌方小飞机出现的方法
 */
function enemyShow(){
    var randomVar=Math.random()*1000;
    if(randomVar<100){
        randomX=Math.random()*450;
        var enemyObj=new createEnemyPlane("image/enemy1.gif",5,randomX,0);
        enemyArray.push(enemyObj);
    }else if(randomVar<200&&randomVar>100){
        randomX=Math.random()*450;
        var enemyObj=new createEnemyPlane("image/enemy4.gif",5,randomX,0);
        enemyArray.push(enemyObj);
    }else if(randomVar<300&&randomVar>200){
        randomX=Math.random()*450;
        var enemyObj=new createEnemyPlane("image/enemy26.gif",5,randomX,0);
        enemyArray.push(enemyObj);
    }
}

 

3 敌军小飞机的移动方法

 

/**
 * 控制敌方飞机移动的方法
 */
function enemyMove(){
    for(var i=0;i<enemyArray.length;i++){
        if(enemyArray[i].enemyState==false){
            if(parseInt(enemyArray[i].enemyPlaneNode.style.top)>650){

                playDiv.removeChild(enemyArray[i].enemyPlaneNode);
                enemyArray.splice(i,1);
            }else{
                enemyArray[i].move();
            }
        }
    }
}

 

4 小飞机的动画效果

 1 setEnemyShow=setInterval(enemyShow,400);//控制敌方飞机出现的方法

 2 setMoveEnemy=setInterval(enemyMove,10);//控制敌方飞机移动的方法 

 

 

子弹和敌军小飞机的碰撞实现

　　在实现这一步的时候，我们开始定义的我的小飞机的子弹数组的好处就显示出来了。

 

　　我们通过循环遍历得到每个子弹的位置，然后在去循环遍历敌军小飞机的位置。

 

　　就可以实现我们子弹打中敌军小飞机的效果了。

 

/**
 * 控制子弹与敌机碰撞的方法
 */
function destoryEnemy(){
    for( i=0;i<enemyArray.length;i++){//外部先循环遍历一次敌机数组：
        for( j=0;j<myPlane.bulletArray.length;j++){//内部循环遍历一次子弹数组：
            var enemyTop=parseInt(enemyArray[i].enemyPlaneNode.style.top);
            var enemyLeft=parseInt(enemyArray[i].enemyPlaneNode.style.left);
            var bulletTop=parseInt(myPlane.bulletArray[j].bulletNode.style.top);
            var bulletLeft=parseInt(myPlane.bulletArray[j].bulletNode.style.left);
            if(bulletLeft>enemyLeft&&bulletLeft<enemyLeft+64&&bulletTop>enemyTop&&bulletTop<enemyTop+56){
                enemyArray[i].enemyState=true;
                kill=kill+1;
                score=kill*5;
                enemyArray[i].enemyPlaneNode.src="image/0.gif";
                enemyArray[i].enemyPlaneNode.style.left=(parseInt(enemyArray[i].enemyPlaneNode.style.left)-10)+"px";
                playDiv.removeChild(myPlane.bulletArray[j].bulletNode);
                myPlane.bulletArray.splice(j,1);
            }
        }
    }
}
/**
 * 定义清除已经死亡的飞机
 */
function removeDieEnemyPlane(){
    for(i=0;i<enemyArray.length;i++){
        if(enemyArray[i].enemyState==true){
            playDiv.removeChild(enemyArray[i].enemyPlaneNode);
            enemyArray.splice(i,1);
        }
    }
}