Puedes hacer un juego con IA sin escribir una sola línea de código: Gemini dibuja las imágenes, se las das a Claude para que monte el juego y juegas en el navegador. La primera versión jugable del juego de abajo estuvo lista en menos de 10 minutos. Algo así antes llevaba un par de semanas.
Este es el juego del que hablo. Haz clic una vez y juega: el clic izquierdo dispara, el derecho lanza una granada. En la barra de arriba hay un botón de pantalla completa.
La idea: una IA dibuja, otra IA construye
Una IA de chat escribe de maravilla el código de un juego pequeño, pero no sabe dibujarte una ciudad en ruinas, una manada de zombis y una torreta láser en el mismo estilo. Una IA de imágenes dibuja todo eso, pero no puede hacer que las imágenes se muevan. Así que usé dos herramientas y le di a cada una el trabajo que mejor se le da.
- Gemini dibujó las imágenes: el fondo, los zombis y las armas.
- Claude cogió esas imágenes, las recortó en piezas sueltas, montó la escena e hizo los niveles.
No estás atado a estas dos. Cualquier IA que haga imágenes puede dibujar y cualquier IA de chat que escriba código puede construir. ChatGPT y Gemini también pueden escribir la parte del código y sirven para juegos más sencillos, hechos de formas y colores lisos. Las imágenes son lo que hace que un juego parezca un juego de verdad.
Lo que necesitas
- Una IA que haga imágenes. Yo usé Gemini.
- Una IA de chat que escriba código. Yo usé Claude, y también valen ChatGPT o Gemini.
- El navegador Chrome. No tienes que instalar ningún programa.
Puedes empezar gratis, pero los planes gratuitos tienen límites diarios de imágenes y mensajes, y las reglas cambian de un plan a otro. Muchas herramientas de imágenes solo permiten el uso comercial de las imágenes en un plan de pago, así que lee lo que dice el tuyo si piensas compartir o vender tu juego. Este post trata de cómo hacer un juego rápido con IA, no es un consejo legal.
Para el alojamiento, ese sitio de internet donde se guarda el juego para que cualquiera pueda abrirlo, usé mi propia página web, la misma en la que estás leyendo esto. Tú puedes hacer lo mismo con la tuya, y hay más opciones que te explico más abajo.
Si todavía no tienes página web, primero necesitas un hosting. Una forma sencilla es Bluehost. Es una empresa de hosting cuyo creador con IA incluye el alojamiento junto con una web de partida, así te ahorras la página en blanco, y la mayoría de los planes de hosting te dejan subir tus propios archivos, por ejemplo un único archivo de juego. Mira en su página los planes y precios actuales antes de decidir, porque las ofertas cambian.
Paso 1: decide el juego y luego pídele las imágenes a la IA de imágenes
Antes de dibujar nada, piensa qué tipo de juego quieres. ¿Uno de defensa en el que aguantas un muro frente a los enemigos, un shooter espacial, un laberinto, un juego de cartas? ¿Y cómo debería verse: una ciudad oscura en ruinas, un bosque luminoso, el espacio? ¿Qué personajes necesitas: un héroe, unos cuantos enemigos, un jefe? No tienes que decidirlo todo tú solo. Pídele ideas primero a la IA y en segundos te da unas cuantas.
Puedes empezar con una petición como esta: “Quiero hacer un juego sencillo que funcione en el navegador, en un solo archivo HTML. Dame cinco ideas de juegos fáciles de construir. De cada una, di en una frase qué hace el jugador, cómo sería el fondo y de qué personajes u objetos necesitaría imágenes.”
Elige la idea que más te guste, cambia lo que quieras y ya sabes exactamente qué imágenes pedir. Un juego sencillo necesita tres tipos: un fondo, los enemigos y las armas. Pide cada uno por separado y pide siempre el mismo estilo, para que todo parezca de la misma familia. Esto es el tipo de petición que funciona.
Para el fondo pedí algo parecido a esto: “Dibuja un fondo de juego visto desde arriba para un juego de defensa de base: una carretera en ruinas y agrietada arriba y un muro de metal con una puerta abajo. Estilo pixel art oscuro y sucio, imagen ancha en 16:9, sin texto y sin personajes.”
Para los enemigos: “Dibuja una hoja de sprites de un cibercombi verde en seis posturas: dos caminando, una con los brazos estirados, una atacando y dos más. El mismo personaje y el mismo tamaño en todas las posturas, visto de frente, con un espacio claro entre ellas, sobre un fondo gris liso. El mismo estilo pixel art que el fondo.”
Y para las armas y los efectos: “Dibuja una torreta de ciencia ficción en seis cuadros, quieta y disparando, una puerta láser brillante, una explosión en cuatro cuadros y un rayo de energía azul. El mismo estilo pixel art, sobre un fondo gris liso.”
Algo que aprendí: si pides un “fondo transparente”, muchas herramientas de imágenes pintan dentro de la imagen un tablero falso de cuadros grises y blancos, como si fuera parte del dibujo. Un color liso funciona mejor. Después Claude puede quitarlo.
Paso 2: dale las imágenes a la IA de chat
Abre Claude, adjunta las imágenes y describe el juego con palabras sencillas. No hace falta que sepas cómo funciona un juego. Di qué quieres ver y hacer, y deja el código en manos de la IA. Por ejemplo:
“Aquí tienes tres imágenes: un fondo, una hoja de sprites de zombis y una hoja de torreta. Recorta tú mismo las hojas en imágenes sueltas y haz un juego de navegador en un solo archivo. Una torreta abajo defiende un muro de unos zombis que llegan en 10 oleadas. La torreta apunta con el ratón y dispara con el botón izquierdo, y el derecho lanza una granada. Cada zombi da créditos para comprar mejoras. Añade efectos de sonido y un jefe en las oleadas 5 y 10. Haz una pantalla de inicio y otra de victoria o fin de partida.”
En mi caso, Claude recortó las hojas en piezas, colocó el fondo, montó la escena y escribió los niveles. Unos minutos después ya se podía jugar la primera versión. Luego dediqué más tiempo a los extras, que es el paso 4.
Paso 3: juégalo sin guardar nada
Claude muestra muchas respuestas en una vista previa dentro del propio chat. Si tu código viene de ChatGPT o de Gemini, hay una forma aún más rápida: AI Code Harvester, nuestra extensión gratuita de Chrome, encuentra el código en la respuesta y el botón Mostrar lo ejecuta en vivo en una pestaña nueva. No guardas ningún archivo ni copias y pegas nada.
Por eso Harvester es un complemento potente para todo lo que se pueda ejecutar en el navegador sin guardar archivos: un juego, una herramienta pequeña, el diseño de una página. Preguntas, pulsas Mostrar, miras el resultado, pides un cambio y vuelves a mirar. Funciona en las páginas de ChatGPT y Gemini, y nuestra guía Cómo ejecutar el código HTML de ChatGPT o Gemini y ver la página en vivo lo explica paso a paso.
Paso 4: mejóralo con una petición cada vez
La primera versión nunca es la definitiva, y ahí está la gracia. Después de la primera versión fui cambiando el juego con peticiones sencillas, una por una. Algunas de ellas:
- “Muestra letras pequeñas de las teclas en el borde de la pantalla, con un texto corto, para que el jugador sepa qué tecla compra qué.”
- “Añade un soldado que lance granadas solo al zombi más cercano.” A Claude le di imágenes nuevas de él hechas con Gemini.
- “Añade una torreta automática que apunte y dispare sola, pero más lenta que la principal.”
- “Los zombis solo deben perder energía si les doy en el cuerpo o en la cabeza, no en las piernas.”
- “Añade un botón de pausa en la esquina superior izquierda y un botón de pantalla completa.”
- “Haz la última oleada mucho más grande.”
La regla que más tiempo ahorra: pide un cambio, pruébalo y pide el siguiente. Si algo se rompe, di “deshaz el último cambio”. La IA recuerda lo que hizo y puede arreglarlo.
Pruébalo en tu ordenador antes de ponerlo en internet
Antes de compartir el juego, pruébalo en casa, donde nadie ve los fallos. Un juego así es una página web, y tu ordenador puede abrirla sin ningún servidor.
- Guarda el código en un solo archivo, por ejemplo
game.html. Si el juego usa imágenes de una carpeta, deja la carpeta junto al archivo. O pídele a la IA: “Mete las imágenes dentro del archivo, que sea un único archivo.” Así no se pierde nada. - Haz doble clic en el archivo. Se abre en tu navegador.
- Haz clic una vez en el juego y usa las teclas. El navegador necesita ese primer clic para que el juego pueda oír el teclado.
- Comprueba todo: el ratón y las teclas, el sonido, la pantalla completa, la pausa y si se puede jugar hasta el final.
- Arregla lo que falle contándole a la IA exactamente lo que viste.
Cuando funcione, súbelo a internet para que otros puedan jugar. Para eso necesitas un alojamiento web, que es simplemente un sitio en internet que guarda tus archivos y les da una dirección. Un único archivo de juego funciona en casi cualquier hosting, también en los gratuitos. Nuestra guía Dónde publicar la página web que hizo tu IA repasa las opciones con palabras sencillas. En nuestra propia web usamos Firebase Hosting.
Para mostrar el juego dentro de una página de tu propia web, añádelo así:
<iframe src="https://yoursite.com/game.html" width="1024" height="572" allow="fullscreen"></iframe>La parte allow="fullscreen" deja que los jugadores usen el botón de pantalla completa. Si subes una versión nueva y sigues viendo la antigua, pulsa Ctrl+F5 para que el navegador la cargue de nuevo.
No hay límite
Una vez que está la base, todo lo demás queda a una petición de distancia: un enemigo nuevo, un fondo nuevo para el siguiente nivel, un jefe más duro, otra arma, un tipo de juego distinto. Para cambiar el aspecto, pídele a la IA de imágenes otro juego de imágenes y dáselas a la IA de chat. Lo que antes necesitaba un equipo y semanas de trabajo ahora necesita una tarde y algo de imaginación.
Conviene saber antes de empezar
- La IA se equivoca. Algo no funcionará a la primera. Describe lo que ves y vuelve a pedirlo; es normal.
- La primera versión es rápida, el pulido lleva más. La primera versión jugable de mi juego tardó menos de 10 minutos. Los extras vinieron después.
- Los juegos como este están hechos para ratón y teclado. Para el móvil, pídele a la IA controles táctiles.
- Las reglas sobre las imágenes cambian. Comprueba qué permiten tu herramienta de imágenes y tu plan antes de vender o anunciar un juego.
Qué haces con el juego lo decides tú
Cuando el juego esté listo, qué pasa después lo decides tú. Compártelo en redes sociales, mándale el enlace a tus amigos, ponlo en tu propia web o guárdalo solo para ti. No hay una respuesta correcta, y lo bueno es que lo hiciste tú.
Preguntas frecuentes
Sí. Describes el juego con palabras sencillas, la IA escribe el código, y tú pruebas el resultado y pides cambios. No necesitas entender el código, solo decir qué quieres ver.
Puedes empezar gratis, pero los planes gratuitos tienen límites diarios de imágenes y mensajes, y un juego más grande puede llevarte más de un día con un plan gratuito. Además, muchas herramientas de imágenes solo permiten el uso comercial de las imágenes en un plan de pago, así que mira el tuyo.
Cualquier IA que haga imágenes puede dibujarlas, y cualquier IA de chat que escriba código puede construir el juego. Yo usé Gemini para las imágenes y Claude para el juego. ChatGPT y Gemini también pueden escribir el código.
Para un juego sencillo hecho de formas y colores, sí. Para un juego con arte de verdad necesitas imágenes de una IA de imágenes, que luego le das a la IA de chat para que las meta en el juego.
Sí. Un juego así suele ser un solo archivo HTML, que funciona en casi cualquier servidor web, también en los gratuitos. También puedes mostrarlo dentro de una página con un iframe.
Los juegos hechos así están pensados para ratón y teclado. Si lo quieres en el móvil, pídele a la IA que añada controles táctiles.
Depende de las reglas de las herramientas que usaste para las imágenes y el código, y cambian según el plan. Este post no da consejos legales, así que lee las condiciones de tus herramientas antes de vender o anunciar un juego.
AI Code Harvester — Gratis, local, sin cuenta
Creado por GetPlugzz. Solo procesamiento local: no se sube ni se rastrea nada.
