用JS制作《飞机大作战》游戏_第4讲（创建敌方飞机、敌方飞机发射子弹、玩家子弹击中敌方小飞机，小飞机死亡）-陈远波
一、创建敌方飞机
1、思考创建思路：
创建敌方飞机思路与创建玩家飞机思路一样：
(1)思考敌方飞机具备什么属性：
敌方飞机的图片、坐标、飞行速度、状态（是否被击中） 设置小飞机被击中时消失时间、飞机可以移动
2、创建敌方飞机对象，在这里我创建两种飞机，根据玩家等级不同出现不同的飞机（小飞机和中飞机）
3、在创建飞机对象的方法中定义敌方飞机的移动方法（这里设置的敌方飞机移动方向是从上到下）。
4、将创建的飞机对象以节点形式添加到游戏界面
/*敌方小飞机对象*/ function createsmellplance(smellplanesrc, x, y, blood, speed) { this.smellplanesrc = smellplanesrc; //敌方飞机图片的路径 this.x = x; //敌方飞机的X轴 this.y = y; //敌方飞机的Y轴 this.blood = blood; this.speed = speed; //敌方飞机飞行 的速度 //创建图片对象 this.semllplaneNode = document.createElement("img"); this.isdead = false; //敌方飞机的状态 为false的时候 飞机没有被击中 this.deadtime = 10; //控制小飞机被击中产生的爆炸效果消失时间 /*敌方飞机移动*/ this.remove = function() { this.semllplaneNode.style.top = parseInt(this.semllplaneNode.style.top) + this.speed + "px"; } //敌方小飞机对象加入到节点 this.create = function() { this.semllplaneNode.src = this.smellplanesrc; this.semllplaneNode.style.position = "absolute"; this.semllplaneNode.style.left = this.x + "px"; this.semllplaneNode.style.top = this.y + "px"; //向游戏界面加入敌方飞机节点 mainobj.appendChild(this.semllplaneNode); } //敌方飞机节点初始化 this.create(); } //敌方中飞机对象 function createzhongplance(zhongplanesrc, x, y, blood, speed) { this.zhongpplanesrc = zhongplanesrc; //当前的飞机图片为传入的飞机图片 this.x = x; this.y = y; this.blood = blood; this.speed = speed; this.zhongplanenode = document.createElement("img"); //创建一个图片节点 this.isdead = false; //敌方中飞机的状态 this.deadtime = 10; this.remove = function() { //敌方中飞机移动 this.zhongplanenode.style.top = parseInt(this.zhongplanenode.style.top) + this.speed + "px"; } this.create = function() { this.zhongplanenode.src = this.zhongpplanesrc; //当前图片节点的路径为当前的图片路径（传入的图片路径） this.zhongplanenode.style.position = "absolute"; this.zhongplanenode.style.left = this.x + "px"; this.zhongplanenode.style.top = this.y + "px"; mainobj.appendChild(this.zhongplanenode); //把图片节点放入游戏界面中 } this.create(); //敌方中飞机子弹弹夹对象 this.shot = function() { var bullet1 = new createZBullet("../img/wp2.png", parseInt(this.zhongplanenode.style.left) + 20, parseInt(this.zhongplanenode.style.top) + 12, 2); zhonglist.push(bullet1); } }
二、实例化飞机对象
1、实现思路、
（1）总体思路：因我们要考虑到玩家玩游戏的体验性，所有我们需要设置玩家的等级，再跟进玩家的等级出现不同的飞机，那么我们第一步就要先设置玩家等级 再跟进等级判断实例化敌方飞机对象
（2）如何实现玩家等级，我们先设置玩家的分数，比如玩家击灭一个小飞机加五分，一个中飞机，加十分。再根据玩家的总分进行判断玩家等级，这里我以玩家总分等于50分时玩家升一级
（3）在出于游戏的体验性 我们实例化飞机的时候尽量要点时间间隔，所有我们可以设置一个随机判断，当随机数处于哪个范围的时候才创建飞机
（4）在创建敌机时，因为敌机不能左右移动，所有在创建的时候我们在他的坐标轴用随机数，这样创建的敌机就是处于不同的位置创建
2、根据思路创建实例化敌机方法
/*===================================根据等级创建敌方飞机的方法=============================*/ function mysmellplane() { //得到等级DIV var dengji=document.getElementById("blood"); dengji.innerHTML="玩家等级："+level; //根据总分判断等级 if(score <50) { level=1; } else if(score >= 50) { level=2; } //当总分小于50时 if(level >=1) { if(Math.random() * 100 <=30) { //设置小飞机的产生间隔 //创建敌方飞机 敌方飞机的X坐标是0~400之间的随机数 Y坐标是-10~-190 血量为3，速度是2~6 var mysmellplane1=new createsmellplance("../img/enemy1_fly_1.png", parseInt(Math.random() * 400), -parseInt(Math.random() * 180) - 10, 3, parseInt(Math.random() * 6 + 2)); //将创建的小飞机放入敌方小飞机数组中 smellplanelist.push(mysmellplane1); } } //当等级为2时 出现小BOSS if(level >=2) { if(Math.random() * 100 <=20 ) { //设置中飞机的产生间隔 //创建敌方飞机 敌方飞机的X坐标是0~400之间的随机数 Y坐标是-10~-190 速度是3~7 var mysmellplane3=new createzhongplance("../img/enemy3_fly_1.png", parseInt(Math.random() * 400), -parseInt(Math.random() * 180) - 10, 2, parseInt(Math.random() * 1 + 3)); //将创建的小飞机放入敌方中飞机数组中 zhongplanelist.push(mysmellplane3); } } }
三、根据敌方飞机状态和位置清除相应节点：
1、为什么清除节点：
为了游戏在运行过程中不会出现崩盘和不影响游戏的流程度，根据敌方飞机的状态和位置我们要时刻的清除它的节点，如果不清除敌方飞机会一直存在，随着游戏的进行，我们不断的创建飞机对象，
从而电脑（手机）内存会越来越小，从而导致崩盘或死机状态。
2、该在什么情况下清除
当敌方飞机死亡和敌方飞机移除游戏界面时清除节点
3、代码实现：
/*===================================控制敌方小飞机移动 小飞机节点已移除=======================*/ function smellmove() { for(i=0; i < smellplanelist.length; i++) { if(smellplanelist[i].isdead==false) { //当敌方飞机没有被击中时 飞机移动 smellplanelist[i].remove(); //当敌方小飞机移出游戏界面时 if(parseInt(smellplanelist[i].semllplaneNode.style.top) >=parseInt(mainobj.style.height)) { //移除敌方小飞机节点 mainobj.removeChild(smellplanelist[i].semllplaneNode); //从小飞机对象数组中移除当前的小飞机 smellplanelist.splice(i, 1); } } else { //当敌方小飞机被击中后，从页面消失 //因设置了dadtime为10 是为了添加飞机杯击中的时的图片，并停留一段时间 smellplanelist[i].deadtime--; if(smellplanelist[i].deadtime <=0) { //移除敌方小飞机节点 mainobj.removeChild(smellplanelist[i].semllplaneNode); //从小飞机对象数组中移除当前的小飞机 smellplanelist.splice(i, 1); } } } } /*====================================控制敌方中飞机移动 并发射子弹 敌方中飞机节点已移除========================*/ function zhongmove() { for(i=0; i < zhongplanelist.length; i++) { if(zhongplanelist[i].isdead==false) { //当敌方飞机没有被击中时 飞机移动 zhongplanelist[i].remove(); //当敌方小飞机移出游戏界面时 移除敌方飞机节点 if(parseInt(zhongplanelist[i].zhongplanenode.style.top) >=parseInt(mainobj.style.height)) { //移除敌方小飞机节点 mainobj.removeChild(zhongplanelist[i].zhongplanenode); //从小飞机对象数组中移除当前的小飞机 zhongplanelist.splice(i, 1); } } else { //当敌方小飞机被击中后，从页面消失 //因设置了dadtime为10 是为了添加飞机杯击中的时的图片，并停留一段时间 zhongplanelist[i].deadtime--; if(zhongplanelist[i].deadtime <=0) { //移除敌方小飞机节点 mainobj.removeChild(zhongplanelist[i].zhongplanenode); //从小飞机对象数组中移除当前的小飞机 zhongplanelist.splice(i, 1); } } } }
四、创建敌方飞机子弹
创建思路与创建玩家子弹的思路一样，这里我直接给出代码
/*======定义敌方中飞机子弹对象====*/ function createZBullet(ZBulletsrc, x, y, speed) { this.bulletsrc = ZBulletsrc; //定义子弹的图片属性（子弹图片的路径） this.x = x; //定义子弹飞行的X轴坐标 this.isdead = false; //定义敌方飞机子弹的状态 this.y = y; this.bullernode = document.createElement("img"); //创建一个图片节点 this.btstate = true; //定义子弹没有击中地方飞机的状态 this.speed = speed; //子弹的飞行速度 //定义子弹图片节点的属性，并将图片节点放入游戏界面 this.create = function() { this.bullernode.src = this.bulletsrc; this.bullernode.style.position = "absolute"; this.bullernode.style.left = this.x + "px"; this.bullernode.style.top = this.y + "px"; mainobj.appendChild(this.bullernode); //向大的DIV下添加子弹节点 } //定义子弹运行的轨迹 this.move = function() { this.bullernode.style.top = parseInt(this.bullernode.style.top) + this.speed + "px"; } //在创建子弹对象的时候就把子弹显示在游戏界面上 this.create(); }
五、实现玩家子弹打击敌方飞机，飞机死亡
实现思路：判断我方子弹与敌方飞机的位置，当玩家子弹碰到敌机或在敌机内部时，改变敌方飞机和我玩家子弹的状态（死亡），从而清除节点，玩家积分累加。
代码实现：
/*=====================================子弹打中敌方小飞机的效果===我方子弹之前已移除 不需再进行移除节点===========*/ function smellplanedeath() { //循环遍历小飞机和子弹数组 for(i=0; i < smellplanelist.length; i++) { for(j=0; j < bulletlist.length; j++) { // 得到小飞机和子弹的坐标 var zdleft=parseInt(bulletlist[j].bullernode.style.left); var zdtop=parseInt(bulletlist[j].bullernode.style.top); var fjleft=parseInt(smellplanelist[i].semllplaneNode.style.left); var fjtop=parseInt(smellplanelist[i].semllplaneNode.style.top); if(smellplanelist[i].isdead==false) { //如果飞机状态为活着 //判断子弹的与飞机的位置关系 if(zdleft >=fjleft - 10 && zdleft < fjleft + 40 && zdtop > fjtop && zdtop < fjtop + 60) { smellplanelist[i].semllplaneNode.src="../img/ss.gif"; //子弹击中飞机 //改变敌方小飞机的状态(死掉状态) smellplanelist[i].isdead=true; //子弹击中飞机 bulletlist[j].btstate=false; /*legendarys();//执行飞机被击中的声音*/ //杀敌数量 killnum++; //杀敌总分 score=killnum * 5; } } } } }
我这里只实现了这些能力，当玩家飞机与敌方飞机碰撞，我方飞机血量减少，玩家飞机死亡，玩家飞机子弹打击敌方中飞机时，敌方飞机血量减少，直至死亡等功能与玩家子弹击中敌方小飞机的实现思路是一样的，这里我就不一一写完
六、在开始游戏方法中调用以上的所有方法监听器，并在暂停、开始新游戏、、重新开始等功能方法中调用对应的监听器
（开始监听、结束监听）
七、代码实现的效果图：
以上是我这讲的主要内容，下一讲将为大家讲解玩家飞机通过碰到敌方飞机和子弹血量减少到死亡、及设置第三关，出现boss,并击杀敌机，敌机死亡后随机生成宝箱（具有加血功能）。
若以上知识点讲解的不够仔细的请各位大神多多包涵和指正，需要学习更多关于软件知识的博友可以关注后续博客
