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

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

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

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

　　游戲目前的功能還是比較簡(jiǎn)單的。。。。貌似就貼個(gè)源碼不太好，所以這次還是寫(xiě)寫(xiě)思路。。。

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

　　1：飛機(jī)類---Flyer

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

　　//飛機(jī)對(duì)應(yīng)的dom元素

　　this.dom = null;

　　//是否活著

　　this.isLive = true;

　　//是否移動(dòng)中

　　this.isMove = false;

　　//移動(dòng)的ID

　　this.moveId = null;

　　//是否發(fā)彈中

　　this.isSend = false;

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

　　this.nowBullet = 0;

　　//游戲背景Dom

　　gamePanel : null,

　　//游戲背景寬度

　　gameWidth : 0,

　　//游戲背景高度

　　gameHeight : 0,

　　//飛機(jī)移動(dòng)速度

　　movepx : 10,

　　//飛機(jī)移動(dòng)頻率

　　movesp : 30,

　　//飛機(jī)子彈級(jí)別

　　bulletLevel : 1,

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

　　maxBullet : 12,

　　//方向鍵值對(duì)應(yīng)

　　keyCodeAndDirection : {

　　37 : "left",

　　38 : "up",

　　39 : "right",

　　40 : "down"

　　},

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

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

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

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

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

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

　　這些是一些基本事件。還有擴(kuò)展的事件。�？梢宰约禾砑�

　　2：子彈類--Bullet

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

　　//子彈Dom元素

　　this.dom = null;

　　//子彈移動(dòng)速度

　　movepx : 8,

　　//子彈移動(dòng)頻率

　　movesp : 10,

　　子彈最基本的兩個(gè)方法：移動(dòng)與檢測(cè)是否打中敵機(jī)

　　移動(dòng)：子彈的移動(dòng)簡(jiǎn)單很多，就一直往上跑，top一直減就OK了。

　　檢測(cè)是否打中敵機(jī)：將敵機(jī)的列表傳進(jìn)方法中，遍歷敵機(jī)，檢測(cè)子彈與敵機(jī)是否有碰撞，有則敵機(jī)爆炸，沒(méi)有則跳過(guò)。

　　3：敵機(jī)類--Enemy

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

　　//敵機(jī)dom元素

　　this.dom = null;

　　//是否

　　this.isLive = true;

　　//敵機(jī)橫向移動(dòng)速度

　　movepx : 6,

　　//敵機(jī)縱向移動(dòng)速度

　　movepy : 4,

　　//敵機(jī)移動(dòng)頻率

　　movesp : 75,

　　敵機(jī)的基本方法有：移動(dòng)，是否撞到飛機(jī)Flyer玩家，爆炸

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

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

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

　　4：游戲控制類--Game

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

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

　　//擴(kuò)展數(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ī)，飛機(jī)以及控制游戲流程的，還有一些修改分?jǐn)?shù)，游戲結(jié)束之類的方法。這些沒(méi)啥好講。

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

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

【JavaScript 小型打飛機(jī)游戲?qū)崿F(xiàn)和原理說(shuō)明】相關(guān)文章：

JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)刷新代碼段03-25

關(guān)于ASP.NET使用JavaScript顯示信息提示窗口實(shí)現(xiàn)原理及代碼03-30

常用排序算法之JavaScript實(shí)現(xiàn)代碼段03-10

探討PHP函數(shù)的實(shí)現(xiàn)原理及性能04-01

Javascript函數(shù)的定義和用法分析03-31

關(guān)jQuery彈出窗口簡(jiǎn)單實(shí)現(xiàn)代碼-javascript編程03-30

有關(guān)javascript實(shí)現(xiàn)的多個(gè)層切換效果通用函數(shù)示例03-31

JavaScript類定義原型方法的兩種實(shí)現(xiàn)的區(qū)別04-02

對(duì)javascript的理解03-29