从一个点子到高完成度前端游戏 Demo

资深游戏设计师的六步流水线：输入一句话游戏点子，输出一个可直接游玩、有完成度的单文件前端游戏 demo——零依赖、零构建、双击即玩。

「demo」和「原型」的差距不在核心玩法，而在完成度：标题画面、HUD、粒子、震屏、音效、结算与难度曲线。本工作流把这条打磨路径固化成可复跑的流水线。

适用场景

• 手里有一个游戏点子，想在几小时内看到能玩、能分享的东西
• 需要给团队/客户演示玩法概念，要「像成品」而不是「像草稿」
• 学习小游戏开发全流程：设计 → 架构 → 实现 → 打磨 → 验收

步骤总览

① 点子拆解与玩法定义 (GDD-Lite)
        ├──→ ② 美术方向与游戏感设计 ──┐
        └──→ ③ 技术架构方案 ─────────┤（②③ 可并行）
                                      ↓
              ④ 核心玩法 MVP 实现（先能玩，再好看）
                                      ↓
              ⑤ 完成度打磨（Juice & Polish）
                                      ↓
              ⑥ 自测与调优验收（测试报告 + 最终版）

| 节点 | 产出 |

|---|---|

| ① 点子拆解与玩法定义 | 一页纸 GDD-Lite：核心循环、操作、胜负、状态机、范围清单 |

| ② 美术方向与游戏感设计 | 色板 HEX、字体层级、动效清单（Juice List）、音效方向 |

| ③ 技术架构方案 | 渲染选型、主循环、状态机、碰撞、输入抽象、代码分区 |

| ④ 核心玩法 MVP 实现 | 可完整玩一局的单文件 HTML（无打磨项） |

| ⑤ 完成度打磨 | 落实动效/音效/HUD/结算的完整版单文件 HTML |

| ⑥ 自测与调优验收 | 逐项测试报告 + 最终版 HTML + 50 字分享介绍 |

变量表

| 变量 | 类型 | 默认值 | 所在节点 |

|---|---|---|---|

| 游戏点子 | 多行文本 | 变色龙用舌头粘飞虫的示例点子 | ① |

| 目标平台 | 选项：桌面浏览器优先、兼容移动端触屏 / 移动端触屏优先 / 仅桌面浏览器 | 第一项 | ① |

| 美术风格偏好 | 单行文本 | 不限定，由你根据游戏点子的气质决定 | ② |

| 技术栈 | 单行文本 | 原生 HTML5 Canvas + JavaScript，单文件、零依赖、零构建 | ③ |

⚠️ workflow 文件里的 {{…}} 在 PromptHub 网站上不渲染表单——这是复制后手动替换的约定。默认值均为示例，替换成你自己的点子即可；每个变量只在一个节点出现，下游节点靠上游产出衔接，无需重复填写。

使用注意 / 反模式

• 别先写引擎再想玩法：① 的 GDD-Lite 是唯一依据，范围锁死「单局 1–3 分钟、单一机制做深」，次要系统（存档、多关卡、成就）一律不做
• MVP 阶段禁止打磨：粒子、震屏、音效提前混入会拖慢核心循环的验证，全部推迟到 ⑤
• 数值集中为常量：速度、生成间隔、判定尺寸等全部放顶部常量区，⑥ 调难度曲线时只改常量，不翻代码
• AudioContext 必须在首个用户手势后初始化，否则被浏览器自动播放策略拦截，音效整体静默
• 不引外部素材与 CDN：所有视觉用代码绘制（Canvas 图形 / CSS / emoji / 程序化粒子），音效用 WebAudio 合成——单文件零依赖才能保证「双击即玩」