今年我給自己定了兩個目標(biāo)：不再看教程，直接動手做項目。聽起來像所有新年決心一樣不靠譜，但至少這兩個我打算認真執(zhí)行。

我想提升后端技能，練習(xí)一些之前沒接觸過的進階概念，于是決定做一個在線多人游戲。最開始選的是國際象棋，但規(guī)劃了幾分鐘走子邏輯和規(guī)則后，我意識到光是搞定棋子移動就要花掉大量時間，要么偏離真正的學(xué)習(xí)目標(biāo)，要么直接放棄。用現(xiàn)成的驗證庫？那又失去了從頭構(gòu)建的樂趣。

需要足夠難，讓我有點頭疼但又不會崩潰。最后我選了Ludo（印度十字戲）。

前端：從棋盤開始

我沒有先做落地頁、登錄或玩家選擇，而是直接攻游戲棋盤。先把核心玩法跑通，其他功能后面再插拔。外層布局用Tailwind實現(xiàn)。

接下來是棋子移動的格子。用CSS畫網(wǎng)格不難，但怎么追蹤棋子位置？我寫了一個函數(shù)，接收位置參數(shù)返回對應(yīng)樣式。代碼很長，肯定有更優(yōu)雅的寫法，但能跑就行。每個格子對應(yīng)棋盤上的固定位置，我把這個函數(shù)丟進utils文件夾，取名getCellPosition。

棋子設(shè)計好后，用另一個函數(shù)設(shè)定初始位置。還需要骰子組件。在npm上搜到3d-dice這個3D骰子包，完全匹配需求，但沒有類型定義。我本來打算自己寫.d.ts文件，但轉(zhuǎn)念一想：我能想到的事，別人肯定也想到了。翻了一遍項目fork，果然找到一個完整帶類型的版本。

游戲邏輯：最硬的部分

這是整個項目最難的環(huán)節(jié)。不想展開講瑣碎細節(jié)，只給高層 overview。

我用useReducer當(dāng)游戲引擎，因為游戲狀態(tài)多且互相牽扯。初始狀態(tài)對象包含玩家數(shù)組，每個玩家又有棋子數(shù)組。設(shè)計了三個reducer動作：ROLL_DICE（擲骰）、SELECT_NUMBER（選數(shù)字）、MOVE_PIECE（移動棋子）。我的理解是：玩Ludo時，你先擲骰子，心里選一個數(shù)字，然后移動棋子——reducer就按這個流程設(shè)計。

接下來是狀態(tài)機……