Axure教程:冰球小游戲

16 評(píng)論 4772 瀏覽 37 收藏 6 分鐘

年底了,閑來(lái)無(wú)事,逛產(chǎn)品網(wǎng)站時(shí)看到一些大佬的小游戲制作教程,受益匪淺,突發(fā)奇想,做了一個(gè)冰球類的小游戲與大家交流學(xué)習(xí)。

游戲玩法

少?gòu)U話,先看東西 冰球游戲>>

游戲規(guī)則很簡(jiǎn)單,小球有初始速度自動(dòng)降落,用戶水平拖動(dòng)紅色方塊接球反彈,與機(jī)器人對(duì)戰(zhàn),若球碰到左右兩側(cè)墻壁則反彈。一方?jīng)]有接住球則游戲結(jié)束。

游戲功能梳理

  1. 游戲可設(shè)置難度。
  2. 小球可自動(dòng)運(yùn)動(dòng),碰到墻壁或者方塊則反彈。
  3. 用戶可水平拖動(dòng)方塊接球反彈。
  4. 機(jī)器人會(huì)自動(dòng)跟蹤接球。
  5. 一方未接住球,則分出勝負(fù)。

核心難點(diǎn)解析

小球如何移動(dòng):利用動(dòng)態(tài)面板中不斷向下重復(fù)循環(huán)改變面板狀態(tài),每改變一次狀態(tài)小球移動(dòng)一次位置來(lái)實(shí)現(xiàn)小球的無(wú)限運(yùn)動(dòng)?!静缓美斫饪山又驴矗挛闹杏袑?shí)現(xiàn)教程】

核心中的核心當(dāng)然是小球的運(yùn)動(dòng)路徑:

  • 當(dāng)小球接觸左右邊界時(shí)反彈,即y軸運(yùn)動(dòng)方向不變,x軸運(yùn)動(dòng)方向相反。
  • 當(dāng)小球碰到上下的運(yùn)動(dòng)方塊時(shí)反彈,即y軸方向相反,x軸運(yùn)動(dòng)方向可設(shè)置成隨機(jī)或者是根據(jù)小球與方塊接觸部位來(lái)規(guī)定不同的運(yùn)動(dòng)方向。本文選擇前者,x軸運(yùn)動(dòng)方向隨機(jī)。

游戲的另一個(gè)重點(diǎn)是機(jī)器人如何接球:為機(jī)器人設(shè)定接球范圍,當(dāng)小球進(jìn)入機(jī)器人的接球范圍時(shí),則機(jī)器人水平移動(dòng)到小球所在的區(qū)域

制作過(guò)程

1. 元件準(zhǔn)備

元件較為簡(jiǎn)單,主要是上下左右四個(gè)邊界,左右邊界可以設(shè)置成白色,可以更好地隱藏。

機(jī)器人方塊,和我方方塊(我方方塊需要可拖動(dòng),所以設(shè)置成動(dòng)態(tài)面板)。

小球,以及控制小球移動(dòng)的動(dòng)態(tài)面板。

2. 移動(dòng)小球

設(shè)置全局變量 dx、dy控制小球運(yùn)動(dòng)方向,robot控制機(jī)器人反應(yīng)區(qū)域、angle控制機(jī)器人擊球角度。

單擊“開(kāi)始”時(shí),設(shè)置“yidong”動(dòng)態(tài)面板向下循環(huán),循環(huán)間隔1ms。

“yidong”動(dòng)態(tài)面板狀態(tài)改變時(shí),移動(dòng)小球采用“相對(duì)移動(dòng)”,移動(dòng)dx,dy。

3. 控制小球

當(dāng)小球接觸我方方塊時(shí),dy=[[-dy]],dx=[[(Math.random()-0.5)*32]]

當(dāng)小球接觸機(jī)器人時(shí),dy=[[-dy]],dx=[[(Math.random()-0.5)*angle]],angle可控制機(jī)器人反彈角度。

當(dāng)小球接觸左右邊界時(shí):dx=[[-dx]]

當(dāng)小球接觸上下邊界時(shí):游戲結(jié)束,暫停“yidong”面板的循環(huán),并顯示“彈框”

當(dāng)小球來(lái)到機(jī)器人響應(yīng)區(qū)域【對(duì)應(yīng)robot變量】則移動(dòng)機(jī)器人。

4. 面板移動(dòng)

設(shè)定我方方塊為動(dòng)態(tài)面板,并且設(shè)定拖動(dòng)時(shí)的拖動(dòng)邊界。

5. 難度設(shè)定

改變球的y軸運(yùn)動(dòng)速度dy變量、機(jī)器人的響應(yīng)區(qū)域robot變量、機(jī)器人的反彈角度angle變量,來(lái)調(diào)節(jié)游戲難度。

6. 其他

至此,游戲基本功能就都做好了,但是還有幾個(gè)方面可以繼續(xù)完善,比如

  1. 小球偶爾會(huì)卡在墻上或者方塊上。
  2. 游戲還可以加入計(jì)分系統(tǒng)。
  3. 小球每1ms檢測(cè)一次運(yùn)動(dòng),導(dǎo)致運(yùn)動(dòng)起來(lái)有時(shí)候會(huì)稍微卡頓??梢赃m當(dāng)加長(zhǎng)時(shí)間間隔,加入“線性移動(dòng)”使小球移動(dòng)更順暢。

 

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

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 有BUG,那冰球會(huì)卡在機(jī)器人方塊里,上上不去,下下不來(lái)

    來(lái)自廣東 回復(fù)
  2. 發(fā)下源文件

    來(lái)自四川 回復(fù)
  3. 發(fā)給我一個(gè)嘛,謝謝

    來(lái)自重慶 回復(fù)
  4. 好難

    回復(fù)
  5. 可以私信一份源文件么,有些地方看不太懂麻煩了

    來(lái)自遼寧 回復(fù)
  6. 機(jī)器人跟隨移動(dòng)咋做呀

    來(lái)自浙江 回復(fù)
  7. 初學(xué)者,厲害

    來(lái)自廣東 回復(fù)
  8. Axure9.0好像找不到全局變量

    來(lái)自廣東 回復(fù)
    1. 項(xiàng)目里面

      來(lái)自北京 回復(fù)
  9. 你好,我做了一下,發(fā)現(xiàn)還是有些問(wèn)題,不知道你做的原型能不能看一下

    來(lái)自上海 回復(fù)
    1. 可以哈,我私信你。

      來(lái)自福建 回復(fù)
    2. 能不能也私信我一份[拜托][拜托]

      來(lái)自福建 回復(fù)
    3. 可以給我也分享一份嗎

      來(lái)自廣東 回復(fù)
    4. 可以也私我一份嗎

      來(lái)自上海 回復(fù)
    5. 可以給我也分享一份嗎

      來(lái)自廣東 回復(fù)
    6. 我也有點(diǎn)問(wèn)題。。。能不能也給我一份啊_(:з)∠)_

      來(lái)自浙江 回復(fù)