Patita Firme

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.

haz otro juego de tower defense con animalitos como protagonistas como gatos perros loritos etc etc

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.

• El prompt fue corto a propósito; la sesión le sumó el estándar del sitio (ranking, bandera, puente, banco de pruebas). En un tower defense conviene pedir desde el inicio que el balance se pruebe con bots: aquí un bot con un solo animal no gana el último mapa y uno que mezcla gana 18 de 20 niveles.
• Pedir paso fijo de simulación separado del dibujo: así el 2x es solo dar dos pasos por cuadro y la partida sale igual a 30 y a 144 cuadros por segundo.
• Si quieres un estilo visual concreto (vista isométrica, luz, sombras), dilo en el primer prompt: cambiarlo después obliga a redibujar todos los sprites.

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

• que sea lo mas bonito posible en cuestion de arte, trata de buscar filtros o algo que se vea mas como un fake 3D top down o isometrico o algo asi pero que la calidad visual sea mucho mejor

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