JavaScript 小型打飞机游戏实现原理说明


Posted in Javascript onOctober 28, 2010

玩法说明:上下左右控制移动,空格发弹。 每打中一个敌机就加100分,每提升5000分,玩家的飞机的一次发弹数就加一,最多四,被敌机撞到或者让敌机飞到底部就算输。。。。

演示代码:http://demo.3water.com/js/FlyBeat/index.html

游戏目前的功能还是比较简单的。。。。貌似就贴个源码不太好,所以这次还是写写思路。。。

游戏主要分为4个js文件,4个js文件分别包含4个类。
1:飞机类---Flyer

//飞机对应的dom元素 
this.dom = null; 
//是否活着 
this.isLive = true; 
//是否移动中 
this.isMove = false; 
//移动的ID 
this.moveId = null; 
//是否发弹中 
this.isSend = false; 
//目前已经发了多少颗弹(存在屏幕显示) 
this.nowBullet = 0; 
//游戏背景Dom 
gamePanel : null, 
//游戏背景宽度 
gameWidth : 0, 
//游戏背景高度 
gameHeight : 0, 
//飞机移动速度 
movepx : 10, 
//飞机移动频率 
movesp : 30, 
//飞机子弹级别 
bulletLevel : 1, 
//最大发弹数(存在屏幕显示) 
maxBullet : 12, 
//方向键值对应 
keyCodeAndDirection : { 
37 : "left", 
38 : "up", 
39 : "right", 
40 : "down" 
},

以上是飞机应该有的属性。。。。

飞机除了有固定的一些属性之外,其实还应该有血量这些的,但这个是简陋版嘛,你可以自己添加。

更应该会有移动,发射子弹,爆炸等方法。

移动: 其实就是捕获键盘事件,如果是简单的按下键盘的左,然后飞机就向左移动几个像素,你会发觉,飞机移动起来很生硬,或者说是操作延迟,特别是你想按住键盘左的时候,它移动的时候,延迟得很严重,操作不流畅。所以一般都是:当你按下键盘时,调用一个setInterval函数来让飞机不断的移动,当释放键盘的时候,移动停止,这样移动就很流畅了。

发射子弹: 其实就是用户按了空格,然后触发一个键盘事件,此事件就是生成一个子弹Bullet类的对象,然后让它飞出去。此类后面会有说到。

爆炸: 当飞机撞到敌机的时候,飞机就会触发一个爆炸事件,结束游戏。当然,这个检测飞机是否撞到敌机,是在敌机那里检测。

这些是一些基本事件。还有扩展的事件。。可以自己添加

 2:子弹类--Bullet

//子弹Dom元素 
this.dom = null; 
//子弹移动速度 
movepx : 8, 
//子弹移动频率 
movesp : 10,

子弹最基本的两个方法:移动检测是否打中敌机

移动:子弹的移动简单很多,就一直往上跑,top一直减就OK了。 

检测是否打中敌机:将敌机的列表传进方法中,遍历敌机,检测子弹与敌机是否有碰撞,有则敌机爆炸,没有则跳过。
3:敌机类--Enemy

//敌机dom元素 
this.dom = null; 
//是否 
this.isLive = true; 
//敌机横向移动速度 
movepx : 6, 
//敌机纵向移动速度 
movepy : 4, 
//敌机移动频率 
movesp : 75,

敌机的基本方法有:移动,是否撞到飞机Flyer玩家,爆炸

移动:就是敌机如何移动,我是设置成敌机从上到下飞,让后从左往又飞,撞到右边尽头,调头飞。

是否撞到飞机Flyer玩家:在敌机不断的移动过程中,不断的检测飞机Flyer与敌机是否有交集,有则两者爆炸,游戏结束,否则跳过。

 爆炸:就是敌机被子弹打中或者撞到飞机Flyer时触发的事件。

4:游戏控制类--Game

其中包含一个扩展方法:从数组中删除指定元素

//扩展数组方法,删除特定的值 
Array.prototype.remove = function(obj){ for(var i=0,l=this.length;i < l;i++){ 
if(this[i] == obj){ 
this.splice(i,1); 
return this; 
} 
} 
throw "The Array has no this Obj"; 
}

其余的,都是些初始化敌机,飞机以及控制游戏流程的,还有一些修改分数,游戏结束之类的方法。这些没啥好讲。

大致就这样,游戏本身比较简单,下面的源码都有注释,这次写得比较详细。。。有兴趣的朋友,可以自己继续完善。。。有啥问题,欢迎拍砖。。。多多指教。
打包下载地址 https://3water.com/jiaoben/32660.html

Javascript 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 #Javascript
jQuery编写widget的一些技巧分享
Oct 28 #Javascript
jQuery timers计时器简单应用说明
Oct 28 #Javascript
jquery ajax abort()的使用方法
Oct 28 #Javascript
BOM与DOM的区别分析
Oct 26 #Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 #Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 #Javascript
You might like
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
js实现tab切换效果
2017/02/16 Javascript
理解javascript async的用法
2017/08/22 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
python递归查询菜单并转换成json实例
2017/03/27 Python
python生成圆形图片的方法
2020/03/25 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python字符串string的内置方法实例详解
2018/05/14 Python
python实现证件照换底功能
2019/08/20 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
空指针到底是什么
2012/08/07 面试题
环保口号大全
2014/06/12 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
公司酒会主持词
2015/07/02 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers