專案練習: 俄羅斯方塊(React)
用React完成基本版俄羅斯方塊
一、相關連結
(二)程式碼連結
(三)參考資料：Build Tetris with JavaScript and React 以及 React Tetris with Typescript
二、先備知識(React hooks)
(一)useRef
1.可參考先前整理的筆記
2.在專案中使用於GameController(偵測玩家鍵盤事件)組件及 useInterval(固定間隔執行函數)自訂hooks。
(二)useCallback
1.可參考先前整理的筆記
2.在專案中使用於useDropTime(設定四連方塊降落速度)、useGameOver(結束及重啟遊戲)、useGameStats(遊戲狀態設定)及usePlayer(建立當前四連方塊)自訂hooks。
(三)React.memo (與useMemo不同)
1.可參考先前整理的筆記
2.在專案中使用於BoardCell(單一小方塊)、Preview(預告用單一四連方塊)及Previews(預告用四連方塊群)組件。
三、專案規劃
(一)專案畫面結構
(二)程式碼(src)結構
├── ...
├── src
│ ├── components
│ │ ├── Board.js # 所有方塊
│ │ ├── BoardCell.js # 單一小方塊
│ │ ├── Game.js # 呈現開始遊戲按鈕 或 遊戲主頁面
│ │ ├── GameController.js # 偵測鍵盤事件及依設定的固定間隔下降一格
│ │ ├── GameStats.js # 呈現遊戲狀態
│ │ ├── Guide.js # 按鈕對應移動資訊指示
│ │ ├── Menu.js # 開始遊戲按鈕
│ │ ├── Preview.js # 預告用單一四連方塊
│ │ ├── Previews.js # 預告用四連方塊群
│ │ ├── Tetris.js # 遊戲主頁面
│ │ ├── index.js # export所有組件
│ ├── hooks
│ │ ├── useBoard.js # 建立背景方塊及當前四連方塊
│ │ ├── useDropTime.js # 設定四連方塊降落速度
│ │ ├── useGameOver.js # 結束及重啟遊戲
│ │ ├── useGameStats.js # 遊戲分數統計
│ │ ├── useInterval.js # 固定間隔執行函數
│ │ ├── usePlayer.js # 建立當前四連方塊
│ ├── utils
│ │ ├── Board.js # 所有方塊設定: 含背景方塊及前四連方塊位置
│ │ ├── Cell.js # 單一小方塊的預設資訊
│ │ ├── Input.js # 鍵盤輸入對應的移動事件
│ │ ├── PlayerController.js # 當前四連方塊的移動與旋轉
│ │ ├── Tetrominoes.js # 四連方塊矩陣資訊、隨機產生及旋轉
│ └── ...
└── ...(三)專案規劃說明
以下說明專案建構的規劃，其中包含完成俄羅斯方塊專案的幾個重點：
1.碰撞判斷及處理
(1)四連方塊位置不會超出邊框(目前預設20*10)。
(2)計算當前四連方塊的最終位置，並放置預覽方塊。
(3)邊框內碰到其他四連方塊或觸碰到底，則放置當前四連方塊。
2.四連方塊的掉落
(1)每秒降一格(預設，隨著關卡增加速度會增加)。
(2)加速降格速度－↓Arrow Down，每按下降鍵一次就會降或一格。
(3)直接降落到底－⎵Space，按下空白鍵則會直接直線降落到底(drop position)。
3.完成整條方塊
(1)當整條每個小方塊標記為occupied時，消除該條方塊。
(2)更新遊戲分數統計，檢查是否到下一個關卡。
(3)於上方新增空白方塊條。
4.預覽用四連方塊
(1)遊戲一開始時隨機產生四連方塊陣列。
(2)預覽區最上方為下一個出現的四連方塊。
(3)遊戲過中補上新的隨機四連方塊。
5.基本計分
(1)目前只有最基本的每條固定分數，消除10條後到下一關卡。
(2)下一關卡掉落速度會加快，目前專案設定為10關。
6.可再優化的部分
(1)一次消除的條數增加，每條消除的分數加乘。
(2)增加關卡難度，如：除了速度加快，底部也會出現隨機的不規則方塊。(3)消除方塊的動畫、遊戲分數排行榜……等。
(四)程式碼說明
以下針對幾個重要功能進行說明：
1.所有方塊設定: 含背景方塊及前四連方塊位置(Board.js)
2.四連方塊矩陣資訊、隨機產生及旋轉(Tetrominoes.js)
3.當前四連方塊的移動與變形(PlayerController.js)
4.鍵盤輸入對應的移動事件(Input.js)
比起用switch，建立object尋找對應key及value的空間複雜度為O(n)，但可達到時間複雜度O(1)，維護起來也相對容易，尤其是鍵盤事件增加的情況下。
四、完成畫面
