[知了堂学习笔记]_JS小游戏之打飞机-飞机之间的互相撞击，boss的出现，以及控制boss死亡

Posted 2020-10-03

我的小飞机和敌军小飞机撞击的效果的实现：

 1 /**
 2  * 定义我的飞机与敌机碰撞的方法：
 3  */
 4 function destoryMyPlane(){
 5     for(var i=0;i<enemyArray.length;i++){//外部先循环遍历一次敌机数组：
 6         var enemyTop1=parseInt(enemyArray[i].enemyPlaneNode.style.top);
 7         var enemyLeft1=parseInt(enemyArray[i].enemyPlaneNode.style.left);
 8         var myPlaneTop=parseInt(myPlane.planeNode.style.top);
 9         var myPlaneLeft=parseInt(myPlane.planeNode.style.left);
10         if(myPlaneLeft>enemyLeft1&&myPlaneLeft<enemyLeft1+64&&myPlaneTop>enemyTop1&&myPlaneTop<enemyTop1+56){
11             playDiv.removeChild(enemyArray[i].enemyPlaneNode);
12             enemyArray.splice(i,1);
13             //myPlane
14             myPlane.blood=myPlane.blood-1;
15         }
16     }
17 }

 

 

敌军boss

1 boss类的声明

 1 /**
 2  * 定义敌方boss飞机的类
 3  * @param bossSrc
 4  * @param speed
 5  * @param x
 6  * @param y
 7  * @param blood
 8  */
 9 function createEnemyBoss(bossSrc,speed,x,y,blood){
10     this.bossSrc=bossSrc;
11     this.x=x;
12     this.y=y;
13     this.speed=speed;
14     this.blood=blood;
15     this.bossState=false;
16     this.dieTime=10;
17     this.bossNode=document.createElement("img");
18     this.create=function(){
19         this.bossNode.src=this.bossSrc;
20         this.bossNode.style.position="absolute";
21         this.bossNode.style.left=this.x+"px";
22         this.bossNode.style.top=this.y+"px";
23         playDiv.appendChild(this.bossNode);
24     }
25     this.move=function(){
26         if(bossLeft==false){
27             this.bossNode.style.left=parseInt(this.bossNode.style.left)-this.speed+"px";
28         }else{
29            this.bossNode.style.left=parseInt(this.bossNode.style.left)+this.speed+"px";
30         }
31         if(bossTop==false){
32             this.bossNode.style.top=parseInt(this.bossNode.style.top)-this.speed+"px";
33         }else{
34             this.bossNode.style.top=parseInt(this.bossNode.style.top)+this.speed+"px";
35         }
36     }
37     this.bossShot=function(){
38         if(bossArray.length<=1){
39             bossBulletArray.push(new createBossBullet("image/enemyBullet2.gif",parseInt(bossArray[0].bossNode.style.left)+80,parseInt(bossArray[0].bossNode.style.top)+80,10));
40         }
41     }
42     this.create();
43     this.move();
44 }

 

2 控制boss在屏幕上的出现

　　这里可以声明一个boss数组，将创建出的boss方法到数组中，通过判断数组的长度，可以自定义屏幕上可以出现的boss的个数。

 

1 /**
2  * 定义敌方boss飞机出现的方法
3  */
4 function bossShow(){
5     if(bossArray.length<1){
6         var bossObj=new createEnemyBoss("image/enemy22.gif",5,200,200,10);
7         bossArray.push(bossObj);
8     }
9 }

 

3 控制boss 的移动

 

　　在控制boss在屏幕上移动的时候，通过一个开关，控制boss移动的方法，并且可以控制boss不跑出界面。

 

 1 /**
 2  * 控制敌方boss飞机移动的方法
 3  */
 4 function bossMove(){
 5     for(i=0;i<bossArray.length;i++){
 6         if(parseInt(bossArray[i].bossNode.style.left)<10){
 7             bossLeft=true;
 8         }else if((parseInt(bossArray[i].bossNode.style.left)>353)){
 9             bossLeft=false;
10         }
11         if(parseInt(bossArray[i].bossNode.style.top)>400){
12             bossTop=false;
13         }else if(parseInt(bossArray[i].bossNode.style.top)<0){
14             bossTop=true;
15         }
16         bossArray[i].move();
17     }
18 }

 

4 控制boss发子弹

 

　　为了控制boss子弹的发射间隔，我们定义了一个类似于控制子弹发射间隔时间的变量controlBossBullet=0。

 

　　我们在使用setInterval方法发射子弹的时候，每次给controlBossBullet这个变量加1，

 

　　当这个变量大于10的时候，执行一次boss的射击方法。同样的，这个子弹也会放入到一个数组中，这里放入在调用bossShot()方法的时候就将子弹放入了boss子弹的数组。

 

 1 function bossShot(){
 2     //控制boss发子弹的方法
 3     if(controlBossBullet>10){
 4         for(i=0;i<bossArray.length;i++) {
 5             bossArray[i].bossShot();
 6         }
 7         controlBossBullet=0;
 8     }
 9     controlBossBullet=controlBossBullet+1;
10 }

 

5 控制boss飞机子弹的移动

 

1 /**
2  * 控制boss的子弹的移动方法
3  */
4 function bossBulletMove(){
5     for(i=0;i<bossBulletArray.length;i++){
6         bossBulletArray[i].move();
7     }
8 }

 

6 控制boss飞机子弹打击我的小飞机

 

 1 /**
 2  * 定义敌机boss子弹与我的飞机碰撞的方法：
 3  */
 4 function enemyBossBulletCrashMyPlane(){
 5     for(i=0;i<bossBulletArray.length;i++) {//先循环一遍boss飞机子弹的数组
 6         //bossBulletNode
 7         bossBulletLeft=parseInt(bossBulletArray[i].bossBulletNode.style.left);
 8         bossBulletTop=parseInt(bossBulletArray[i].bossBulletNode.style.top);
 9         //console.log("boss飞机子弹的top："+bossBulletTop);
10         myPlaneLeft=parseInt(myPlane.planeNode.style.left);
11         myPlaneTop=parseInt(myPlane.planeNode.style.top);
12         if(bossBulletLeft>myPlaneLeft&&bossBulletLeft<myPlaneLeft+50&&bossBulletTop>myPlaneTop&&bossBulletTop<myPlaneTop+50){
13             playDiv.removeChild(bossBulletArray[i].bossBulletNode);
14             bossBulletArray.splice(i,1);
15             myPlane.blood=myPlane.blood-1;
16         }
17     }
18 }

 

7 动画效果的实现

 

1 setBossShow=setInterval(bossShow,10000);//创建敌方boss的定时器
2 setBossMove=setInterval(bossMove,100);// 控制boss 移动的定时器
3 setbossShot=setInterval(bossShot,100);//控制boss 发射子弹的方法
4 setBoseBulletMove=setInterval(bossBulletMove,100);//控制boss子弹移动的方法
5 setEnemyBossBulletCrashMyPlane=setInterval(enemyBossBulletCrashMyPlane,100);//控制我的飞机的子弹与敌机boss碰撞的方法

 

 

敌军boss 的死亡

　　通过setInterval方法循环调用方法，控制子弹打击boss，然后boss的血量减少，当减少为0的时候，boss消失。

      

　　计时器调用方法：

　　setDestroyEnemyBoss=setInterval(destroyEnemyBoss,1000);//控制我的飞机的子弹与敌机boss撞击的方法

 

 1 /**
 2  * 当我的子弹打到boss的时候，控制boss的血量消失，并且
 3  */
 4 function destroyEnemyBoss(){
 5     for(i=0;i<bossArray.length;i++){
 6         for(j=0;j<myPlane.bulletArray.length;j++){
 7             myPlaneBulletLeft=parseInt(myPlane.bulletArray[j].bulletNode.style.left);
 8             myPlaneBulletTop=parseInt(myPlane.bulletArray[j].bulletNode.style.top);
 9             bossTop=parseInt(bossArray[i].bossNode.style.top);
10             bossLeft=parseInt(bossArray[i].bossNode.style.left);
11             if(myPlaneBulletLeft>bossLeft&&myPlaneBulletLeft<bossLeft+150&&myPlaneBulletTop<bossTop+150&&myPlaneBulletTop>bossTop){
12                 bossArray[i].blood--;
13                 console.log("boss飞机的血量："+bossArray[i].blood);
14                 for(a=0;a<bossArray.length;a++){
15                     if(bossArray[a].blood<=0){
16                         playDiv.removeChild(bossArray[a].bossNode);
17                         bossArray.splice(a,1);
18                         score=score+100;
19                         kill=kill+1;
20                     }
21                 }
22                 playDiv.removeChild(myPlane.bulletArray[j].bulletNode);
23                 myPlane.bulletArray.splice(j,1);
24             }
25         }
26     }
27 }

 

 

最后整个JS打飞机的连载就结束了，希望看到的小伙伴能够有自己的收获。