這是作者第三次發(fā)布有關(guān)axure游戲的內(nèi)容了，相比較前兩次而言，此次的設(shè)計更加完善，難度相應(yīng)的也要高很多。游戲基本上已經(jīng)趨于完整，加入了game over的判定，希望大家在游戲能夠獲得高分的同時也能夠?qū)W會axure的復(fù)雜用法。

作者之前已經(jīng)發(fā)布過兩款有關(guān)axure的小游戲了，即《有趣的Axure案例：打地鼠游戲的設(shè)計》，《有趣的Axure案例：釣魚游戲的設(shè)計》。如果覺得該實(shí)例的難度比較高可以嘗試之前的實(shí)例，尤其是打地鼠，實(shí)現(xiàn)起來比較簡單。如果不做小錘的動作，甚至可以直接設(shè)置地鼠為點(diǎn)擊后隨機(jī)重置，整個游戲即可以制作完成。

本實(shí)例的難點(diǎn)主要在于畫布的運(yùn)動循環(huán)以及水管的運(yùn)動和隨機(jī)長度。最后要說的是，本實(shí)例并不是基礎(chǔ)操作，需要有不錯的axure基礎(chǔ)才可以制作，制作本實(shí)例應(yīng)該具備以下一些技能。

• 熟悉動態(tài)面板，知道是state是什么意思；
• 知道函數(shù)的存在，在可以百度的情況下能夠使用函數(shù)；
• 熟悉全局變量以及局部變量；
• 熟悉常用的循環(huán)觸發(fā)模式。

一、成果展示

1. 游戲結(jié)束展示

上圖是像素鳥游戲失敗之后的提示界面，可以刷新后再開始。之所以看起來gif圖很奇怪是因?yàn)槿绻耆浿疲瑘D片的體積將會達(dá)到10M以上，無法上傳，所以就有了這個ppt感的演示畫面。

2. 難度修改展示

難度修改可以通過點(diǎn)擊鍵盤上的數(shù)字1、2、3來直接進(jìn)行修改，也可以點(diǎn)擊游戲右下角的下拉菜單進(jìn)行修改。且修改是即時生效的，即修改后的游戲難度會立刻發(fā)生改變，同時分?jǐn)?shù)的評定也會隨之而發(fā)生改變。難度越高水管的高度越高，同時游戲每秒鐘得分也會隨之增加。

游戲交互：

• 點(diǎn)擊“點(diǎn)擊我向上飛”可以讓小鳥向上飛；
• 游戲開始后小鳥即自動下墜；
• 小鳥碰到障礙物或者地面將會死亡并播放死亡效果；
• 只要游戲進(jìn)行，得分就會增加，小鳥死亡之后得分停止變化且會將得分顯示出來；
• 刷新網(wǎng)頁之后可以重新開始游戲；
• 通過鍵盤上的1,2,3可以調(diào)節(jié)游戲難度，也可以通過鼠標(biāo)點(diǎn)擊選擇難度，難度選擇之后立即生效；
• 難度的增加帶來的變化就是水管的邊長；
• 高難度得分速度也會隨之加快，難度越大，得分越快；
• 開始挑戰(zhàn)吧！

二、設(shè)計方法

1. 基礎(chǔ)素材的引入

第一步依然是找素材，找素材的方式和以前一樣，即在百度中搜索背景，小鳥以及水管，然后將其剪裁到合適的大小并加載到axure中來。接著繪制控制小鳥的按鍵，得分面板，以及難度選擇下拉菜單。在難度下拉菜單中新建三個難度級別，依次為難度一，難度二，難度三。

2. 背景自動循環(huán)設(shè)計

背景自動循環(huán)的方式設(shè)置起來很簡單，但是方式不是很容易想到。操作分為兩步，第一步是移動背景圖片，第二步是將該圖片歸位。

這樣就可以給人一種似乎背景一直在移動的感覺，當(dāng)然圖片的長度需要長于動態(tài)面板的長度，否則就有可能看到空白區(qū)域。當(dāng)圖片不夠長的時候，可以把圖片復(fù)制并接在后面就可以了。

當(dāng)然上述方法能夠?qū)崿F(xiàn)的一個關(guān)鍵因素就是背景圖片本身是比較單調(diào)的，這樣循環(huán)利用沒有太大的問題。如果背景圖片很復(fù)雜的話，循環(huán)的瑕疵就很嚴(yán)重了。

3. 水管的循環(huán)

水管的制作是上下分開的，因?yàn)橐紤]水管的隨機(jī)長度，如果不設(shè)置隨機(jī)長度，那么直接可以將其和背景綁定一次實(shí)現(xiàn)整個過程。這樣的效果比較單調(diào)，但是難度將會大大減小。

相信看過之前兩個游戲?qū)嵗淖x者，已經(jīng)不會滿足于僅僅只是做一個綁定的水管效果，讓我們來做更加復(fù)雜的樣式。

這里需要用到一個以前沒有用過的功能，即觸發(fā)效果?？梢钥吹皆搫幼鞯淖詈笠徊绞鞘髽?biāo)單擊時，on this即一個循環(huán)觸發(fā)。shangbu是上部水管的名字，移動方式和背景是一樣的，這樣就不會出現(xiàn)水管在背景上滑動的情況。當(dāng)移動到最左端的時候，復(fù)位回（800,0）然后利用隨機(jī)函數(shù)設(shè)置尺寸。

這里公式中是有l(wèi)evel這一項(xiàng)的，因此通過level的改變即可以實(shí)現(xiàn)尺寸的整體改變，下方的水管方式和上方相同。

4. 難度選擇的實(shí)現(xiàn)

上面已經(jīng)提到了尺寸設(shè)置公式里面含有l(wèi)evel，因此只要改變level的大小就可以實(shí)現(xiàn)水管長度的改變，設(shè)置方法如上所示。難度三的時候level達(dá)到了1.5，即水管的長度將會達(dá)到難度1的1.5倍。不過因?yàn)槠渲羞€是含有隨機(jī)函數(shù)的，所以只能說平均長度應(yīng)該是難度1的1.5倍。

5. 得分的設(shè)計

得分的設(shè)置還是相對簡單的，其實(shí)就是隨著時間的自加運(yùn)算。此外，此處將level混了進(jìn)去，讓用戶的難度影響到得分速度，難度越高，得分也會越高。

6. 小鳥的設(shè)置

做到這里，基本面板就有了，但是最關(guān)鍵的像素鳥還沒有加進(jìn)來。小鳥實(shí)際上是不會進(jìn)行橫向運(yùn)動的，因此只需要處理其y坐標(biāo)即可，方法也很簡單。

通過上面的設(shè)置，小鳥將會向下運(yùn)動。不過，小鳥一直下落也是不可以的，我們還需要增加它上升的功能，即每點(diǎn)擊一次，小鳥就會向上飛一點(diǎn)。

該觸發(fā)直接設(shè)置在點(diǎn)擊的按鈕上，觸發(fā)后的動作為小鳥在50毫秒中向上移動50個像素，接下來就是碰撞動作判定了。

碰撞動作判定前兩個實(shí)例中都有，這里也一樣，即設(shè)置條件。三個條件依次為碰到上部水管，碰到下部水管，撞到地面。當(dāng)碰撞的時候，小鳥落到地面并實(shí)現(xiàn)旋轉(zhuǎn)的動畫。

7. 游戲結(jié)束提示

將兩個提示放在合適的位置并進(jìn)行隱藏，只有在失敗的時候才觸發(fā)顯示，且將最終得分通過全局變量顯示出來?！霸賮硪淮巍钡娘@示則延后2000毫秒，這樣的體驗(yàn)更佳。

總結(jié)

本實(shí)例的實(shí)際制作要比上面提到的復(fù)雜很多，這里僅僅是思路的表達(dá)。很多常規(guī)的操作以及具體的參數(shù)，都沒有在文章之中體現(xiàn)出來。相信熟悉axure的讀者，可以按照這個思路重復(fù)出來，但是如果是初學(xué)者難度就很高了。

最后希望大家能夠喜歡上axure這款最著名的原型工具。

#專欄作家#

馬璐，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注產(chǎn)品設(shè)計以及用戶體驗(yàn)，力求在技術(shù)一定的情況下將產(chǎn)品做到極致，充分發(fā)揮技術(shù)的潛能。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自作者