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

所属分类: 网络编程 / JavaScript 阅读数: 255
收藏 0 赞 0 分享
玩法说明:上下左右控制移动,空格发弹。 每打中一个敌机就加100分,每提升5000分,玩家的飞机的一次发弹数就加一,最多四,被敌机撞到或者让敌机飞到底部就算输。。。。

演示代码:http://demo.jb51.net/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://www.jb51.net/jiaoben/32660.html

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多