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 相关文章推荐
Jquery带搜索框的下拉菜单
May 06 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
JS document内容及样式操作完整示例
Jan 14 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目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
php微信支付接口开发程序
2016/08/02 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
跟老齐学Python之折腾一下目录
2014/10/24 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
后勤主管工作职责
2013/12/07 职场文书
新年主持词
2014/03/27 职场文书
2015年安全月活动总结
2015/03/26 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android