JavaScript 小型打飞机游戏实现原理说明
作者：
这次为大家带来的小游戏是：打飞机。呃。。。我本人就写不出什么惊天大作的游戏的了，只能写写小游戏，代码量小，又可以学习，主要是想法思路，代码量大，估计也没啥人会去研究学习。。。
玩法说明：上下左右控制移动，空格发弹。 每打中一个敌机就加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"
},
以上是飞机应该有的属性。。。。
//子弹Dom元素
this.dom = null;
//子弹移动速度
movepx : 8,
//子弹移动频率
movesp : 10,
子弹最基本的两个方法：移动与检测是否打中敌机
//敌机dom元素
this.dom = null;
//是否
this.isLive = true;
//敌机横向移动速度
movepx : 6,
//敌机纵向移动速度
movepy : 4,
//敌机移动频率
movesp : 75,
敌机的基本方法有：移动，是否撞到飞机Flyer玩家，爆炸
//扩展数组方法，删除特定的值
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
演示代码: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