這是作者第三次發布有關Axure遊戲的内容了，相比較前兩次而言，此次的設計更加完善，難度相應的也要高很多。遊戲基本上已經趨于完整，加入了game over的判定，希望大家在遊戲能夠獲得高分的同時也能夠學會axure的複雜用法。

作者之前已經發布過兩款有關axure的小遊戲了，即《有趣的Axure案例：打地鼠遊戲的設計》，《有趣的Axure案例：釣魚遊戲的設計》。如果覺得該實例的難度比較高可以嘗試之前的實例，尤其是打地鼠，實現起來比較簡單。如果不做小錘的動作，甚至可以直接設置地鼠為點擊後随機重置，整個遊戲即可以制作完成。

本實例的難點主要在于畫布的運動循環以及水管的運動和随機長度。最後要說的是，本實例并不是基礎操作，需要有不錯的axure基礎才可以制作，制作本實例應該具備以下一些技能。

• 熟悉動态面闆，知道是state是什麼意思；
• 知道函數的存在，在可以百度的情況下能夠使用函數；
• 熟悉全局變量以及局部變量；
• 熟悉常用的循環觸發模式。

一、成果展示

1. 遊戲結束展示

上圖是像素鳥遊戲失敗之後的提示界面，可以刷新後再開始。之所以看起來gif圖很奇怪是因為如果完全錄制，圖片的體積将會達到10M以上，無法上傳，所以就有了這個ppt感的演示畫面。

2. 難度修改展示

難度修改可以通過點擊鍵盤上的數字1、2、3來直接進行修改，也可以點擊遊戲右下角的下拉菜單進行修改。且修改是即時生效的，即修改後的遊戲難度會立刻發生改變，同時分數的評定也會随之而發生改變。難度越高水管的高度越高，同時遊戲每秒鐘得分也會随之增加。

遊戲交互：

• 點擊“點擊我向上飛”可以讓小鳥向上飛；
• 遊戲開始後小鳥即自動下墜；
• 小鳥碰到障礙物或者地面将會死亡并播放死亡效果；
• 隻要遊戲進行，得分就會增加，小鳥死亡之後得分停止變化且會将得分顯示出來；
• 刷新網頁之後可以重新開始遊戲；
• 通過鍵盤上的1,2,3可以調節遊戲難度，也可以通過鼠标點擊選擇難度，難度選擇之後立即生效；
• 難度的增加帶來的變化就是水管的邊長；
• 高難度得分速度也會随之加快，難度越大，得分越快；
• 開始挑戰吧！

二、設計方法

1. 基礎素材的引入

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

2. 背景自動循環設計

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

這樣就可以給人一種似乎背景一直在移動的感覺，當然圖片的長度需要長于動态面闆的長度，否則就有可能看到空白區域。當圖片不夠長的時候，可以把圖片複制并接在後面就可以了。

當然上述方法能夠實現的一個關鍵因素就是背景圖片本身是比較單調的，這樣循環利用沒有太大的問題。如果背景圖片很複雜的話，循環的瑕疵就很嚴重了。

3. 水管的循環

水管的制作是上下分開的，因為要考慮水管的随機長度，如果不設置随機長度，那麼直接可以将其和背景綁定一次實現整個過程。這樣的效果比較單調，但是難度将會大大減小。

相信看過之前兩個遊戲實例的讀者，已經不會滿足于僅僅隻是做一個綁定的水管效果，讓我們來做更加複雜的樣式。

這裡需要用到一個以前沒有用過的功能，即觸發效果。可以看到該動作的最後一步是鼠标單擊時，on this即一個循環觸發。shangbu是上部水管的名字，移動方式和背景是一樣的，這樣就不會出現水管在背景上滑動的情況。當移動到最左端的時候，複位回（800,0）然後利用随機函數設置尺寸。

這裡公式中是有level這一項的，因此通過level的改變即可以實現尺寸的整體改變，下方的水管方式和上方相同。

4. 難度選擇的實現

上面已經提到了尺寸設置公式裡面含有level，因此隻要改變level的大小就可以實現水管長度的改變，設置方法如上所示。難度三的時候level達到了1.5，即水管的長度将會達到難度1的1.5倍。不過因為其中還是含有随機函數的，所以隻能說平均長度應該是難度1的1.5倍。

5. 得分的設計

得分的設置還是相對簡單的，其實就是随着時間的自加運算。此外，此處将level混了進去，讓用戶的難度影響到得分速度，難度越高，得分也會越高。

6. 小鳥的設置

做到這裡，基本面闆就有了，但是最關鍵的像素鳥還沒有加進來。小鳥實際上是不會進行橫向運動的，因此隻需要處理其y坐标即可，方法也很簡單。

通過上面的設置，小鳥将會向下運動。不過，小鳥一直下落也是不可以的，我們還需要增加它上升的功能，即每點擊一次，小鳥就會向上飛一點。

該觸發直接設置在點擊的按鈕上，觸發後的動作為小鳥在50毫秒中向上移動50個像素，接下來就是碰撞動作判定了。

碰撞動作判定前兩個實例中都有，這裡也一樣，即設置條件。三個條件依次為碰到上部水管，碰到下部水管，撞到地面。當碰撞的時候，小鳥落到地面并實現旋轉的動畫。

7. 遊戲結束提示

将兩個提示放在合适的位置并進行隐藏，隻有在失敗的時候才觸發顯示，且将最終得分通過全局變量顯示出來。“再來一次”的顯示則延後2000毫秒，這樣的體驗更佳。

總結

本實例的實際制作要比上面提到的複雜很多，這裡僅僅是思路的表達。很多常規的操作以及具體的參數，都沒有在文章之中體現出來。相信熟悉axure的讀者，可以按照這個思路重複出來，但是如果是初學者難度就很高了。

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

#專欄作家#

馬璐，人人都是産品經理專欄作家。關注産品設計以及用戶體驗，力求在技術一定的情況下将産品做到極緻，充分發揮技術的潛能。

本文原創發布于人人都是産品經理。未經許可，禁止轉載

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部