[知了堂學習筆記]_純JS制作《飛機大戰》遊戲_第3講(邏輯方法的實現)
阿新 • • 發佈：2017-08-23
了解 隱藏 div 開始遊戲 創建對象 eve 我們 span nbsp
整體展示：
上一講實現了諸多對象，這次我們就需要實現許多邏輯方法，如控制飛機移動，判斷子彈擊中敵機，敵機與英雄飛機相撞等等。並且我們在實現這些功能的時候需要計時器去調用這些方法。setInterval(fun,ms)
在調用setInterval()會返回一個類似id的字段，該字段在clearInterval（id）可以指定相應的計時器並清除
一、開始遊戲
/** * 面板441*632 * 飛機 66*80 */ /** * 開始遊戲 */ function startGame() { var welcome = document.getElementById("welcome"); myPlane= new createPlane("img/own.png", 190, 550, 5, 5); welcome.style.visibility = "hidden"; //將進入歡迎界面隱藏 // ctrlMove(); /* * 啟動定時器 */ ctrlmove = setInterval(ctrlMove,20); ctrlshot = setInterval(ctrlShot,200); bulletfly = setInterval(bulletFly,20); createenemy = setInterval(enemy,200); enemymove= setInterval(enemyMove,20); hitplane = setInterval(hitPlane,30); exist = setInterval(isexist,20); }
二、控制英雄飛機移動
/* * 鍵盤監聽，用於判斷英雄的動作 wasd移動方向，j射擊，k必殺 * 放在開始遊戲方法中 */ document.body.onkeydown = function(code){ if(code.keyCode == 65){ leftbtn = true; }if(code.keyCode == 68){ rightbtn = true; } if(code.keyCode == 87){ topbtn = true; } if(code.keyCode == 83){ bottombtn = true; } if(code.keyCode == 74){ shot = true; } if(code.keyCode == 75){ shotboom = true; } } document.body.onkeyup=function(code){ if(code.keyCode==65){ leftbtn=false; } if(code.keyCode == 68){ rightbtn = false; } if(code.keyCode == 87){ topbtn = false; } if(code.keyCode == 83){ bottombtn = false; } if(code.keyCode == 74){ shot = false; } if(code.keyCode == 75){ shotboom = false; } }
/** * 控制英雄移動的函數 */ function ctrlMove(){ if(leftbtn==true){ myPlane.leftMove() } if(rightbtn==true){ myPlane.rightMove() } if(topbtn==true){ myPlane.topMove() } if(bottombtn==true){ myPlane.botoomMove() } //獲取玩家參數 getInfo(); }
三、子彈擊中對象
/** * 子彈擊中對象 */ function hitPlane(){ /* * 英雄子彈打中敵機 */ for(i=0;i<bulletList.length;i++){ //遍歷英雄子彈集合 for(j=0;j<enemyList.length;j++){ //遍歷敵軍集合 //獲取子彈坐標和敵軍坐標 var btop = parseInt(bulletList[i].bulletNode.style.top); var bleft = parseInt(bulletList[i].bulletNode.style.left); var etop = parseInt(enemyList[j].enemyNode.style.top); var eleft = parseInt(enemyList[j].enemyNode.style.left); if(!enemyList[j].isdead){ if(bleft>=eleft-5&&bleft<eleft+34&&btop>etop&&btop<etop+34){ bulletList[i].ishit=true; //擊中把子彈狀態改為true if(--enemyList[j].blood<=0) //判斷敵軍是否死亡 enemyList[j].isdead=true; } } } } /* * boos子彈打中英雄 */ var top = parseInt(myPlane.planeNode.style.top); var left = parseInt(myPlane.planeNode.style.left); for(i=0;i<boosBullet.length;i++){ var btop = parseInt(boosBullet[i].bulletNode.style.top); var bleft = parseInt(boosBullet[i].bulletNode.style.left); if(myPlane.blood>=0){ if(btop+55>=top&&btop<top+80&&bleft>=left-22&&bleft<left+40){ boosBullet[i].ishit=true; myPlane.blood--; } } } /** *子彈打中BOOS */ for(i=0;i<bulletList.length;i++){ var btop = parseInt(bulletList[i].bulletNode.style.top); var bleft = parseInt(bulletList[i].bulletNode.style.left); for(j=0;j<boosList.length;j++){ var top=parseInt(boosList[j].enemyNode.style.top); var left=parseInt(boosList[j].enemyNode.style.left); if(!boosList[j].isdead){ if(bleft-5>=left&&bleft<left+90&&btop>=top&&btop<top+80){ console.log(boosList[j].blood) bulletList[i].ishit=true; if(--boosList[j].blood<=0) boosList[j].isdead=true; } } } } }
四、對象間碰撞
/** * 對象相撞 */ function strike(){ var mleft = parseInt(myPlane.planeNode.style.left); var mtop = parseInt(myPlane.planeNode.style.top); if(myPlane.blood>0){ for(i=0;i<enemyList.length;i++){ //遍歷敵機 if(!enemyList[i].isdead){ //敵機是否死亡 var eleft = parseInt(enemyList[i].enemyNode.style.left); var etop = parseInt(enemyList[i].enemyNode.style.top); if(eleft>=mleft&&eleft<mleft+68&&etop>=mtop&&etop<mtop+80){ //碰撞判斷 enemyList[i].isdead = true; //敵機一碰撞到英雄飛機立即死亡 enemyList[i].enemyNode.src ="img/enemybz.png"; //切換圖片，制作爆炸特效 myPlane.blood--; //英雄血量減少 } } } } /* * 得到道具 */ if(myPlane.blood>0){ //判斷英雄是否死亡 for(i=0;i<toolList.length;i++){ //遍歷道具數組 if(!toolList[i].getme){ var tleft = parseInt(toolList[i].toolNode.style.left); var ttop = parseInt(toolList[i].toolNode.style.top); if(tleft>=mleft-15&&tleft<mleft+65&&ttop>=mtop&&ttop<mtop+80){ toolList[i].getme=true; if(toolList[i].tooltype%2==1){ //tooltype單數為加必殺，雙數為加血 if(myPlane.boom<5) myPlane.boom++; }else{ myPlane.blood++; } } } } } }
五、判斷對象是否死亡
/* * 判斷對象是否存在 */ function isexist(){ /* * 判斷敵機是否死亡 */ for(i=0;i<enemyList.length;i++){ if(enemyList[i].isdead){ //敵機死亡 enemyList[i].enemyNode.src ="img/enemybz.png"; //將圖片換成爆炸圖片 if(enemyList[i].deadtime>=0){ //移除時間，也就是飛機死亡到移除的時間，實現爆炸的特效 enemyList[i].deadtime--; }else{ score+=myPlane.level; killNum++; mainobj.removeChild(enemyList[i].enemyNode); //先移除節點 enemyList.splice(i,1); //再取消綁定 } } } /* * 判斷英雄是否死亡 */ if(myPlane.blood<=0){ mainobj.removeChild(myPlane.planeNode); gameOver(); } /* * 判斷boos是否死亡 */ for(i=0;i<boosList.length;i++){ if(boosList[i].isdead){ if(boosList[i].deadtime<=0){ mainobj.removeChild(boosList[i].enemyNode) boosList.splice(i,1); score+=100*myPlane.level; pass++; nextGame(); }else{ boosList[i].deadtime--; boosList[i].enemyNode.src="img/dfjbz.png"; } } } /* * 判斷道具是否存在 */ for(i=0;i<toolList.length;i++){ if(toolList[i].getme){ mainobj.removeChild(toolList[i].toolNode); toolList.splice(i,1); } } }
===============================================================================================================================
第二講補充：
我在創建對象時候（除英雄飛機對象），都將其放進Arrar中，這是為了綁定該對象，為了方面找到這個對象。方便操作。
以上為今天的內容，如需了解更加深入的知識，請大家進入知了堂社區：http://www.zhiliaotang.com/portal.php；
[知了堂學習筆記]_純JS制作《飛機大戰》遊戲_第3講(邏輯方法的實現)