《Mace Duel Mobile》：手机端双人在线对战的技术方案

这套方案解决什么问题？

《Mace Duel Mobile》定位为可在手机和电脑浏览器运行的双人 3D 在线对战原型。它的重点不只是“把角色放进 3D 场景”，而是处理实时联机最容易出问题的几个环节：

• 两名玩家通过房间码进入同一局游戏；
• 手机触控与键鼠操作可以共存；
• 对战结果由服务器判定，避免客户端直接伪造伤害、血量或位置；
• 支持普通锤击、由坠落距离加成的重击，以及风力弹；
• 一局包含准备、倒计时、战斗、回合结束、整场结束和再来一局等状态。

技术栈为：客户端使用 TypeScript、Vite、Three.js，服务器使用 Node.js、TypeScript、ws。项目结构还计划把游戏规则和通信协议置于共享目录，降低客户端与服务器规则不一致的风险。

联机架构：服务器负责“裁判”

该方案采用服务器权威模式。客户端应只发送以下内容：

• 移动方向；
• 视角朝向；
• 跳跃与冲刺状态；
• 攻击、释放风力技能等操作指令；
• 输入序号，用于确认服务器已经处理到哪一笔操作。

生命值、伤害、击退、投射物轨迹、胜负和回合得分均由服务器计算。这样即使有人尝试修改浏览器内存或伪造“我已经击中对手”的消息，服务器仍会按照自身保存的角色状态进行验证。

服务器模拟频率设为 30Hz。对于双人浏览器对战原型，这个频率在响应性与服务器开销之间较为均衡。方案还保留了有限的历史位置记录，用于在近战判定时进行短时间回溯，缓解网络延迟带来的“明明打中了却没算”的体验问题。

战斗规则：近战、坠落重击与风力弹

玩法围绕三类战斗交互展开：

1. 普通锤击：目标必须位于攻击距离和攻击扇形范围内，攻击还受冷却时间限制。
2. 下落重击：角色在空中下落时发动攻击，伤害会按下落距离提高，并产生更强击退效果；伤害设有上限，避免极端高度造成失衡。
3. 风力弹：玩家拥有可再生的技能充能。风力弹命中角色、地面、边界或到达寿命上限后爆炸，对爆炸范围内角色施加水平推力和向上抬升力，为空中重击创造机会。

每轮设置出生保护时间，防止刚复活就被连续压制。比赛采用多回合计分，先达到规定胜场的玩家赢得整场比赛；若时间结束，则按剩余生命值决定回合结果，生命值相同则可判为平局。

手机操作如何设计？

移动端建议横屏体验，并将触控区分为两部分：

• 左侧虚拟摇杆：控制前后左右移动；
• 右侧滑动区域：控制镜头视角；
• 独立按钮：跳跃、冲刺、锤击、风力技能。

这类设计需要允许玩家同时用多个手指操作，例如左手推摇杆、右手转镜头，同时按下攻击按钮。触控输入应使用支持多指交互的事件处理方式，以避免一个触点覆盖另一个触点的状态。1

桌面端则可保留常见的 WASD 移动、鼠标视角和键盘技能按键，方便开发调试，也让手机与电脑玩家可以进入同一房间。

性能取舍：先保证流畅，再追求画面

对于手机浏览器，场景性能往往比复杂特效更重要。地面砖块、围栏或其他重复装饰物，可以使用 Three.js 的 InstancedMesh：同一份几何体和材质可被多次实例化渲染，适合大量重复物件。2

阴影则应当作为可调节选项。Three.js 的渲染器默认并不启用阴影贴图；开启动态阴影会提高视觉层次，但也会增加设备负担。对中低端手机而言，关闭阴影或降低阴影质量通常是更稳妥的选择。4

上线前需要补齐的部分

原始交付内容展示了项目目录、共享协议、规则定义以及服务器房间逻辑的主要片段，但所提供的代码在 HTTP 静态文件服务部分中途截断。因此，它更适合作为可继续开发的原型蓝图，而不是可以直接复制后立即上线的完整仓库。

实际部署前，至少应完成以下工作：

• 补全客户端 Three.js 场景、角色显示、输入层、UI、声音与网络状态处理；
• 补全服务器入口、WebSocket 连接生命周期、静态资源服务与生产构建流程；
• 对消息大小、发送频率、房间人数、无效输入和断线情况进行更严格限制；
• 为公网部署配置 HTTPS 与加密 WebSocket，并在反向代理中正确转发 WebSocket 升级连接；
• 加入心跳、断线重连、日志、监控和异常恢复；
• 在真实手机网络环境下测试延迟、丢包、横竖屏切换及多指操作。

结论

这套设计的价值在于把“手机浏览器双人动作对战”拆解为可实现的工程模块：客户端专注表现与输入，服务器专注规则与裁决，共享层统一协议和数值规则。先用简洁的竞技场、两名玩家和少量技能跑通完整对局，再逐步增加地图、角色外观、匹配系统和反作弊能力，会比一开始堆叠复杂内容更容易落地。