← All guides

🌱 Getting started🟢 Beginner⏱ 4 min read · 7 steps

How to make a game with Grok (step-by-step walkthrough)

Describe a small game, play the live preview, change one thing at a time, then save it as index.html and share it. Includes a prompt for a complete playable slice.

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

Quick answer

To make a game with Grok, open Grok, describe a small game such as "a 2D platformer with arrow-key controls," and let it generate HTML, CSS and JavaScript you can preview. Play it, ask for one change at a time, then download the code as index.html or deploy it as a static site to share.

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

Grok is good at small, complete browser games: arcade games, puzzles, platformers, card games and simple 3D scenes with Three.js. It writes the HTML, CSS and JavaScript in one go, so you can play right away.

It's less suited to large games with many levels, big art assets or online multiplayer. For those, start small with Grok and move the code into an editor (like Cursor) once the project grows.

Grok has a Build mode that shows a live preview next to the code and can publish your game to a shareable link. Which features you get depends on your Grok plan, so check grok.com for what's included right now. Even without Build mode, you can ask Grok in a normal chat for a single HTML file and play it in your browser.

Steps

  1. Open Grok and describe a small game. Go to grok.com or the Grok app and switch to Build mode if you have it. Keep the first idea tiny. For example: "Make a 2D platformer in a single HTML file. Arrow keys to move, space to jump, three platforms, one enemy that walks back and forth, and a coin to win."

  2. Play the preview. Try every control. Note what feels wrong, like a jump that's too floaty or an enemy that's too fast.

  3. Ask for one change at a time. "Make the jump 20% shorter." "Show 'You win!' when I touch the coin." One change per message makes it easy to spot what broke something.

  4. Ask for a playable slice. Once the basics work, use the prompt below to round it into a complete, short game with a start, an end and a restart.

  5. Save the code. Copy or download the code into a file named index.html and double-click it to check that it runs in your browser. Keep a copy every time it works.

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

  7. Share it. Publish from Grok if your plan supports it, or upload index.html to itch.io, Netlify or GitHub Pages. Then post the link on AI Game Universe to get playtesters.

What prompt makes a complete playable slice?

Turn this into a complete short game in one HTML file:
- smooth movement with arrow keys (and on-screen buttons for phones)
- one enemy type with simple behavior
- a clear win condition and a lose condition
- a start screen, a score, and a game-over screen with "Press R to restart"
- keep all code in one file with comments, no external libraries

How do you export and host a Grok game?

A game in one HTML file is easy to host anywhere:

  • itch.io: create an HTML project, zip index.html and upload it, then choose "This file will be played in the browser".
  • Netlify: drag the folder with index.html onto Netlify Drop to get a link.
  • GitHub Pages: put index.html in a public repository and turn on Pages in the settings.

How do you add art and sound?

Ask Grok 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 Grok to add simple effects with the Web Audio API, or make your own. The sound guide walks you through it.

How does Grok compare with other AIs for games?

ChatGPT, Claude and Grok can all make small single-file browser games. Grok's live preview makes it quick to try ideas. Once your game grows to many files, an AI code editor such as Cursor is easier to work in. If you're unsure, try the same prompt in two tools and keep the version you like best. You can also ask other makers in Advice.

Frequently asked questions

Is Grok free for making games?

Some Grok access is free, but features and limits depend on your plan and change over time. Check grok.com for what's included right now. A normal chat can still give you a single HTML game file.

Can Grok preview the game?

Yes. Grok's Build mode shows a playable preview of HTML games next to the code. You can also save the code as index.html and open it in your browser.

Can Grok make 3D games?

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

How do I save a game made with Grok?

Copy or download the code into a file named index.html. Keep a copy each time it works, so you can go back if a change breaks it.

Is Grok good for beginners?

Yes, for small browser games. You describe the game in plain English, play the preview and ask for changes, with no setup.

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.