快捷導(dǎo)航

JavaScript 小型打飛機游戲?qū)崿F(xiàn)原理說明

更新時間：2010年10月28日 14:40:30 作者：

這次為大家?guī)淼男∮螒蚴牵捍蝻w機。呃。。。我本人就寫不出什么驚天大作的游戲的了，只能寫寫小游戲，代碼量小，又可以學(xué)習(xí)，主要是想法思路，代碼量大，估計也沒啥人會去研究學(xué)習(xí)。。。

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

演示代碼:http://demo.jb51.net/js/FlyBeat/index.html

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

游戲主要分為4個js文件，4個js文件分別包含4個類。
1：飛機類---Flyer

復(fù)制代碼代碼如下:

 
//飛機對應(yīng)的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, 
//方向鍵值對應(yīng) 
keyCodeAndDirection : { 
37 : "left", 
38 : "up", 
39 : "right", 
40 : "down" 
}, 

以上是飛機應(yīng)該有的屬性。。。。

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

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

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

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

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

這些是一些基本事件。還有擴展的事件。?？梢宰约禾砑?/P>

2：子彈類--Bullet

復(fù)制代碼代碼如下:

 
//子彈Dom元素 
this.dom = null; 
//子彈移動速度 
movepx : 8, 
//子彈移動頻率 
movesp : 10, 

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

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

檢測是否打中敵機：將敵機的列表傳進(jìn)方法中，遍歷敵機，檢測子彈與敵機是否有碰撞，有則敵機爆炸，沒有則跳過。
3：敵機類--Enemy

復(fù)制代碼代碼如下:

 
//敵機dom元素 
this.dom = null; 
//是否 
this.isLive = true; 
//敵機橫向移動速度 
movepx : 6, 
//敵機縱向移動速度 
movepy : 4, 
//敵機移動頻率 
movesp : 75, 

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

移動：就是敵機如何移動，我是設(shè)置成敵機從上到下飛，讓后從左往又飛，撞到右邊盡頭，調(diào)頭飛。

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

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

4：游戲控制類--Game

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

復(fù)制代碼代碼如下:

 
//擴展數(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"; 
} 

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

大致就這樣，游戲本身比較簡單，下面的源碼都有注釋，這次寫得比較詳細(xì)。。。有興趣的朋友，可以自己繼續(xù)完善。。。有啥問題，歡迎拍磚。。。多多指教。
打包下載地址 http://www.dbjr.com.cn/jiaoben/32660.html

您可能感興趣的文章: