本文通過分享一個用Axure做打地鼠小遊戲的小案例，希望大家通過這個案例能了解到：循環事件的設置方法；全局變量/局部變量的使用方法；函數公式的使用方法；事件用例的使用方法；數據傳值的方法；倒計時的實現。
作為一名經常與客戶打交道的設計師，是不是經常遇到下面的場景？
老闆：只有兩天時間，來不及開發產品去匯報了，做個原型吧
而去匯報了無數次後才發現客戶都是這樣的：
客戶：這裡為什麼點不了啊？你們產品是不是有bug
我：這只是個原型……
客戶：什麼是原型？
我：就是假的，示意的。
客戶：假的，可是這裡又能點啊
我：……
所以，設計師除了要擁有深厚的設計功底、透徹的業務分析，還需要做出一份能以假亂真的原型。
畢竟，給客戶匯報就是要儘量規避在溝通時可能造成障礙的問題，一分一秒都不能浪費
所以，最近一直想把這些內容進行整理，和大家分享。整理過程中，就產生了用axure做小遊戲的想法，寓教於樂，這次就分享一個用Axure做打地鼠小遊戲的小案例，通過這個案例能了解到：
循環事件的設置方法全局變量/局部變量的使用方法函數公式的使用方法事件用例的使用方法數據傳值的方法倒計時的實現
1. 梳理需求
不論是做什麼產品的demo，首先需要梳理需求，梳理完需求就能了解到我們最終的成品大概是什麼模樣。我們梳理了本次的「打地鼠」遊戲的需求如下：
核心功能：打地鼠，用戶可以使用錘子擊打隨機鑽出的地鼠。
配套功能：
分數記錄：當擊中地鼠後記一分；遊戲計時：限定遊戲時長，到達指定時長後遊戲截止；展示最終分數：到達時長後展示用戶分數；設置用戶暱稱：用戶能設置暱稱，在遊戲展示分數時顯示，增強代入感。
2. 遊戲流程
功能梳理完成後，下一步我們就需要把功能串聯起來，製成流程，方便梳理製作思路。
3. 劃分頁面
我們將繪製好的流程拆分成單個的頁面，將功能劃分至不同的頁面中（畫完後縱向擺放在Axure同一個頁面內即可）。
頁面1：起始頁面
頁面2：遊戲頁面
頁面3：結束頁面
4. 添加交互事件
接下來我們就開始正菜啦，添加交互事件。
4.1 核心功能：打地鼠
從「打地鼠」頁面開始設計，因為「打地鼠」是核心頁面所以我們從這個頁面開始，現在我們就一起分析下這個頁面的交互事件：
地鼠會周期性（每0.5秒一次）從地面隨機位置鑽出；錘子跟隨滑鼠移動；當地鼠被錘子擊中後會立即縮回底下，並從其他隨機位置重新出現；錘子擊中地鼠後記一分；限制遊戲時長30s。功能1：周期性改變地鼠位置
首先要解決的是解決周期出現的地鼠，聰明的你一定想到了Axure的自動循環器動態面板，利用自動循環切換面板實現定時切換面板狀態，再利用動態面板狀態改變時執行命令「改變地鼠位置」，這樣就實現了地鼠隨機出現的設計
（1）我們製作兩張打地鼠的地圖，放在一個動態面板內起名為「地鼠地圖」，動態面板內的兩個狀態分別起名「地圖1」、「地圖2」，「地圖1」內繪製50*50的圓形作為「地鼠1」，「地圖2」內繪製50*50的圓形作為「地鼠2」（地鼠的位置隨意擺放即可）。
（2）給「開始遊戲」按鈕加上事件，單擊時循環0.5s切換「地鼠地圖」的面板狀態，如下：
（3）給「地鼠地圖」加上事件，當面板狀態改變時，移動地鼠至隨機位置。
Math.random是令系統隨機選取大於等於 0.0 且小於 1.0 的偽隨機 double 值，通過Math.random*600即是令地鼠的x與y的值在600*600的畫布範圍內隨機出現，而「+60」則是防止x與y取值為0時，地鼠移出畫板邊界
功能2：設置錘子跟隨滑鼠移動
（1）添加動態面板「錘子」，狀態1為抬起的錘子，狀態2為錘下的錘子。
（2）給整個頁面添加事件，當滑鼠移動時，移動「錘子」面板至滑鼠位置（減去60px是減去錘子自身的寬高）。
功能3：當地鼠被錘子擊中後會立即縮回底下，並從其他隨機位置重新出現
（1）給錘子面板添加事件，滑鼠按下時錘子變為錘下的「狀態2」，滑鼠釋放時變為抬起的「狀態1」。
（2）添加設置事件，當錘下的錘子接觸到任意地鼠時，執行改變「地鼠地圖」面板狀態，這時就會觸發之前設置的「移動地鼠位置」事件，實現打中地鼠後刷新地鼠位置的功能。
4.2 配套功能
至此，核心功能部分完成，接下來就完善配套功能。
功能1：分數記錄
（1）首先設置一個全局變量score，初始值為0，作為儲存數值功能。
（2）在「錘子面板」剛剛設置的打中地鼠的事件後繼續追加，當錘下的錘子接觸到任意地鼠時，設置變量score=[[score+1]]，實現擊中後數值自增1，再設置界面中分數的文本值=[[score]]。
功能2：遊戲計時
主要利用文本框元件的「當文字改變時」事件實現：
（1）設置文本框初始值為「時間：30s」，設置條件「當元件文字不等於時間」時，等待1秒後文本框設置值為當前文本值減一。
（2）設置局部變量time用於儲存數字。
（3）將「起始頁面」與「結束頁面」放在同一個動態面板，命名為「遊戲遮罩」，覆蓋於「遊戲頁面」上。
（4）給「開始」按鈕添加事件，滑鼠單擊時，設置time=30，並隱藏遊戲遮罩。
（5）設置當time=0時，顯示「遊戲遮罩」達到結束遊戲的目的。
功能3：展示遊戲分數
當time=0時，設置「最終分數」的值等於當前score。
功能4：展示用戶暱稱
用戶點擊「開始」按鈕時設置「暱稱」的文本值等於「輸入框」內的文本值。
4.3 其他功能
初始化數據：點擊「開始」按鈕時，設置分數文本等於0，設置score=0。
設置「重新開始」事件：與「開始」按鈕事件相同。
設置「回到首頁」：設置「回到首頁」為切換回「起始頁面」面板。
至此我們完成了本個版本「打地鼠」遊戲的所有功能，點擊頁面右上角的預覽按鈕，即可瘋狂地play自己的「大作」。
最後，將遊戲內各類元素換成卡通元素即可獲得一份能以假亂真的「打地鼠」小遊戲，趕緊動手試試吧～
本文由 @麋鹿 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議