一、基本功能需求

• 萌鳥的飛行與自由落體：
  1. 觸摸界面后能夠上升并且變換為抬頭姿勢，不做任何操作的情況下自由落體下落，姿勢變為下墜狀態。
  2. 初始狀態下若不進行任何操作則在一段時間后自由落體
• 背景的推進：原版的《Flappy Bird》中背景為靜態，此處做成動態效果，實現背景的動態推薦，然并卵。
• 水管的推進與顯示：水管和背景墻一樣，能夠循環推進，并且中間間隙能夠隨機變換位置，但寬度一致。
• 勝負規則：當萌鳥與水管、地面觸及時游戲結束，并彈出面板。
• 數據采集：能夠采集到鼠標點擊數字以及跨越過的水管數量。
• 難度系數：隨著時間的推移增加水管推進速率（實在懶得算，設置對數函數分分鐘實現）。

二、思路拆解和實現

1. 萌鳥飛行動作的拆解：

方案A：使用動態面板，命名為bird：設定三種狀態的萌鳥state，分別為初始狀態，上揚以及下墜，初始狀態水平線夾角0°，上下飛行狀態下各自為45°以及-45° 。

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

2. 萌鳥動作的實現：

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

3. 背景墻的推進邏輯：

方案A:采用最為土的動態面板輪播效果，設置repeat屬性，設置兩個相同背景的state，不斷輪播，注意設置切換時間為15000ms，大概是緩慢移動的概念，勉強實現一個低配版的推進效果：會稱之為低配版，是因為Axure自帶的動畫效果在切換過程的動畫不是線性平滑地移動，而是帶有加速效果的。

方案B:另一種做法是準備兩張一樣的背景計為A和B，然后不斷向左移動A圖片，當A完全劃出界面的左邊界時自動將A移動到界面的右邊界，同理B也是一樣的邏輯，循環推進，完美實現推進效果。

4. 前臺水管的推進邏輯和缺口實現：

水管的推進過程：采用了上述推進方式的PlanB，即隊尾到隊頭循環重現的做法，這里有幾點要說明：

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

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

5. 勝負判定與彈窗

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

6. 數值記錄：

點擊計數可做可不做，在onPageClick事件中設置一個計數器采集click發生的次數即可；另一個跨越水管的計數方案是這樣的：每個水管的右側邊界添加一條垂線用作FinishLine，當笨鳥觸及這條線后計數+1，這里需要讓垂線跟隨水管同步移動和重置循環，并且存在3條。

三、后續總結

至此，《Flappy Bird》總算完成了90%?；仡櫹滤枰闹R：對各種JS函數的了解，事件驅動機制的了解，動態面板的了解，Axure交互機制的了解等等。這些東西的學習需要一定的時間，但也不是很難，我相信你也可以完成的。

下載最新的Axure>>

本文轉載自，作者小野野野