Axure教程:冰球小游戲
年底了,閑來(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é)束。
游戲功能梳理
- 游戲可設(shè)置難度。
- 小球可自動(dòng)運(yùn)動(dòng),碰到墻壁或者方塊則反彈。
- 用戶可水平拖動(dòng)方塊接球反彈。
- 機(jī)器人會(huì)自動(dòng)跟蹤接球。
- 一方未接住球,則分出勝負(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ù)完善,比如
- 小球偶爾會(huì)卡在墻上或者方塊上。
- 游戲還可以加入計(jì)分系統(tǒng)。
- 小球每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é)議
有BUG,那冰球會(huì)卡在機(jī)器人方塊里,上上不去,下下不來(lái)
發(fā)下源文件
發(fā)給我一個(gè)嘛,謝謝
好難
可以私信一份源文件么,有些地方看不太懂麻煩了
機(jī)器人跟隨移動(dòng)咋做呀
初學(xué)者,厲害
Axure9.0好像找不到全局變量
項(xiàng)目里面
你好,我做了一下,發(fā)現(xiàn)還是有些問(wèn)題,不知道你做的原型能不能看一下
可以哈,我私信你。
能不能也私信我一份[拜托][拜托]
可以給我也分享一份嗎
可以也私我一份嗎
可以給我也分享一份嗎
我也有點(diǎn)問(wèn)題。。。能不能也給我一份啊_(:з)∠)_