创建基于浏览器的游戏

简介

构建游戏是一个很典型的例子，能清楚体现 Codex 的作用不只是生成代码。一个真正的游戏通常需要书面的概念设计、渲染层、前端外壳、后端状态、素材制作，以及持续不断的视觉调优。

这个用例在以下流程下效果最好：先由 Codex 明确写下游戏到底应该做什么，然后再使用 Playwright interactive 在实时浏览器中测试游戏并持续迭代。

先从游戏方案开始

在 Codex 搭建任何内容之前，先让它创建一个 PLAN.md，用具体术语定义游戏：

• 玩家目标
• 核心循环
• 输入与控制方式
• 胜利与失败状态
• 进度机制或难度
• 视觉方向
• 技术栈与托管假设
• 里程碑顺序

这份计划很重要，因为仅仅说“做一个游戏”本身太模糊了。Codex 需要知道如何实现游戏的每个部分，并且在构建过程中经常回头参考这些实现细节。

你可以使用 /plan 斜杠命令来启用规划模式。 将输出内容保存到 PLAN.md 文件中。

用 AGENTS.md 引导 Codex 的行为

为了确保 Codex 遵循计划、验证自己的工作并使用正确的工具，请定义一个如下所示的 AGENTS.md：

# 游戏名称

<游戏类型>

Tech Stack:

- NextJS 用于前端（托管在 Vercel）
- <insert technology> 用于渲染
- Fastify 用于后端，websockets（托管在 <hosting platform>）
- Postgres 用于数据库（托管在 <hosting platform>）
- Redis 用于缓存和发布/订阅（托管在 <hosting platform>）
- OpenAI 用于生成式 AI 功能

Tips:

- 完成一个功能或任务后，尽快使用构建和测试命令验证你的工作
- 构建新功能时，使用 PLAN.md 文件指导你的工作
- 将你的工作记录到 .logs 下（按需创建新的日志文件），以记录你的思考过程和决策，并在迭代功能时引用它们
- 使用 playwright 测试你工作的视觉输出，如果看起来不对或不符合预期风格，就继续迭代
- 使用 imagegen 为你的工作生成视觉素材，每次生成一组素材时，都保存所用的提示词，以便之后继续生成同风格素材（在 .prompts 中创建文件）
- 使用 Context7 MCP 获取 <rendering framework> 文档

这样一来，Codex 就可以长时间独立运行，并在需要时使用相关技能。

利用技能

添加在 AGENTS.md 文件中提到的技能：

• Imagegen：让 Codex 可以在需要时为游戏生成视觉素材
• Playwright interactive：让 Codex 可以在实时浏览器中测试游戏
• OpenAI docs：让 Codex 可以获取最新的 OpenAI API 文档
• 可选：你可以添加 Context7 MCP server，以获取渲染框架的最新文档

如需了解如何添加技能，请参阅 技能文档。

提示：让 Codex 将图像生成提示词保存到文件中，这样视觉素材才能保持一致。你可以说明想要生成的素材风格，再让 Codex 产出可复用的详细提示词。

让 Codex 工作并迭代

Codex 会基于初始计划生成游戏的第一个版本。

如果你需要生成大量图像素材，这个第一版可能会花一些时间，有时甚至需要几个小时。由于 Codex 可以测试自己的工作，并在实时浏览器中试玩游戏，因此它可以在无需任何输入的情况下持续运行很长时间。

计划定义得越清晰，首次迭代后的最终输出通常就越好。

在你亲自测试时，可以根据需要继续迭代：提供截图、提出玩法改动需求或更新视觉素材，直到你对结果满意为止。