这是我独立研发的太空舰队游戏《歼星者》的原型代码（浏览器端）。这个原型的核心目标不是“做一段演示动画”，而是把一套可扩展的玩法骨架跑通：数据驱动的舰船/装备/关卡配置 + 舰队编成 + 轨道战斗模拟 + 进度存档/导入导出 + 多语言 UI。

关键词

  • 数据驱动（Data-driven）：舰船 / 装备 / 关卡 / 抽卡池全部由外部 .dat 配置加载与解析
  • 状态机式 UI 架构：主菜单 / 关卡选择 / 舰队编成 / 研发抽卡 / 战斗 / 胜负界面清晰分层
  • 舰队编成系统：舰船槽位、装备槽位、载重/容量约束、编成保存与预览
  • 战斗模拟：轨道单位（satellite）+ 攻击流程 + 射程与属性克制（倍率）+ 战斗日志可视化
  • 轨道/物理味道：用万有引力公式计算轨道速度（并做缩放），让“绕行战斗”有一致的数学基础
  • 可用的存档体系：LocalStorage 自动保存 + JSON 文件导入/导出（便于分享与回放）
  • 多语言（i18n）：中英双语字典与 UI 文案统一入口
  • 工程化细节：数据 normalize / deep clone / 容错解析 / UI Modal 覆盖层 / 迷你地图信息聚合

项目概述

《歼星者》原型包含一套完整循环：

  1. 读取配置数据：从 ship.dat / equipment.dat / level.dat / gacha.dat / init.dat 加载初始内容
  2. 资源与养成：玩家拥有金币、已拥有舰船/装备、可解锁图纸与抽卡池
  3. 舰队编成：在槽位中选择舰船、配置装备，受载重/容量等规则约束
  4. 关卡战斗：在行星轨道上部署单位，执行攻击回合与伤害结算，记录战斗日志并给出胜负
  5. 存档/分享：进度自动写入本地，也可以导出 JSON，换设备后导入继续

我做了哪些系统（对应代码结构）

1) 数据层：全部从 .dat 配置驱动

  • 舰船：名称、类型、火力、防空、耐久、护甲、闪避、载重、射程、最小轨道、价格、属性
  • 装备：种类、数值、质量、价格、属性等
  • 关卡：敌方配置、奖励、难度参数
  • 抽卡池：概率/掉落定义
  • 初始化：初始赠送/解锁内容

实现方式是：对每个数据文件提供 loadXxxData() + parseXxxData()，并做基础容错（跳过空行/注释、字段数量校验、类型转换、错误输出）。

关键：这套结构意味着后续加内容不需要改逻辑代码，只需要新增数据行或关卡表。

2) UI 与流程：用 gameState 组织整个产品流

原型把界面拆成清晰的状态：

  • mainMenu 主菜单
  • levelSelect 关卡选择
  • fleetFormation 舰队编成
  • fleetResearch 研发/抽卡
  • battle 战斗
  • victory / defeat 结算
  • dialog 对话/引导

每个状态对应一套 drawXxx() 与输入处理（mousePressed / keyPressed），并用 Modal Overlay 管理弹窗。

工程收益：状态彼此隔离，UI 与玩法逻辑更容易迭代，不会“到处 if-else”。

3) 舰队编成：槽位 + 装备 + 规则约束

  • fleetSlots / playerFleet 管理编队
  • 记录每艘船的装备与装备总质量（影响载重/容量）
  • 提供编成保存按钮与预览渲染

这块的价值是：它不是“点一下就开打”，而是把配置阶段做成一等公民，让战斗结果与玩家选择强相关。

4) 战斗模拟：轨道单位、射程、属性克制、战斗日志

战斗侧的关键对象与 UI：

  • satellites：轨道单位（承载舰船数据、HP、角度、轨道半径、速度等）
  • redPoints：敌方/事件点（用于目标与信息展示）
  • battleLog：战斗日志（限制条数，支持可视窗口）

伤害体系包括：

  • 基础数值（火力、防空、护甲、闪避等）
  • 射程/轨道距离的判断
  • 属性克制：强克制×2、弱克制×1.5、被克制×0.5（多属性组合可叠乘）

关键：我把“战斗过程”做成可解释的系统（日志+倍率），便于调参、复现与定位问题。

5) 轨道/物理味道：用引力公式定义速度基准

原型用万有引力公式 v = sqrt(G*M/r) 计算轨道速度，并做合理缩放，让轨道运动具备统一的数学基础（而不是纯粹手调常数）。

这会让后续拓展（不同质量行星、不同轨道层、速度/射程的策略取舍）更自然。

6) 存档与导入导出：LocalStorage + JSON 文件

  • 自动：LocalStorage 写入 playerData
  • 手动：导出 playerProgress.json（优先 FileSaver.js，退化为 p5 的 saveJSON）
  • 导入：通过隐藏 file input 读取 JSON 恢复进度

工程收益：测试、分享、回归验证都更方便；也能支持“存档格式升级”这种真实产品需求。

技术栈

  • JavaScript（浏览器端）
  • p5.js（绘制、输入、资源加载、JSON 保存）
  • LocalStorage（本地持久化）
  • FileSaver.js（可选，用于更稳定的文件保存）

下一步可迭代方向（如果继续做成正式项目）

  • 将数据/战斗/渲染拆成模块（ESM），减少单文件复杂度
  • 增加确定性随机（seed RNG），让战斗可复现、便于回放与单元测试
  • 抽离“数值结算层”，让战斗模拟可在无渲染环境跑批量平衡测试
  • 引入更清晰的事件系统（例如战斗事件总线），提升扩展性（技能、BUFF、AI）

链接