JavaScript 小型打飛機游戲實現(xiàn)和原理說明

　　JavaScript 小型打飛機游戲實現(xiàn)和原理說明

　　玩法說明：上下左右控制移動，空格發(fā)彈。 每打中一個敵機就加100分，每提升5000分，玩家的飛機的一次發(fā)彈數(shù)就加一，最多四，被敵機撞到或者讓敵機飛到底部就算輸。。。。

　　演示代碼:http://demo./js/FlyBeat/

　　游戲目前的功能還是比較簡單的。。。。貌似就貼個源碼不太好，所以這次還是寫寫思路。。。

　　游戲主要分為4個js文件，4個js文件分別包含4個類。

　　1：飛機類---Flyer

　　復制代碼 代碼如下:

　　//飛機對應的dom元素

　　this.dom = null;

　　//是否活著

　　this.isLive = true;

　　//是否移動中

　　this.isMove = false;

　　//移動的ID

　　this.moveId = null;

　　//是否發(fā)彈中

　　this.isSend = false;

　　//目前已經(jīng)發(fā)了多少顆彈(存在屏幕顯示)

　　this.nowBullet = 0;

　　//游戲背景Dom

　　gamePanel : null,

　　//游戲背景寬度

　　gameWidth : 0,

　　//游戲背景高度

　　gameHeight : 0,

　　//飛機移動速度

　　movepx : 10,

　　//飛機移動頻率

　　movesp : 30,

　　//飛機子彈級別

　　bulletLevel : 1,

　　//最大發(fā)彈數(shù)(存在屏幕顯示)

　　maxBullet : 12,

　　//方向鍵值對應

　　keyCodeAndDirection : {

　　37 : "left",

　　38 : "up",

　　39 : "right",

　　40 : "down"

　　},

　　以上是飛機應該有的屬性。。。。

　　飛機除了有固定的一些屬性之外，其實還應該有血量這些的，但這個是簡陋版嘛，你可以自己添加。

　　更應該會有移動，發(fā)射子彈，爆炸等方法。

　　移動： 其實就是捕獲鍵盤事件，如果是簡單的按下鍵盤的左，然后飛機就向左移動幾個像素，你會發(fā)覺，飛機移動起來很生硬，或者說是操作延遲，特別是你想按住鍵盤左的時候，它移動的時候，延遲得很嚴重，操作不流暢。所以一般都是：當你按下鍵盤時，調用一個setInterval函數(shù)來讓飛機不斷的移動，當釋放鍵盤的時候，移動停止，這樣移動就很流暢了。

　　發(fā)射子彈： 其實就是用戶按了空格，然后觸發(fā)一個鍵盤事件，此事件就是生成一個子彈Bullet類的對象，然后讓它飛出去。此類后面會有說到。

　　爆炸： 當飛機撞到敵機的時候，飛機就會觸發(fā)一個爆炸事件，結束游戲。當然，這個檢測飛機是否撞到敵機，是在敵機那里檢測。

　　這些是一些基本事件。還有擴展的事件。。可以自己添加

　　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時觸發(fā)的事件。

　　4：游戲控制類--Game

　　其中包含一個擴展方法：從數(shù)組中刪除指定元素

　　復制代碼 代碼如下:

　　//擴展數(shù)組方法，刪除特定的值

　　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";

　　}

　　其余的，都是些初始化敵機，飛機以及控制游戲流程的，還有一些修改分數(shù)，游戲結束之類的方法。這些沒啥好講。

　　大致就這樣，游戲本身比較簡單，下面的源碼都有注釋，這次寫得比較詳細。。。有興趣的朋友，可以自己繼續(xù)完善。。。有啥問題，歡迎拍磚。。。多多指教。

　　打包下載地址 /jiaoben/32660.html

【JavaScript 小型打飛機游戲實現(xiàn)和原理說明】相關文章：

常用排序算法之JavaScript實現(xiàn)代碼段08-29

JavaScript學習歷程和心得范文（精選10篇）06-09

理解Javascript對象06-21

常用的JavaScript模式08-29

JavaScript語法分析06-21

詳細解說JavaScript事件06-20

JavaScript常用方法匯總08-26

Javascript內置核心對象教程06-20

javascript是什么意思10-08

高效編寫JavaScript代碼的技巧08-29