核心步驟
笨鳥(niǎo)設(shè)計(jì)思路
一: 游戲js
初始化幀數(shù) 設(shè)置一個(gè)run的游戲入口? 里面開(kāi)個(gè)定時(shí)器執(zhí)行 游戲開(kāi)始的函數(shù)? 還需要游戲暫停? 游戲結(jié)束函數(shù)
二:幀率js
初始化 總幀數(shù)? 開(kāi)始時(shí)間? 開(kāi)始幀數(shù)? 真實(shí)幀數(shù)? 里面定義一個(gè)方法計(jì)算真實(shí)幀數(shù)(幀數(shù)統(tǒng)計(jì)函數(shù))
該函數(shù)讓總幀數(shù)每幀都遞增 記錄當(dāng)前時(shí)間? 只有當(dāng)前時(shí)間-開(kāi)始時(shí)間>1S的時(shí)候 才開(kāi)始計(jì)算真實(shí)幀率
計(jì)算方法是 總幀數(shù)-開(kāi)始的幀數(shù)? 最后別忘了更新開(kāi)始時(shí)間和開(kāi)始幀數(shù)? 開(kāi)始時(shí)間=當(dāng)前時(shí)間? 開(kāi)始幀數(shù)等于當(dāng)前總幀數(shù)
然后在Game js 文件初始化里面 實(shí)例化該幀率對(duì)象 順便獲取上下文繪圖 傳入ID獲得 然后在游戲開(kāi)始函數(shù)把幀數(shù)和時(shí)間
繪制到畫(huà)布上 利用實(shí)例化對(duì)象執(zhí)行幀數(shù)統(tǒng)計(jì)函數(shù) 當(dāng)然有畫(huà)布肯定需要清屏 把真實(shí)幀數(shù)和總幀數(shù)繪制到畫(huà)布上
三:加載本地?cái)?shù)據(jù)
LoadSourceTools
初始化 一個(gè)對(duì)象用來(lái)保存所有的加載出來(lái)的圖片 ,定義一個(gè)方法用來(lái)加載本地圖片
利用AJAX? 創(chuàng)建請(qǐng)求對(duì)象 監(jiān)聽(tīng)狀態(tài)碼? onreadystatechang? 判斷狀態(tài)碼
請(qǐng)求對(duì)象.readyState==4? 請(qǐng)求對(duì)象.status==200 表示請(qǐng)求成功
定義一個(gè)變量記錄加載圖片數(shù)量? 獲取請(qǐng)求的數(shù)據(jù) 請(qǐng)求對(duì)象.responseText
把獲得數(shù)據(jù)轉(zhuǎn)換為json格式? JSON.parse 建立一個(gè)圖片數(shù)組接收json數(shù)據(jù)里面的.images
遍歷數(shù)組創(chuàng)建圖片對(duì)象 src 索引? 在每一張圖片加載完后? 記錄圖片的個(gè)數(shù)++
拿到數(shù)據(jù)里面的對(duì)應(yīng)的名字 然后給用來(lái)保存圖片的對(duì)象動(dòng)態(tài)添加名字把image傳入到該對(duì)象中
通過(guò)一個(gè)回調(diào)函數(shù)來(lái)獲得該對(duì)象 ,圖片數(shù)組的長(zhǎng)度,圖片的個(gè)數(shù)
最后請(qǐng)求對(duì)象通過(guò).open('get',數(shù)據(jù)名稱) 獲得數(shù)據(jù)
請(qǐng)求對(duì)象.send(null) get方法可以不寫(xiě)字符串
最后在游戲js 初始化中 實(shí)例化加載本地?cái)?shù)據(jù)對(duì)象 調(diào)用該方法 獲取里面的圖片
四:繪制背景 并且運(yùn)動(dòng)
初始化所需要的數(shù)據(jù)
圖片資源? x坐標(biāo) y坐標(biāo) 圖片寬高 速度用來(lái)移動(dòng)? 總格數(shù),當(dāng)前頁(yè)面顯示的個(gè)數(shù)
定義3個(gè)方法 一個(gè)用來(lái)渲染 一個(gè)用來(lái)讓圖片移動(dòng) 一個(gè)停止
渲染方法 需要畫(huà)2倍的個(gè)數(shù) 因?yàn)樾枰獰o(wú)限循壞 通過(guò)drawImage畫(huà)
具體參數(shù)為 當(dāng)前圖片 x坐標(biāo)+對(duì)應(yīng)i*寬度, y坐標(biāo) 圖片寬高
更新方法 讓x坐標(biāo)按照指定的速度遞減 當(dāng)走過(guò)一個(gè)一個(gè)屏幕也就是總個(gè)數(shù)*圖片寬是后,要讓x坐標(biāo)回到原點(diǎn)
達(dá)到無(wú)限循環(huán)效果
停止方法就是讓速度變?yōu)?
在游戲js 的游戲運(yùn)入口放法里面實(shí)話對(duì)應(yīng)的對(duì)象 通過(guò)之前指定的圖片名稱 在初始化里面判斷所有圖片是否加載
完成,加載完成就調(diào)用run方法? 然后在游戲運(yùn)行方法里面執(zhí)行對(duì)應(yīng)的渲染和移動(dòng)方法
第五步 繪制管道
初始化所需要的數(shù)據(jù),圖片資源 一個(gè)控制管道口方向的變量 圖片寬度 圖片的高度
x坐標(biāo) 畫(huà)布最右側(cè)? y坐標(biāo)口向下為0 口向上為畫(huà)布高度-(地板+圖片高度) 速度
定義三個(gè)3個(gè)方法 和繪制背景一樣 不同的是 更新的時(shí)候當(dāng)坐標(biāo)x小于圖片的寬時(shí)候就
移除管道 在游戲js 入口定義一個(gè)數(shù)據(jù)把實(shí)例化對(duì)象裝起來(lái) 每100幀繪制一個(gè)管道 調(diào)用
渲染和移動(dòng)方法
六步 小鳥(niǎo)的自由落體
x坐標(biāo) 畫(huà)布1/3? y坐標(biāo)100? 寬圖片寬 高圖片高? 翅膀狀態(tài) 對(duì)應(yīng)圖片的三個(gè)狀態(tài)
用012表示? 翅膀煽動(dòng)的頻率? 小鳥(niǎo)下落時(shí)當(dāng)前的總幀數(shù) 下落速度
下落速度有個(gè)公式 0.001*0.5*9.8*Math.pow(幀數(shù)差,2)
在游戲js 初始化實(shí)例化小鳥(niǎo)對(duì)象 在游戲運(yùn)行調(diào)用移動(dòng)和渲染方法
七步 小鳥(niǎo)自由落體加旋轉(zhuǎn)
初始化一個(gè)旋轉(zhuǎn)角度
在渲染方法里面先把坐標(biāo)位移到圖片中心再旋轉(zhuǎn)
在移動(dòng)方法里面角度+1
八步 點(diǎn)擊讓小鳥(niǎo)飛
初始化一個(gè)小鳥(niǎo)狀態(tài),記錄小鳥(niǎo)當(dāng)前的狀態(tài),0為自由落體,1為點(diǎn)擊向上飛 再定義一個(gè)空氣阻力,
這個(gè)空氣阻力用來(lái)判斷假如用戶不點(diǎn)擊 會(huì)把小鳥(niǎo)狀態(tài)轉(zhuǎn)換為自由落體
飛到畫(huà)布頂端判斷不讓飛出頂端
定義一個(gè)點(diǎn)擊方法 用來(lái)改變小鳥(niǎo)的狀態(tài) 改變角度,頭向上,每次點(diǎn)擊初始化空氣阻力
九步 碰撞檢測(cè)
初始化一個(gè)變量用來(lái)記錄小鳥(niǎo)是否死亡 小鳥(niǎo)死亡的狀態(tài) 碰到地板和管道 都調(diào)用gameOver函數(shù)
小鳥(niǎo)本身和管道和小鳥(niǎo)關(guān)系
小鳥(niǎo)本身控制 碰到地板游戲結(jié)束 調(diào)用gameOver函數(shù)
管道和小鳥(niǎo) 碰到游戲結(jié)束 具體關(guān)系用圖表示
十步 鳥(niǎo)死亡特效加游戲結(jié)束
鳥(niǎo)方法 初始化一個(gè)變量記錄鳥(niǎo)是否死亡 一個(gè)動(dòng)畫(huà)索引
在渲染方法判斷鳥(niǎo)是否死亡 定義死亡圖片寬高? 定義一個(gè)列和行用來(lái)截取圖片位置 把圖片繪制到
對(duì)應(yīng)小鳥(niǎo)死亡的位置上? 把游戲結(jié)束的圖片繪制到畫(huà)布上? return 結(jié)束函數(shù)
在移動(dòng)方法讓動(dòng)畫(huà)索引遞增,當(dāng)動(dòng)畫(huà)索引等于列*行的時(shí)候就結(jié)束游戲 return 結(jié)束程序
廢話不多說(shuō) 看代碼
游戲主體文件
幀率計(jì)算文件
因?yàn)闆](méi)服務(wù)器,加載本地?cái)?shù)據(jù)
背景圖片
管道
小鳥(niǎo)
碰撞檢測(cè)圖示
小鳥(niǎo)自己碰撞 地板和天空
管道和小鳥(niǎo)之間的關(guān)系
