Dulce Fila

Pídelo así

Copia este prompt, pégalo en Claude o en ChatGPT y listo. Es la versión corta: lo mínimo para que el juego salga jugable.

Hazme un juego de juntar 3 dulces iguales para navegador, al estilo de los juegos de caramelos, con arte original.

- Tablero de 8x8 con 6 dulces distintos, cada uno con su forma y su color.
- Intercambio dos dulces vecinos; si forman 3 o más en línea desaparecen, los de arriba caen y entran nuevos. Si no forman nada, vuelven a su lugar.
- Juntar 4 en línea crea un dulce que borra su fila o columna; juntar 5 crea una bomba que borra todos los de un color.
- 10 niveles, cada uno con un puntaje objetivo y un número de movimientos. El tablero nunca empieza con combinaciones hechas y siempre tiene una jugada posible.
- Pantallas: título, mapa de niveles, el juego con nivel/objetivo/movimientos/puntaje, nivel superado y sin movimientos.
- Controles: clic en dos vecinos o arrastrar en PC; tocar o deslizar en celular.
Técnico: un solo archivo HTML con el CSS y el JavaScript dentro, sin librerías ni imágenes externas, todo dibujado en canvas. Que llene la ventana y se juegue con el dedo en el celular y con teclado o mouse en la PC.

Para que te lo dé en HTML

Un juego de estos es un solo archivo que se abre con doble clic. Estos cuatro pasos son los mismos en cualquier IA.

1. 1. Pide el archivo completo

   Al final de tu prompt, agrega esta línea: Dame un solo archivo HTML completo, sin recortes, listo para guardar como index.html y abrir en el navegador. Sin eso es común recibir el código por partes.

2. 2. Copia todo el código

   En Claude el juego aparece al costado ya funcionando, con un botón para copiar o descargar. En ChatGPT, copia el bloque de código completo: tiene que empezar en <!DOCTYPE html> y terminar en </html>.

3. 3. Guárdalo como index.html

   Pégalo en el Bloc de notas (Windows) o en TextEdit en modo texto plano (Mac) y guárdalo con el nombre index.html. Ojo con el .txt: si el archivo queda como index.html.txt, no abre como página.

4. 4. Ábrelo con doble clic

   Se abre en tu navegador y ya se juega, sin instalar nada y sin internet. Para compartirlo, súbelo a cualquier hosting o mándalo por correo: es un solo archivo.

Si el juego sale en blanco, vuelve a la IA y pega el error que aparece en la consola del navegador (clic derecho → Inspeccionar → Consola). Con ese texto lo corrige rápido.

El prompt completo, el que se usó de verdad

Más largo y más específico: números, pantallas y detalles de estilo. Es el que produjo exactamente este juego, sin editar. Úsalo si quieres afinar el resultado.

Hazme un juego de navegador llamado "Dulce Fila".

La idea: un juego de combinar 3 dulces iguales en un tablero, al estilo de los juegos de caramelos para celular, pero con arte original y sin marcas.

Mecánica:
- Tablero de 8 x 8 con 6 tipos de dulce, cada uno con color y forma distintos (para que se distingan también sin ver el color).
- Intercambias dos dulces vecinos. Si se forma una fila o columna de 3 o más iguales, desaparecen, los de arriba caen y entran nuevos por arriba. Las cascadas encadenadas multiplican el puntaje.
- Si el intercambio no forma nada, los dulces vuelven a su lugar.
- Juntar 4 en línea crea un dulce rayado que borra toda su fila o columna. Juntar 5 crea una bomba de color que borra todos los dulces de un color.
- 10 niveles. Cada uno tiene un puntaje objetivo y un número de movimientos. Ganas si llegas al objetivo antes de quedarte sin movimientos. De 1 a 3 estrellas.
- Si no quedan jugadas posibles, el tablero se mezcla solo.
- Si el jugador no hace nada por 5 segundos, una jugada posible parpadea como pista.

Pantallas: título con Jugar; mapa de niveles (los siguientes se desbloquean al ganar); el juego con HUD (nivel, objetivo, movimientos, puntaje); nivel superado con estrellas; y sin movimientos, con reintentar.

Controles: en PC, clic en un dulce y luego en uno vecino, o arrastrar. En celular, tocar dos vecinos o deslizar un dulce hacia el vecino.

Estilo: colores de caramelo sobre un fondo rosado suave, dulces con brillo, animaciones de caída con rebote, destellos al combinar y un número de puntaje que sube flotando.

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.

Para ChatGPT, agrégale al final la línea del paso 1: tiende a entregar el código por partes.

Qué le faltó a este prompt

Lo que se aprendió al ver el juego terminado. Si vas a hacer el tuyo partiendo de aquí, agrégalo desde el inicio: corregir después cuesta otra vuelta.

• Decir cómo se ganan las 2 y 3 estrellas (por movimientos que sobran, por puntaje extra): el prompt pedía estrellas pero no su regla.
• Pedir que en celular vertical el tablero use el alto disponible; si no, queda espacio muerto arriba y abajo.
• Pedir que cada nivel se pueda ganar jugando bien, y que lo compruebe con un bot antes de entregarlo.

Lo que sí se pidió después del primer resultado, resumido:

• Que los dulces se distingan por su forma, no solo por el color, y que el rayado y la bomba se entiendan de un vistazo.
• 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.

Sirve en cualquier IA

Claude, ChatGPT, Gemini, Copilot: el prompt es el mismo y el método también. Lo que cambia es dónde ves el resultado. Cuatro cosas que valen en todas:

1. Pide un solo archivo

   "Un solo archivo HTML con todo adentro, sin librerías ni CDN." Así el juego funciona con doble clic, sin instalar nada, y se puede subir a cualquier web.

2. Pídele que te diga qué asumió

   Termina con: "antes de escribir el código, dime en 5 líneas qué asumiste". Ahí aparecen los huecos de tu prompt mientras corregirlos todavía es barato.

3. Una corrección por mensaje

   Di qué pasa y qué esperabas. Si pides tres cambios juntos, uno suele deshacer a otro.

4. Pide que lo pruebe, no que prometa

   "Comprueba que los niveles se puedan ganar y dime cómo lo comprobaste." Así los juegos de esta página encontraron sus bugs antes de publicarse.

Las 6 partes de un buen prompt, con plantilla para copiar