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

廢話不說，先上效果吧。

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

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

戰(zhàn)略層

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

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

范圍層

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

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

結(jié)構(gòu)層

流程梳理

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

難點(diǎn)分析

在游戲中，乒乓球移動(dòng)是最重要的，所以我們第一個(gè)考慮的是「循環(huán)」，通過獲得一個(gè)恒定的循環(huán)時(shí)間，控制乒乓球恒定速度移動(dòng)，但是因?yàn)槲覀冇挚梢赃x擇乒乓球移動(dòng)速度，所以我們需要得到一個(gè)基準(zhǔn)速度v，然后在基準(zhǔn)速度上直接按倍數(shù)增加移動(dòng)速度。

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

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

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

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

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

功能

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

第一步永遠(yuǎn)是最難的，我在這里設(shè)置了6個(gè)全局變量，方便對(duì)整個(gè)游戲的配置。

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

看了上述這些全局變量你可能還不明白，但請(qǐng)你一定要記住，因?yàn)槊恳粋€(gè)都非常重要之后我會(huì)詳細(xì)介紹。

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

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

2. 設(shè)置游戲難度

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

3. 游戲?qū)崟r(shí)顯示分?jǐn)?shù)

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

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

4. 游戲暫停及恢復(fù)

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

當(dāng)game_status=begin時(shí)，所有與游戲進(jìn)行的相關(guān)功能才可以使用，例如乒乓球移動(dòng)、分?jǐn)?shù)增加、移動(dòng)球拍等，所以當(dāng)點(diǎn)擊「暫停」時(shí)，game_status=pause，乒乓球即自動(dòng)停止運(yùn)動(dòng)。

5. 乒乓球移動(dòng)速度

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

6. 乒乓球隨機(jī)移動(dòng)方向

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

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

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

7. 球拍觸碰乒乓球反彈

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

框架層

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

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

設(shè)置面板：

信息欄面板：

bit_time:獲得基準(zhǔn)時(shí)間值

bit_ball:控制小球移動(dòng)

bit_down:判斷小球接觸球拍時(shí)成功或失敗

bit_status_up:小球觸碰上端桌面時(shí)隨便方向向下移動(dòng)

bit_score:獲得實(shí)時(shí)分?jǐn)?shù)

表現(xiàn)層

以下為最初設(shè)計(jì)的三個(gè)頁面效果圖

總結(jié)

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

本游戲目前還十分簡單，如果有時(shí)間，我近期會(huì)做如下改進(jìn)：

自動(dòng)識(shí)別屏幕，使桌面寬度為屏幕寬度，且乒乓球及球拍大小也會(huì)對(duì)應(yīng)變換

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

通過中繼器儲(chǔ)存每次稱號(hào)及分?jǐn)?shù)，并在結(jié)束后實(shí)時(shí)顯示

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

增加更多不確定因素

歡迎大家隨時(shí)交流，謝謝！

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

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

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