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/
-
針對dom元素的分析應用
如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態的向html裏寫入DOM元素。今天這章我們就講這兩個應用(一)對html裏現有的DOM元素進行操作。我上面説了,對現有的DOM元素進行操作,無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣...
-
SQL的SUBSTR 函數的使用方法介紹
SUBSTR函數是用來截取數據庫某一列字段中的一部分。在各個數據庫的函數名稱不一樣(真是蛋疼,後發明的`數據庫難道不能同先發明的一樣嗎?)複製代碼代碼如下:MySQL:SUBSTR(),SUBSTRING()Oracle:SUBSTR()SQLServer:SUBSTRING();常用的方式是:SBUSTR(str,pos);就是從pos...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
網站設計首頁要注意的事項
網站設計首頁的時候要注意些什麼?哪些是必須要注意的?下面就來和小編一起看看網站設計首頁要注意的事項吧。1.用户友好性:提高首頁的用户友好性,能夠大大增加留住用户的可能性,更進一步的`話則是能提高用户的黏着度,取得良好的用户轉化效益。而用户的友好性主要體...