通過使用Axure制作一些小游戲，將多種函數及邏輯關系設定其中，達到增強自己邏輯思維能力及熟練使用Axure的目的。

廢話不說，先上效果吧。

演示地址：http://e.g.easyiservice.com/949F0A/#c=2

Axure軟件其實是一款原型設計工具，可以設置網頁、app等原型，由于它基于html構架，其中又包含了一些基本的函數，所以我們可以通過制作一些游戲更加熟練地使用、了解這些函數。本文之后將根據我的另一篇文章中《以「用戶為中心」的產品設計詳述》提到的「五大用戶體驗要素」一一講解構建過程。

戰略層

通過使用Axure制作一些小游戲，將多種函數及邏輯關系設定其中，達到增強自己邏輯思維能力及熟練使用Axure的目的。

本例準備制作一款「人機乒乓球」游戲，基本游戲規則是：玩家通過移動桌面底部球拍，是乒乓球在下落時正好落到球拍上，然后反彈乒乓球。

范圍層

本例要實現的基本功能包括：

• 設置乒乓球移動速度：玩家可以自由選擇多種速度等級，等級越高速度越快，每回合分數越高。
• 設置玩家名稱：玩家可以自由輸入自己的名稱，在游戲中顯示。
• 多種移動球拍方式：鼠標直接拖動球拍、點擊鍵盤「←」、「→」按鈕、點擊信息欄「左」、「右」圖標均可控制球拍移動
• 游戲暫停及恢復功能：游戲時可以隨時暫停及恢復游戲
• 實時顯示分數及難度
• 游戲結束后可以重新開始

結構層

流程梳理

通過「范圍層」的梳理，我們可以簡單設置出整個游戲的基本流程圖：

難點分析

在游戲中，乒乓球移動是最重要的，所以我們第一個考慮的是「循環」，通過獲得一個恒定的循環時間，控制乒乓球恒定速度移動，但是因為我們又可以選擇乒乓球移動速度，所以我們需要得到一個基準速度v，然后在基準速度上直接按倍數增加移動速度。

首先在頁面載入時設置動態面板「bit_time」和「bit_ball」向后循環，循環間隔1毫秒，動態面板「database」中的「time_begin」獲得系統載入時的時間戳。

在動態面板「bit_time」中，我們設置「database」動態面板中的「time_now」獲得系統現在時刻的時間戳，「time_bit」=time_now-time_begin。

此時「time_bit」就是一個以毫秒為單位不斷增長的數值，它代表著系統現在時刻與之前time_begin的時間差值。

之后我們在「time_ball」動態面板設置觸發條件：當「time_bit」>=level（level為小球速度等級，默認50）時，「time_begin」重新賦值為當前系統時間。這時「time_ball」就形成了一個每50毫秒自動循環運行的程序，如果level為100時，「time_ball」就會每100毫秒自動出發一次。

以上我們就獲得了一個可以控制的定時循環機制，其它功能都是在這個機制上實現的。

功能

1. 加載初始化實現

第一步永遠是最難的，我在這里設置了6個全局變量，方便對整個游戲的配置。

• Level：游戲難度等級，初始為50
• location_x：乒乓球在移動時X軸方向的位移量
• game_status：游戲狀態，包括暫停、首頁、設置、游戲中、結束等，初始化為首頁
• angle：乒乓球移動速度，初始化為100
• score：游戲難度對應基準分數倍數，分別為1，2，3，5，10，初始化為3
• score1：乒乓球移動時基準分，初始化為0

看了上述這些全局變量你可能還不明白，但請你一定要記住，因為每一個都非常重要之后我會詳細介紹。

除了初始化全局變量外，還需要初始化以下數據：

• 游戲桌面動態模板：初始化為顯示首頁
• 設置動態模板：初始化為隱藏
• 信息欄動態模板：初始化禁用所有功能

2. 設置游戲難度

游戲難度體現在乒乓球移動速度上，當難度越高時速度越快，本例中共有5個等級，默認為中間等級。當玩家選擇對應等級時，系統將等級賦值給全局變量Level，通過上文的「time_ball」控制乒乓球移動速度，難度越高，Level值越低，則「time_bit」越短，乒乓球越快。

3. 游戲實時顯示分數

游戲分數需要實時更新，筆者開始通過判斷乒乓球接觸球拍且能成功返回時，分數增加，但是實現起來有些bug，所以舍棄。

本例中通過計算乒乓球移動桌面的次數實現分數增加，當乒乓球從最上面到最下面時或從最下面移到最上面時（恒定移動6次，后文詳述），score1自增，分數=score*score1/6.

4. 游戲暫停及恢復

通過全局變量game_status的值控制。

當game_status=begin時，所有與游戲進行的相關功能才可以使用，例如乒乓球移動、分數增加、移動球拍等，所以當點擊「暫?！箷r，game_status=pause，乒乓球即自動停止運動。

5. 乒乓球移動速度

整個桌面大小為600*600.為了制作方便，乒乓球固定每次在y軸移動angle==100距離，通過每次移動的時間間隔控制乒乓球移動速度。如初始等級正常，level==50時，乒乓球每次移動時間間隔為50毫秒。

6. 乒乓球隨機移動方向

為了使游戲逼真，每次從上桌面彈出的乒乓球角度均為隨機值，本例為了制作方便，設置乒乓球初始從（300，0）坐標開始向下移動，如果碰到球拍，乒乓球按照原方向返回（300，0）坐標。

本例目前控制乒乓球初始移動角度不會彈到左、右桌壁（即初始角度較?。?。

本例通過函數location_x=[[Math.tan((Math.random()*40-20)/57)]]得到初始移動X軸方向移動位移，乒乓球每次X軸的移動距離為location_x*angle.

7. 球拍觸碰乒乓球反彈

球拍的寬度恒定為120，所以判斷當乒乓球移動到桌面底部時，如果「-120<球拍.x-乒乓球.x<120」時，則判斷此次成功碰到乒乓球，改變乒乓球y軸移動全局變量angle=-angle，乒乓球反彈。

框架層

根據之前邏輯梳理，我們需要制作以下幾個動態面板：

游戲桌面面板：包括首頁、游戲中、游戲結束狀態

設置面板：

信息欄面板：

bit_time:獲得基準時間值

bit_ball:控制小球移動

bit_down:判斷小球接觸球拍時成功或失敗

bit_status_up:小球觸碰上端桌面時隨便方向向下移動

bit_score:獲得實時分數

表現層

以下為最初設計的三個頁面效果圖

總結

雖然看似是一個很簡單的小游戲，但在制作過程中卻遇到了很多難題，有的可以直接解決，有的卻要花費很大精力繞道實現。不過當完成這款游戲后，相信你對各種通過循環功能實現的頁面輪播圖等功能實現會輕松自如了，而通過全局變量去控制各種邏輯狀態、通過鍵盤控制面板移動等也是信手拈來了。

本游戲目前還十分簡單，如果有時間，我近期會做如下改進：

自動識別屏幕，使桌面寬度為屏幕寬度，且乒乓球及球拍大小也會對應變換

乒乓球可以撞擊桌面左、右兩邊

通過中繼器儲存每次稱號及分數，并在結束后實時顯示

優化速度控制方式，使手機端更加流暢

增加更多不確定因素

歡迎大家隨時交流，謝謝！

源文件下載鏈接：http://pan.baidu.com/s/1kULRQ6r? 密碼:pvf7

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

題圖來自 Pixabay，基于 CC0 協議