我的小飞机和敌军小飞机撞击的效果的实现：
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打飞机的连载就结束了，希望看到的小伙伴能够有自己的收获。
时间： 2024-10-10 17:13:37