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

Quick answer

To make a game with Gemini, go to gemini.google.com, pick Canvas below the prompt box, and describe one small game, asking for a complete single-file HTML game. Gemini writes the code and runs it in a preview panel next to the chat, so you can play it right away and ask for one change at a time. For bigger projects, Google AI Studio's Build mode can generate a whole multi-file web app with a live preview. You don't need to know how to code to start.

Gemini Canvas or Google AI Studio: which should you use?

• Gemini Canvas (in the Gemini app at gemini.google.com) is the easiest place to start. It's a chat with a side panel that shows your game running. Google says Canvas is available to all Gemini users, with its most capable model and a bigger context window on the paid Google AI Pro and Ultra plans. You need to be signed in.
• Google AI Studio Build mode (aistudio.google.com) is a no-code app builder. You describe an app and it generates the files, by default a React web app, with a live preview, a Code tab and a public link when you publish. Use it when your game outgrows one file.

Plans, models and limits change over time, so check Google's pages for what's included right now.

Steps (Gemini Canvas)

1. 1

   Open Gemini and turn on Canvas. Sign in at gemini.google.com and click Canvas below the text box.

2. 2

   Describe a tiny game. Keep the first idea small. For example: "Create a complete browser game in a single HTML file, no external libraries. The player moves a paddle left and right with the arrow keys to catch falling stars. Show the score, end the game after 3 missed stars, and press R to restart."

3. 3

   Play it in the preview. Gemini writes the code and shows the game in the Canvas panel. Click into it and play.

4. 4

   Ask for one change at a time. Describe what you saw: "The stars fall too fast at the start. Make them 30% slower and speed up over time." One change per message makes it easy to see what broke something. Canvas saves changes automatically.

5. 5

   Fix errors with the console. If the game is blank or freezes, open Show console at the top right of the Canvas panel, copy any red error text, and paste it into the chat.

6. 6

   Look at or save the code. Click Code at the top right of the Canvas panel to see the code (you can edit it there too). To keep a copy, paste it into a file called index.html on your computer and open it in your browser.

7. 7

   Share it. Use Share & export in the Canvas panel to copy a g.co/gemini/share link. Or upload your index.html to AI Game Universe and ask other makers to playtest it.

Steps (Google AI Studio Build mode)

1. 8

   Go to aistudio.google.com and open Build mode.

2. 9

   Describe your game in the prompt box, or remix a project from the App Gallery.

3. 10

   Test it in the live preview on the right and ask for changes in the chat. Open the Code tab to see every file it made.

4. 11

   Publish it to a public link when you're happy, or download the code to host it yourself. Apps start private until you share them.

What prompt makes a complete playable slice?

Turn this into a complete short game:
- smooth keyboard controls, plus 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 everything in one HTML file, no external libraries

What do you do when the game breaks?

• Describe the symptom, not the fix. "When I press space nothing happens" works better than guessing at the code.
• Paste the error. Copy red lines from Show console into the chat.
• Go smaller. If several fixes in a row make it worse, ask Gemini to undo the last change, or start a new chat, paste in the last working code and ask for one smaller change.
• Move to an editor when it gets big. Once a game has many files or you make lots of changes, an AI code editor like Cursor or Codex can take over the same index.html.

How do you add art and sound?

Ask Gemini to draw simple shapes and effects in code first. When you want real art, download free assets from Kenney or OpenGameArt (check each license) and ask how to load them in your saved game. For sound, ask for simple effects with the Web Audio API. The sound guide walks you through it.

How does Gemini compare with ChatGPT, Claude and Grok for games?

All four can write a small single-file browser game from a prompt. Gemini's Canvas and Claude's Artifacts both run the game in a panel beside the chat, which makes testing quick. Try the one you already use, and see the walkthroughs for ChatGPT, Claude and Grok, or ask other makers in Advice.

Next step: post it and get feedback

Once your game is playable, upload it to AI Game Universe and ask for feedback on the playtesting page. Other makers can play it and leave notes, and you can return the favor on their games.

Frequently asked questions

Can Gemini make a whole game?

Yes, a small one. In Canvas, Gemini can write a complete browser game, run it in the preview and keep changing it as you ask for features one at a time.

Is Gemini free for making games?

Google says Canvas is available to all Gemini users, and Google AI Studio describes its Build mode as free to start. Paid plans get Google's most capable model and bigger limits. Check Google's pages for current details.

Do I need to know how to code to use Gemini?

No. You describe the game in plain English and Gemini writes the code. Reading the console and copying errors back into the chat is enough to fix most problems.

Where do I find the code Gemini wrote?

In Canvas, click Code at the top right of the Canvas panel. In AI Studio Build mode, open the Code tab in the preview pane.

How do I share a game made with Gemini?

Copy a share link from Share & export in Canvas (it opens in Gemini), publish a public link from AI Studio, or save the game as index.html and upload it to AI Game Universe so other makers can play and playtest it.