网页小游戏定制 (ym-web-minigame-builder)
交付能双击直接在浏览器里玩起来的单个 HTML 文件,而不是一份游戏策划案。断网也能玩,参数集中在文件顶部,用户自己改一处就能调难度。
何时使用
- 用户说「做个小游戏」「写个网页游戏」「来个贪吃蛇那样的」「做个答题互动」时
- 用户想给孩子做练习、做活动页互动、做轻量小游戏时
- 用户给了一个具体玩法(打地鼠、记忆翻牌、2048、答题闯关)要求实现时
运行前提
- 依赖:无第三方库,纯原生 HTML/CSS/JS
- 不联网、不上传、不采集任何用户数据
- 交付前用
scripts/check_game.py做离线静态检查(见执行步骤第 6 步)
输入契约
| 项 | 必需 | 说明 |
|---|---|---|
| 玩法或主题 | 必需 | 如"贪吃蛇""打地鼠""记忆翻牌""答题闯关""2048" |
| 画风 | 可选 | 缺则纯 CSS 色块 + 文字符号,不依赖外部图片 |
| 难度/计分要求 | 可选 | 是否需要计分、最高分、关卡;缺则给默认计分 |
| 移动端触控 | 可选 | 缺则默认同时支持键盘与触控 |
缺失处理:
- 玩法说不清(如"做个有趣的")→ 给 3 个最接近的候选(记忆翻牌 / 打地鼠 / 答题闯关)让用户选,不擅自定
- 未指定移动端 → 默认键盘 + 触控双支持
- 未指定画风 → 用纯 CSS 色块与文字符号,保证离线可跑
- 要求外部素材(图片/字体/联机 API)→ 进入能力边界处理:说明不支持,给替代
执行步骤
-
确认玩法最小闭环 — 先想清开始 → 操作 → 判定 → 计分 → 结束 → 重开,六环节缺一不可。说不清玩法时按"缺失处理"给候选。
-
优先复用模板 — 大部分需求可基于
templates/game-template.html(记忆翻牌)改:只动顶部CONFIG常量与少量文案即可换主题(打地鼠/答题/2048 改法见references/constraints-and-selfcheck.md第四节)。需要完全不同的玩法时再从头写。 -
生成单个 HTML 文件 — 内联 CSS 与 JS,不引用任何外部 CDN、字体、图片。参数集中放在文件顶部
CONFIG常量区(速度、格子数、题量、难度等)。 -
保证闭环与双端 — 必须含:开始按钮、分数/进度显示、结束判定与重开、屏上可见的操作说明;键盘(方向键/WASD + 回车/空格)与触控(点击/触摸)都要能玩;含移动端 viewport meta。
-
写操作与改难度指引 — 在交付说明里写清怎么玩、文件保存路径与打开方式、改
CONFIG哪一行能调难度。 -
交付前静态自检(必须逐条输出结果,不能只说"已检查") — 用系统 Python 跑检查:
C:\Users\liuyuming\AppData\Local\Microsoft\WindowsApps\python.exe scripts/check_game.py 你的游戏.html
检查项与判定见references/constraints-and-selfcheck.md:无外部依赖、无罕见语法、有开始与重开、有计分与结束、键盘与触控都支持、移动端视口已设置。任一未通过则修正后重跑。 -
硬性约束核对 — 输出前确认:没生成需要服务器的游戏;没引用外部素材;没写"已测试可玩"这种断言(只能说"已完成静态自检,实际可玩性需你双击打开确认")。
输出格式
先给文字说明,再给完整 HTML 源码(单个代码块):
一、玩法说明(怎么玩、操作方式)
二、参数说明(CONFIG 各行含义)
三、自检结果表(6 项逐条:通过/未通过 + 说明)
四、完整 HTML 源码(单个代码块)
五、怎么改难度(改哪一行、改成什么)
能力边界
- 不做需要后端联机对战的游戏
- 不做复杂美术,只用 CSS 色块与文字符号
- 不引用任何外部素材(图片/字体/CDN)
- 不保证在所有浏览器完全一致(仅在标准浏览器语法范围内编写)
- 不声称"已测试可玩":只能声明完成静态自检,实际运行需用户打开确认
常见坑
- 误引外部资源 — 现象:用了 Google Fonts、jQuery CDN、外链图片,断网打不开。原因:习惯性地从网络引资源。规避:第 6 步静态检查专门扫
http(s)://与src=/href=,命中即改内联。 - 只说"已检查"不列结果 — 现象:交付时一句"已检查没问题"。原因:自检流于形式。规避:必须逐条输出 6 项自检结果表,未通过的要标出。
- 键盘或触控只支持一种 — 现象:电脑能玩手机点不动,或反过来。原因:只接了 click 忘了键盘,或只接了 keydown 忘了触摸。规避:button 原生支持点击与回车,再单独加方向键移动焦点,双端都覆盖。
- 参数散落各处 — 现象:改个速度要翻遍代码找魔法数字。原因:没集中常量。规避:所有可调项放顶部
CONFIG,并在交付说明里逐行解释。 - 忘记移动端视口 — 现象:手机上页面被缩放、布局错乱。原因:漏写 viewport meta。规避:自检第 9 项强制检查 viewport 标签。
- 声称"已测试可玩" — 现象:写"已验证可流畅运行"。原因:把静态检查等同于运行验证。规避:能力边界写明只能说"完成静态自检,实际需你打开确认"。
验收用例
- 正常:「做个记忆翻牌」→ 单文件、键盘+触控、有计分与重开、静态检查全通过
- 边界 1:玩法含糊"做个有趣的" → 给 3 个候选,不擅自定
- 边界 2:要求联机对战 → 明确说明不支持,给单机替代方案
- 失败:要求接入外部 API/图片素材 → 说明不支持外部依赖,给纯内联替代
目录说明
templates/— 可直接复制改参数的单文件游戏模板game-template.html(记忆翻牌,纯原生 JS)references/— 单文件交付约束与自检清单(含改主题映射)scripts/— 离线静态检查脚本check_game.py(交付前对生成的 html 做 6 项自检)