- 相關(guān)推薦
JavaScript 小型打飛機游戲實(shí)現和原理說(shuō)明
JavaScript 小型打飛機游戲實(shí)現和原理說(shuō)明
玩法說(shuō)明：上下左右控制移動(dòng)，空格發(fā)彈。 每打中一個(gè)敵機就加100分，每提升5000分，玩家的飛機的一次發(fā)彈數就加一，最多四，被敵機撞到或者讓敵機飛到底部就算輸。。。。
演示代碼:http://demo./js/FlyBeat/
游戲目前的功能還是比較簡(jiǎn)單的。。。。貌似就貼個(gè)源碼不太好，所以這次還是寫(xiě)寫(xiě)思路。。。
游戲主要分為4個(gè)js文件，4個(gè)js文件分別包含4個(gè)類(lèi)。
1：飛機類(lèi)---Flyer
復制代碼 代碼如下:
//飛機對應的dom元素
this.dom = null;
//是否活著(zhù)
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,
//飛機移動(dòng)速度
movepx : 10,
//飛機移動(dòng)頻率
movesp : 30,
//飛機子彈級別
bulletLevel : 1,
//最大發(fā)彈數(存在屏幕顯示)
maxBullet : 12,
//方向鍵值對應
keyCodeAndDirection : {
37 : "left",
38 : "up",
39 : "right",
40 : "down"
},
以上是飛機應該有的屬性。。。。
飛機除了有固定的一些屬性之外，其實(shí)還應該有血量這些的，但這個(gè)是簡(jiǎn)陋版嘛，你可以自己添加。
更應該會(huì )有移動(dòng)，發(fā)射子彈，爆炸等方法。
移動(dòng)： 其實(shí)就是捕獲鍵盤(pán)事件，如果是簡(jiǎn)單的按下鍵盤(pán)的左，然后飛機就向左移動(dòng)幾個(gè)像素，你會(huì )發(fā)覺(jué)，飛機移動(dòng)起來(lái)很生硬，或者說(shuō)是操作延遲，特別是你想按住鍵盤(pán)左的時(shí)候，它移動(dòng)的時(shí)候，延遲得很?chē)乐�，操作不流暢。所以一般都是：當你按下鍵盤(pán)時(shí)，調用一個(gè)setInterval函數來(lái)讓飛機不斷的移動(dòng)，當釋放鍵盤(pán)的時(shí)候，移動(dòng)停止，這樣移動(dòng)就很流暢了。
發(fā)射子彈： 其實(shí)就是用戶(hù)按了空格，然后觸發(fā)一個(gè)鍵盤(pán)事件，此事件就是生成一個(gè)子彈Bullet類(lèi)的對象，然后讓它飛出去。此類(lèi)后面會(huì )有說(shuō)到。
爆炸： 當飛機撞到敵機的時(shí)候，飛機就會(huì )觸發(fā)一個(gè)爆炸事件，結束游戲。當然，這個(gè)檢測飛機是否撞到敵機，是在敵機那里檢測。
這些是一些基本事件。還有擴展的事件。�？梢宰约禾砑�
2：子彈類(lèi)--Bullet
復制代碼 代碼如下:
//子彈Dom元素
this.dom = null;
//子彈移動(dòng)速度
movepx : 8,
//子彈移動(dòng)頻率
movesp : 10,
子彈最基本的兩個(gè)方法：移動(dòng)與檢測是否打中敵機
移動(dòng)：子彈的移動(dòng)簡(jiǎn)單很多，就一直往上跑，top一直減就OK了。
檢測是否打中敵機：將敵機的列表傳進(jìn)方法中，遍歷敵機，檢測子彈與敵機是否有碰撞，有則敵機爆炸，沒(méi)有則跳過(guò)。
3：敵機類(lèi)--Enemy
復制代碼 代碼如下:
//敵機dom元素
this.dom = null;
//是否
this.isLive = true;
//敵機橫向移動(dòng)速度
movepx : 6,
//敵機縱向移動(dòng)速度
movepy : 4,
//敵機移動(dòng)頻率
movesp : 75,
敵機的基本方法有：移動(dòng)，是否撞到飛機Flyer玩家，爆炸
移動(dòng)：就是敵機如何移動(dòng)，我是設置成敵機從上到下飛，讓后從左往又飛，撞到右邊盡頭，調頭飛。
是否撞到飛機Flyer玩家：在敵機不斷的移動(dòng)過(guò)程中，不斷的檢測飛機Flyer與敵機是否有交集，有則兩者爆炸，游戲結束，否則跳過(guò)。
爆炸：就是敵機被子彈打中或者撞到飛機Flyer時(shí)觸發(fā)的事件。
4：游戲控制類(lèi)--Game
其中包含一個(gè)擴展方法：從數組中刪除指定元素
復制代碼 代碼如下:
//擴展數組方法，刪除特定的值
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";
}
其余的，都是些初始化敵機，飛機以及控制游戲流程的，還有一些修改分數，游戲結束之類(lèi)的方法。這些沒(méi)啥好講。
大致就這樣，游戲本身比較簡(jiǎn)單，下面的源碼都有注釋?zhuān)@次寫(xiě)得比較詳細。。。有興趣的朋友，可以自己繼續完善。。。有啥問(wèn)題，歡迎拍磚。。。多多指教。
打包下載地址 /jiaoben/32660.html
【JavaScript 小型打飛機游戲實(shí)現和原理說(shuō)明】相關(guān)文章：
JavaScript實(shí)現網(wǎng)頁(yè)刷新代碼段03-25
關(guān)于A(yíng)SP.NET使用JavaScript顯示信息提示窗口實(shí)現原理及代碼03-30
常用排序算法之JavaScript實(shí)現代碼段03-10
探討PHP函數的實(shí)現原理及性能04-01
Javascript函數的定義和用法分析03-31
關(guān)jQuery彈出窗口簡(jiǎn)單實(shí)現代碼-javascript編程03-30
有關(guān)javascript實(shí)現的多個(gè)層切換效果通用函數示例03-31
JavaScript類(lèi)定義原型方法的兩種實(shí)現的區別04-02
對javascript的理解03-29