通過使用Axure制作「貪吃蛇」游戲，使自己更加熟練Axure中的各種函數及對一款產品開發時的結構梳理及邏輯分析。本文的受眾對象為喜歡Axure或想學Axure的小白及達人，認為無用的人請點擊「esc」按鈕。

廢話不多說，還是先上圖吧。

http://e.g.easyiservice.com/71566H/#c=2

本文會通過第一人稱視角，從確定制作游戲——設想游戲規則——游戲基本邏輯——游戲模塊制作——游戲成品，一步步詳盡地講解如何實現，確保每一個功能及函數你都會看懂。（個別針對小白功能講解其他人可以跳過）

每一次的開始

其實每次使用Axure工具時，對我們產品經理也是一個制作產品的過程，不管是畫原型還是其他，我們首先都要想到5W1H:

• What（我們在做什么）：一款簡單的貪吃蛇小游戲，移動小蛇，通過小蛇吃到「肉」得分。
• Who（給誰做）：喜歡使用Axure的人群。
• How（怎么做）：如果要實現這個游戲，其中的每個功能、每個動作、每個函數怎么做。
• Why（為什么）：為什么做這個產品，產品中的每個功能為什么這么實現，是不是有更好的方式能夠實現這個功能或者動作？
• When（多久）：針對目前來不及解決的問題或者沒實現的想法，我們什么時候能夠完善？之后多久能夠補充和整理？
• Where（在哪發布？當然是woshipm.com）：允許我這個where只是湊份子的（汗~）。

思路整理

我們做的游戲是「貪吃蛇」，大家應該都玩過吧，這是一個規則十分簡單的游戲，首先我們在草稿中繪制出「小蛇」、「好吃的肉」、「邊界」。

這應該是游戲中最基本的邏輯了，目前我們不去管怎么使小蛇動起來，或者如何讓「肉」隨機出現。通過這個簡單的草稿頁面，我們應該會分析出這個游戲有如下一些規則及注意事項（不分先后）：

題外話：是的，做每件事情我們都需要使用頭腦盡自己所能充分分析它所有的方面。如果我們不思考，直接百度『axure 貪吃蛇 源文件』，然后下載下來，這樣又有何意義呢？

「貪吃蛇」雖然是款十分簡單的游戲，但是如果我們通過自己的思考和努力實現它，是不是在獲得知識的同時內心也會充滿愉悅呢？

規則1：「蛇」只能上下左右移動單一方向移動，由此引申出「蛇」的大小、「蛇」每次移動的距離、「蛇」的移動速度等。

規則2：當「蛇」每次碰到「肉」時，「肉」消失，由此引申出每次碰到「肉」后，「肉」在其他位置隨機出現，「蛇」身體增長單位長度，「蛇」碰到「肉」后移動方向及速度不變

規則3：游戲需要邊界，「蛇」碰到邊界時游戲失敗

• 注意1：如何控制「蛇」移動的方向，通過鍵盤的上下左右還是怎樣
• 注意2：如何控制「蛇」移動速度
• 注意3：如何使「肉」消失并隨機位置出現
• 注意4：「蛇」身如何增長，引申當蛇改變方向時，如何正確顯示。

梳理邏輯

目前我們先不需要知道如何通過具體函數處理相關運動，也不用去想如何設置相關功能動態面板等，我們可以先梳理出游戲的基本流程：

在這里希望大家先記住三個字：初始化。大家不妨回憶下，在你第一次安裝完任何一款軟件或者游戲后，打開的第一次都會出現初始化（可能是其他名字），我們雖然是一個十分簡單的小游戲，但也一定不能免除這個步驟，目前初始化什么內容我們還不知道，但是我們要先確定第一個步驟是：初始化。

「黑色方框」部分是我在梳理邏輯過程中想到的：

• 為了調整「蛇」不同的移動速度，我們需要設置速度「等級」后再開始
• 為了體現游戲更加人性化，增加了一個「稱號」功能
• 萬一游戲時有事需要離開，但又不想重新開始，那只有使用「暫?！构δ芰?/li>

游戲最基本流程為：當點擊「開始」時，游戲就正式開始了，我們移動小「蛇」，使蛇在吃到「肉」的過程中又不能碰到「邊界」。

OK，我們的基本邏輯已經確定好了，你到這里也一定沒問題吧，下面我們將會在Axure中，通過Axure的特性對每個邏輯詳細展開實現。

終于開始了

先實現小球動起來吧。

我們現在對頁面初始化的內容還無從下手，那么就從最基本的小「蛇」移動開始吧。在游戲過程中，只要「蛇」不碰到四壁，那么「蛇」就會一直以固定的速度運動，只不過可能會改變方向。聰明的你現在是否也想到了通過『循環』功能實現「蛇」的恒定移動呢？即每固定時間間隔，「蛇」移動固定的位移呢（位移，不論方向）？

目前大家普遍實現循環的方式就是通過「頁面載入時」設置「循環切換動態面板狀態」，然后對動態面板設置「狀態改變時」實現循環的功能。例如設置「頁面載入時」動態面板「A」向后循環，循環間隔1000毫秒，然后對動態面板「A」設置「狀態改變時」切換B元素選中狀態，那么我們就是實現了B元素每隔1秒變換一次顯示狀態。

此時需要注意：動態面板必須有2個或2個以上的狀態才可以實現

原理相同，如果我們在動態面板「A」狀態改變時，設置移動「蛇」x軸或y軸固定位移，那么我們就實現了「蛇」的移動了。但是這里面也衍生了3個問題：

• 如果通過循環間隔控制「蛇」的移動速度，那么這里面不能寫函數，我們如何更改速度呢？
• 「蛇」在移動固定位移時，我們如何按下「→」時，「蛇」就向→移動固定位移呢？
• 「蛇」每次移動的位移是多少呢，1、10還是20合適？

不要頭大，只要我們發現問題，就已經向解決問題前進了一步。如果我們想自定義「蛇」的移動速度，那么這里肯定會需要「變量」，在這里，我們新建一個全局變量「level」，通過「level」的不同取值是否能實現這個功能呢？

這里面最難的是最后一步，如何通過變量「level」控制「蛇」的移動呢？我們現在回到最開始，「蛇」的移動頻率是通過動態面板的狀態切換時間間隔決定的，而動態面板切換狀態的間隔并不能通過變量賦值。那么我們必須通過其他途徑同樣獲取到一個固定時間間隔變換的數值，通過這個數值實現「蛇」的移動。（以下設置level內容與我之前文章《Axure制作小游戲之「瘋狂乒乓球1.0」，你能得多少分？》邏輯類似，如果了解可以跳過）

這個數值怎么得到呢？動態面板可以每隔最短1毫秒變換，是的，這里面我們發現是不是可以通過其他途徑獲得同樣每隔毫秒為單位的數值呢？是的，時間函數！Axure中有豐富的函數可以使用，我們這里首先使用「Now.getTime()」函數，這個函數可以獲得此刻的一個時間戳（最小單位毫秒），如果我們通過判斷2個時間戳的固定差值，是不是就能得到之前想要的數值了呢？

在此我們設置頁面載入時的文本「time_begin」== [[Now.getTime()]],然后每當動態面板狀態變化時（間隔1ms），設置文本「time_now」 == [[Now.getTime()]],然后設置文本「time_bit」 == [[time_now-time_begin]]，獲得一個時間差值。

這個差值就和「level」聯系起來了，當設置「level」==200時，如果我們設置只有當「time_bit」>=「level」時，「time_begin」重新賦值[[Now.getTime()]]，那么我們就得到了一個200毫秒的可控制循環了。

是不是很神奇？我們得到了一個每level（200ms）的循環。在這里我設置了2個動態面板，第一個動態面板如前所述，第二個動態面板也是每1毫秒切換一次狀態，在這里設置當time_bit>=level的判斷條件即可。

這下明白了嗎？每當time_bit==level時，證明時間運行了200毫秒，此時我們重新賦值time_begin,time_bit再次從0開始遞增，同時我們設置「蛇」移動一個位移就可以了。

截圖里面多了game_status的變量，別急，一會我們再講。

現在可以控制小「蛇」方向了

下面我們該研究如何通過鍵盤控制「蛇」的移動方向了。這里面有兩個問題：

• 檢測鍵盤按鍵
• 控制「蛇」移動方向

在Axure中，可以直接通過「頁面按鍵按下時」直接檢測鍵盤按鍵，我們可以分別設置對應的上、下、左、右按鍵即可。

那么如何控制「蛇」的移動方向呢？在此我引入了2個方向全局變量：location_x與location_y，當小球橫向移動時，location_y==0，location_x==1（向右）或-1（向左），當「蛇」豎向移動時，location_x==0，location_y==1（向下）或-1（向上）。

這樣我們就實現了小「蛇」只能沿x軸或y軸單方向移動。

是時候解決移動多少位移的問題了

每次移動多少位移引申到以下幾個問題：

• 整個游戲布局大?。罕敬卧O置的500*500
• 小「蛇」大?。罕敬卧O置20*20
• 每次移動位移

根據游戲布局及小「蛇」大小，我們可以設置小「蛇」每次移動位移為「蛇」本身大小，即20。這樣整個游戲布局中，小「蛇」的移動屬性我們就全部掌握了。

終于可以開”吃”了

先解決隨機出現的問題吧。Axure中跟隨機有關的函數只有一個Math.random()。所以我們只能從這里下手了。我們先設置「肉」的大小是20*20，那么它隨機出現的位置范圍是0<x<480，0<y<480。因為我們的小「蛇」每次移動都是以20為單位的，所以我們的「肉」出現的坐標也應該是以20為單位的整數。我們先獲得20這個基準單位吧，[[Math.floor(Math.random()*24)*20]]，這個函數我們得到的是首先獲得0~24的整數，然后乘以20，即獲得了以20為基本單位的數值了。

下一個問題就是小「蛇」碰到「肉」時，肉自動消失后又重新隨機出現，出現問題解決了，如何解決「吃肉」這個判斷呢？

在Axure中，有一項判斷是「元件范圍接觸」，即當判斷小「蛇」接觸到「肉」時，肉重新隨機刷新位置。

在這里，我們通過另外一個動態面板狀態改變來實時判斷這個接觸過程。

難點處理

寫到這里，基本功能和動作我們都基本實現了。但是細心的讀者可能發現還有幾個功能我沒有實現。是的，在我制作過程中，我發現有些功能短期內無法處理，所以準備放棄或在2.0版本中實現，這也是我們平時產品開發時的常用套路，對吧？

• 小「蛇」吃到肉后長度自增：每當小「蛇」成功吃到肉后，小「蛇」長度恒定加20，寬度不變。
• 長方形小「蛇」轉彎：如果小「蛇」是長方形時，轉彎如何處理。

在我思考后發現，第一個自增問題其實是可以解決的，比如我們將小「蛇」分為蛇頭和蛇身，蛇頭固定20長度，每當吃到「肉」后，蛇身增加20長度，這個邏輯不難實現。但是因為同時延伸到后面的轉彎問題，我發現自增也無法解決了。

如果小「蛇」是長方形，那么在改變小「蛇」方向的瞬間，如何控制小「蛇」移動呢？因為時間較短，目前我還沒有想好完美實現的方法，希望在2.0版本中實現。如果有讀者能提供更好的方法，歡迎隨時回復。

間接實現

在1.0版本中無法解決，那么我們為了能將產品產出，也只能通過其他方式間接實現了。

小「蛇」不能自增，那么我們目前只讓小「蛇」是一個20*20的恒定大小。

小「蛇」吃到肉后無法增加長度，那么我們就通過「分數」的方式，實現游戲的樂趣。

程序搭建

按照最開始的邏輯梳理，我們首先要為游戲界面設置一個動態面板，為了能在面板中呈現出不同的內容，我們需要給面板設置不同的狀態：首頁、設置、游戲中、游戲結束。

那么如何在狀態中切換呢？這時候我們引入了一個全局變量「game_status」，通過判斷「game_status」的值來進行各種操作。比如當值為「begin」時，「蛇」才會移動，當值為「over」時，面板狀態切換到「游戲結束」等等。

游戲桌面構思完成，我們還缺少一個輔助的「信息欄」動態面板，通過這個面板我們可以實現鼠標控制上下左右移動、實時顯示分數、暫停、顯示玩家稱呼等功能。

OK，一共需要顯示2個動態面板（其他動態面板做循環功能，不顯示），那么我們現在就可以進行初始化的工作了，初始化所有內容如下：

• 自動調節顯示面板到頁面中間顯示
• 設置所有循環類動態面板每隔1毫秒自動切換狀態
• 設置「time_begin」初始值==[[Now.getTime()]]
• 設置全局變量game_status==home，level==200，direction_x==1，direction_y==0，angle==20，score==0，score1==3，tools==pc
• 設置循環面板「bit_time」賦值「time_bit」和「time_now」

其中有「score」為分數全局變量，「score1」為游戲難度基準值，難度越高值越高，每當小「蛇」碰到「肉」時，「score」==「score」*「score1」+「score」，即每次增加固定分數值。

「tools」為「鍵盤按鍵」或「鼠標點擊」的方式，當「tools」==pc時，玩家只可以使用鍵盤的上下左右改變方向，當「tools」==mouse時，玩家只可以使用鼠標點擊「信息欄」中的上下左右按鈕。

初始化之后游戲直接進入首頁，此時game_status==home。在首頁中我們可以點擊「設置」或「開始」2個按鈕，當點擊「開始」時可以使用默認設置項進行游戲。設置項包括：

• 游戲難度：默認正常
• 游戲方式：默認鍵盤
• 稱呼：默認無

我們配置點擊「設置」按鈕時，動態面板進入「設置」狀態，在設置每項數據時，我們需要配置「切換游戲等級」時，將值傳送給全局變量「level」，輸入「稱號」時，將值傳送給信息欄中的稱號，切換「游戲方式」時，將值傳送給全局變量「tools」。

當點擊「確定」時，再次將動態面板狀態切換到「首頁」。

OK，下面配置「開始」按鍵吧，點擊「開始」需要完成以下內容：

• 設置小「蛇」位置到達（0，0）
• 等待1秒鐘：防止進入后小「蛇」突然移動導致失敗
• 設置「game_status」==begin

是不是有人發現截圖里面有些內容不一樣？沒關系，我們在后面的優化部分再談。

現在我們已經進入到游戲頁面了，在這里我們需要配置以下幾項內容：

• 循環動態面板「bit_snake」配置成當「game_status」==begin且「time_bit」>=level時，重新賦值「time_begin」并且移動小「蛇」（實現了在游戲中時每隔level毫秒，小蛇移動1個位移）
• 「頁面按鍵按下時」，修改對應direction_x、direction_y的值
• 循環動態面板「bit_score」配置成當「game_status」==begin且小「蛇」接觸到「肉」時，分數增加并且隨機生成「肉」的位置
• 循環動態面板「bit_status_over」配置成小「蛇」的x、y值不在0~480時，「game_status」變為over。并切換動態面板桌面的狀態為「游戲結束」

最后我們再配置下「游戲結束」狀態。游戲結束時只可以點擊「確定」按鈕，當點擊「確定」時，會像「頁面初始化」一樣將所有需要的值初始化賦值即可。

剩下的就是「信息欄」了。

右面的分數、難度、稱號顯示我們已經講過了。當點擊「暫?！箘討B面板時，全局變量「game_status」==pause，游戲桌面的所有內容也就自動暫停了，然后切換動態面板狀態到「恢復」即可。

左面的按鍵則通過全局變量「tools」判斷，只有「tools」==mouse時，按鈕才可以點擊，點擊效果為改變direction_x、direction_y的值。

再次優化

是否終于松了一口氣，以為完成了呢？就像我們產品在開發階段的α測試一樣，測試完會發現很多問題：

• 小「蛇」如果從（0，0）開始，大小又正好是20*20，容易造成游戲直接結束的問題，因為我們的判斷是當小「蛇」接觸0~480時即結束。
• 如果小「蛇」貼著「肉」，并沒有路過時，也會出發吃掉「肉」的效果，其實是個bug
• 因為小「蛇」長度不能自增，可玩性太低

針對以上幾點問題，我們制作了如下解決方案：

• 小「蛇」大小修改為19*19，初始位置為（1，1），避免了觸發邊界時的bug。
• 「肉」大小修改為15*15，避免了路過即得分的bug。
• 增加隨機障礙「雄黃」，每次「肉」被吃掉后，桌面內會在隨機位置出現一塊隨機大小的「雄黃」，當小「蛇」碰到「雄黃」時，游戲同樣結束。

總結

終于可以寫出這兩個字了，在這篇寫了5000字左右的文章中，我希望盡可能寫的足夠詳細，對于用過Axure的人，無論掌握什么程度，按照我的思路都可以理解每一個步驟和過程。如果有人覺得過于繁瑣，請你放心，這應該是我最后一篇這么詳細描述的Axure教程了。

增加了「雄黃」之后，雖然多了隨機性，但是同樣出現了一些bug，例如「雄黃」和「肉」的刷新位置相同等，小「蛇」就無法吃肉了，如果有時間，我會繼續做出更完善的「貪吃蛇」游戲。

可能有很多人覺得用Axure做小游戲實在是一個無聊且無用的行為，還記得在上PMP課程時，講師第一課就通過一個產品經理買菜的故事，將整個買菜流程作為一個龐大項目管理看待，從確定買菜、計劃菜品、計劃買菜時間、來回路線等足足講了1個小時。對于我們產品經理而言，任何事情又不是一個產品設計開發流程呢？當我在使用產品人最喜歡的原型設計軟件制作一款小游戲時，何嘗不是『機會識別——概念產生——概念評估——開發——上市』的整個流程呢？具體的有用無用，同樣因人而異罷了。

如果您有同樣的興致，歡迎來留言交流。希望這篇文章能夠對你有些幫助，謝謝！

以下為源碼鏈接：http://pan.baidu.com/s/1o8FW2Rg? 密碼:uk9n

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