← All guides

🌱 Getting started🟢 Beginner⏱ 5 min read · 8 steps

How to make a game with ChatGPT (step-by-step)

Describe a small game, have ChatGPT write it as one HTML file, play it in your browser, change one thing at a time, then share it. Includes a prompt for a complete playable slice and fixes for when it breaks.

N
Nick May 🏅 Founding Member
@nickmay · 2h ago

Quick answer

To make a game with ChatGPT, describe one small game and ask for it as a single HTML file. Save the reply as index.html and open it in your browser to play. Then ask for one change at a time, keep a copy each time it works, and share it as a link once it's fun. You don't need to know how to code.

What can ChatGPT build, and what can't it?

ChatGPT is good at small, complete browser games written in HTML, CSS and JavaScript: arcade games, puzzles, platformers, card and word games, and simple 3D scenes with Three.js. One file you open in a browser is the easiest way to start, because there is nothing to install.

It's harder to make large games with many levels, lots of art or online multiplayer in a chat. For those, start small in ChatGPT and move the code into an AI code editor (like Cursor) once the project grows.

ChatGPT's Canvas can show code side by side with the chat, and in some cases it can run a preview. Which features you get depends on your plan and changes over time, so check chatgpt.com for what's included right now. Saving the code as a file and opening it in your browser always works.

Steps

  1. Describe a tiny game and ask for one HTML file. Open a new chat and keep the first idea small. For example: "Make a complete browser game in a single HTML file, no external libraries. A paddle at the bottom moves with the arrow keys and bounces a ball to break a row of bricks. Show the score, end the game when the ball falls, and press R to restart."

  2. Save it as index.html and play it. Copy the code into a plain text file named index.html (or download it if ChatGPT offers a file) and double-click it to open it in your browser. If you see a blank page, tell ChatGPT exactly that and paste any red error text from the browser console.

  3. Ask for one change at a time. Say exactly what you saw: "The ball is too fast, make it 30% slower." One change per message makes it easy to see what broke something.

  4. Ask for the full file every time. Add "Reply with the complete updated file" to your request. Pasting small snippets into the right spot is where most beginners get stuck.

  5. Keep a copy each time it works. Save index-v1.html, index-v2.html and so on. If a change goes wrong, go back to the last good copy and paste it into the chat.

  6. Round it into a playable slice. Once the basics work, use the prompt below to add a start screen, a clear goal and a restart.

  7. Add art and sound. Replace colored boxes with free sprites and add a few sound effects (see below).

  8. Share it and get it tested. Upload index.html to itch.io, Netlify or GitHub Pages, or upload the single file straight to AI Game Universe. Then ask other makers to playtest it.

What prompt makes a complete playable slice?

Turn this into a complete short game in one HTML file:
- smooth controls with the keyboard (and on-screen buttons for phones)
- a clear win condition and a lose condition
- a start screen, a score, and a game-over screen with "Press R to restart"
- save the high score in localStorage
- keep all code in one file with comments, no external libraries
Reply with the complete updated file.

What do you do when ChatGPT's game breaks?

  • Describe the symptom, not the fix. "When I press space nothing happens" works better than guessing at the code.
  • Paste the error. In your browser, open the developer console (F12 or right-click, then Inspect, then Console) and paste any red error lines into the chat.
  • Go back a version. If several fixes in a row make it worse, paste your last working copy and ask again with a smaller change.
  • Start a fresh chat for long projects. Very long chats can lose track of earlier details. Paste your latest working file into a new chat with a short summary of the game.

How do you add art and sound?

Ask ChatGPT to load images from files instead of drawing shapes, then add free assets from Kenney or OpenGameArt (check each asset's license). For sound, ask it to add simple effects with the Web Audio API. The sound guide walks you through it.

How does ChatGPT compare with Claude and Grok for games?

ChatGPT, Claude and Grok can all make small single-file browser games. The best one is usually the one you like talking to, so try the same prompt in two and keep the version you prefer. See the walkthroughs for Claude and Grok, or ask other makers in Advice.

Frequently asked questions

Can ChatGPT make a whole game?

Yes, a small one. ChatGPT can write a complete browser game in one HTML file that you open and play right away. Bigger games work best built up one feature at a time.

Is ChatGPT free for making games?

There is a free ChatGPT plan, and it can write small game files. Limits and features differ by plan and change over time, so check chatgpt.com for what's included right now.

Do I need to know how to code to make a game with ChatGPT?

No. You describe the game in plain English, save the file it gives you, and tell it what to change. Learning to copy a file and open the browser console is enough to start.

Can ChatGPT make 3D games?

Simple ones, yes. Ask it to use Three.js for a small 3D scene, like a rolling-ball or driving game, and keep the first version small.

How do I save and share a game made with ChatGPT?

Save the code as index.html and keep a copy each time it works. To share it, upload the file to itch.io, Netlify, GitHub Pages or AI Game Universe and send the link.

Stuck on a step?

Ask the community — answers earn credits, so people do help.

✋ Ask a question about this guide

💬 0 comments

No comments yet. Tried this guide? Say how it went.

Log in or join free to comment and track progress.