用 Codex 做浏览器游戏
游戏开发是 Codex 不只生成代码、还要持续验证体验的典型场景。一个真正能玩的浏览器游戏，通常需要概念设计、渲染层、前端 shell、后端状态、素材生成，以及
游戏开发是 Codex 不只生成代码、还要持续验证体验的典型场景。一个真正能玩的浏览器游戏，通常需要概念设计、渲染层、前端 shell、后端状态、素材生成，以及反复调 controls、timing 和 UI feel。
官方页面：https://developers.openai.com/codex/use-cases/browser-games
适合什么任务
| 场景 | Codex 应该做什么 |
|---|---|
| 从零做 browser-based game | 先写 PLAN.md，再按 milestone 实现 |
| controls、visuals、deployment 都需要反复调 | 用 live browser 真实试玩和迭代 |
| 需要生成 concept art、sprites、backgrounds、UI assets | 用 $imagegen 生成素材，并保存 prompts 方便后续批量延展 |
| 游戏里要接 OpenAI-powered features | 先用 $openai-docs 拉当前官方 API 指南，再写代码 |
使用的能力
| 能力 | 用法 | 链接 |
|---|---|---|
$playwright / $playwright-interactive | 在 live browser 里试玩游戏，检查当前状态，并按真实构建调整 controls、timing 和 UI feel | https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive |
$imagegen | 生成 concept art、sprites、backgrounds 和 UI assets，并保留可复用 prompts | https://developers.openai.com/codex/skills |
$openai-docs | 在接入 OpenAI-powered features 前读取当前官方 guidance | https://github.com/openai/skills/tree/main/skills/.curated/openai-docs |
相关官方说明：
- Custom instructions with AGENTS.md：https://developers.openai.com/codex/guides/agents-md
- Codex skills：https://developers.openai.com/codex/skills
起始提示词
请使用 $playwright-interactive、$imagegen 和 $openai-docs，在这个 repo 中规划并构建一个 browser game。
请实现 PLAN.md，并把工作日志记录到 `.logs/` 下。这个 prompt 的重点是先 plan，再 build，并且要求 Codex 把过程记录在 .logs/。游戏任务容易变长，过程日志可以让后续迭代有依据。
推荐技术栈
| 需要 | 推荐默认值 | 原因 |
|---|---|---|
| Web game stack | Next.js + Phaser 或 PixiJS | Next.js 负责 browser UI 和 app shell；Phaser/PixiJS 负责渲染层 |
| Backend stack | Fastify、WebSockets、Postgres、Redis | 当游戏需要 persistence、matchmaking、leaderboards 或 pub/sub 时，这是实用默认组合 |
如果只是做 first playable prototype，不要一开始就上完整后端。先把核心 loop、输入、胜负条件和视觉反馈跑通。
先写 PLAN.md
在 Codex scaffold 项目前，先让它把游戏定义清楚。PLAN.md 至少包含：
- player goal。
- main loop。
- inputs and controls。
- win and fail states。
- progression or difficulty。
- visual direction。
- stack and hosting assumptions。
- milestone order。
“build a game” 这个任务太宽，Codex 需要不断回到 plan，确认每个功能应该怎么实现。可以用 /plan slash command 进入 plan mode，再把结果保存为 PLAN.md。
用 AGENTS.md 固定执行方式
为了让 Codex 长时间独立工作时仍然遵守计划、验证结果并调用正确工具，可以在 repo 里加入类似的 AGENTS.md：
# 游戏名称
`<游戏类型>`
技术栈：
- NextJS 负责 frontend（托管在 Vercel）
- <insert technology> 负责 rendering
- Fastify 负责 backend 和 websockets（托管在 <hosting platform>）
- Postgres 负责 database（托管在 <hosting platform>）
- Redis 负责 caching 和 pub/sub（托管在 <hosting platform>）
- OpenAI 负责 generative AI features
执行提示：
- 每完成一个 feature 或 task，立刻用 build 和 test commands 验证
- 构建新功能时，以 PLAN.md 作为工作依据
- 在 .logs 下记录工作过程；按需要创建新 log files，写清思路和决策，后续迭代时引用这些记录
- 使用 playwright 检查视觉输出；如果画面不对或气质不匹配，继续迭代
- 使用 imagegen 生成 visual assets；每生成一批素材，都把使用过的 prompts 保存下来，方便后续继续生成同风格素材（文件放在 .prompts）
- 使用 Context7 MCP 获取 <rendering framework> docsAGENTS.md 的作用不是写大段愿景，而是把 Codex 每次都应该遵守的工程习惯固定下来：按 PLAN.md 做、完成小功能就 build/test、用 Playwright 看真实画面、把素材 prompts 存到 .prompts/。
素材和视觉一致性
使用 $imagegen 时，让 Codex 把每一批图片的 prompt 存下来。后续要继续生成同风格 sprites、backgrounds 或 UI assets 时，直接复用这些 prompts，比重新描述风格更稳定。
你可以给 Codex 视觉方向，例如：
请把所有 image prompts 放在 .prompts/ 下。
每一批素材都保持同一套 art direction、camera angle、color language 和 UI style。让 Codex 试玩并迭代
第一版游戏完成后，不要只看代码。让 Codex 打开 live browser，用 Playwright interactive 实际试玩，检查：
- controls 是否顺手。
- timing 是否合理。
- UI 是否遮挡。
- game loop 是否闭合。
- win/fail state 是否可触发。
- 视觉元素是否符合 plan。
如果素材很多，第一版可能跑很久。计划越具体，第一次迭代越容易得到可玩的结果。你后续可以继续用截图、玩法反馈或素材调整要求，让 Codex 做针对性修改。