JavaScript 小型打飛機遊戲實現和原理說明

JavaScript 小型打飛機遊戲實現和原理說明

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

演示程式碼:http://demo./js/FlyBeat/

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

遊戲主要分為4個js檔案，4個js檔案分別包含4個類。

1：飛機類---Flyer

複製程式碼 程式碼如下:

//飛機對應的dom元素

= null;

//是否活著

ve = true;

//是否移動中

ve = false;

//移動的ID

Id = null;

//是否發彈中

nd = false;

//目前已經發了多少顆彈(存在螢幕顯示)

ullet = 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元素

= null;

//子彈移動速度

movepx : 8,

//子彈移動頻率

movesp : 10,

子彈最基本的兩個方法：移動與檢測是否打中敵機

移動：子彈的移動簡單很多，就一直往上跑，top一直減就OK了。

檢測是否打中敵機：將敵機的列表傳進方法中，遍歷敵機，檢測子彈與敵機是否有碰撞，有則敵機爆炸，沒有則跳過。

3：敵機類--Enemy

複製程式碼 程式碼如下:

//敵機dom元素

= null;

//是否

ve = true;

//敵機橫向移動速度

movepx : 6,

//敵機縱向移動速度

movepy : 4,

//敵機移動頻率

movesp : 75,

敵機的基本方法有：移動，是否撞到飛機Flyer玩家，爆炸

移動：就是敵機如何移動，我是設定成敵機從上到下飛，讓後從左往又飛，撞到右邊盡頭，調頭飛。

是否撞到飛機Flyer玩家：在敵機不斷的移動過程中，不斷的檢測飛機Flyer與敵機是否有交集，有則兩者爆炸，遊戲結束，否則跳過。

爆炸：就是敵機被子彈打中或者撞到飛機Flyer時觸發的事件。

4：遊戲控制類--Game

其中包含一個擴充套件方法：從陣列中刪除指定元素

複製程式碼 程式碼如下:

//擴充套件陣列方法，刪除特定的值

ve = function(obj){

for(var i=0,l=th;i < l;i++){

if(this[i] == obj){

ce(i,1);

return this;

}

}

throw "The Array has no this Obj";

}

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

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

打包下載地址 /jiaoben/