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

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

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

前端：從棋盤開始

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

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

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

游戲邏輯：最硬的部分

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

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

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