Axure制作小游戲之「瘋狂乒乓球1.0」,你能得多少分?

16 評(píng)論 14543 瀏覽 75 收藏 11 分鐘

通過使用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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 做的挺好下次別做了

    來自河北 回復(fù)
  2. 其實(shí)這篇文章最寶貴的方面還是它的設(shè)計(jì)實(shí)現(xiàn)邏輯,目的是什么不重要,關(guān)鍵是設(shè)計(jì)的分析過程

    來自云南 回復(fù)
  3. 額~可能由于我技術(shù)還不到位,畫面有點(diǎn)亂,球一直就沒有下來過 ??

    來自湖北 回復(fù)
  4. 頭一回知道原來Axure還可以這樣子玩的,666

    來自上海 回復(fù)
  5. 作為一名正在學(xué)習(xí)Axure的新人,好多地方看不太懂????特別是難點(diǎn)那一塊

    回復(fù)
  6. 雖然覺得對(duì)做產(chǎn)品沒有啥幫助,但是在使用axure的角度來講確實(shí)牛逼

    來自福建 回復(fù)
  7. 有個(gè)bug,選擇 游戲難度,然后填寫昵稱,然后再去修改游戲難度就修改不了了

    來自北京 回復(fù)
  8. 雖然覺得沒有用,還是覺得好厲害

    來自北京 回復(fù)
    1. 作為產(chǎn)品經(jīng)理,出去買個(gè)菜都可以當(dāng)做一個(gè)產(chǎn)品開發(fā)流程來設(shè)計(jì),何況這個(gè)呢?用產(chǎn)品經(jīng)理的角度去審查,你一定會(huì)看到更多的產(chǎn)品。

      來自北京 回復(fù)
  9. 挺好的。加油~

    來自廣東 回復(fù)
  10. 本末倒置,閑得沒事干系列

    來自重慶 回復(fù)
  11. 最近接到需求要做小游戲,教育類的,主要是教小孩子英文。之前產(chǎn)品經(jīng)理有做過類似找你妹這樣的游戲翻版,內(nèi)容換成英文,第一次接到,小白,不知道有什么建議

    來自上海 回復(fù)
    1. 多關(guān)注下行業(yè)動(dòng)態(tài)吧,看看appstore最近或者每期的兒童類益智程序排行,個(gè)人感覺「皇帝的一天」就非常棒。
      我這個(gè)文章不是教你怎么做小游戲的,是通過小游戲鍛煉自己邏輯能力和axure的使用技巧。就像學(xué)習(xí)c語言時(shí)做各種簡單經(jīng)典示例一樣。加油!

      來自北京 回復(fù)
  12. 厲害了,先收藏一下

    來自江蘇 回復(fù)
  13. 大神啊 ??

    來自北京 回復(fù)
    1. 這幾天還會(huì)有貪吃蛇,模擬16*16點(diǎn)陣等,作者更準(zhǔn)備做一個(gè)文字版吃雞,敬請(qǐng)關(guān)注!

      回復(fù)