Gato Cuadrado

Ask for it like this

Copy this prompt, paste it into Claude or ChatGPT, and that's it. It's the short version: the minimum for the game to come out playable.

Make me a one-button platformer synced to the music, for the browser, with original art.

- The character runs right on its own at a constant speed and I only decide when to jump. If I hold the button, it jumps again as soon as it lands.
- I can walk on blocks; touching a spike or hitting a wall head-on kills me.
- There are pads that launch me and rings in the air that let me jump again if I jump while passing through them.
- 3 one-minute levels, from easy to hard, with obstacles placed on the beat. The third has a section where instead of jumping I hold to fly up.
- When I die I restart instantly; attempts are counted and the progress percentage is shown.
- Background music generated with Web Audio, no audio files, and a mute button.
- Controls: space, up arrow or click on desktop; tap the screen on mobile. Hold for back-to-back jumps.
Technical: a single HTML file with the CSS and JavaScript inside, no libraries and no external images, everything drawn on canvas. It should fill the window and be playable with a finger on a phone and with keyboard or mouse on a computer.

Getting it as an HTML file

A game like this is a single file you open with a double click. These four steps are the same in any AI.

1. 1. Ask for the whole file

   Add this line at the end of your prompt: Give me a single, complete HTML file, nothing cut out, ready to save as index.html and open in the browser. Without it, you often get the code in pieces.

2. 2. Copy all of the code

   In Claude the game shows up on the side, already running, with a button to copy or download it. In ChatGPT, copy the whole code block: it has to start with <!DOCTYPE html> and end with </html>.

3. 3. Save it as index.html

   Paste it into Notepad (Windows) or TextEdit in plain text mode (Mac) and save it as index.html. Watch out for .txt: if the file ends up as index.html.txt, it won't open as a page.

4. 4. Double-click to open it

   It opens in your browser and it's ready to play, with nothing to install and no internet needed. To share it, upload it to any web host or send it by email: it's just one file.

If the game shows up blank, go back to the AI and paste the error from the browser console (right click → Inspect → Console). With that text it fixes it fast.

The full prompt, the one actually used

Longer and more specific: numbers, screens and style details. It's the one that produced exactly this game, unedited. Use it if you want to fine-tune the result.

Diego wrote it in Spanish and it stays in Spanish on purpose: it's the honest record of how the game was made, and a translation would be a prompt nobody used. Claude and ChatGPT understand it as is; add "Answer in English" if you want the game's text in English.

Hazme un juego de navegador llamado "Salto Cuadrado".

La idea: un cubo que avanza solo a velocidad constante por un nivel lleno de pinchos y bloques, y el jugador solo decide cuándo saltar, al estilo de los plataformeros de ritmo de un solo botón, pero con arte original.

Mecánica:
- El cubo corre hacia la derecha solo. Saltar le da un salto de altura fija, y el cubo gira 90 grados en el aire y cae derecho.
- Si mantienes presionado, salta otra vez apenas toca el suelo.
- Puedes caminar y saltar sobre bloques. Tocar un pincho o chocar de frente contra un bloque te mata.
- Hay plataformas de salto que te impulsan más alto y aros en el aire que te dejan saltar de nuevo si saltas justo al pasar por ellos.
- 3 niveles hechos a mano, de un minuto aproximadamente cada uno, de fácil a difícil. El tercero incluye un tramo donde el cubo se convierte en nave: mantener presionado sube, soltar baja.
- Al morir, reinicias al instante desde el inicio del nivel. Se cuentan los intentos y se muestra el porcentaje de avance, con tu mejor porcentaje por nivel.
- Una música de fondo con ritmo, generada con Web Audio (sin archivos de audio), y los obstáculos colocados a ese ritmo. Botón para silenciar.

Pantallas: título con Jugar; selección de nivel con tu mejor porcentaje; el juego con HUD (barra de avance e intentos); y nivel completado.

Controles: en PC, Espacio, flecha arriba o clic para saltar. En celular, tocar en cualquier parte de la pantalla. En los dos, mantener para saltos seguidos o para subir con la nave.

Estilo: fondo con degradado que cambia de color en cada nivel, cuadrícula que se mueve, cubo con cara y estela, pinchos negros con borde brillante, pulsos de luz al ritmo de la música y una explosión de cuadraditos al morir.

Técnico:
- Un solo archivo HTML con todo el CSS y el JavaScript dentro. Sin librerías, sin CDN, sin imágenes externas: todo dibujado en canvas.
- Tiene que llenar la ventana y adaptarse a cualquier tamaño, de celular a pantalla grande, sin deformarse.
- Tiene que jugarse completo desde celular (solo con el dedo) y desde PC (teclado o mouse).
- Tiene que funcionar dentro de un iframe con sandbox="allow-scripts". El récord va en localStorage dentro de try/catch para que el juego no se rompa si no hay acceso.
- Se pausa solo cuando la pestaña no está visible.
- El texto del juego va en español.

For ChatGPT, add the line from step 1 at the end: it tends to hand over the code in pieces.

What this prompt was missing

What became clear once the game was finished. If you're making your own from this one, add these from the start: fixing things later costs another round.

• Ask for a minimum timing window per jump (for example ±60 ms) so the level is demanding but fair.
• Ask for a practice mode with checkpoints: that's what makes a hard level playable.
• Say whether the music can be turned off without losing the visual rhythm, for people who play muted.

What was asked after the first result, in Diego's own words (Spanish):

• Cámbialo a gatos: que el cubo sea una cabeza de gato cuadrada con orejas y los pinchos sean de collar, sin que el juego se vuelva más difícil.
• Agrégale un menú de pausa, un botón para cambiar entre español e inglés, y que el récord no se pierda al recargar.

It works in any AI

Claude, ChatGPT, Gemini, Copilot: the prompt is the same and so is the method. What changes is where you see the result. Four things that hold in all of them:

1. Ask for a single file

   "A single HTML file with everything inside, no libraries or CDN." That way the game works with a double click, with nothing to install, and you can upload it to any website.

2. Ask it to tell you what it assumed

   End with: "before writing the code, tell me in 5 lines what you assumed". That's where the gaps in your prompt show up, while fixing them is still cheap.

3. One fix per message

   Say what happens and what you expected. If you ask for three changes at once, one usually undoes another.

4. Ask it to test, not to promise

   "Check that every level can be won and tell me how you checked." That's how the games on this page found their bugs before going live.

The 6 parts of a good prompt, with a template to copy