JavaScript 小型打飛機(jī)游戲?qū)崿F(xiàn)原理說(shuō)明
演示代碼:http://demo.jb51.net/js/FlyBeat/index.html
游戲目前的功能還是比較簡(jiǎn)單的。。。。貌似就貼個(gè)源碼不太好,所以這次還是寫(xiě)寫(xiě)思路。。。
游戲主要分為4個(gè)js文件,4個(gè)js文件分別包含4個(gè)類(lèi)。
1:飛機(jī)類(lèi)---Flyer
//飛機(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í)候,延遲得很?chē)?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í)就是用戶(hù)按了空格,然后觸發(fā)一個(gè)鍵盤(pán)事件,此事件就是生成一個(gè)子彈Bullet類(lèi)的對(duì)象,然后讓它飛出去。此類(lèi)后面會(huì)有說(shuō)到。
爆炸: 當(dāng)飛機(jī)撞到敵機(jī)的時(shí)候,飛機(jī)就會(huì)觸發(fā)一個(gè)爆炸事件,結(jié)束游戲。當(dāng)然,這個(gè)檢測(cè)飛機(jī)是否撞到敵機(jī),是在敵機(jī)那里檢測(cè)。
這些是一些基本事件。還有擴(kuò)展的事件。。可以自己添加
2:子彈類(lèi)--Bullet
//子彈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ī)類(lèi)--Enemy
//敵機(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:游戲控制類(lèi)--Game
其中包含一個(gè)擴(kuò)展方法:從數(shù)組中刪除指定元素
//擴(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é)束之類(lèi)的方法。這些沒(méi)啥好講。
大致就這樣,游戲本身比較簡(jiǎn)單,下面的源碼都有注釋?zhuān)@次寫(xiě)得比較詳細(xì)。。。有興趣的朋友,可以自己繼續(xù)完善。。。有啥問(wèn)題,歡迎拍磚。。。多多指教。
打包下載地址 http://www.dbjr.com.cn/jiaoben/32660.html
相關(guān)文章
詳解JavaScript中的執(zhí)行上下文及調(diào)用堆棧
這篇文章主要介紹了JavaScript中的執(zhí)行上下文及調(diào)用堆棧,對(duì)此感興趣的同學(xué),可以參考下2021-04-04有關(guān)文件上傳 非ajax提交 得到后臺(tái)數(shù)據(jù)問(wèn)題
本文給大家介紹關(guān)于文件上傳非ajax提交得到后臺(tái)數(shù)據(jù)的問(wèn)題我們?cè)撛趺刺幚砟兀肯挛慕o大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2016-10-10javascript HTML5 canvas實(shí)現(xiàn)打磚塊游戲
這篇文章主要介紹了基于javascript HTML5 canvas實(shí)現(xiàn)打磚塊游戲的具體實(shí)現(xiàn)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04微信小程序的宿主環(huán)境實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序的宿主環(huán)境,包括scroll-view 組件的基本使用,text 組件的基本使用及rich-text 組件的基本使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10如何使用moment.js獲取本周、前n周、后n周開(kāi)始結(jié)束日期及動(dòng)態(tài)計(jì)算周數(shù)
使用了momentjs之后發(fā)現(xiàn)這個(gè)日期處理控件實(shí)在是太強(qiáng)大了,下面這篇文章主要給大家介紹了關(guān)于如何使用moment.js獲取本周、前n周、后n周開(kāi)始結(jié)束日期及動(dòng)態(tài)計(jì)算周數(shù)的相關(guān)資料,需要的朋友可以參考下2022-09-09