一、创建敌方飞机

  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() {//得到等级DIVvar 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时  出现小BOSSif(level >=2) {if(Math.random() * 100 <=20 ) {//设置中飞机的产生间隔//创建敌方飞机   敌方飞机的X坐标是0~400之间的随机数  Y坐标是-10~-190  速度是3~7var 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,并击杀敌机,敌机死亡后随机生成宝箱(具有加血功能)。若以上知识点讲解的不够仔细的请各位大神多多包涵和指正,需要学习更多关于软件知识的博友可以关注后续博客

转载于:https://www.cnblogs.com/chenyuanbo/p/7436390.html

用JS制作《飞机大作战》游戏_第4讲(创建敌方飞机、敌方飞机发射子弹、玩家子弹击中敌方小飞机,小飞机死亡)-陈远波...相关推荐

  1. Python—飞机大作战游戏(附源代码及素材)

    目录 过程说明: 主函数 键盘控制 创建类 01.飞机基类 02.子弹基类 03. Hero飞机类 04.enemy飞机类 源代码及素材 过程说明: 应用到的库:         import pyg ...

  2. java写潜艇大作战游戏_基于Java实现的潜艇大战游戏

    一.需求分析 本次游戏课程设计小组成员团队合作的方式,通过游戏总体分析设计,场景画面的绘制,游戏事件的处理,游戏核心算法的分析实现,游戏的碰撞检测,游戏的反复测试,游戏的打包运行等一个完整的游戏设计编 ...

  3. 飞机大作战游戏 1----(运用H5和Js制作)

    飞机大作战一 首先建立一个div将canvas包住使其居中: <div style="text-align: center;"> <canvasid=" ...

  4. scratch飞机大作战

    西瓜编程课又开始了!本课我们要做一个游戏--飞机大作战 游戏效果:1.用上下左右键来操控飞机,空格键按下后能发射子弹.                2.敌机各式各样,打败蓝敌机获得升级子弹的黄能量豆 ...

  5. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲(四大界面之间的跳转与玩家飞机的移动)

    一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3. ...

  6. 基于LabVIEW的飞机大作战小游戏(可做毕设)

    一.前言 Python是目前相当流行的一门编程语言,网上有人用Python做了一个<飞机大作战>的小游戏,并且出了一份视频教程,很有意思."基于Python的飞机大作战小游戏&q ...

  7. python进阶应用:飞机大作战小游戏完整代码实现(初级)

    飞机大作战(初级) 完整代码如下: 注意,需要在对应同一个文件中放入相应的游戏需要用的图片及音效.否则可能报错 # 导入pygame库 import pygame import random# 设置常 ...

  8. python基于pygame的飞机大作战小游戏

    基于pygame的飞机大作战小游戏,适合新手,不能直接运行,只能在命令行进入当前游戏目录,输入python game.py才能够运行,尚不知道是什么原因 游戏截图如下,我们用黄色的圆圈代表敌机, 代码 ...

  9. Java窗体小游戏开发飞机大作战Java小游戏开发源码

    Java窗体小游戏开发飞机大作战Java小游戏开发源码

  10. HTML5期末大作业:水果商城网站设计——蔬菜水果商城(10页) HTML+CSS+JavaScript 学html网页制作期末大作业成品_网页设计期末作业

    HTML5期末大作业:水果商城网站设计--蔬菜水果商城(10页) HTML+CSS+JavaScript 学html网页制作期末大作业成品_网页设计期末作业 常见网页设计作业题材有 个人. 美食. 公 ...

最新文章

  1. jsoncpp空数组
  2. C# using的用法
  3. 经典C语言程序100例之二
  4. VS2010 代码前出现虚线的问题
  5. 维权靠微博?用户京东金融账户被盗刷15万 处理未果怒发微博曝光
  6. 在php中array函数的作用是什么意思,php中的array函数有什么用
  7. Python+OpenCV:对极几何(Epipolar Geometry)
  8. 【Funpack】蓝牙技术 QA
  9. 单目slam LoopClosing之Sim3优化
  10. 新品发布|机智云智能管家:智家2.0发布
  11. java项目大鱼吃小鱼
  12. PPT手写笔颜色修改
  13. 吴恩达机器学习笔记——含一个隐藏层的神经网络
  14. android学习步骤
  15. 三相四线相位表查错误接线方法与步骤
  16. UltraISO怎么用之使用软碟通UltraISO如何烧录windows 2012r2和Centos系统到U盘
  17. APP接口开发(待完善)
  18. 使用EXCEL的查询
  19. python+OpenCV 相机标定
  20. 统信UOS手动更新系统时备份失败,如何用命令自动更新系统

热门文章

  1. STM32学习|STM32最小系统介绍
  2. win7开机计算机图标丢失,win7系统电脑开机发现桌面QQ图标消失不见了怎么办
  3. SMB 2.0和3.0协议 Java应用
  4. jQuery中的循环
  5. 使用Html5多媒体实现微信语音功能
  6. uni 链接转二维码
  7. HTML最新面试题(笔试面试题)
  8. i7 11700和i7 11700k的区别 i7 11700和i7 11700k的差距大吗
  9. 频谱分析仪和示波器有什么区别?频谱分析仪软件和示波器软件分享
  10. Python人工智能识别陆游和苏轼的古诗