H5包体标准小游戏生成器

要解决的具体问题

H5 小游戏看起来很容易写，工程约束却很硬：主包 4MB、整包 30MB、文件类型白名单只有 69 种。手工拼项目时最常踩的坑是随手引入 Cocos / Laya / Phaser 这类引擎、留下未编译的 .scss 源文件、或者让资源悄悄越过红线，等发现时大部分代码已经写完。这个技能把规范变成前置约束，而不是事后核对清单。

技能如何工作

• 关键词映射模板：提到贪吃蛇、俄罗斯方块、2048、打砖块、扫雷、井字棋、飞机大战、塔防、跑酷、横版格斗等关键词时，直接匹配 templates/ 下的对应模板，而不是从零生成。
• 复杂模板额外加载能力模块：shooter / tower-defense / runner / fighting 四类模板覆盖对象池、状态机、寻路、连招等机制，生成前会按需读取 references/modules/ 下的 AI 行为、粒子与对象池文档。
• 统一目录结构：index.html 作为入口加载 game.js，js/core/、js/scenes/、js/entities/ 分层，config.js 集中管理可调参数，超过 4MB 时用 subpackages/ 拆包。
• 纯原生实现：HTML5 + Canvas/WebGL + 原生 ES6+ JavaScript，不依赖引擎框架，生成的代码必须能直接打开 index.html 在浏览器中运行。
• 生成后强制验证：运行 validate.sh 检查目录结构、主包与整包体积、文件类型白名单、game.json 有效性，输出 PASS/WARN/FAIL 报告；失败必须修复后重新验证，直到退出码为 0。

性能与包体策略

性能指标被写进生成约束：FPS 稳定 50-60、Draw Call ≤100/帧、首屏渲染 ≤1.5s、输入响应 ≤16ms。实现上依赖 requestAnimationFrame 加 delta time 截断、离屏 Canvas、批量绘制和对象池复用来避免 GC 抖动。资源侧纹理用 PNG-8/WebP，音频用短 MP3/AAC，字体走子集化或系统字体。

适用边界

适合从零生成一款 H5 小游戏，尤其是休闲、街机、益智类，以及有明确包体和性能预算的项目。

不适合的场景：

• React / Vue / Angular 等常规 Web 应用
• Cocos Creator、Lya、Egret、Unity 等大型引擎项目
• Node.js 后端服务或 API
• 桌面端、移动端原生 App
• 只需要动画或交互演示、不涉及玩法的页面

另外，<skill directory> 指技能自身所在目录而非用户项目目录，生成的游戏写入项目的 /workspace/<name>/ 下。