01前言介紹
微信小遊戲是基於微信客戶端的遊戲，它即點即玩，無需下載安裝，體驗輕便，可以和微信內的好友一起玩，比如PK、圍觀等，享受小遊戲帶來的樂趣。那如何開發一款屬於自己的小遊戲呢？
原始碼地址:
https://github.com/A123asdo11/aircraft_war
（新版ccc已無法正常使用，需要修復，文章作者花費了大量的時間和精力，在ccc2.0以上版本進行了修復，並在微信小遊戲正常執行）
02微信小遊戲飛機大戰簡介
1、大事記
經典飛機大戰是騰訊交流軟體微信5.0版本在2013年8月推出的軟體內建經典小遊戲。微信早已正式釋出微信內建飛機大戰遊戲，目前該遊戲已經下線。
2、玩法介紹
玩家點選開始遊戲並移動自己的大飛機，在躲避迎面而來的其它飛機時，大飛機通過發射炮彈打掉其它小飛機來贏取分數。一旦撞上其它飛機，遊戲就結束。
此時，介面中會顯示此次玩家的飛機大戰分數。點選歷史成績後可看到“歷史成績排行榜”。點選重新挑戰可繼續重玩。點選退出遊戲後，回到開始遊戲等待頁。
3、遊戲介紹
1）、首先要清楚飛機的分數，小飛機1000分。 中飛機4000分。 大飛機16000分。 儘量別招惹中大飛機很容易來不及打爆就下來了或者後面又跟著中大飛機。
2）、手機螢幕要敏感度高，用大螢幕的pad或者長點的手機玩比較有優勢。（因為能提前看到前面的障礙物）
3）、要儘量活的長，安全第一。安全的時候，就是開始比較慢的時候，可以多打一些小飛機,積累分數；遇到飛船，前面可以出擊，需要擊打一段時間才能摧毀。
4）、如果吃到了藍色的雙色炮彈，請不要猶豫，儘量找多的，大的地方打。最好身邊保留一個炸彈，關鍵時刻救急，後面的速度很快， 飛機很密集。
5）、去洗手，手上、螢幕上不能汗漬，水漬、油漬等影響發揮。保持手指、螢幕的順滑。
6）、和傳統的飛機射擊遊戲一樣，此遊戲飛機也不是被碰到就會死，而是飛機有一個點，大概就是最中心那一塊，只要不被敵機碰到那一塊，而是碰到兩邊翅膀，那麼飛機就不會爆炸，不過這個方法不好掌握，活用的方法是，躲在螢幕的最左或最右，把中心部分隱藏住。
7）、如果飛機打光了，可以向好友索要，如果好友在一定時間沒給你，或者沒有好友給你飛機，其實也不用著急到了一定時間，飛機就可以刷出來了，又能繼續刷分咯。
8）、遊戲介面預覽
想體驗遊戲的使用者請關注我們公眾號：Web前端Talk，並在後臺回覆，“我要體驗”，我們將隨機抽取幸運玩家。名額有限哦！！！
03遊戲場景設計
1、開始場景
A、主介面（公共背景圖，動畫小飛機）
B、開始遊戲按鈕
2、遊戲場景
A、英雄機
①、子彈（無限，紅色）、超級子彈（有限，藍色）、子彈碰撞敵機
②、英雄機移動、子彈跟隨移動
③、主角與敵機碰撞
B、敵機
①、小、中、大敵機隨機生成
②、敵機生命值，獲得分數
C、BUFF
（炸彈）
（超級子彈，藍色彈夾）
D、分數、炸彈夾
3、GameOver場景
A、主角碰撞敵機後遊戲結束，展示當前獲得分數
B、主介面上方展示歷史最高分數
C、玩家可選擇按鈕，重新挑戰、歷史得分、退出遊戲
Cocos creator工具預覽
目錄結構：
Scene：場景，
Script：指令碼，所有指令碼都在這裡，
Texture：圖片資源以及圖集資源，
Animation：動畫元素，
Prefab：預載體資源，用於重複利用節點
Sound：音樂資源
層級管理器
Canvas：畫布，開發者用於在畫布中建立精靈，節點等內容。
MainCamera：攝像機，玩家觀察遊戲世界的視窗，一個場景至少有一個攝像機，用於渲染場景，另外可新增空節點，UI節點，渲染節點；
04方案實現
使用cocos creator開發建立場景scene，分別為：start（開始頁）、main（遊戲主頁）、historyScore（歷史分數頁）、end（遊戲結束頁）
1、公共部分
設計所有場景自適應寬高尺寸，size為w：640，h：1136，選中層級裡的canvas元素
canvas層級下建立sprite，並在資源管理器Texture拖動background到spriteFrame
2、開始頁
標題，新增sprite，拖入“shoot_copyright“
小飛機動畫，新增animation節點，將資源管理下animation資料夾下的game_loading拖入至default Clip，clips是可以通過指令碼訪問的動畫clip列表，勾選playOnLoad即遊戲執行後自動播放動畫
開始按鈕，新增button節點，自帶label文字節點，可先設定按鈕背景圖，再改label為“開始遊戲”
點選開始遊戲觸發場景切換，在資源管理Script資料夾下新增start.js，主要申明動畫節點物件，properties是指令碼物件裡的自定義屬性，可用於拖入節點，編輯等操作；
將start.js拖入至層級canvas下，並將game_loading動畫節點拖入至GameLoading中；
button按鈕需設定Click Events為1，新增層級中的start節點，設定函式
程式碼說明：
this.game_loading.getComponent(cc.Animation);//是獲取當前屬性game_loading動畫節點
gameloading&&gameloading.play();//當該節點物件存在時，執行動畫播放事件play()
cc.director.preloadScene('main');//使用cc.director導演物件呼叫preloadScene預載入main場景
3、遊戲主頁（事件拆分）
暫停按鈕，分數，炸彈夾，新增button、label、sprite（子節點label）；
設定暫停按鈕普通狀態和按下等背景圖（達到按下狀態變化）
繫結點選事件pauseClick
程式碼說明：
根據當前節點物件eState值判斷是否等於遊戲常量值，為1時，遊戲暫停，停止飛機、子彈、英雄機、背景音樂執行事件；為2時，遊戲繼續，飛機、子彈、英雄機、背景音樂開始執行；
分數和炸彈夾展示，英雄機的子彈碰撞敵機銷燬後加分、英雄機主體碰撞BUFF後改變炸彈夾展示英雄機，作為主要節點，使用sprite作為飛機模型，繫結hero.js，新增polygonCollider碰撞元件，新增animation元件作為英雄機動態化。
hero.js主要設定4個屬性，主角碰撞敵機後爆炸預製資源、遊戲結束音樂、main主函式節點、主角子彈組生成
當主角碰撞時執行onCollisionEnter事件。判斷其碰撞的節點是BUFF還是敵機。
敵機隨機從頂部外向下生成，共3種敵機，小、中、大；
name：敵機名稱，
freqTime：敵機生成時間（s），
initPollCount：初始物件池，
prefab：預製體
有物件池之後，隨機生成敵機，並給每個敵機繫結回收機制
英雄機與敵機的碰撞
綠色連線線為多邊緣碰撞，需碰撞元件生成。
子彈生成與碰撞
4、Game Over頁
渲染當前分數，根據cc.sys.localStorage儲存的本地資料獲取並設定label的string屬性
給每個按鈕button繫結對應事件
5、歷史成績頁
Sprite作為背景框架列表，scrollview作為滾動容器元件，加上mask遮罩層元件，加上scrollbar實現內容在可視區域內展示，場景載入時，會遍歷分數物件，在根據cc.instantiate克隆該prefab節點，用於新增子節點到scrollContent節點內容中，並初始化該子節點的展示內容score和time；
end~~
以上就是所有場景scene對應的功能。
還有下期小遊戲說明，敬請期待哦~~
在公眾號後臺回覆“我要體驗”讓程式設計師小哥哥拉你體驗遊戲哦~~