微信demo小遊戲：飛機大戰從無到有

微信demo遊戲飛機大戰從無到有

 

如今建立新項目會默認給飛機大戰的demo，這裏給你們從基礎開始講解遊戲的從無到有是怎麼實現的。

 

具體實現步驟：

建立背景圖->背景圖運動起來->建立飛機並隨背景圖一塊兒動->控制飛機移動->飛機發射子彈->建立敵機->消滅敵機->玩家飛機被擊毀->顯示結算界面

 

首先刪除全部自帶文件，只保留game.js、game.json和project.config.json（原來的最好保留，由於等會要複製一些內容）

 

刪除game.js中的內容，此時模擬器爲一片漆黑，以下圖所示

 

 

好，咱們正式開始一步步開始編寫飛機大戰

 

官方提供了Adapter庫，方便咱們操做，官方的解釋以下：

 

 

這裏weapp-adapter足夠用，就不用其它遊戲引擎了！

 

 

 

一、weapp-adapter

新建JS文件夾，在js文件夾中新建libs文件夾，將weapp-adapter複製進來（原來保存中複製），而後js目錄下新建一個main.js文件

 

 

二、在game.js中添加代碼

 

 

main.js先空着，咱們要先創建精靈類

 

三、建立精靈類

精靈，是構成遊戲中活動體（好比，飛機、野獸等遊戲人物）的最基本單元。

 

在JS目錄下新建sprite.js文件，添加代碼，定義背景圖的文件，大小，位置等，並顯示在畫布上。

 

 

4、顯示背景圖

而後添加背景圖片images/bg.jpg，在background.js文件中添加代碼

 

 

 

 

 

背景圖片的方法已經完成，如今到主函數main.js中實現圖片顯示，添加代碼

 

 

便可實現圖片加載，效果以下：

 

 

 

5、背景圖運動起來

若是細心的朋友會發現，前面背景圖方法裏是繪製了兩張圖片的，一張是和鋪滿屏幕的，另外一張是在屏幕上方看不到的。

若是讓背景圖運動起來，就要是圖片向下移動，由於每一幀都會從新繪製，因此要再背景圖方法中加一個向下運動的方法

 

 

而後再loop循環中添加

 

 

此時背景圖就運動起來了

 

 

六、加載飛機，並隨地圖一塊兒運動

新建玩家飛機類

 

 

在主函數中添加飛機相關

 

 

 

 

將loop循環中的內容拆分爲重繪和更新

 

 

此時，玩家飛機出現，並能夠和地圖一塊兒運動

 

 

 

七、控制飛機移動

新增判斷手指的相關動做，以及判斷是否處於屏幕中

 

 

 

此時，飛機的位置能夠經過手指和鼠標進行控制

八、發射子彈

這個時候由於子彈會有不少個，並且超出屏幕的要回收掉，因此要加全局管理器和對象池

Base目錄中新增pool.js文件（對象池），js目錄中新增databus.js文件（全局管理器），這兩個文件能夠複製原來的

 

添加子彈類文件bullet.js，複製原來的便可

 

飛機類新增代碼發射子彈

 

 

主函數文件中新增

 

 

Render中重繪子彈

Update中更新子彈的位置，並每隔20幀發射一枚子彈，數值越小，發射速度越快

 

 

 

已完成子彈發射的功能。

 

九、建立敵機

 

敵機會有爆炸的動畫，因此要新建一個幀動畫類和敵機類

幀動畫類：base目錄下的animation.js

敵機類：npc目錄下enemy.js

（複製過來就行，具體不作詳解）

 

主函數中新增生成敵機的代碼

 

 

 

此時不會有敵機爆炸，也沒有撞機的功能

 

十、消滅敵機

 

 

主函數中新增全局碰撞檢測，被註釋掉的是玩家飛機和敵機碰撞，暫時先不要

 

 

全局碰撞方法要放到update函數中，此時能夠消滅敵機，可是沒有爆炸動畫，玩家也是出於無敵狀態的。

 

 

 

新增代碼，顯示爆炸動畫

 

十一、玩家飛機被擊毀，遊戲結束

 

 

而後控制遊戲再也不更新

 

 

 

這個時候畫面靜止不動了，遊戲結束了

 

十二、顯示結算界面

在runtime文件夾中新增gameinfo.js文件，用於積分和結算界面

 

 

 

判斷遊戲結束後，顯示結算頁面，並新增點擊從新開始事件

 

 

 

遊戲結束後，手指觸摸事件

 

 

 

此時，若是遊戲結束後，點擊從新開始，會發現不正常，遊戲立馬結束了，緣由是原來全部的遊戲單元都還在。

新增代碼

 

 

全部的單元所有重置，此時又有新的問題，遊戲速度變的愈來愈快了

 

 

此時能夠從新開始，可是飛機不能移動了，緣由很簡單，事件監聽中仍是開始的事件，要刪除掉

 

 

至此，已經完成了飛機大戰的製做了（音效就沒管了，須要能夠本身研究一下）

 

結束。。等等，遊戲中的時候竟然沒有顯示實時積分？？這個竟然漏了，如今補上

 

 

上面是顯示積分，下面是積分增長，消滅一個敵機加一

 

 

 

 

至此，真的結束了，至少每一步是怎麼實現的，應該有所瞭解，具體實現的邏輯能夠本身研究，後續會有更多的實例提供你們參考。

順便打個廣告，歡迎你們關注笑林新記，天天都有不同的爆笑內容，能夠放鬆一下，掃碼關注一下吧，個人更新也在這裏。

這裏也附上我我的的微信，歡迎你們和我交流