Make a game with AI (no coding)

A Twiddle Play game is a web page: HTML, CSS and JavaScript. Writing web pages is something AI chat tools do well. So you can describe your game in plain words, let a free AI write it, test it in your browser, and upload it here. You don't write any code yourself, and you don't need to install anything.

Who this is for#

• You have a game idea, but you don't write code.
• You can copy, paste and save a file.
• You're happy to play your game a lot and ask for changes in plain words, like "the bubbles are too fast".

If you do write code, this page still saves you time. The same starter prompt works for a first draft that you then edit yourself.

What you need#

• A computer with Chrome or another modern browser. You can chat with an AI on your phone, but saving and zipping files is much easier on a computer.
• One free AI tool. Any of these works:

• The AI starter kit from step 1 below. It holds the prompt and the Twiddle Play SDK file.

1. Get the starter kit#

1. Download the AI starter kit and unzip it. You get a folder called my-ai-game with four files:
   • PROMPT.md: the starter prompt.
   • index.html: a tiny game that already follows every Twiddle Play rule. Your game will replace it.
   • twiddleplay-sdk.js: the SDK, a small script that lets your game show ads and pause when it should. Keep it in this folder.
   • README.md: these steps, short.
2. Double-click index.html. A tiny game opens in your browser: tap the yellow dot for 20 seconds. That's how a working Twiddle Play game behaves, with a title screen, an end screen and ad buttons.

2. Fill in the starter prompt#

The starter prompt is the most important part of this page. It tells the AI every rule a Twiddle Play game must follow, so the game it writes can pass review.

Copy the whole prompt below (the copy button is at the top right), paste it into a text editor, and fill in the parts in [BRACKETS]:

• [GAME NAME]: your game's name.
• [WHAT THE PLAYER DOES…]: your idea, in 2 to 4 sentences.
• [portrait OR landscape]: how the player holds the phone. It appears twice; write the same word both times.
• [game-name]: your game's name in small letters with dashes, like space-hopper. The game saves the best score under this name.

Make me a complete mobile game for Twiddle Play, an Android app that plays HTML5 games offline.
I can't code, so give me finished code I can copy and save. Don't explain the code.

MY GAME
- Name: [GAME NAME]
- Idea: [WHAT THE PLAYER DOES, HOW THEY SCORE, AND HOW THEY WIN OR LOSE. 2 TO 4 SENTENCES.]
- Screen: [portrait OR landscape]

WHAT TO SEND BACK
- ONE complete file named index.html, in ONE code block, with all the HTML, CSS and JavaScript inside it.
- Always send the WHOLE file. Never write "..." or "the rest stays the same".
- Keep it under about 800 lines, so it fits in one reply.
- After the code block: 3 short lines on how to play, then a short list of things I should test.

1. OFFLINE ONLY
- No http:// or https:// addresses anywhere in the file. No CDNs, no libraries, no online fonts, no images or sounds from the internet.
- Draw everything with the canvas or CSS. Make sound effects with the Web Audio API (short beeps), not audio files.
- Fonts: system-ui, sans-serif.
- No fetch, no login, no accounts, no analytics, no other ad networks, no links, no window.open, and no alert, confirm or prompt.

2. THE TWIDDLE PLAY SDK (a small script that shows ads and pauses the game)
- Put these two lines just before the game's own <script>, exactly like this:
  <script src="/sdk/v1/twiddleplay.js"></script>
  <script src="twiddleplay-sdk.js"></script>
- Start the game's own script with this safety net, copied exactly. It lets the game run in your preview, where the SDK file is missing:
  window.TwiddlePlay = window.TwiddlePlay || {
    env: 'preview',
    ready: function () { return Promise.resolve(); },
    showInterstitial: function () { return Promise.resolve({ shown: false }); },
    showRewarded: function () { return Promise.resolve({ rewarded: false }); },
    hasRewarded: function () { return Promise.resolve(false); },
    gameplayStart: function () {},
    gameplayStop: function () {},
    on: function () { return function () {}; }
  };
- Use ONLY these SDK functions. Don't invent others:
  TwiddlePlay.ready(), TwiddlePlay.gameplayStart(), TwiddlePlay.gameplayStop(), TwiddlePlay.showInterstitial(),
  TwiddlePlay.hasRewarded(), TwiddlePlay.showRewarded(), TwiddlePlay.on(eventName, function)
- When the page loads, call TwiddlePlay.ready(). Show the title screen only after it finishes.
- Call TwiddlePlay.gameplayStart() when play starts or continues, and TwiddlePlay.gameplayStop() when play stops (game over, level complete, back to the menu).
- Full-screen ad: ONLY when the player taps "Play again" or "Next level" on the end screen. First await TwiddlePlay.showInterstitial(), then start the next round. Never during play, never when the game opens, never on a timer.
- Rewarded ad: ONE optional button on the end screen, like "Continue (watch ad)" or "Double score (watch ad)". Show it only if await TwiddlePlay.hasRewarded() is true. Give the reward only if (await TwiddlePlay.showRewarded()).rewarded is true. At most once per game.
- TwiddlePlay.on('pause', ...): freeze everything (game loop, timers, spawning). TwiddlePlay.on('resume', ...): carry on, and reset the frame clock so nothing jumps.
- TwiddlePlay.on('mute', ...): silence all sound. TwiddlePlay.on('unmute', ...): sound back on, unless the player switched sound off with the game's own sound button.

3. PHONE SCREEN AND TOUCH
- A [portrait OR landscape] game that fills the whole screen on any size, from small 360x640 phones to tall phones and tablets. Re-fit on every resize.
- Use <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> and keep the score and buttons inside the safe area with env(safe-area-inset-top), env(safe-area-inset-bottom) and so on.
- Touch controls with pointer events (pointerdown), so a mouse works too. Buttons and tap targets at least 48x48 px, with space between them. Nothing that needs hover.
- No page scrolling, zooming or text selection: touch-action: none on the canvas, overflow: hidden, user-select: none.
- Big, readable text. A sound on/off button on the title screen.

4. SMOOTH ON CHEAP PHONES
- One <canvas> that fills the screen. Size it with devicePixelRatio capped at 2: Math.min(window.devicePixelRatio || 1, 2).
- A requestAnimationFrame game loop. Move things by elapsed time (dt in seconds, at most 0.05), never by a fixed amount per frame.
- No shadowBlur and no ctx.filter. For glows, draw a gradient once into a small canvas and reuse it.
- Reuse objects instead of making new ones every frame. At most about 150 particles.

5. SAVING
- Save the best score (and the level and the sound setting, if there are any) in localStorage under the key "[game-name].v1".
- Wrap every localStorage call in try/catch, so the game still works when storage is blocked.

6. SCREENS
- A title screen (name, Play button, best score, sound button), the game, and an end screen (score, best score, Play again, the rewarded button).

Write a good idea. Say what the player does with their finger, how they score, and how a round ends. Small and clear beats big and vague. Some ideas that work well:

• "Colourful bubbles float up from the bottom. Tap them to pop them. Pops less than 1 second apart build a combo. If 5 bubbles escape, the game is over."
• "A small rocket flies up by itself. Tap the left or right half of the screen to steer between asteroids. Each star you collect is a point. One hit ends the run."
• "Three cups shuffle around. Tap the cup hiding the ball. Each round shuffles faster. Three wrong guesses and you lose."

What the prompt asks for, and why:

3. Ask the AI#

Pick one tool and follow its steps. Each one ends with the code in your hands.

ChatGPT#

1. Go to chatgpt.com and log in with your free account.
2. Click New chat (top left).
3. Paste your filled-in prompt and send it. Writing the game takes a minute or two.
4. The game arrives in a code block inside the reply. If the block has a Preview switch, click it to play the game right there.
5. Click Copy at the top of the code block. Then go to step 4 to save it.

Claude#

1. Go to claude.ai and log in with your free account.
2. Make sure artifacts are on: open Settings → Capabilities and check that Create and edit files is on (some screens call it Code execution and file creation). It's on by default on the Free plan.
3. Start a new chat, paste your filled-in prompt and send it.
4. Claude builds the game as an artifact: it opens in a panel next to the chat, and you can play it there.
5. Get the code:
   • If the artifact panel offers Download or Export as HTML, use it and save the file as index.html.
   • If it doesn't, send this message: Show me the complete index.html in one code block. Then copy the code block and go to step 4.

Gemini#

1. Go to gemini.google.com on a computer and log in with your Google account.
2. Choose Canvas. It sits under the message box; on some screens it's inside the + (add files) or Tools menu.
3. Paste your filled-in prompt and send it. Canvas opens on the right, and the game runs in its preview.
4. Something broken? Click Show console at the top right of the Canvas panel to see the error, and paste it back to Gemini.
5. Click Code at the top right of the panel. Select all of the code and copy it (or use Share & export → Copy contents). Then go to step 4.

Google Antigravity#

Antigravity is an app, not a website. Its AI helper (the "agent") writes files straight into a folder on your computer, so there's nothing to copy and paste.

1. Download Antigravity from antigravity.google, install it, and sign in with your Google account.

2. Open your kit folder: click the New Project icon in the left sidebar, then Add Folder, pick your my-ai-game folder, and click Create.

3. In the agent's prompt box, paste your filled-in prompt, with one extra line at the very top:

   Write the game into index.html in this folder, replacing the template. Keep twiddleplay-sdk.js as it is.

4. Press Enter. If it asks which mode to use, pick Local mode (it works directly in your folder).

5. The agent shows you what it plans and what it changed. Accept the changes.

6. Play it: double-click index.html in your folder, or ask the agent: Open index.html in Chrome and play one round.

4. Save it as index.html#

Your my-ai-game folder must end up like this:

index.html            <- the AI's game (replaces the template)
twiddleplay-sdk.js    <- the SDK from the kit, unchanged

PROMPT.md and README.md can stay; they don't change the game.

To save the code you copied:

1. Open Notepad.
2. Paste the code (Ctrl+V).
3. File > Save as. Open your my-ai-game folder.
4. "Save as type": All files. "Encoding": UTF-8.
5. File name: index.html. Click Save, and replace the old one.

1. Open TextEdit. Choose Format > Make Plain Text.
2. Paste the code (Cmd+V).
3. File > Save. Open your my-ai-game folder.
4. Name it index.html. If asked, choose "Use .html".
5. Click Save, and replace the old one.

Keep the name exactly index.html, all in small letters. A free code editor like VS Code also works and makes the code easier to read.

5. Test it in your browser#

Double-click index.html. The game opens in your browser. Then check these, in order:

1. It starts. You see the title screen with a Play button.
2. It plays to the end. Play until you win or lose, and press Play again.
3. The test ads work. In your browser, ads are test screens: a dark screen that counts down from 3 and closes. Press the reward button (like "Continue (watch ad)"), wait for the countdown, and check you got the reward. In the first minute, Play again starts the next round without an ad; that's the app's own rule.
4. It pauses. Switch to another browser tab, wait, and come back. The game should have frozen, not run on without you.
5. It fits a phone. Press F12 (on a Mac: Cmd+Option+I), click the phone icon at the top of the panel, and pick a phone like "Pixel 7". Everything should fit, and the buttons should be easy to hit.
6. No errors. In the same panel, open Console. One red line about /sdk/v1/twiddleplay.js is expected: that file only exists on Twiddle Play. Any other red line is a bug: copy it and send it to the AI (see the prompt pack).

Something wrong? Tell the AI in the same chat, in plain words, and save its new version over the old file. One change at a time works best.

After you upload, test it again in the portal's phone preview: see Testing your game.

What you should get#

We followed this page exactly, with the idea "a tap-to-pop bubble game with combos": the starter prompt, the blanks filled in, sent as one message. The reply was saved as index.html next to twiddleplay-sdk.js, with no edits by hand. The result is Bubble Pop, and it passes the same hosting checks as our other examples.

Take it apart:

• Download Bubble Pop (a zip you can upload as-is to try the whole flow).
• The exact prompt we used.

6. Zip, upload and submit#

1. Zip the files, not the folder. Open your my-ai-game folder and select index.html and twiddleplay-sdk.js.

   • Windows: right-click the selected files, then Send to → Compressed (zipped) folder.
   • Mac: right-click the selected files, then Compress 2 Items. You get Archive.zip.

2. Check the zip. Double-click it. You should see index.html straight away, not a folder.

3. Create the game on this website. Sign up with Start building (it's free), then on your Dashboard click New game, fill in the store page basics, and click Create game. The quick start shows each field.

4. Upload. On the game's Versions tab, drop your zip on the upload box and click Upload v1. The checks should say SDK detected and Works offline.

5. Test it. Click Test it next to v1. Your game opens in a phone frame. The SDK activity panel should say Connected, then show ready().

6. Add an icon. On the Store page tab, upload a square icon (PNG, JPG or WebP, 512×512 is best). A simple way: take a screenshot of your title screen and crop it to a square.

7. Submit. Back on Versions, click Submit for review. A person plays your game on a phone, and if it's approved, players can install it.

Prompt pack#

Send these in the same chat as your game, so the AI remembers it. Each one asks for the whole file again, so you can always save the answer over your old index.html.

Fix common problems#

The game is too hard and too fast. Make the first 30 seconds slow and easy, then make it harder little by little. Change only the speed and difficulty. Keep every Twiddle Play rule from my first message. Send the whole index.html again.

On my phone the buttons and tap targets are too small. Make every button and tap target at least 64x64 px with more space between them, and make all text bigger. Keep everything inside the safe area. Send the whole index.html again.

Add short sound effects made with the Web Audio API, no audio files: a tap sound, a scoring sound and a game-over sound. Start the audio on the player's first tap. Respect the sound on/off button, and stay silent between TwiddlePlay 'mute' and 'unmute'. Send the whole index.html again.

Add a pause button in the top corner (at least 48x48 px, inside the safe area). It opens a menu with Resume, Restart and Sound on/off. While the menu is open the game is frozen and TwiddlePlay.gameplayStop() has been called; Resume calls TwiddlePlay.gameplayStart(). No ads in this menu. Send the whole index.html again.

Add levels. Level 1 is easy and each level is a little harder. When a level is done, call TwiddlePlay.gameplayStop() and show a "Level complete" screen with a Next level button. Next level first does await TwiddlePlay.showInterstitial(), then starts the next level. Save the highest level reached in localStorage (inside try/catch), and let the title screen continue from it. Send the whole index.html again.

Your code was cut off before the end. Send the whole index.html again, shorter, so it fits in one reply: remove comments, blank lines and anything we don't need. The last line must be </html>.

If it's still cut off, send Continue exactly where you stopped. Don't repeat anything. Then paste the new part straight after the last line of the first part, in your file. The last line of the finished file must be </html>.

The game doesn't work. When I open it, [SAY WHAT HAPPENS, like "the screen stays black"].
The browser console shows this error:
[PASTE THE RED ERROR LINES HERE]
Find the cause and fix it. Keep every Twiddle Play rule from my first message. Send the whole index.html again.

To copy an error: press F12, open Console, select the red text and copy it. Leave out the line about /sdk/v1/twiddleplay.js; that one is expected.

Convert a game you already have#

Already have an HTML game, made by you or by an AI some time ago? This prompt makes it ready for Twiddle Play without changing how it plays. Paste the rules (sections 1 to 6 of the starter prompt) and your code where it says so:

Here is my HTML5 game. Make it ready for Twiddle Play, an Android app that plays HTML5 games offline, without changing how the game plays or looks.
- Follow every rule below, especially: no http:// or https:// addresses, the two SDK lines plus the safety net, ads only at natural breaks, pause and mute, and saving inside try/catch.
- If the game loads anything from the internet (libraries, fonts, images, sounds), replace it with code, system fonts or drawings. Then list what you replaced, in plain words.
- Use only the TwiddlePlay functions listed in the rules.
- Send the whole finished index.html in one code block.

THE RULES:
[PASTE SECTIONS 1 TO 6 OF THE STARTER PROMPT HERE]

MY GAME:
[PASTE YOUR WHOLE index.html HERE]

If your game is several files (like index.html, game.js and style.css), paste each one with its file name above it, and ask for each file back. For bigger games, Antigravity is easier: open the game's folder and paste the prompt, without the code.

Polish it#

Once the game works, this makes it feel good to play. Game makers call it "juice": small effects that reward every tap.

The game works. Now make it feel juicy, without changing the rules, the controls or the Twiddle Play parts:
- a burst of particles when something is hit, popped or collected
- a short screen shake (at most 8 px, under 0.3 seconds) on big moments only
- a quick squash-and-stretch or bounce when things are tapped or land
- floating score text that drifts up and fades out
- smooth fades between the title, game and end screens
- satisfying Web Audio sounds, with the pitch rising as combos or streaks grow
Keep it smooth on cheap phones: no shadowBlur, no ctx.filter, at most 150 particles reused from a pool, and movement by elapsed time. Send the whole index.html again.

When things go wrong#

The AI used a CDN or an online font#

How you notice: after upload, the checks say the game doesn't work offline and list hosts like cdn.jsdelivr.net or fonts.googleapis.com. Or open index.html in your text editor and search for http.

Fix: send this:

Remove every http:// and https:// address from the game. Don't use any libraries, CDNs or online fonts: write the code yourself and use the system-ui font. Send the whole index.html again.

One address is fine: www.w3.org inside an <svg> tag is a name, not a download. The check ignores it.

The file was cut off#

How you notice: the code block stops in the middle of a line, the file doesn't end with </html>, or the game shows a blank screen. The console may say Unexpected end of input.

Fix: use the "code was cut off" prompt. Asking for a shorter file is easier than joining two parts.

The game is blank#

How you notice: a black or white screen, or a frozen title.

Fix: open the console (F12 → Console) and read the red lines. Copy them into the "here's the error" prompt. The most common ones:

• TwiddlePlay is not defined: the safety net is missing. Ask the AI to add it exactly as the starter prompt says, and check that twiddleplay-sdk.js sits next to index.html.
• Unexpected end of input or Unexpected token: the file was cut off or pasted twice. See above.

The AI invented SDK functions#

How you notice: the console says something like TwiddlePlay.showAd is not a function, or TwiddlePlay.init, TwiddlePlay.submitScore, TwiddlePlay.login. None of these exist.

Fix: only the functions in the SDK reference exist. Send this:

TwiddlePlay.[NAME] doesn't exist. Use only these SDK functions: TwiddlePlay.ready(), TwiddlePlay.gameplayStart(), TwiddlePlay.gameplayStop(), TwiddlePlay.showInterstitial(), TwiddlePlay.hasRewarded(), TwiddlePlay.showRewarded() and TwiddlePlay.on(). Send the whole index.html again.

It works in the chat, but not in my browser#

• The file isn't really .html. Windows and Mac sometimes hide the end of file names, so the file may be index.html.txt. Turn on file extensions (Windows: File Explorer → View → File name extensions; Mac: Finder → Settings → Advanced → Show all filename extensions) and rename it.
• It was saved as rich text. On a Mac, TextEdit must be in plain text mode (Format → Make Plain Text) before you paste.

No ads (or no saving) in the AI's preview#

That's expected. In the AI's preview the SDK file isn't there, so the safety net answers "no ad right now", and some previews block saving. Test ads and saving in your browser, with twiddleplay-sdk.js next to index.html.

Be honest about AI#

• AI makes mistakes that look right. The game may look fine and still break on the third round, or on a small phone. Play it to the end, more than once, at phone size, before you submit.
• Make your own game. Don't ask for a copy of a famous game ("make Flappy Bird", "Pac-Man with Pokémon"), and don't use its characters, art, music or name. Review rejects look-alikes, and the game must be yours to publish. See copyrighted content.
• The same review rules apply. A person reviews every version, whether you or an AI wrote it. Read the review guidelines once.
• You're responsible for what you upload. If the AI added something you don't understand, ask it what that part does before you ship.

Next steps#

• Test your builds on your own phone, and let GitHub upload them for you: GitHub + Developer playground.
• Learn where ads earn the most without annoying players: Ads and earnings.
• Curious how the code works? The Firefly Jar tutorial builds a game by hand, one small step at a time.