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

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

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

一、前言介紹

微信小游戲是基于微信客戶(hù)端的游戲，它即點(diǎn)即玩，無(wú)需下載安裝，體驗(yàn)輕便，可以和微信內(nèi)的好友一起玩，比如PK、圍觀(guān)等，享受小游戲帶來(lái)的樂(lè)趣。那如何開(kāi)發(fā)一款屬于自己的小游戲呢？

源碼地址：github.com/A123asdo11/… （新版ccc已無(wú)法正常使用，需要修復(fù)，文章作者花費(fèi)了大量的時(shí)間和精力，在ccc2.0以上版本進(jìn)行了修復(fù)，并在微信小游戲正常運(yùn)行）

二、微信小游戲飛機(jī)大戰(zhàn)簡(jiǎn)介

1、大事記

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

2、玩法介紹

玩家點(diǎn)擊開(kāi)始游戲并移動(dòng)自己的大飛機(jī)，在躲避迎面而來(lái)的其它飛機(jī)時(shí)，大飛機(jī)通過(guò)發(fā)射炮彈打掉其它小飛機(jī)來(lái)贏取分?jǐn)?shù)。一旦撞上其它飛機(jī)，游戲就結(jié)束。

此時(shí)，界面中會(huì)顯示此次玩家的飛機(jī)大戰(zhàn)分?jǐn)?shù)。點(diǎn)擊歷史成績(jī)后可看到“歷史成績(jī)排行榜”。點(diǎn)擊重新挑戰(zhàn)可繼續(xù)重玩。點(diǎn)擊退出游戲后，回到開(kāi)始游戲等待頁(yè)。

3、游戲介紹

1）、首先要清楚飛機(jī)的分?jǐn)?shù)，小飛機(jī)1000分。 中飛機(jī)4000分。 大飛機(jī)16000分。 盡量別招惹中大飛機(jī)很容易來(lái)不及打爆就下來(lái)了或者后面又跟著中大飛機(jī)。

2）、手機(jī)屏幕要敏感度高，用大屏幕的pad或者長(zhǎng)點(diǎn)的手機(jī)玩比較有優(yōu)勢(shì)。（因?yàn)槟芴崆翱吹角懊娴恼系K物）

3）、要盡量活的長(zhǎng)，安全第一。安全的時(shí)候，就是開(kāi)始比較慢的時(shí)候，可以多打一些小飛機(jī),積累分?jǐn)?shù)；遇到飛船，前面可以出擊，需要擊打一段時(shí)間才能摧毀。

4）、如果吃到了藍(lán)色的雙色炮彈，請(qǐng)不要猶豫，盡量找多的，大的地方打。最好身邊保留一個(gè)炸彈，關(guān)鍵時(shí)刻救急，后面的速度很快， 飛機(jī)很密集。

5）、去洗手，手上、屏幕上不能汗?jié)n，水漬、油漬等影響發(fā)揮。保持手指、屏幕的順滑。

6）、和傳統(tǒng)的飛機(jī)射擊游戲一樣，此游戲飛機(jī)也不是被碰到就會(huì)死，而是飛機(jī)有一個(gè)點(diǎn)，大概就是最中心那一塊，只要不被敵機(jī)碰到那一塊，而是碰到兩邊翅膀，那么飛機(jī)就不會(huì)爆炸，不過(guò)這個(gè)方法不好掌握，活用的方法是，躲在屏幕的最左或最右，把中心部分隱藏住。

7）、如果飛機(jī)打光了，可以向好友索要，如果好友在一定時(shí)間沒(méi)給你，或者沒(méi)有好友給你飛機(jī)，其實(shí)也不用著急到了一定時(shí)間，飛機(jī)就可以刷出來(lái)了，又能繼續(xù)刷分咯。

8）、游戲界面預(yù)覽

想體驗(yàn)游戲的用戶(hù)請(qǐng)關(guān)注我們，并在留言上回復(fù)，“我要體驗(yàn)”，我們將隨機(jī)抽取幸運(yùn)玩家。名額有限哦！！！

天選之人才能玩哦

三、游戲場(chǎng)景設(shè)計(jì)

1）、開(kāi)始場(chǎng)景

A、主界面（公共背景圖，動(dòng)畫(huà)小飛機(jī)）

B、開(kāi)始游戲按鈕

2）、游戲場(chǎng)景

A、英雄機(jī)

①、子彈（無(wú)限，紅色）、超級(jí)子彈（有限，藍(lán)色）、子彈碰撞敵機(jī) 、

②、英雄機(jī)移動(dòng)、子彈跟隨移動(dòng) 、

③、主角與敵機(jī)碰撞

B、敵機(jī) ①、小、中、大敵機(jī)隨機(jī)生成 、、

②、敵機(jī)生命值，獲得分?jǐn)?shù)

C、BUFF

（炸彈）、（超級(jí)子彈，藍(lán)色彈夾）

D、暫停、分?jǐn)?shù)、炸彈夾

3）、GameOver場(chǎng)景

A、主角碰撞敵機(jī)后游戲結(jié)束，展示當(dāng)前獲得分?jǐn)?shù)

B、主界面上方展示歷史最高分?jǐn)?shù)

C、玩家可選擇按鈕，重新挑戰(zhàn)、歷史得分、退出游戲

Cocos creator工具預(yù)覽

目錄結(jié)構(gòu)：

Scene：場(chǎng)景，

Script：腳本，所有腳本都在這里，

Texture：圖片資源以及圖集資源，

Animation：動(dòng)畫(huà)元素，

Prefab：預(yù)載體資源，用于重復(fù)利用節(jié)點(diǎn)

Sound：音樂(lè)資源

層級(jí)管理器

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

四、方案實(shí)現(xiàn) ??

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

1、公共部分 設(shè)計(jì)所有場(chǎng)景自適應(yīng)寬高尺寸，size為w：640，h：1136，選中層級(jí)里的canvas元素

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

2、開(kāi)始頁(yè)

標(biāo)題，新增sprite，拖入“shoot_copyright“

小飛機(jī)動(dòng)畫(huà)，新增animation節(jié)點(diǎn)，將資源管理下animation文件夾下的game_loading拖入至default Clip，clips是可以通過(guò)腳本訪(fǎng)問(wèn)的動(dòng)畫(huà)clip列表，勾選playOnLoad即游戲運(yùn)行后自動(dòng)播放動(dòng)畫(huà)

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

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

代碼說(shuō)明：

this.game_loading.getComponent(cc.Animation);//是獲取當(dāng)前屬性game_loading動(dòng)畫(huà)節(jié)點(diǎn)
gameloading&&gameloading.play();//當(dāng)該節(jié)點(diǎn)對(duì)象存在時(shí)，執(zhí)行動(dòng)畫(huà)播放事件play()
cc.director.preloadScene("main");//使用cc.director導(dǎo)演對(duì)象調(diào)用preloadScene預(yù)加載main場(chǎng)景

3、游戲主頁(yè)（事件拆分）

暫停按鈕，分?jǐn)?shù)，炸彈夾，新增button、label、sprite（子節(jié)點(diǎn)label）； 設(shè)置暫停按鈕普通狀態(tài)和按下等背景圖（達(dá)到按下?tīng)顟B(tài)變化）

綁定點(diǎn)擊事件pauseClick

代碼說(shuō)明：

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

為2時(shí)，游戲繼續(xù)，飛機(jī)、子彈、英雄機(jī)、背景音樂(lè)開(kāi)始執(zhí)行；

分?jǐn)?shù)和炸彈夾展示，英雄機(jī)的子彈碰撞敵機(jī)銷(xiāo)毀后加分、英雄機(jī)主體碰撞BUFF后改變炸彈夾展示

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

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

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

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

name：敵機(jī)名稱(chēng)，
freqTime：敵機(jī)生成時(shí)間（s），
initPollCount：初始對(duì)象池
，prefab：預(yù)制體

有對(duì)象池之后，隨機(jī)生成敵機(jī)，并給每個(gè)敵機(jī)綁定回收機(jī)制

英雄機(jī)與敵機(jī)的碰撞

綠色連接線(xiàn)為多邊緣碰撞，需碰撞組件生成。

子彈生成與碰撞

4、Game Over頁(yè)

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

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

5、歷史成績(jī)頁(yè)

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

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

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

文中如有錯(cuò)誤，歡迎各位斧正~~

歡迎關(guān)注公眾號(hào)【Web前端Talk】在公眾號(hào)后臺(tái)回復(fù)“我要體驗(yàn)”，讓帥氣的單身的程序猿小哥哥拉你進(jìn)群體驗(yàn)游戲~~