Axure教程:冰球小游戲
年底了,閑來無事,逛產(chǎn)品網(wǎng)站時看到一些大佬的小游戲制作教程,受益匪淺,突發(fā)奇想,做了一個冰球類的小游戲與大家交流學(xué)習(xí)。
游戲玩法
少廢話,先看東西 冰球游戲>>
游戲規(guī)則很簡單,小球有初始速度自動降落,用戶水平拖動紅色方塊接球反彈,與機器人對戰(zhàn),若球碰到左右兩側(cè)墻壁則反彈。一方?jīng)]有接住球則游戲結(jié)束。
游戲功能梳理
- 游戲可設(shè)置難度。
- 小球可自動運動,碰到墻壁或者方塊則反彈。
- 用戶可水平拖動方塊接球反彈。
- 機器人會自動跟蹤接球。
- 一方未接住球,則分出勝負(fù)。
核心難點解析
小球如何移動:利用動態(tài)面板中不斷向下重復(fù)循環(huán)改變面板狀態(tài),每改變一次狀態(tài)小球移動一次位置來實現(xiàn)小球的無限運動。【不好理解可接著往下看,下文中有實現(xiàn)教程】
核心中的核心當(dāng)然是小球的運動路徑:
- 當(dāng)小球接觸左右邊界時反彈,即y軸運動方向不變,x軸運動方向相反。
- 當(dāng)小球碰到上下的運動方塊時反彈,即y軸方向相反,x軸運動方向可設(shè)置成隨機或者是根據(jù)小球與方塊接觸部位來規(guī)定不同的運動方向。本文選擇前者,x軸運動方向隨機。
游戲的另一個重點是機器人如何接球:為機器人設(shè)定接球范圍,當(dāng)小球進入機器人的接球范圍時,則機器人水平移動到小球所在的區(qū)域
制作過程
1. 元件準(zhǔn)備
元件較為簡單,主要是上下左右四個邊界,左右邊界可以設(shè)置成白色,可以更好地隱藏。
機器人方塊,和我方方塊(我方方塊需要可拖動,所以設(shè)置成動態(tài)面板)。
小球,以及控制小球移動的動態(tài)面板。
2. 移動小球
設(shè)置全局變量 dx、dy控制小球運動方向,robot控制機器人反應(yīng)區(qū)域、angle控制機器人擊球角度。
單擊“開始”時,設(shè)置“yidong”動態(tài)面板向下循環(huán),循環(huán)間隔1ms。
“yidong”動態(tài)面板狀態(tài)改變時,移動小球采用“相對移動”,移動dx,dy。
3. 控制小球
當(dāng)小球接觸我方方塊時,dy=[[-dy]],dx=[[(Math.random()-0.5)*32]]
當(dāng)小球接觸機器人時,dy=[[-dy]],dx=[[(Math.random()-0.5)*angle]],angle可控制機器人反彈角度。
當(dāng)小球接觸左右邊界時:dx=[[-dx]]
當(dāng)小球接觸上下邊界時:游戲結(jié)束,暫?!皔idong”面板的循環(huán),并顯示“彈框”
當(dāng)小球來到機器人響應(yīng)區(qū)域【對應(yīng)robot變量】則移動機器人。
4. 面板移動
設(shè)定我方方塊為動態(tài)面板,并且設(shè)定拖動時的拖動邊界。
5. 難度設(shè)定
改變球的y軸運動速度dy變量、機器人的響應(yīng)區(qū)域robot變量、機器人的反彈角度angle變量,來調(diào)節(jié)游戲難度。
6. 其他
至此,游戲基本功能就都做好了,但是還有幾個方面可以繼續(xù)完善,比如
- 小球偶爾會卡在墻上或者方塊上。
- 游戲還可以加入計分系統(tǒng)。
- 小球每1ms檢測一次運動,導(dǎo)致運動起來有時候會稍微卡頓??梢赃m當(dāng)加長時間間隔,加入“線性移動”使小球移動更順暢。
本文由 @Carlus 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
有BUG,那冰球會卡在機器人方塊里,上上不去,下下不來
發(fā)下源文件
發(fā)給我一個嘛,謝謝
好難
可以私信一份源文件么,有些地方看不太懂麻煩了
機器人跟隨移動咋做呀
初學(xué)者,厲害
Axure9.0好像找不到全局變量
項目里面
你好,我做了一下,發(fā)現(xiàn)還是有些問題,不知道你做的原型能不能看一下
可以哈,我私信你。
能不能也私信我一份[拜托][拜托]
可以給我也分享一份嗎
可以也私我一份嗎
可以給我也分享一份嗎
我也有點問題。。。能不能也給我一份啊_(:з)∠)_