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

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

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

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

1、大事記

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

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

3、游戲介紹

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

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

1）、開始場景

A、主界面（公共背景圖，動畫小飛機）

B、開始游戲按鈕

2）、游戲場景

A、英雄機

①、子彈（無限，紅色）、超級子彈（有限，藍色）、子彈碰撞敵機

②、英雄機移動、子彈跟隨移動

③、主角與敵機碰撞

B、敵機
①、小、中、大敵機隨機生成

②、敵機生命值，獲得分數(shù)
C、BUFF

（炸彈）、（超級子彈，藍色彈夾）
D、暫停、分數(shù)、炸彈夾

3）、GameOver場景

A、主角碰撞敵機后游戲結(jié)束，展示當(dāng)前獲得分數(shù)
B、主界面上方展示歷史最高分數(shù)
C、玩家可選擇按鈕，重新挑戰(zhàn)、歷史得分、退出游戲

Cocos creator工具預(yù)覽
目錄結(jié)構(gòu)：

Scene：場景，
Script：腳本，所有腳本都在這里，
Texture：圖片資源以及圖集資源，
Animation：動畫元素，
Prefab：預(yù)載體資源，用于重復(fù)利用節(jié)點
Sound：音樂資源

層級管理器

Canvas：畫布，開發(fā)者用于在畫布中創(chuàng)建精靈，節(jié)點等內(nèi)容
MainCamera：攝像機，玩家觀察游戲世界的窗口，一個場景至少有一個攝像機，用于渲染場景，另外可新增空節(jié)點，UI節(jié)點，渲染節(jié)點；

?
使用cocos creator開發(fā)創(chuàng)建場景scene，分別為：start（開始頁）、main（游戲主頁）、historyScore（歷史分數(shù)頁）、end（游戲結(jié)束頁）

1、公共部分

設(shè)計所有場景自適應(yīng)寬高尺寸，size為w：640，h：1136，選中層級里的canvas元素

canvas層級下創(chuàng)建sprite，并在資源管理器Texture拖動background到spriteFrame

2、開始頁

標(biāo)題，新增sprite，拖入“shoot_copyright“
小飛機動畫，新增animation節(jié)點，將資源管理下animation文件夾下的game_loading拖入至default Clip，clips是可以通過腳本訪問的動畫clip列表，勾選playOnLoad即游戲運行后自動播放動畫

開始按鈕，新增button節(jié)點，自帶label文本節(jié)點，可先設(shè)置按鈕背景圖，再改label為“開始游戲”

點擊開始游戲觸發(fā)場景切換，在資源管理Script文件夾下新增start.js，主要申明動畫節(jié)點對象，properties是腳本對象里的自定義屬性，可用于拖入節(jié)點，編輯等操作，將start.js拖入至層級canvas下，并將game_loading動畫節(jié)點拖入至GameLoading中；button按鈕需設(shè)置Click Events為1，添加層級中的start節(jié)點，設(shè)置函數(shù)

代碼說明：

this.game_loading.getComponent(cc.Animation);//是獲取當(dāng)前屬性game_loading動畫節(jié)點
gameloading&&gameloading.play();//當(dāng)該節(jié)點對象存在時，執(zhí)行動畫播放事件play()
cc.director.preloadScene("main");//使用cc.director導(dǎo)演對象調(diào)用preloadScene預(yù)加載main場景
復(fù)制代碼
3、游戲主頁（事件拆分）
暫停按鈕，分數(shù)，炸彈夾，新增button、label、sprite（子節(jié)點label）；
設(shè)置暫停按鈕普通狀態(tài)和按下等背景圖（達到按下狀態(tài)變化）

綁定點擊事件pauseClick

代碼說明：

根據(jù)當(dāng)前節(jié)點對象eState值判斷是否等于游戲常量值,為1時，游戲暫停，停止飛機、子彈、英雄機、背景音樂執(zhí)行事件；

為2時，游戲繼續(xù)，飛機、子彈、英雄機、背景音樂開始執(zhí)行；

分數(shù)和炸彈夾展示，英雄機的子彈碰撞敵機銷毀后加分、英雄機主體碰撞BUFF后改變炸彈夾展示

英雄機，作為主要節(jié)點，使用sprite作為飛機模型，綁定hero.js，添加polygonCollider碰撞組件，添加animation組件作為英雄機動態(tài)化。

hero.js主要設(shè)置4個屬性，主角碰撞敵機后爆炸預(yù)制資源、游戲結(jié)束音樂、main主函數(shù)節(jié)點、主角子彈組生成

當(dāng)主角碰撞時執(zhí)行onCollisionEnter事件。判斷其碰撞的節(jié)點是BUFF還是敵機。

敵機隨機從頂部外向下生成，共3種敵機，小、中、大；

  name：敵機名稱，
  freqTime：敵機生成時間（s），
  initPollCount：初始對象池，
  prefab：預(yù)制體

有對象池之后，隨機生成敵機，并給每個敵機綁定回收機制

英雄機與敵機的碰撞

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

4、Game Over頁

渲染當(dāng)前分數(shù)，根據(jù)cc.sys.localStorage保存的本地數(shù)據(jù)獲取并設(shè)置label的string屬性

給每個按鈕button綁定對應(yīng)事件

5、歷史成績頁

Sprite作為背景框架列表，scrollview作為滾動容器組件，加上mask遮罩層組件，加上scrollbar實現(xiàn)內(nèi)容在可視區(qū)域內(nèi)展示，場景加載時，會遍歷分數(shù)對象，在根據(jù)cc.instantiate克隆該prefab節(jié)點，用于添加子節(jié)點到scrollContent節(jié)點內(nèi)容中，并初始化該子節(jié)點的展示內(nèi)容score和time；

（end）以上就是所有場景scene對應(yīng)的功能。

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

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