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 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 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
十大“创意”战术!
2020/03/04 星际争霸
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
python输入中文的实例方法
2020/09/14 Python
Python中pass的作用与使用教程
2020/11/13 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
担保公司2015年终工作总结
2015/10/14 职场文书
2016年情人节问候语
2015/11/11 职场文书
初中地理教学反思
2016/02/19 职场文书
多人股份制合作协议书
2016/03/19 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书