场景 025 · Codex Use Case

创建浏览器游戏

先将游戏说明整理为明确计划,再实现浏览器游戏;用 imagegen 生成素材,通过实时浏览器测试持续调整控制和 UI。

EngineeringCode
Create browser-based gamesEngineeringCode

原文核对:2026-10-13 · 中文正文 · 英文提示词与演示

场景定位

先将游戏说明整理为明确计划,再实现浏览器游戏;用 imagegen 生成素材,通过实时浏览器测试持续调整控制和 UI。

难度
中级
时间跨度
长时间运行

适合用于

  • 从零构建浏览器游戏。
  • 控制、视觉和部署都需要反复测试和调整的游戏。

相关工具

Playwright

在实时浏览器中试玩,检查状态,按实际构建调整控制、时序和界面手感。

Playwright ↗
ImageGen

生成概念图、精灵、背景和 UI 素材,保留提示词供后续批次复用。

OpenAI Docs

接入 OpenAI 功能前获取当前官方指南。

OpenAI Docs ↗

起步提示词

英文原文 · 可复制后按实际材料修改

Use $playwright-interactive, $imagegen, and $openai-docs to plan and build a browser game in this repo.
Implement PLAN.md, and log your work under `.logs/`.

简介

真实游戏不仅需要代码,还涉及书面概念、渲染层、前端框架、后端状态、素材制作和持续视觉调整。

先明确写下游戏行为,再使用 Playwright interactive 在实时浏览器中测试和迭代,效果更好。

先制定游戏计划

搭建项目前,让 Codex 创建 PLAN.md,明确:

  • 玩家目标。
  • 主循环。
  • 输入与控制。
  • 胜利和失败状态。
  • 成长或难度。
  • 视觉方向。
  • 技术栈与托管假设。
  • 里程碑顺序。

“构建游戏”太笼统。Codex 需要知道各部分如何实现,并在开发中反复参考细节。

可以通过 /plan 启用计划模式,将输出保存为 PLAN.md。

用 AGENTS.md 约束工作方式

为确保遵循计划、验证成果并使用合适工具,可以定义如下 AGENTS.md:

官方代码示例
# Game name

<Type of game>

Tech Stack:

- NextJS for frontend (hosted on Vercel)
- <insert technology> for rendering
- Fastify for backend, websockets (hosted on <hosting platform>)
- Postgres for database (hosted on <hosting platform>)
- Redis for caching and pub/sub (hosted on <hosting platform>)
- OpenAI for generative AI features

Tips:

- Use build and test commands to verify your work as soon as you complete a feature or task
- Use the PLAN.md file to guide your work when building new features
- Log your work under .logs (create new log files as you see fit) to record your thought process and decisions, and reference them when iterating on features
- Use playwright to test the visual output of your work, and iterate if it doesn't look right or fit the vibe
- Use imagegen to generate visual assets for your work, and every time you generate a collection of assets, save the prompts you used to be able to continue generating more of the same assets later (create files in .prompts)
- Use Context7 MCP to fetch <rendering framework> docs

这样有助于 Codex 长时间独立运行,并按需使用相关技能。

使用技能

添加 AGENTS.md 中提到的技能:

  • Imagegen:按需生成游戏视觉素材。
  • Playwright interactive:在实时浏览器中测试。
  • OpenAI docs:获取最新 OpenAI API 文档。
  • 可选:添加 Context7 MCP 服务,获取渲染框架的最新文档。

添加方法参阅技能文档。

建议把图片生成提示词保存到文件中。说明目标素材风格,让 Codex 编写可复用的详细提示词,以保持视觉一致。

让 Codex 实现并迭代

Codex 根据初始计划生成首版游戏。

如果需要生成大量图像,首版可能耗时较长,有时数小时。它能检查成果并在浏览器中试玩,因此可以长时间自主推进。

计划越清楚,首轮产物通常越好。

试玩时提供截图、玩法修改或素材更新要求,迭代到满意为止。

技术栈

需要默认选项用途
Web 游戏栈Next.js + Phaser 或 PixiJSNext.js ↗Phaser ↗PixiJS ↗适合浏览器游戏 UI 与渲染层的实用默认组合。
后端栈Fastify、WebSockets、Postgres 和 RedisFastify ↗Postgres ↗Redis ↗需要持久化、匹配、排行榜或发布订阅时可采用的默认组合。
展开英文原文对照

Use Codex to turn a game brief into first a well-defined plan, and then a real browser-based game. Use imagegen to generate visual assets, and let Codex test the game in a live browser to iterate on controls and UI.

Introduction

Building a game is one of the clearest examples of where Codex helps with more than code generation. A real game usually needs a written concept, a rendering layer, frontend shell work, backend state, asset production, and constant visual tuning

This use case works best when Codex starts by writing down exactly what the game should do, then iterates using Playwright interactive to test the game in a live browser.

Start with the game plan

Before Codex scaffolds anything, ask it to create a PLAN.md that defines the game in concrete terms:

  • the player goal
  • the main loop
  • inputs and controls
  • win and fail states
  • progression or difficulty
  • visual direction
  • the stack and hosting assumptions
  • the milestone order

That plan matters because “build a game” is too vague on its own. Codex needs to know how to implement each part of the game, and often refer to the implementation details as it builds.

You can activate plan mode with the /plan slash command. Take the output and save it to a PLAN.md file.

Guide Codex’s behavior with AGENTS.md

To make sure Codex follows the plan, verifies its work and uses the right tools, define an AGENTS.md that looks like this:

官方代码示例
# Game name

<Type of game>

Tech Stack:

- NextJS for frontend (hosted on Vercel)
- <insert technology> for rendering
- Fastify for backend, websockets (hosted on <hosting platform>)
- Postgres for database (hosted on <hosting platform>)
- Redis for caching and pub/sub (hosted on <hosting platform>)
- OpenAI for generative AI features

Tips:

- Use build and test commands to verify your work as soon as you complete a feature or task
- Use the PLAN.md file to guide your work when building new features
- Log your work under .logs (create new log files as you see fit) to record your thought process and decisions, and reference them when iterating on features
- Use playwright to test the visual output of your work, and iterate if it doesn't look right or fit the vibe
- Use imagegen to generate visual assets for your work, and every time you generate a collection of assets, save the prompts you used to be able to continue generating more of the same assets later (create files in .prompts)
- Use Context7 MCP to fetch <rendering framework> docs

This allows Codex to run independently for a long time, and use the relevant skills as needed.

Leverage skills

Add the skills mentioned in the AGENTS.md file:

  • Imagegen so Codex can generate visual assets for the game as needed
  • Playwright interactive so Codex can test the game in a live browser
  • OpenAI docs so Codex can fetch the latest OpenAI API documentation
  • Optionally, you can add the Context7 MCP server to fetch the latest docs for the rendering framework

Learn more about how to add skills in the skills documentation.

Tip: Ask Codex to save prompts for image generation in a file so that visual assets are all consistent. Give directions on the style of assets you want to generate, and let Codex come up with detailed reusable prompts.

Let Codex work and iterate

Codex will generate a first version of the game based on the initial plan.

If you have a lot of image assets that need to be generated, this first version can take a while, sometimes several hours. Since Codex can test its work and try the game in a live browser, it can go on for a long time without any input.

The more defined the plan, the better the final output after the first iteration.

As you test it out, iterate as needed by providing screenshots, asking for gameplay changes or updates to visual assets, until you are happy with the result.