看到標(biāo)題想歪的，請(qǐng)先面壁三秒鐘，我向來是一位嚴(yán)肅正經(jīng)有節(jié)操的人。

話說，前段時(shí)間忽然懷念微信5.0的黑白版的飛機(jī)大戰(zhàn)，進(jìn)微信游戲大廳尋了個(gè)遍，好像找不到了，有種物是人非的趕腳。突發(fā)奇想利用業(yè)余時(shí)間用Axure打造了一個(gè)飛機(jī)大戰(zhàn)，在空虛寂寞冷的時(shí)候可以擼一把。效果如下方左圖：

一、功能描述

1. 有無限多的敵機(jī)無恥地向你撲面而來；
2. 你用鍵盤的方向鍵控制戰(zhàn)斗機(jī)參加戰(zhàn)斗（被敵機(jī)撞擊算報(bào)廢，你一共有3架戰(zhàn)斗機(jī)）；
3. 戰(zhàn)斗機(jī)可以源源不斷地向敵機(jī)發(fā)射子彈；
4. 計(jì)分系統(tǒng)（打掉一架敵機(jī)得100分）；
5. 難度等級(jí)系統(tǒng)（打10架敵機(jī)增加一個(gè)難度等級(jí)，敵機(jī)飛行速度加快）；

因?yàn)樯婕爸R(shí)點(diǎn)比較多，又希望將他們描述清楚，所以本文只實(shí)現(xiàn)上方右圖的效果。①讓敵機(jī)循環(huán)飛行②讓子彈連續(xù)發(fā)射。請(qǐng)基礎(chǔ)較好的童鞋見諒。

二、素材準(zhǔn)備

敵機(jī).png、戰(zhàn)斗機(jī).png、子彈.png（為了效果好，老老實(shí)實(shí)用PS摳出2個(gè)透明背景的飛機(jī)，此處省略N個(gè)字）、拉出四個(gè)矩形用途和尺寸分別為：450*530px作為背景、2個(gè)450*42px分別作為地面和天花板、開始按鈕。將敵機(jī).png、戰(zhàn)斗機(jī).png、子彈.png按照下圖方式打包成“戰(zhàn)斗機(jī)+子彈”、“敵機(jī)-殼”兩個(gè)動(dòng)態(tài)面板。

三、構(gòu)建敵機(jī)循環(huán)飛行效果

實(shí)現(xiàn)方法：

用一個(gè)空的動(dòng)態(tài)面板命名為“循環(huán)”，協(xié)助敵機(jī)實(shí)現(xiàn)循環(huán)飛行。流程開始后，設(shè)置動(dòng)態(tài)面板“循環(huán)”顯示→“循環(huán)”顯示后觸發(fā)：“敵機(jī)-殼”復(fù)位：移動(dòng)敵機(jī)到界面頂部絕對(duì)位置（范圍內(nèi)隨機(jī),0）的位置and啟動(dòng)飛機(jī)：相對(duì)位置移動(dòng)敵機(jī)（0,1），“敵機(jī)-殼”在移動(dòng)的情況下設(shè)置用例→如果“敵機(jī)-殼”撞擊到地面，隱藏“循環(huán)”，“循環(huán)”隱藏后觸發(fā)顯示“循環(huán)”的用例→“敵機(jī)-殼”未接觸到地面，則繼續(xù)向下飛行，從而達(dá)到敵機(jī)飛行的循環(huán)。具體流程圖如下所示：

在上述流程圖中，紅色的閉環(huán)促進(jìn)敵機(jī)不斷地繼續(xù)向前飛行，藍(lán)色的閉環(huán)促進(jìn)敵機(jī)不斷重現(xiàn)。

下面貼出“循環(huán)”和“敵機(jī)-殼”的交互用例

四、構(gòu)建子彈連續(xù)射擊效果

根據(jù)同樣的原理，我們可以做出子彈循環(huán)向上飛行的樣子。區(qū)別在于①子彈飛行的方向在縱坐標(biāo)的負(fù)方向。②子彈飛行速度較快。③子彈在“子彈軌道”這個(gè)動(dòng)態(tài)面板里飛行。因此子彈在移動(dòng)時(shí)觸發(fā)每一個(gè)移動(dòng)單位是(0,-20)，子彈撞擊天花板之后復(fù)位的位置是絕對(duì)位置(0,390)。具體用例不在此復(fù)述。

五、函數(shù)講解

在上述用例中出現(xiàn)兩處函數(shù)，在此進(jìn)行簡單講解

1、敵機(jī)撞擊地面后，觸發(fā)“循環(huán)”對(duì)敵機(jī)進(jìn)行復(fù)位的用例

[[Math.floor(Math.random()*300+80)]]

Math.random()函數(shù)的作用是在[0-1]區(qū)間產(chǎn)生一個(gè)任意數(shù)，這個(gè)用法與該函數(shù)在Java或js里都是相通的。要函數(shù)返回指定范圍的隨機(jī)數(shù)(m-n之間)的公式如是：Math.random()*(n-m)+m；而在本文中，我們希望敵機(jī)在[0,450]區(qū)間產(chǎn)生隨機(jī)數(shù)，因此理論上應(yīng)該是Math.random()*450，其中450是背景矩形的寬度，但是由于Axure認(rèn)為元件的坐標(biāo)就是元件從左上角頂點(diǎn)的坐標(biāo)，而敵機(jī)自身的寬度為72px，因此正確的表達(dá)式應(yīng)該為Math.random()*(450-72)，本人在試驗(yàn)中發(fā)現(xiàn)疑似由于瀏覽器的兼容問題，這樣控制范圍仍然會(huì)出現(xiàn)飛機(jī)飛出范圍外，因此將范圍進(jìn)行適當(dāng)縮小最終設(shè)定的公式定位文中的數(shù)據(jù)。

Math.floor()是向下取整的函數(shù)，由于Math.random()產(chǎn)生的是多位小數(shù)。因此在取整函數(shù)里嵌套一個(gè)隨機(jī)函數(shù)的目的是在一定范圍內(nèi)產(chǎn)生一個(gè)隨機(jī)整數(shù)，得益于這兩個(gè)函數(shù)的使用，才讓敵機(jī)能在不同軌道上飛行。

2、敵機(jī)正常飛行用例中的函數(shù)

[[Math.log(level)+0.5]]

寫到此我居然忘了一件重要的事情，為以后完善游戲的難度系統(tǒng)做準(zhǔn)備，我們應(yīng)該建立兩個(gè)全局變量“l(fā)evel”和“fighter”通過“l(fā)evel”的值來控制敵機(jī)飛行速度，通過“fighter”的值來檢測戰(zhàn)斗機(jī)剩余數(shù)量，從而隨時(shí)判斷游戲是否結(jié)束。在點(diǎn)擊”開始游戲”的時(shí)候給”level”賦值2，給”fighter”賦值3這是初始化數(shù)據(jù)?；氐胶瘮?shù)的話題，這個(gè)函數(shù)的值最終將成為敵機(jī)在固定時(shí)間內(nèi)（用例執(zhí)行的時(shí)間是1ms固定不變）飛行的距離，也就是說敵機(jī)的飛行速度成正比。在本游戲中預(yù)想設(shè)定每擊落10架敵機(jī)level的值加1，這樣不同level下，敵機(jī)的飛行速度是成線性增長的。我們先來回顧一下中學(xué)時(shí)期學(xué)到關(guān)于對(duì)數(shù)函數(shù)和直線函數(shù)曲線的區(qū)別：

從上圖不難看出，我使用對(duì)數(shù)函數(shù)的目的是為了控制敵機(jī)飛行速度的增量。拉長用戶可升級(jí)的空間，增加游戲的可玩性。在Axure里[[Math.log(x)]]函數(shù)使用數(shù)學(xué)常量e作為對(duì)數(shù)的底(e約為2.71828)，因此范圍的只一定為正數(shù)。但是當(dāng)x比較小的時(shí)候log(x)返回的值仍然比較小這就意味著在前幾個(gè)level里飛機(jī)的飛行速度非常慢，近乎龜速，用戶會(huì)沒耐心玩，游戲可玩性不高。這也是為什么我會(huì)在函數(shù)后面加一個(gè)常量0.5的原因。

六、寫在最后

希望感興趣的同學(xué)別心急，先按跟著本文的進(jìn)展動(dòng)起來，讓敵機(jī)起飛，讓子彈飛一會(huì)兒！后面會(huì)更精彩。

最后照舊，獻(xiàn)上本文效果的rp源文件，需要更多溝通的童鞋，歡迎來公眾號(hào)iambin找我。

作者提供源：

鏈接：http://pan.baidu.com/s/1hrgjWxA? 密碼：nco3

人人官方源：

鏈接：http://pan.baidu.com/s/1c1fCqCo 密碼：kue6

作者：@陳濱淋，國內(nèi)某知名電商公司產(chǎn)品總監(jiān)，起點(diǎn)學(xué)院北京1508期優(yōu)秀學(xué)員。

本文由人人都是產(chǎn)品經(jīng)理專欄作家 @陳濱淋（微信公眾號(hào)：iambin） 獨(dú)家發(fā)布于人人都是產(chǎn)品經(jīng)理?。未經(jīng)人人都是產(chǎn)品經(jīng)理許可，禁止轉(zhuǎn)載。違者追究責(zé)任，謝謝合作。