年底了，閒來無事，逛產品網站時看到一些大佬的小遊戲製作教程，受益匪淺，突發奇想，做了一個冰球類的小遊戲與大家交流學習。
遊戲玩法
少廢話，先看東西 冰球遊戲>>
遊戲規則很簡單，小球有初始速度自動降落，用戶水平拖動紅色方塊接球反彈，與機器人對戰，若球碰到左右兩側牆壁則反彈。一方沒有接住球則遊戲結束。
遊戲功能梳理
- 遊戲可設置難度。
- 小球可自動運動，碰到牆壁或者方塊則反彈。
- 用戶可水平拖動方塊接球反彈。
- 機器人會自動跟蹤接球。
- 一方未接住球，則分出勝負。
核心難點解析
小球如何移動：利用動態面板中不斷向下重複循環改變面板狀態，每改變一次狀態小球移動一次位置來實現小球的無限運動。【不好理解可接著往下看，下文中有實現教程】
核心中的核心當然是小球的運動路徑：
- 當小球接觸左右邊界時反彈，即y軸運動方向不變，x軸運動方向相反。
- 當小球碰到上下的運動方塊時反彈，即y軸方向相反，x軸運動方向可設置成隨機或者是根據小球與方塊接觸部位來規定不同的運動方向。本文選擇前者，x軸運動方向隨機。
遊戲的另一個重點是機器人如何接球：為機器人設定接球範圍，當小球進入機器人的接球範圍時，則機器人水平移動到小球所在的區域
製作過程
1. 元件準備
元件較為簡單，主要是上下左右四個邊界，左右邊界可以設置成白色，可以更好地隱藏。
機器人方塊，和我方方塊（我方方塊需要可拖動，所以設置成動態面板）。
小球，以及控制小球移動的動態面板。
2. 移動小球
設置全局變量 dx、dy控制小球運動方向，robot控制機器人反應區域、angle控制機器人擊球角度。
單擊「開始」時，設置「yidong」動態面板向下循環，循環間隔1ms。
「yidong」動態面板狀態改變時，移動小球採用「相對移動」，移動dx，dy。
3. 控制小球
當小球接觸我方方塊時，dy=[[-dy]]，dx=[[(Math.random()-0.5)*32]]
當小球接觸機器人時，dy=[[-dy]]，dx=[[(Math.random()-0.5)*angle]]，angle可控制機器人反彈角度。
當小球接觸左右邊界時：dx=[[-dx]]
當小球接觸上下邊界時：遊戲結束，暫停「yidong」面板的循環，並顯示「彈框」
當小球來到機器人響應區域【對應robot變量】則移動機器人。
4. 面板移動
設定我方方塊為動態面板，並且設定拖動時的拖動邊界。
5. 難度設定
改變球的y軸運動速度dy變量、機器人的響應區域robot變量、機器人的反彈角度angle變量，來調節遊戲難度。
6. 其他
至此，遊戲基本功能就都做好了，但是還有幾個方面可以繼續完善，比如
- 小球偶爾會卡在牆上或者方塊上。
- 遊戲還可以加入計分系統。
- 小球每1ms檢測一次運動，導致運動起來有時候會稍微卡頓。可以適當加長時間間隔，加入「線性移動」使小球移動更順暢。
本文由 @Carlus 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議