1name: Create browser-based games1# Create browser-based games | Codex use cases

2tagline: Define a game plan and let Codex build and test it in a live browser.

3summary: Use Codex to turn a game brief into first a well-defined plan, and then

4 a real browser-based game. Use imagegen to generate visual assets, and let

5 Codex test the game in a live browser to iterate on controls and UI.

6skills:

7 - token: $playwright

8 url: https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive

9 description: Play the game in a live browser, inspect the current state, and

10 iterate on controls, timing, and UI feel against the real build.

11 - token: $imagegen

12 description: Generate concept art, sprites, backgrounds, and UI assets, then

13 keep the prompts reusable for later asset batches.

14 - token: $openai-docs

15 url: https://github.com/openai/skills/tree/main/skills/.curated/openai-docs

16 description: Pull current official guidance before wiring OpenAI-powered

17 features into the game.

18bestFor:

19 - Building a browser-based game from scratch

20 - Game builds where controls, visuals, and deployment all need repeated

21 testing and tuning

22starterPrompt:

23 title: Plan the Game Before You Build It

24 body: >-

25 Use $playwright-interactive, $imagegen, and $openai-docs to plan and build a

26 browser game in this repo.

27 2 

28 Implement PLAN.md, and log your work under `.logs/`.3Need

29relatedLinks:

30 - label: Custom instructions with AGENTS.md

31 url: /codex/guides/agents-md

32 - label: Codex skills

33 url: /codex/skills

34techStack:

35 - need: Web game stack

36 goodDefault: "[Next.js](https://nextjs.org/) with [Phaser](https://phaser.io/)

37 or [PixiJS](https://pixijs.com/)"

38 why: A practical default for browser-based game UI plus the rendering layer.

39 - need: Backend stack

40 goodDefault: "[Fastify](https://fastify.dev/), WebSockets,

41 [Postgres](https://www.postgresql.org/), and [Redis](https://redis.io/)"

42 why: A strong default when the game needs persistence, matchmaking,

43 leaderboards, or pub/sub.

44 4 

45## Introduction5Backend stack

46 6 

47Building 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 tuning7Default options

48 8 

49This 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.9[Fastify](https://fastify.dev/) , WebSockets, [Postgres](https://www.postgresql.org/) , and [Redis](https://redis.io/)

50 10 

51## Start with the game plan11Why it's needed

52 12 

53Before Codex scaffolds anything, ask it to create a `PLAN.md` that defines the game in concrete terms:13A strong default when the game needs persistence, matchmaking, leaderboards, or pub/sub.

54 14 

55- the player goal

56- the main loop

57- inputs and controls

58- win and fail states

59- progression or difficulty

60- visual direction

61- the stack and hosting assumptions

62- the milestone order

63 

64That 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.

65 

66You can activate plan mode with the `/plan` slash command.

67Take the output and save it to a `PLAN.md` file.

68 

69## Guide Codex's behavior with AGENTS.md

70 

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

72 

73```text

74# Game name

75 

76<Type of game>

77 

78Tech Stack:

79 

80- NextJS for frontend (hosted on Vercel)

81- <insert technology> for rendering

82- Fastify for backend, websockets (hosted on <hosting platform>)

83- Postgres for database (hosted on <hosting platform>)

84- Redis for caching and pub/sub (hosted on <hosting platform>)

85- OpenAI for generative AI features

86 

87Tips:

88 

89- Use build and test commands to verify your work as soon as you complete a feature or task

90- Use the PLAN.md file to guide your work when building new features

91- 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

92- Use playwright to test the visual output of your work, and iterate if it doesn't look right or fit the vibe

93- 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)

94- Use Context7 MCP to fetch <rendering framework> docs

95```

96 

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

98 

99## Leverage skills

100 

101Add the skills mentioned in the AGENTS.md file:

102 

103- Imagegen so Codex can generate visual assets for the game as needed

104- Playwright interactive so Codex can test the game in a live browser

105- OpenAI docs so Codex can fetch the latest OpenAI API documentation

106- Optionally, you can add the Context7 MCP server to fetch the latest docs for the rendering framework

107 

108Learn more about how to add skills in the [skills documentation](https://developers.openai.com/codex/skills).

109 

110**Tip**: Ask Codex to save prompts for image generation in a file so that

111 visual assets are all consistent. Give directions on the style of assets you

112 want to generate, and let Codex come up with detailed reusable prompts.

113 

114## Let Codex work and iterate

115 

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

117 

118If 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.

119 

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

121 

122As 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.