一、基本功能需求

• 萌鳥(niǎo)的飛行與自由落體：
  1. 觸摸界面后能夠上升并且變換為抬頭姿勢(shì)，不做任何操作的情況下自由落體下落，姿勢(shì)變?yōu)橄聣嫚顟B(tài)。
  2. 初始狀態(tài)下若不進(jìn)行任何操作則在一段時(shí)間后自由落體
• 背景的推進(jìn)：原版的《Flappy Bird》中背景為靜態(tài)，此處做成動(dòng)態(tài)效果，實(shí)現(xiàn)背景的動(dòng)態(tài)推薦，然并卵。
• 水管的推進(jìn)與顯示：水管和背景墻一樣，能夠循環(huán)推進(jìn)，并且中間間隙能夠隨機(jī)變換位置，但寬度一致。
• 勝負(fù)規(guī)則：當(dāng)萌鳥(niǎo)與水管、地面觸及時(shí)游戲結(jié)束，并彈出面板。
• 數(shù)據(jù)采集：能夠采集到鼠標(biāo)點(diǎn)擊數(shù)字以及跨越過(guò)的水管數(shù)量。
• 難度系數(shù)：隨著時(shí)間的推移增加水管推進(jìn)速率（實(shí)在懶得算，設(shè)置對(duì)數(shù)函數(shù)分分鐘實(shí)現(xiàn)）。

二、思路拆解和實(shí)現(xiàn)

1. 萌鳥(niǎo)飛行動(dòng)作的拆解：

方案A：使用動(dòng)態(tài)面板，命名為bird：設(shè)定三種狀態(tài)的萌鳥(niǎo)state，分別為初始狀態(tài)，上揚(yáng)以及下墜，初始狀態(tài)水平線夾角0°，上下飛行狀態(tài)下各自為45°以及-45° 。

方案B：image組件自帶的enable以及select功能變換圖片（這個(gè)水深，觸及到image組件的某些機(jī)制，很不幸最初我嘗試了下這個(gè)坑爹的東西）

2. 萌鳥(niǎo)動(dòng)作的實(shí)現(xiàn)：

• 注意：起飛之后，狀態(tài)的變化僅僅是上升與下降的狀態(tài)變化，當(dāng)然也可以不要下降的動(dòng)作，這樣會(huì)更萌。
• 起飛：
  • 動(dòng)作實(shí)現(xiàn)：設(shè)置全部界面的onPageclick事件，綁定上升的動(dòng)作，這里經(jīng)過(guò)多次嘗試最終選擇了：move by（0，-70）swing 200ms，親測(cè)數(shù)值和交互效果著實(shí)感人，如果用linear線性效果去實(shí)現(xiàn)我也不攔著你，這里會(huì)遇到Axure中自帶交互動(dòng)畫(huà)的缺點(diǎn)：所有時(shí)間經(jīng)由一個(gè)隊(duì)列按序進(jìn)行，只要進(jìn)入程序隊(duì)列就得強(qiáng)制執(zhí)行，沒(méi)有中斷機(jī)制的引入，于是以下場(chǎng)景就會(huì)時(shí)常出現(xiàn)：啪啪啪地一頓操作之后，呵呵噠，你會(huì)發(fā)現(xiàn)這笨鳥(niǎo)升天了！關(guān)鍵是還下不來(lái)！所以只能把這款Flappy Bird當(dāng)作是低配版demo，娛樂(lè)自己。
  • 上下文動(dòng)作：附帶上升buff，記得設(shè)置動(dòng)態(tài)面板狀態(tài)為up，保證能夠正常仰望天空。
• 自由落體：當(dāng)笨鳥(niǎo)升天后，由于受到重力的影響只能啪啪啪往下掉，設(shè)置之前的bird動(dòng)態(tài)面板為down狀態(tài)，并且設(shè)置bird的onMove事件為：move This by (0，15) swing 70ms，注意啦:此處onMove事件在move過(guò)程中不斷觸發(fā)，只需設(shè)置步進(jìn)就可實(shí)現(xiàn)連續(xù)的動(dòng)畫(huà)效果，這也是Axure制作小游戲的關(guān)鍵！這時(shí)候你就不禁感概：不學(xué)點(diǎn)編程還玩?zhèn)€球互聯(lián)網(wǎng)？就算是名cv工程師也得會(huì)點(diǎn)前端，創(chuàng)業(yè)公司搬磚沒(méi)有不會(huì)的。

3. 背景墻的推進(jìn)邏輯：

方案A:采用最為土的動(dòng)態(tài)面板輪播效果，設(shè)置repeat屬性，設(shè)置兩個(gè)相同背景的state，不斷輪播，注意設(shè)置切換時(shí)間為15000ms，大概是緩慢移動(dòng)的概念，勉強(qiáng)實(shí)現(xiàn)一個(gè)低配版的推進(jìn)效果：會(huì)稱之為低配版，是因?yàn)锳xure自帶的動(dòng)畫(huà)效果在切換過(guò)程的動(dòng)畫(huà)不是線性平滑地移動(dòng)，而是帶有加速效果的。

方案B:另一種做法是準(zhǔn)備兩張一樣的背景計(jì)為A和B，然后不斷向左移動(dòng)A圖片，當(dāng)A完全劃出界面的左邊界時(shí)自動(dòng)將A移動(dòng)到界面的右邊界，同理B也是一樣的邏輯，循環(huán)推進(jìn)，完美實(shí)現(xiàn)推進(jìn)效果。

4. 前臺(tái)水管的推進(jìn)邏輯和缺口實(shí)現(xiàn)：

水管的推進(jìn)過(guò)程：采用了上述推進(jìn)方式的PlanB，即隊(duì)尾到隊(duì)頭循環(huán)重現(xiàn)的做法，這里有幾點(diǎn)要說(shuō)明：

• 初始情況下所有水管均是隱身的狀態(tài)（set invisible），當(dāng)水管的左邊界觸及界面右側(cè)邊界后show出來(lái)，不斷推進(jìn)；當(dāng)水管的右邊界觸及界面的左邊界時(shí)，隱藏起來(lái)。
• 實(shí)現(xiàn)了基本的推進(jìn)后要實(shí)現(xiàn)循環(huán)推進(jìn)還得依靠onShow和onHide兩個(gè)事件，這里就需要tip了：新建一個(gè)輔助面板來(lái)承接Show和Hide的動(dòng)作變化狀態(tài)，承擔(dān)一個(gè)小型控制器的責(zé)任，當(dāng)水管是由show的狀態(tài)變?yōu)閔ide的狀態(tài)（水管移動(dòng)到界面左側(cè)啦）則觸發(fā)onHides事件，這時(shí)候我們要做的是將上下水管挪到右側(cè)邊界，之后再將它show出來(lái)觸發(fā)onShow事件，實(shí)現(xiàn)了循環(huán)的效果。
  • 注意水管數(shù)量的問(wèn)題：這里顧及到游戲難度以及界面寬度，同屏水管數(shù)量為3個(gè)，每次水管運(yùn)行時(shí)同屏最多顯示3個(gè)水管，并且需要顧及到出場(chǎng)間隔的問(wèn)題：假設(shè)有A、B、C三個(gè)水管，則當(dāng)A水管消失后C水管剛剛進(jìn)入屏幕，需要A水管再繼續(xù)移動(dòng)一段距離才重置到界面右側(cè)或者可以設(shè)置等待時(shí)間。水管的移動(dòng)速度推薦設(shè)置：move This by (-5，0) linear 100ms，感覺(jué)棒棒噠。BTW，每個(gè)上下水管的組合分別由一個(gè)簡(jiǎn)易控制器實(shí)現(xiàn)循環(huán)。

缺口的實(shí)現(xiàn)：想想也知道肯定需要?jiǎng)佑秒S機(jī)數(shù)啦，搬出JavaSript的函數(shù)：Math.random()生成一個(gè)介于0到1的隨機(jī)數(shù)，缺口的寬度我們?cè)O(shè)定為某個(gè)數(shù)值，這里我選擇100，可以根據(jù)需要調(diào)整，我們要做的是讓上下水管根據(jù)這個(gè)隨機(jī)數(shù)調(diào)整出一定的缺口，方案由很多種，這里我選擇最土的辦法：選定一個(gè)隨機(jī)數(shù)A=0~99，將均勻分布在屏幕上下的兩個(gè)水管分別移動(dòng)A以及（100 – A）的距離，其實(shí)是為了降低難度，降低水管缺口的波動(dòng)，但是實(shí)際上游戲難度真心呵呵噠，玩了你就知道啦！具體隨機(jī)數(shù)生成的公式為：Math.floor(Math.random()*100)，用個(gè)floor取隨機(jī)數(shù)的下邊界，得到0~99中的某個(gè)數(shù)值。BTW，每個(gè)水管有不同的缺口，所以你懂的，在之前的水管onShow事件中就要重新更新這個(gè)隨機(jī)數(shù)啦。

5. 勝負(fù)判定與彈窗

當(dāng)笨鳥(niǎo)觸及水管、地面時(shí)，游戲結(jié)束，水管停止推進(jìn)，笨鳥(niǎo)不再動(dòng)彈，并彈出game over面板并且出現(xiàn)retry選項(xiàng)，點(diǎn)擊可以重新開(kāi)始：首先鋪好地面，在bird面板中的onMove事件中設(shè)置前置條件:if This is not over XXX && XXX && XXX…邏輯上是如果沒(méi)觸碰到地面或是水管，則可以移動(dòng)，否則，設(shè)置一個(gè)標(biāo)志位用作控制信號(hào)，提示各個(gè)部件游戲玩完啦，這里我用isOver來(lái)判定，如果為0則游戲進(jìn)行中，為1則游戲結(jié)束。游戲結(jié)束時(shí)需要告知以下組件，一個(gè)是笨鳥(niǎo)的上升動(dòng)作，一個(gè)是水管的推進(jìn)動(dòng)作，當(dāng)isOver為1時(shí)就都憋動(dòng)啦，老實(shí)呆著，實(shí)現(xiàn)的方式也是設(shè)置前置條件，這里就不贅述啦。

6. 數(shù)值記錄：

點(diǎn)擊計(jì)數(shù)可做可不做，在onPageClick事件中設(shè)置一個(gè)計(jì)數(shù)器采集click發(fā)生的次數(shù)即可；另一個(gè)跨越水管的計(jì)數(shù)方案是這樣的：每個(gè)水管的右側(cè)邊界添加一條垂線用作FinishLine，當(dāng)笨鳥(niǎo)觸及這條線后計(jì)數(shù)+1，這里需要讓垂線跟隨水管同步移動(dòng)和重置循環(huán)，并且存在3條。

三、后續(xù)總結(jié)

至此，《Flappy Bird》總算完成了90%。回顧下所需要的知識(shí)：對(duì)各種JS函數(shù)的了解，事件驅(qū)動(dòng)機(jī)制的了解，動(dòng)態(tài)面板的了解，Axure交互機(jī)制的了解等等。這些東西的學(xué)習(xí)需要一定的時(shí)間，但也不是很難，我相信你也可以完成的。

下載最新的Axure>>

本文轉(zhuǎn)載自，作者小野野野