無聊嗎，寫個【飛機大戰】來玩吧

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

這篇文章來自我司的王老吉同窗，歡迎你們關注公衆號，在公衆號後臺回覆「我要體驗」進羣，就能夠親自體驗大神（帥氣且單身）用JavaScript寫的小程序遊戲哦~~(貌似掘金大老爺們比較多，這麼說不太好~，趕明給他寫個相親帖)

1、前言介紹

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

2、微信小遊戲飛機大戰簡介

一、大事記

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

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

三、遊戲介紹

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

想體驗遊戲的用戶請關注個人公衆號，並在留言上回復，「我要體驗」，咱們將隨機抽取幸運玩家。名額有限哦！！！
天選之人才能玩哦

3、遊戲場景設計

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

4、方案實現

 
使用cocos creator開發建立場景scene，分別爲：start（開始頁）、main（遊戲主頁）、historyScore（歷史分數頁）、end（遊戲結束頁）

一、公共部分

設計全部場景自適應寬高尺寸，size爲w：640，h：1136，選中層級裏的canvas元素

canvas層級下建立sprite，並在資源管理器Texture拖動background到spriteFrame

二、開始頁

標題，新增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場景
複製代碼
三、遊戲主頁（事件拆分）
暫停按鈕，分數，炸彈夾，新增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：預製體

有對象池以後，隨機生成敵機，並給每一個敵機綁定回收機制

英雄機與敵機的碰撞

綠色鏈接線爲多邊緣碰撞，需碰撞組件生成。
子彈生成與碰撞

四、Game Over頁

渲染當前分數，根據cc.sys.localStorage保存的本地數據獲取並設置label的string屬性

給每一個按鈕button綁定對應事件

五、歷史成績頁

Sprite做爲背景框架列表，scrollview做爲滾動容器組件，加上mask遮罩層組件，加上scrollbar實現內容在可視區域內展現，場景加載時，會遍歷分數對象，在根據cc.instantiate克隆該prefab節點，用於添加子節點到scrollContent節點內容中，並初始化該子節點的展現內容score和time；

（end）以上就是全部場景scene對應的功能。

因爲文章內容較長，富婆已將部份內容拆分，敬請期待下篇（如何製做圖集，ani，prefab，音樂clip資源，遊戲部署，遊戲上線）。

文中若有錯誤，歡迎各位斧正~~歡迎關注公衆號【Web前端Talk】在公衆號後臺回覆「我要體驗」，讓帥氣的單身的程序猿小哥哥拉你進羣體驗遊戲~~