Mace Duel Mobile：手機與電腦都能玩的雙人線上鎚鬥遊戲

這款名為 Mace Duel Mobile 的瀏覽器對戰專案，瞄準的是「拿起手機就能和朋友打一場」的雙人 3D 鬥技場體驗。它同時支援手機與桌上型電腦：前者以觸控按鍵和雙區域操作為主，後者則保留鍵盤、滑鼠控制。

對戰不只靠前端畫面，勝負由伺服器判定

專案前端以 TypeScript、Vite 與 Three.js 建構，負責 3D 場景、介面、輸入、畫面插值與網路狀態呈現；後端則以 Node.js、TypeScript 與 ws 處理房間、玩家狀態、戰鬥與回合結果。

核心原則是伺服器權威：客戶端不會提交可被直接採信的生命值、傷害或角色位置，而是僅傳送移動輸入、視角、攻擊與技能命令。伺服器以固定 30 Hz 更新模擬，統一計算移動、命中、投射物、生命值及勝負，降低玩家竄改資料影響對戰公平性的空間。

一場對戰有哪些玩法？

玩家可建立或加入六碼私人房間，兩人都準備後進入倒數。每回合最長 120 秒，先取得 3 回合勝利者贏得整場比賽。

戰鬥設計包含幾個重點：

• 鎚擊近戰：依距離與面向判定是否命中。
• 下落重擊：角色在空中下墜時攻擊，可依下落距離提升傷害與擊退力。
• 風力充能：每位玩家最多持有 3 次充能，可發射風力投射物；爆炸會把附近角色推開並抬升。
• 出生保護與再戰：開局具短暫保護時間；整場結束後，雙方都選擇再戰即可重開新對局。

這類把攻擊結果放在伺服器端處理的做法，也讓「延遲補償」成為設計的一環：系統會保留近期位置紀錄，並在近戰命中判定時有限度回看目標位置，避免高延遲玩家明明瞄準命中卻被網路延遲完全抵銷。

手機操作：雙手同時做事才像對戰遊戲

手機端建議橫向使用。左側虛擬搖桿負責移動，右側拖曳區調整視角，並另設跳躍、衝刺、鎚擊、風力充能按鍵。這樣的配置讓玩家能在移動時轉鏡頭、跳躍並出招，而不是一次只能執行一項動作。

多指觸控本來就是行動遊戲控制的重要基礎：每一個手指接觸都可作為獨立指標，因此可同時處理移動、視角與技能操作。1

畫面效能的取捨

在 Three.js 場景中，專案可將大量重複地面物件改以 InstancedMesh 呈現。這種具備實例化渲染支援的特殊網格，適合重複使用相同幾何與材質、但位置或變換不同的物件。2

陰影則可作為畫質選項調整。Three.js 的 WebGLRenderer.shadowMap 可管理陰影，且陰影功能預設並未啟用；若手機效能有限，關閉動態陰影是直接的取捨方式。4

專案結構重點

程式碼可分為三個主要區塊：

• client/：3D 渲染、阿拉伯語 RTL 介面、觸控與滑鼠輸入、音效、預測與畫面插值。
• server/：私人房間、30 Hz 模擬、角色與投射物狀態、心跳檢查、訊息驗證與速率限制。
• shared/：遊戲規則、通訊協定型別、傷害計算與輸入驗證等前後端共用邏輯。

整體來說，Mace Duel Mobile 的看點不只是做出一個可揮鎚的 3D 網頁小遊戲，而是把行動觸控、即時連線、私房配對與伺服器判定整合進同一個可運行的雙人對戰架構。