[知了堂學習筆記]_JS小遊戲之打飛機（3）-飛機之間的互相撞擊，boss的出現，以及控制boss死亡
阿新 • • 發佈：2017-08-21
時間 i++ score console function sss 間隔 app tint
我的小飛機和敵軍小飛機撞擊的效果的實現：
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); 8var 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打飛機的連載就結束了，希望看到的小夥伴能夠有自己的收獲。
[知了堂學習筆記]_JS小遊戲之打飛機（3）-飛機之間的互相撞擊，boss的出現，以及控制boss死亡