《Mace Duel Mobile》：用 Three.js 打造手機、電腦都玩到嘅雙人對戰原型

呢個原型想解決咩問題？

《Mace Duel Mobile》係一個為手機瀏覽器同電腦瀏覽器而設嘅雙人 3D 對戰遊戲原型。玩法唔係純粹鬥撳掣：玩家要用狼牙棒近戰、利用風力投射物將對手吹起，再把握對方落地前後嘅空檔打出重擊。

技術組合相當直接：前端用 TypeScript + Vite + Three.js，後端用 Node.js + TypeScript + WebSocket。重點係由伺服器做權威判定——客戶端唔會直接提交「我扣咗你幾多血」或者「我企喺邊」，而係只傳送移動輸入、視角、跳躍、攻擊及風力技能指令。最後由伺服器計算角色位置、命中、傷害同回合結果。

呢種做法對網上對戰尤其重要：至少可以避免由客戶端直接報血量或報傷害，令遊戲規則有一個共同裁判。

一局點樣打？

原型設計為兩名玩家開私人房間對戰。雙方準備後，遊戲會倒數開始；每回合限時 120 秒，先贏 3 局嘅玩家取得整場勝利。

戰鬥機制包括：

• 普通近戰：近距離、視角方向同攻擊角度都要符合伺服器判定。
• 墜落重擊：角色從較高位置向下跌時命中，傷害會按下墜距離提高，並設有上限。
• 風力投射物：玩家有最多 3 格能量，會隨時間回復；投射物爆炸後可推開附近角色並將其拋高。
• 出生保護：每回合重生後有短暫保護，避免一開場即刻被連招帶走。
• 再戰：整場結束後，兩位玩家都確認再戰，先會重開新對局。

換句話講，風力投射物唔一定直接造成傷害，但可以製造空中狀態；而墜落重擊就係追擊嗰一下。節奏會偏向「吹起對手、走位追近、把握落點」而唔係單靠不停揮武器。

手機操作唔可以只係搬鍵盤掣

手機版建議橫向玩，控制配置包括：

• 左邊虛擬搖桿：移動
• 右邊畫面拖曳：轉動視角
• 獨立按鈕：跳躍、衝刺、狼牙棒攻擊、風力技能
• 電腦端保留鍵盤滑鼠支援

難位在於多指同時操作。玩家可能左手推搖桿，右手轉鏡頭，仲要同時撳攻擊或跳躍；觸控系統要能夠可靠分辨多隻手指嘅輸入，先至唔會一撳技能就停晒移動。相關流動遊戲控制文件亦指出，觸控畫面上每一隻手指都可視為獨立指標，適合處理多指動作。1

網絡對戰：30Hz 模擬加上基本反延遲處理

伺服器以固定 30Hz 更新遊戲狀態，即大約每秒 30 次處理移動、重力、投射物、命中同回合流程。

近戰命中方面，設計加入有限度「回溯」：伺服器會參考目標較早前嘅位置紀錄，補償部分網絡延遲，再判斷攻擊有冇打中。回溯上限為 150 毫秒，避免延遲太高時造成過度追溯。

另外，房間會做基本訊息驗證，例如：

• 玩家名稱及房間碼格式
• 輸入數值範圍
• 訊息長度
• 輸入序號是否倒退或異常跳升
• 攻擊與技能冷卻時間

呢啲未必等於完整反外掛系統，但對一個兩人網頁對戰原型而言，至少守住咗最基本嘅伺服器權威原則。

畫面效能要為手機留餘地

Three.js 場景如果有大量使用同一套幾何形狀與材質嘅地面或裝飾物，可以用 InstancedMesh 做實例化繪製，減少重複提交繪圖工作。2 對手機瀏覽器而言，呢類取捨通常比堆砌特效更實際。

陰影亦應該做成可調整選項。Three.js 的 WebGLRenderer.shadowMap 可控制陰影功能，而陰影預設並非必然開啟；如果裝置效能不足，關閉動態陰影可以換取較穩定幀率。4

部署時最重要：唔好將遊戲伺服器當普通靜態網站

公開部署時，前端頁面可由 Web 伺服器提供，WebSocket 則要正確轉發升級連線。實際運行上亦要留意 HTTPS/WSS、連線保活、房間清理及斷線處理。

原型中，玩家離開進行中對局時，另一位玩家可被判為勝方；而空房會被清除。呢類細節睇落唔搶眼，但先係令雙人連線遊戲唔會一斷線就卡死喺房間畫面嘅關鍵。

總結

《Mace Duel Mobile》最值得參考嘅地方，唔係單一招「風力吹飛」或者墜落重擊，而係將手機觸控、雙人房間、伺服器判定、延遲補償同畫面效能一齊放入同一個可行架構。

如果目標係做一隻輕量、可直接喺手機瀏覽器開房同朋友對打嘅 3D 小遊戲，呢套思路相當實用：玩法可以簡單，但網絡判定、觸控手感同效能底線，最好一開始就設計好。