[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)
整体展示：
上一讲实现了诸多对象，这次我们就需要实现许多逻辑方法，如控制飞机移动，判断子弹击中敌机，敌机与英雄飞机相撞等等。并且我们在实现这些功能的时候需要计时器去调用这些方法。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；
