《卫戍协议盟约》技术架构解析Node.js PixiJS three.js 如何打造浏览器联机自走棋【免费下载链接】Stronghold-Protocol明日方舟「卫戍协议盟约」非官方同人复刻浏览器自走棋塔防单人或 1–4 人联机合作非商业项目地址: https://gitcode.com/gh_mirrors/st/Stronghold-Protocol《卫戍协议盟约》Stronghold-Protocol是一个明日方舟「卫戍协议盟约」玩法的开源同人复刻一个浏览器联机自走棋塔防支持单人或 1–4 人合作。它的技术栈非常克制——服务端只有 Node.js ws一个运行时依赖客户端用 PixiJS 渲染 2D 战场、three.js 渲染可选的 3D 棋盘整套代码不打包、不转译打开浏览器即玩。这篇文章带你拆开它的架构看看一个低功耗小主机是怎么同时服务四个玩家开战的。一、技术选型一个零构建的浏览器游戏很多人看到联机自走棋第一反应是得用游戏引擎 微服务。这个项目反其道而行核心选型写在 docs/DESIGN.md 的 §1层技术说明服务端Node.js ≥ 22 ws8纯 ESM无框架、无 ORMHTTP 静态服务器也是手写的战斗模拟纯 JS 函数同一份代码跑在 Node 和浏览器里2D 渲染PixiJS 7.4.2 pixi-spine 4.0.6官方 Spine 小人、特效、伤害数字3D 渲染three.js 0.186可选的官方风格 3D 棋盘UIPreact 10 htm无构建步骤vendor 目录直接引用几个关键决策值得新手注意没有打包器、没有 TypeScript客户端用原生 ES Modules第三方库由 tools/vendor.mjs 从node_modules拷进 public/vendor/。局域网联机可能没有外网运行时不能依赖任何 CDN。单一 WebSocket每个浏览器标签一条/ws连接JSON 文本帧入站限 64 KB、每连接限 40 条/秒见 server/index.js 与 server/net.js。消息协议即文档所有消息类型、字段、校验规则集中在 shared/protocol.js服务端用它校验、客户端用它构造请求一个文件两端共享。shared/目录是架构里很精巧的一层常量、协议校验、朝向旋转等纯函数同时被服务端和浏览器 import从源头杜绝两端逻辑漂移。二、最核心的设计战斗在浏览器里跑这是整个项目最值得学习的部分DESIGN §14。传统做法是服务器权威模拟战斗、逐帧把快照推给客户端。四人局下服务器要实时驱动最多 4 个战场 × 60 tick/秒CPU 和网络都很吃紧。这个项目的方案是和官方客户端一样每个玩家在自己的浏览器里模拟自己的战斗服务器只管经济、回合和结算。效果是量级的差异DESIGN §14 实测数据服务器 CPU每作战回合约 170–360 ms → 约 1 ms服务器到客户端流量约 2–3.3 MB → 约 0.25 MB浏览器端成本约 0.05–0.1 ms / tick主线程直接跑连 Web Worker 都不需要要客户端说了算而不被作弊或掉线打穿靠的是三根支柱1. 确定性模拟。战斗模拟引擎 server/sim/Battle.js 是纯 ESM固定步长TICK 1/30s、种子化随机数mulberry32见 server/sim/rng.js引擎内不碰墙钟时间、不碰Math.random。一局战斗被完整描述成一份 JSONBattleSpec由 server/sim/spec.js 构建服务端和客户端从同一份 spec 构造出逐 tick 完全一致的战斗——测试甚至校验了任意构造顺序的结果摘要相同。2. 分级权威。自己的普通战场本人客户端是权威方联防与 Boss 场由座位号最低的在线玩家做权威方其余玩家本地模拟但只做显示机器人和掉线玩家的战场由服务器无头模拟HeadlessJob分片推进见 server/match/fields.js。3. 结果校验 接管。权威客户端结束后上报b.result服务端做结构和合理性双重校验击杀数、漏怪构成、装备合法性……fields.js validateClientResult。结果可疑无所谓——因为模拟是确定性的服务器直接用同一份 spec 重算一遍以服务器结果为准。掉线超过宽限期则触发接管服务器从 t0 重跑或把 Boss 场交给队友的副本。换句话说客户端模拟是快车道确定性 可重算是兜底两者叠加让一台迷你主机也能稳开四人局。三、回合制状态机与网络协议一局游戏的宏观流程是一个显式状态机确认信息 → 策略轮选 → 14 回合休整期 作战→ 最终攻势/隐秘核心 → 结算。server/match/Match.js 负责状态流转、计时和广播server/lobby.js 管理 4 位玩家 AI 队友的房间4 字符房号、就绪、断线重连 token。服务端到客户端只有三类核心推送协议全文见 DESIGN §8m.public—— 全房间公共状态阶段、回合、各玩家 LP/盟约/状态变更时推送、限频 ≤10/sm.private—— 只发给本人的私有状态商店、手牌、棋盘、资金m.field/b.*—— 战场元数据与客户端战斗的起止、进度、结果客户端的所有操作都是带rid的意图消息g.buy、g.move、g.equip……服务端校验后回ok或error。这套意图—校验—状态推送的模型是理解所有服务端联机网页游戏的通用骨架。四、渲染管线PixiJS 打底three.js 加冕渲染层在 public/js/render/按职责拆成十几个小模块tiles / units / spine / fx / drag / pick / interp……。层次结构是three.js 3D 棋盘可选public/js/render/board3d/——只有检测到本机提取了官方棋盘贴图时才加载几何体从 data/stages.json 实时生成静态网格合并成少量 draw callPixiJS 2D 图层——程序化瓦片、Spine 干员小人带 LRU 缓存的骨骼资源池public/js/assets.js、特效与伤害数字。两层共用一个相机模型public/js/render/projection.js 保持worldToScreen等 API 不变但内部由 three.js 的PerspectiveCamera驱动保证 3D 棋盘、2D 小人与拖拽拾取永远对齐。没有 WebGL2 或本地贴图时自动降级为 2D 棋盘?board2d|3d可手动切换。交互上有个值得一提的细节拾取不是点中了哪个精灵而是点中了哪块地砖DESIGN §18.1——玩家实测反馈地上都画好了方格点方格选中即可于是整套拖拽/朝向逻辑都锚定在 19×21 的棋盘坐标上public/js/render/drag.js 和 public/js/ui/facingWheel.js 的方向轮盘也复用同一套格子数学。五、数据管道与测试架构的地基数据先行所有数值112 名干员、23 个盟约、波次、地形来自官方数据表由 tools/build-data.mjs 生成为 data/ 下的 JSON提交入库、两端共享浏览器 fetch、Node 端一次性加载建索引见 server/data.js。模拟引擎通过 server/sim/simdata.js 取数——Node 下读盘浏览器下读注入同一套内容模块server/sim/content/无需修改。测试即文档npm test跑node --test数百个用例覆盖模拟引擎test/sim/、对局逻辑test/match/、渲染与 UItest/render/浏览器 E2E 用 puppeteer-core 驱动系统 Chrome。确定性模拟甚至让路径与官方逐格一致客户端局与服务端局结果一致这类校验可以直接写成断言。六、小结给想动手的人这套架构的可复用经验浓缩成三条把最贵的计算推到客户端——前提是先做出确定性模拟服务器永远能重算兜底共享代码即协议——shared/protocol.js让服务端与浏览器永远说同一种语言零构建、可降级——无 CDN、无打包3D 缺了就回 2D局域网离线也能完整开黑。想深入细节建议从 docs/DESIGN.md架构唯一事实来源、docs/SIM.md模拟契约和 docs/DEPLOY.md部署与联网方式读起再看 README.md 里的快速开始十分钟就能在自己电脑上开出一局。【免费下载链接】Stronghold-Protocol明日方舟「卫戍协议盟约」非官方同人复刻浏览器自走棋塔防单人或 1–4 人联机合作非商业项目地址: https://gitcode.com/gh_mirrors/st/Stronghold-Protocol创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考