FOR CREATORS
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.
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/<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.
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 (1.5 seconds at most). If you want an ending animation —
an explosion, a collapse — play it out first, then make the call. After the call, stop drawing,
background animation and blinking text included: if the picture keeps moving, PUNIPO cannot tell
the ending is over and the player waits out the full 1.5 seconds.
Games that don't compete on a score (a simulator you just play with, for example) don't need to
call it: they never move to the result screen and keep running until the player swipes to the
next card. Play counts are recorded either way.
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.
- For a score-based game, call parent.postMessage({ type: 'gameOver', score }, '*') with a numeric score when the game ends. 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. Once it is called, stop drawing (background animation and blinking text included): a picture that keeps moving delays the result screen. For a game that doesn't compete on a score (an endless toy or simulator), don't call it: the game then never moves to the result screen and keeps running until the player swipes to the next card.
When it is done, publish it at https://punipo.com/create. fetch data — the CSP blocks all network access.window.open / location are blocked — express it as an in-game screen change).When you're ready, submit your game from /create. Common questions are answered in the FAQ.