返回资讯
开发方法

用 AI 写小游戏:让它一次跑通的写法

大多数人用 AI 写游戏失败,不是模型不行,是需求描述方式不对。这篇给出一个能稳定产出「能跑的单文件小游戏」的提示词结构。

游搭搭编辑部2026-09-041,891 次阅读提示词 · AI编程 · 方法论 · 单文件

核心问题:AI 写的游戏为什么跑不起来

试过的人都有这个体验:AI 给了几百行代码,复制进 HTML 文件,打开是白屏。

原因通常不是模型能力不够,而是输出形态没有被约束。默认情况下 AI 会:

  • 引用 CDN 上的外部库(离线或该 CDN 挂了就白屏)
  • 拆成多个文件(你只复制了其中一个)
  • 用上你环境里不存在的构建工具
  • 输出被截断(代码太长,结尾少几个闭合括号)
  • 用 ES Module 语法但通过 file:// 打开(跨域报错)

解决思路:把约束写进提示词

关键是在需求里明确输出形态,而不只是游戏玩法。

一个可用的结构:

帮我写一个单文件 HTML5 小游戏,要求:

【玩法】
(用 3-5 句话描述清楚:玩家控制什么、目标是什么、怎么算输赢)

【输出形态 —— 必须严格遵守】
1. 只输出一个完整的 HTML 文件,所有 CSS 和 JS 都内联
2. 不引用任何外部资源:不用 CDN、不用外部字体、不用外部图片
3. 图形用 Canvas 或 CSS 绘制,不用图片文件
4. 用 <script> 标签而不是 type="module"
5. 代码完整,不要用省略号或注释代替实现
6. 不要用任何需要构建工具的语法

【技术要求】
- 键盘和触摸都要能操作
- 自适应屏幕尺寸
- 在手机浏览器上也能玩

【输出格式】
只输出 HTML 代码,不要额外解释。

关键在第 3 条和第 4 条

「不用图片文件」 这一条经常被忽略,但它是最常见的问题来源。AI 会写 <img src="./assets/player.png">,而你没有这个文件。要求用 Canvas 绘制,就能绕开整个素材问题。

「用 script 而不是 module」 解决的是 file:// 打开时的跨域限制。很多人在本地双击 HTML 打不开,就是这个原因。

迭代的时候怎么说

第一版跑起来之后,不要重新描述一遍需求,那样会把已经跑通的代码推翻重来。正确做法是:

这是当前代码:
(粘贴完整代码)

改一件事:把跳跃高度调低 30%。
保持其他所有逻辑不变,输出完整文件。

三个要点:

  1. 一次只改一件事。改多了你不知道是哪一处出的问题。
  2. 明确说「保持其他不变」。否则 AI 会顺手重构,然后引入新 bug。
  3. 要求输出完整文件。让它给「补丁」或「只输出改动部分」,很容易上下文对不上。

什么时候该放弃重写

如果同一个问题改了三轮还没解决,就别继续打补丁了。重新生成一份,把这次踩到的坑写进初始需求里。

上下文越长,AI 越容易在旧代码的假设上打转。重开一局成本很低。

最后

这些经验来自我们自己跑通流水线的过程。平台内置了提示词模板库,上面这个结构是其中一类 —— 模板的价值在于它同时约束了玩法和输出形态,让产出天然可被处理。

先在本地把你想要的游戏跑起来,再考虑上架的事。跑不起来的游戏,上架流程再顺也没意义。

内容声明

本栏目内容由平台编辑部撰写与编译,引用外部信息时仅作事实性陈述并标注来源链接,不转载第三方正文。文中观点仅供交流,不构成投资、法律或经营建议;涉及渠道政策与资质要求的内容会标注生效时间,请以官方最新公告为准。

发现文中有事实错误或时效问题?写信告诉我们,我们会在核实后更正并在页面标注修订日期。

也想做一个自己的小游戏?

游搭搭 提供从代码处理到作品展示的完整链路。作品版权归你,发布渠道由你决定。