本文通過分享一個用Axure做打地鼠小游戲的小案例，希望大家通過這個案例能了解到：循環(huán)事件的設(shè)置方法；全局變量/局部變量的使用方法；函數(shù)公式的使用方法；事件用例的使用方法；數(shù)據(jù)傳值的方法；倒計時的實現(xiàn)。

作為一名經(jīng)常與客戶打交道的設(shè)計師，是不是經(jīng)常遇到下面的場景？

老板：只有兩天時間，來不及開發(fā)產(chǎn)品去匯報了，做個原型吧

而去匯報了無數(shù)次后才發(fā)現(xiàn)客戶都是這樣的：

客戶：這里為什么點不了啊？你們產(chǎn)品是不是有bug

我：這只是個原型……

客戶：什么是原型？

我：就是假的，示意的。

客戶：假的，可是這里又能點啊

我：……

所以，設(shè)計師除了要擁有深厚的設(shè)計功底、透徹的業(yè)務(wù)分析，還需要做出一份能以假亂真的原型。

畢竟，給客戶匯報就是要盡量規(guī)避在溝通時可能造成障礙的問題，一分一秒都不能浪費

所以，最近一直想把這些內(nèi)容進行整理，和大家分享。整理過程中，就產(chǎn)生了用axure做小游戲的想法，寓教于樂，這次就分享一個用Axure做打地鼠小游戲的小案例，通過這個案例能了解到：

• 循環(huán)事件的設(shè)置方法
• 全局變量/局部變量的使用方法
• 函數(shù)公式的使用方法
• 事件用例的使用方法
• 數(shù)據(jù)傳值的方法
• 倒計時的實現(xiàn)

1. 梳理需求

不論是做什么產(chǎn)品的demo，首先需要梳理需求，梳理完需求就能了解到我們最終的成品大概是什么模樣。我們梳理了本次的“打地鼠”游戲的需求如下：

核心功能：打地鼠，用戶可以使用錘子擊打隨機鉆出的地鼠。

配套功能：

1. 分數(shù)記錄：當擊中地鼠后記一分；
2. 游戲計時：限定游戲時長，到達指定時長后游戲截止；
3. 展示最終分數(shù)：到達時長后展示用戶分數(shù)；
4. 設(shè)置用戶昵稱：用戶能設(shè)置昵稱，在游戲展示分數(shù)時顯示，增強代入感。

2. 游戲流程

功能梳理完成后，下一步我們就需要把功能串聯(lián)起來，制成流程，方便梳理制作思路。

3. 劃分頁面

我們將繪制好的流程拆分成單個的頁面，將功能劃分至不同的頁面中（畫完后縱向擺放在Axure同一個頁面內(nèi)即可）。

頁面1：起始頁面

頁面2：游戲頁面

頁面3：結(jié)束頁面

4. 添加交互事件

接下來我們就開始正菜啦，添加交互事件。

4.1 核心功能：打地鼠

從“打地鼠”頁面開始設(shè)計，因為“打地鼠”是核心頁面所以我們從這個頁面開始，現(xiàn)在我們就一起分析下這個頁面的交互事件：

1. 地鼠會周期性（每0.5秒一次）從地面隨機位置鉆出；
2. 錘子跟隨鼠標移動；
3. 當?shù)厥蟊诲N子擊中后會立即縮回底下，并從其他隨機位置重新出現(xiàn)；
4. 錘子擊中地鼠后記一分；
5. 限制游戲時長30s。

功能1：周期性改變地鼠位置

首先要解決的是解決周期出現(xiàn)的地鼠，聰明的你一定想到了Axure的自動循環(huán)器動態(tài)面板，利用自動循環(huán)切換面板實現(xiàn)定時切換面板狀態(tài)，再利用動態(tài)面板狀態(tài)改變時執(zhí)行命令“改變地鼠位置”，這樣就實現(xiàn)了地鼠隨機出現(xiàn)的設(shè)計

（1）我們制作兩張打地鼠的地圖，放在一個動態(tài)面板內(nèi)起名為“地鼠地圖”，動態(tài)面板內(nèi)的兩個狀態(tài)分別起名“地圖1”、“地圖2”，“地圖1”內(nèi)繪制50*50的圓形作為“地鼠1”，“地圖2”內(nèi)繪制50*50的圓形作為“地鼠2”（地鼠的位置隨意擺放即可）。

（2）給“開始游戲”按鈕加上事件，單擊時循環(huán)0.5s切換“地鼠地圖”的面板狀態(tài)，如下：

（3）給“地鼠地圖”加上事件，當面板狀態(tài)改變時，移動地鼠至隨機位置。

Math.random()是令系統(tǒng)隨機選取大于等于 0.0 且小于 1.0 的偽隨機 double 值，通過Math.random()*600即是令地鼠的x與y的值在600*600的畫布范圍內(nèi)隨機出現(xiàn)，而“+60”則是防止x與y取值為0時，地鼠移出畫板邊界

功能2：設(shè)置錘子跟隨鼠標移動

（1）添加動態(tài)面板“錘子”，狀態(tài)1為抬起的錘子，狀態(tài)2為錘下的錘子。

（2）給整個頁面添加事件，當鼠標移動時，移動“錘子”面板至鼠標位置（減去60px是減去錘子自身的寬高）。

功能3：當?shù)厥蟊诲N子擊中后會立即縮回底下，并從其他隨機位置重新出現(xiàn)

（1）給錘子面板添加事件，鼠標按下時錘子變?yōu)殄N下的“狀態(tài)2”，鼠標釋放時變?yōu)樘鸬摹盃顟B(tài)1”。

（2）添加設(shè)置事件，當錘下的錘子接觸到任意地鼠時，執(zhí)行改變“地鼠地圖”面板狀態(tài)，這時就會觸發(fā)之前設(shè)置的“移動地鼠位置”事件，實現(xiàn)打中地鼠后刷新地鼠位置的功能。

4.2 配套功能

至此，核心功能部分完成，接下來就完善配套功能。

功能1：分數(shù)記錄

（1）首先設(shè)置一個全局變量score，初始值為0，作為儲存數(shù)值功能。

（2）在“錘子面板”剛剛設(shè)置的打中地鼠的事件后繼續(xù)追加，當錘下的錘子接觸到任意地鼠時，設(shè)置變量score=[[score+1]]，實現(xiàn)擊中后數(shù)值自增1，再設(shè)置界面中分數(shù)的文本值=[[score]]。

功能2：游戲計時

主要利用文本框元件的“當文字改變時”事件實現(xiàn)：

（1）設(shè)置文本框初始值為“時間：30s”，設(shè)置條件“當元件文字不等于時間”時，等待1秒后文本框設(shè)置值為當前文本值減一。

（2）設(shè)置局部變量time用于儲存數(shù)字。

（3）將“起始頁面”與“結(jié)束頁面”放在同一個動態(tài)面板，命名為“游戲遮罩”，覆蓋于“游戲頁面”上。

（4）給“開始”按鈕添加事件，鼠標單擊時，設(shè)置time=30，并隱藏游戲遮罩。

（5）設(shè)置當time=0時，顯示“游戲遮罩”達到結(jié)束游戲的目的。

功能3：展示游戲分數(shù)

當time=0時，設(shè)置“最終分數(shù)”的值等于當前score。

功能4：展示用戶昵稱

用戶點擊“開始”按鈕時設(shè)置“昵稱”的文本值等于“輸入框”內(nèi)的文本值。

4.3 其他功能

初始化數(shù)據(jù)：點擊“開始”按鈕時，設(shè)置分數(shù)文本等于0，設(shè)置score=0。

設(shè)置“重新開始”事件：與“開始”按鈕事件相同。

設(shè)置“回到首頁”：設(shè)置“回到首頁”為切換回“起始頁面”面板。

至此我們完成了本個版本“打地鼠”游戲的所有功能，點擊頁面右上角的預(yù)覽按鈕，即可瘋狂地play自己的“大作”。

最后，將游戲內(nèi)各類元素換成卡通元素即可獲得一份能以假亂真的“打地鼠”小游戲，趕緊動手試試吧～

源文件地址：https://pan.baidu.com/s/1Hmn-fs8ubbGvY7Ib3tJuPA

作者：麋鹿，北京華宇元典高級交互設(shè)計師，微信公眾號：元典UED

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

題圖來自Unsplash，基于CC0協(xié)議