Skip to content

🧩 Split the giant public/game.js into modules (start with weapon/item tables + map builders) #5

Description

@longmaolab

TL;DR (English)

First off — public/game.js is 18,827 lines (verified with wc -l), and honestly that number is a badge of honor. You built a full browser FPS solo: ~117 weapons, 39 maps, bots, a killcam, a shop economy, even an AI chat. The file is huge because the game is ambitious, not because anything is wrong. 🎉

Here's a pro habit that'll make it even better: big games keep their code in several small files instead of one giant one. Good news — about ~4,300 lines (~23%) of your file is "pure data" and "mesh-building" code that barely touches the rest of the game, so it's the safest, easiest thing to pull out first. No behavior changes, just moving stuff into new files.

Start here: copy the weapon/item tables (WEAPONS, MELEE_ITEMS, SUPPORT_ITEMS) into a new public/data.js, add <script src="data.js"></script> before game.js in index.html, delete the originals from game.js. Done. That's the whole first step.


详细说明(中文)

先夸一句 👏

你一个人做出了一个完整的浏览器 FPS——大概 117 把武器、39 张地图、机器人 AI、击杀回放、商店经济系统、甚至还有 AI 聊天。public/game.js 现在有 18,827 行(我用 wc -l 数过了)。这个文件这么大,是因为游戏做得很丰富,这是值得骄傲的事,不是缺点。

现在的情况(已核实)

  • 整个游戏逻辑都在一个文件里:public/game.js,18,827 行。
  • 它通过一行 <script> 直接加载:public/index.html:828<script src="game.js"></script>
  • 文件顶层有几百个全局声明。其中很大一部分是「纯数据」和「纯建模」代码,跟游戏逻辑几乎不耦合。

哪些代码最适合先搬出去(已核实行号)

这些是最安全的——它们只是数据或者画几何体,不依赖游戏状态:

内容 位置(已核实) 类型
WEAPONS 武器表 public/game.js:6 开始(约 811 行) 纯数据
MELEE_ITEMS 近战表 public/game.js:817 纯数据
SUPPORT_ITEMS 辅助道具表 public/game.js:926 纯数据
WEAPON_COSTS 价格表 public/game.js:1085 纯数据
BUNDLES 礼包 public/game.js:1169 纯数据
WEAPON_SKINS 皮肤 public/game.js:6168 纯数据
所有 buildXxxMap() 地图构建函数 public/game.js:27444600+(约 ~1,800 行) THREE.js 建模
所有 buildXxx() 武器模型函数 武器模型构建区(约 1,313 行) THREE.js 建模

加起来大约 4,300 行(约 23%)。这是个保守的下限——实际能搬的更多,但这些是「闭着眼睛搬都不会出错」的部分。

为什么值得做(payoff)

  • 🔍 更好找东西:想改武器数值就打开 data.js,想改地图就打开 maps.js,不用在 18,000 行里翻。
  • 🤝 更少合并冲突:以后改地图和改武器在不同文件里,git 不会打架(merge headache 变少)。
  • 🧠 加载心智更快:一个 1,500 行的文件,脑子一下就能装下;18,827 行装不下。
  • ♻️ 可复用:数据表单独成文件后,工具脚本/测试也能直接 import。

参考:你的一个兄弟项目就是靠把代码拆成 routes/ + socket/ + services/(服务端)和 components/ + pages/(客户端),把最大的文件控制在 ~1,500 行。同样的思路这里也适用。


🚀 怎么改 / How to fix(低风险第一步)

⚠️ 注意 CLAUDE.md 里的提醒:WEAPONS[]weaponModels[] 必须索引对齐;武器模型必须有 _flash。搬动时只移动整块声明,不改顺序、不改内容,这些约束就不会被破坏。

最简单的做法是用 <script> 顺序加载(不用改任何 build 工具,最适合先试水):

  • 1. 建 public/data.js:把 WEAPONSgame.js:6)、MELEE_ITEMS:817)、SUPPORT_ITEMS:926)三个数组原样剪切过去。
  • 2. 在 index.html 里挂上:在 public/index.html:828 那行 game.js 之前加一行 <script src="data.js"></script>(顺序很重要——数据要先于逻辑加载)。
  • 3. 从 game.js 删掉刚搬走的那三段。
  • 4. 本地验证:用项目里的预览(pvp-game,端口 3001)打开,开一局,确认武器/近战/道具都正常出现、能开火(重点测 _flash 没报错)。
  • 5. commit + push,提交信息写清楚「extract weapon/item tables into data.js, no behavior change」。

第一步成功、游戏照常跑之后,再用同样的套路继续:

  • public/maps.js ← 所有 buildXxxMap()game.js:27444600+
  • public/models.js ← 所有 buildXxx() 武器模型函数
  • public/skins.jsWEAPON_SKINS:6168)、WEAPON_COSTS:1085)、BUNDLES:1169

💡 进阶(可选,以后再说):等熟悉了,可以升级成 ES Modules(export / import + <script type="module">),那样依赖关系更清晰。但现在先用 <script> 顺序加载就够了——一次一小步,每步都能跑起来再继续,这才是最稳的重构方式。


为什么先搬数据表,而不是先搬逻辑?

因为数据表是单向依赖:游戏逻辑用数据,但数据不反过来用逻辑。所以把它们搬走,game.js 里的逻辑代码一行都不用动——这就是「低风险」的含义。等这部分稳了,整个文件会一下子瘦掉一两千行,剩下的就清爽多了。

你已经把最难的部分(写出整个游戏)做完了 💪。这一步只是把作品整理得更漂亮、更好维护——一次一个文件,慢慢来,你完全能搞定。加油!🎮

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions