Publish your AI-made HTML game

Video walkthrough (4:33)

One unedited real run, from copying the prompt to going live on the feed. Narration is in Japanese, but every step is shown on screen.

Technical requirements

• A single self-contained HTML file. Put the CSS and JavaScript inside that same file.
• 1 MB upload limit; up to 5 MB after the allowed CDN scripts below are inlined.
• Only the allowed CDN libraries below may be loaded externally. Plain JavaScript is recommended by default.
  • https://cdn.tailwindcss.com/
  • https://cdnjs.cloudflare.com/ajax/libs/matter-js/
  • https://cdnjs.cloudflare.com/ajax/libs/three.js/
  • https://cdnjs.cloudflare.com/ajax/libs/howler/
• Runs in <iframe sandbox="allow-scripts"> (an opaque origin) with a strict CSP, so fetch, eval, and document.cookie do not work. localStorage is replaced with a memory-only polyfill that empties on every reload — never use it for high scores or save data. Navigating away or opening links (window.open / location) is blocked too — express it as an in-game screen change.
• Must follow the real screen aspect ratio, never a fixed one — a fixed ratio letterboxes or gets cut off on other devices.
• Report the score with parent.postMessage({ type: 'gameOver', score }, '*'). That call is also the cue to move to the result screen: PUNIPO starts watching the game the moment it arrives and lays the result over it once the picture stops moving (3 seconds at most). If you want an ending animation — an explosion, a collapse — play it out first, then make the call.

How to publish

1. Open /create
2. Pick an HTML file, or paste code
3. Enter a name and description
4. Submit it
5. It goes live in the feed after review

Prompt for your AI assistant

This covers the technical requirements above. Paste it into an AI chat as-is to generate a game.

Build a single HTML5 mini game for PUNIPO (https://punipo.com). Follow every rule below.

- Everything must be in one self-contained HTML file: CSS and JavaScript both go inside that same file. Do not load anything external, except optionally one of these approved CDN scripts if you need it: https://cdn.tailwindcss.com/, https://cdnjs.cloudflare.com/ajax/libs/matter-js/, https://cdnjs.cloudflare.com/ajax/libs/three.js/, https://cdnjs.cloudflare.com/ajax/libs/howler/. Plain JavaScript with no library at all is preferred.
- Keep the finished file under 1 MB (it may grow up to 5 MB once an allowed CDN script is inlined).
- The game runs inside a sandboxed iframe under a strict CSP: fetch, XMLHttpRequest, eval, and document.cookie do not work. localStorage is replaced with a memory-only polyfill that empties on every reload — never use it for high scores or save data.
- Do not navigate away or open links (window.open, location): the frame is blocked from leaving the game. Even to show a reference page, keep every screen change inside the game.
- Never fix the screen to specific pixels or a fixed aspect ratio. Read the real width and height of the screen and adapt to it, so nothing letterboxes or gets cut off on tall or wide screens.
- When the game ends, call parent.postMessage({ type: 'gameOver', score }, '*') with a numeric score. The result screen is laid over the game right after that call, so if the game has a game-over animation, play it out first and call this afterwards.

When it is done, publish it at https://punipo.com/create.

Common mistakes

• A fixed aspect ratio that letterboxes on tall phones.
• Computing the coordinates of adjacent UI elements independently, so they overlap at certain ratios (derive one from the other's measured size instead).
• Trying to fetch data — the CSP blocks all network access.
• Adding a link or navigation that opens an external site (window.open / location are blocked — express it as an in-game screen change).
• Forgetting to report the score, so no result screen appears.

Next steps

When you're ready, submit your game from /create. Common questions are answered in the FAQ.