摘要：今天杭州又是大雨，被淋了個落湯雞，都怪我家大狼狗非要騎電動車，我昨天吐槽要買的帥氣的雨衣還沒有買不過大雨和飛機大戰小游戲更配哦。微信早已正式發布微信內置飛機大戰游戲，目前該游戲已經下線。此時，界面中會顯示此次玩家的飛機大戰分數。

今天杭州又是大雨，被淋了個落湯雞，都怪我家大狼狗非要騎電動車，我昨天吐槽要買的帥氣的雨衣還沒有買,不過大雨和飛機大戰小游戲更配哦。

這篇文章來自我司的王老吉同學，歡迎大家關注公眾號，在公眾號后臺回復“我要體驗”進群，就可以親自體驗大神（帥氣且單身）用JavaScript寫的小程序游戲哦~~(貌似掘金大老爺們比較多，這么說不太好~，趕明給他寫個相親帖)

微信小游戲是基于微信客戶端的游戲，它即點即玩，無需下載安裝，體驗輕便，可以和微信內的好友一起玩，比如PK、圍觀等，享受小游戲帶來的樂趣。那如何開發一款屬于自己的小游戲呢？
源碼地址：github.com/A123asdo11/…
（新版ccc已無法正常使用，需要修復，文章作者花費了大量的時間和精力，在ccc2.0以上版本進行了修復，并在微信小游戲正常運行）

1、大事記

經典飛機大戰是騰訊交流軟件微信5.0版本在2013年8月推出的軟件內置經典小游戲。微信早已正式發布微信內置飛機大戰游戲，目前該游戲已經下線。
??
2、玩法介紹

玩家點擊開始游戲并移動自己的大飛機，在躲避迎面而來的其它飛機時，大飛機通過發射炮彈打掉其它小飛機來贏取分數。一旦撞上其它飛機，游戲就結束。
此時，界面中會顯示此次玩家的飛機大戰分數。點擊歷史成績后可看到“歷史成績排行榜”。點擊重新挑戰可繼續重玩。點擊退出游戲后，回到開始游戲等待頁。

3、游戲介紹

1）、首先要清楚飛機的分數，小飛機1000分。 中飛機4000分。 大飛機16000分。 盡量別招惹中大飛機很容易來不及打爆就下來了或者后面又跟著中大飛機。
2）、手機屏幕要敏感度高，用大屏幕的pad或者長點的手機玩比較有優勢。（因為能提前看到前面的障礙物）
3）、要盡量活的長，安全第一。安全的時候，就是開始比較慢的時候，可以多打一些小飛機,積累分數；遇到飛船，前面可以出擊，需要擊打一段時間才能摧毀。
4）、如果吃到了藍色的雙色炮彈，請不要猶豫，盡量找多的，大的地方打。最好身邊保留一個炸彈，關鍵時刻救急，后面的速度很快， 飛機很密集。
5）、去洗手，手上、屏幕上不能汗漬，水漬、油漬等影響發揮。保持手指、屏幕的順滑。
6）、和傳統的飛機射擊游戲一樣，此游戲飛機也不是被碰到就會死，而是飛機有一個點，大概就是最中心那一塊，只要不被敵機碰到那一塊，而是碰到兩邊翅膀，那么飛機就不會爆炸，不過這個方法不好掌握，活用的方法是，躲在屏幕的最左或最右，把中心部分隱藏住。
7）、如果飛機打光了，可以向好友索要，如果好友在一定時間沒給你，或者沒有好友給你飛機，其實也不用著急到了一定時間，飛機就可以刷出來了，又能繼續刷分咯。
8）、游戲界面預覽

想體驗游戲的用戶請關注我的公眾號，并在留言上回復，“我要體驗”，我們將隨機抽取幸運玩家。名額有限哦！！！
天選之人才能玩哦

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節點，渲染節點；

?
使用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對應的功能。

由于文章內容較長，富婆已將部分內容拆分，敬請期待下篇（如何制作圖集，ani，prefab，音樂clip資源，游戲部署，游戲上線）。

文中如有錯誤，歡迎各位斧正~~
歡迎關注公眾號【Web前端Talk】在公眾號后臺回復“我要體驗”，讓帥氣的單身的程序猿小哥哥拉你進群體驗游戲~~