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

廢話不說，先上效果吧。

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

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

戰(zhàn)略層

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

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

范圍層

本例要實現(xiàn)的基本功能包括：

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

結構層

流程梳理

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

難點分析

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

首先在頁面載入時設置動態(tài)面板「bit_time」和「bit_ball」向后循環(huán)，循環(huán)間隔1毫秒，動態(tài)面板「database」中的「time_begin」獲得系統(tǒng)載入時的時間戳。

在動態(tài)面板「bit_time」中，我們設置「database」動態(tài)面板中的「time_now」獲得系統(tǒng)現(xiàn)在時刻的時間戳，「time_bit」=time_now-time_begin。

此時「time_bit」就是一個以毫秒為單位不斷增長的數(shù)值，它代表著系統(tǒng)現(xiàn)在時刻與之前time_begin的時間差值。

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

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

功能

1. 加載初始化實現(xiàn)

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

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

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

除了初始化全局變量外，還需要初始化以下數(shù)據(jù)：

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

2. 設置游戲難度

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

3. 游戲?qū)崟r顯示分數(shù)

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

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

4. 游戲暫停及恢復

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

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

5. 乒乓球移動速度

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

6. 乒乓球隨機移動方向

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

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

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

7. 球拍觸碰乒乓球反彈

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

框架層

根據(jù)之前邏輯梳理，我們需要制作以下幾個動態(tài)面板：

游戲桌面面板：包括首頁、游戲中、游戲結束狀態(tài)

設置面板：

信息欄面板：

bit_time:獲得基準時間值

bit_ball:控制小球移動

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

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

bit_score:獲得實時分數(shù)

表現(xiàn)層

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

總結

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

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

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

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

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

優(yōu)化速度控制方式，使手機端更加流暢

增加更多不確定因素

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

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

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

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