use-cases/browser-games.md +118 −7
11# Create browser-based games | Codex use cases---
2name: Create browser-based games
3tagline: Define a game plan and let Codex build and test it in a live browser.
4summary: Use Codex to turn a game brief into first a well-defined plan, and then
5 a real browser-based game. Use imagegen to generate visual assets, and let
6 Codex test the game in a live browser to iterate on controls and UI.
7skills:
8 - token: $playwright
9 url: https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive
10 description: Play the game in a live browser, inspect the current state, and
11 iterate on controls, timing, and UI feel against the real build.
12 - token: $imagegen
13 description: Generate concept art, sprites, backgrounds, and UI assets, then
14 keep the prompts reusable for later asset batches.
15 - token: $openai-docs
16 url: https://github.com/openai/skills/tree/main/skills/.curated/openai-docs
17 description: Pull current official guidance before wiring OpenAI-powered
18 features into the game.
19bestFor:
20 - Building a browser-based game from scratch
21 - Game builds where controls, visuals, and deployment all need repeated
22 testing and tuning
23starterPrompt:
24 title: Plan the Game Before You Build It
25 body: >-
26 Use $playwright-interactive, $imagegen, and $openai-docs to plan and build a
27 browser game in this repo.
2 28
329Need Implement PLAN.md, and log your work under `.logs/`.
30relatedLinks:
31 - label: Custom instructions with AGENTS.md
32 url: /codex/guides/agents-md
33 - label: Codex skills
34 url: /codex/skills
35techStack:
36 - need: Web game stack
37 goodDefault: "[Next.js](https://nextjs.org/) with [Phaser](https://phaser.io/)
38 or [PixiJS](https://pixijs.com/)"
39 why: A practical default for browser-based game UI plus the rendering layer.
40 - need: Backend stack
41 goodDefault: "[Fastify](https://fastify.dev/), WebSockets,
42 [Postgres](https://www.postgresql.org/), and [Redis](https://redis.io/)"
43 why: A strong default when the game needs persistence, matchmaking,
44 leaderboards, or pub/sub.
45---
4 46
547Backend stack## Introduction
6 48
749Default optionsBuilding 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
8 50
951[Fastify](https://fastify.dev/) , WebSockets, [Postgres](https://www.postgresql.org/) , and [Redis](https://redis.io/)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.
10 52
1153Why it's needed## Start with the game plan
12 54
1355A strong default when the game needs persistence, matchmaking, leaderboards, or pub/sub.Before Codex scaffolds anything, ask it to create a `PLAN.md` that defines the game in concrete terms:
56
57- the player goal
58- the main loop
59- inputs and controls
60- win and fail states
61- progression or difficulty
62- visual direction
63- the stack and hosting assumptions
64- the milestone order
65
66That 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.
67
68You can activate plan mode with the `/plan` slash command.
69Take the output and save it to a `PLAN.md` file.
70
71## Guide Codex's behavior with AGENTS.md
72
73To make sure Codex follows the plan, verifies its work and uses the right tools, define an `AGENTS.md` that looks like this:
74
75```text
76# Game name
77
78<Type of game>
79
80Tech Stack:
81
82- NextJS for frontend (hosted on Vercel)
83- <insert technology> for rendering
84- Fastify for backend, websockets (hosted on <hosting platform>)
85- Postgres for database (hosted on <hosting platform>)
86- Redis for caching and pub/sub (hosted on <hosting platform>)
87- OpenAI for generative AI features
88
89Tips:
90
91- Use build and test commands to verify your work as soon as you complete a feature or task
92- Use the PLAN.md file to guide your work when building new features
93- 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
94- Use playwright to test the visual output of your work, and iterate if it doesn't look right or fit the vibe
95- 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)
96- Use Context7 MCP to fetch <rendering framework> docs
97```
98
99This allows Codex to run independently for a long time, and use the relevant skills as needed.
100
101## Leverage skills
102
103Add the skills mentioned in the AGENTS.md file:
104
105- Imagegen so Codex can generate visual assets for the game as needed
106- Playwright interactive so Codex can test the game in a live browser
107- OpenAI docs so Codex can fetch the latest OpenAI API documentation
108- Optionally, you can add the Context7 MCP server to fetch the latest docs for the rendering framework
109
110Learn more about how to add skills in the [skills documentation](https://developers.openai.com/codex/skills).
111
112**Tip**: Ask Codex to save prompts for image generation in a file so that
113 visual assets are all consistent. Give directions on the style of assets you
114 want to generate, and let Codex come up with detailed reusable prompts.
115
116## Let Codex work and iterate
117
118Codex will generate a first version of the game based on the initial plan.
119
120If 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.
121
122The more defined the plan, the better the final output after the first iteration.
123
124As 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.