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

游戲玩法

少廢話，先看東西 冰球游戲>>

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

游戲功能梳理

1. 游戲可設(shè)置難度。
2. 小球可自動運動，碰到墻壁或者方塊則反彈。
3. 用戶可水平拖動方塊接球反彈。
4. 機器人會自動跟蹤接球。
5. 一方未接住球，則分出勝負(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ù)完善，比如

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

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

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