La forma más fácil de hacer un juego con IA es pedirle a un agente de código que escriba un pequeño juego de navegador con HTML canvas o Phaser, probar cada cambio en el navegador al momento y afinar tú mismo el «feel», porque es la parte que el agente no puede juzgar. Para proyectos 2D o 3D más grandes, Godot es un buen siguiente paso. Cuando termines, puedes subir el juego a itch.io y compartirlo en minutos.
Este artículo lleva un primer juego desde una carpeta vacía hasta una página publicada: qué herramienta elijo y por qué, el primer prompt que le doy al agente, el game loop, arte y sonido (incluidas las licencias), cómo afinar el game feel, el playtest e itch.io.
Por qué los juegos encajan tan bien con el vibe coding
Los juegos son de las cosas más divertidas e instructivas que se pueden construir con vibe coding. Los resultados son inmediatos: cambias un número y el personaje salta más alto. Un juego pequeño son solo unos pocos archivos, así que el agente puede mantenerlo entero en contexto.
Hay una trampa, eso sí. «Funciona» y «es divertido de jugar» están muy lejos. El agente puede comprobar si el código funciona; no puede comprobar si el juego es divertido. Esa parte es tuya.
Qué herramienta: canvas, Phaser, Godot o Unity
| Herramienta | Lenguaje | Buena para | Trabajar con un agente |
|---|---|---|---|
| HTML canvas | JavaScript | Juegos muy simples, aprender | Muy fácil; todo puede vivir en un solo archivo |
| Phaser | JavaScript / TypeScript | Juegos 2D de navegador | Fácil; física, escenas y animación integradas, muchos ejemplos |
| Godot | GDScript (o C#) | 2D y 3D más grandes, exportación a escritorio y web | Buena; las escenas son archivos de texto .tscn |
| Unity | C# | 3D grande, móvil, consolas | Buena para código, floja para escenas |
Para un primer juego recomiendo Phaser. El canvas puro también sirve, pero hacer que el agente escriba desde cero colisiones, animación de sprites y gestión de entrada lleva tiempo; Phaser te lo da hecho. Y todo es texto que corre en un navegador, así que no hay ningún editor que el agente no pueda ver.
Pasa a Godot cuando el juego crezca: muchas escenas, diseño de niveles complejo, 3D o una versión de escritorio. Los archivos de escena de Godot (.tscn) y los recursos (.tres) son texto legible, así que el agente puede editarlos. Aun así, yo monto las escenas en el editor y dejo el GDScript al agente; un pequeño error en un archivo de escena editado a mano puede impedir que el editor lo abra.
Unity es potente, pero la opción más incómoda de manejar con un agente. El agente escribe scripts de C# con soltura; las escenas, los prefabs y los ajustes del inspector viven en el editor. Si ya conoces Unity, úsalo; para un primer juego no es mi elección.
Paso 1: Preparación
Lo que necesitas:
- Node.js y un gestor de paquetes
- Un agente de código: Claude Code, Codex, Gemini CLI, opencode o similar
- Git, para poder volver siempre a «ayer funcionaba»
Crea un proyecto con Vite y añade Phaser:
npm create vite@latest cactus-run -- --template vanilla-ts
cd cactus-run
npm install
npm install phaser
git init && git add -A && git commit -m "initial scaffold"
npm run dev
npm run dev imprime una dirección local; ábrela para ver el juego, y la página se recarga a medida que el agente edita archivos.
Paso 2: El primer prompt
El primer prompt importa mucho en los juegos, porque «haz un juego» te da el juego que el agente se imagina. Mantén el alcance pequeño y concreto:
This is a Vite + TypeScript project with Phaser installed. We're
building a simple endless runner.
Game:
- The player runs left to right and jumps with space or a tap.
- Cacti come in from the right; touching one ends the game.
- Score increases over time and shows in the top right.
- On game over, show "Press space to restart".
Rules:
- Use coloured rectangles instead of art for now.
- Put every tunable number (gravity, jump velocity, game speed,
cactus spacing) in a single object in src/config.ts.
- Use Arcade physics.
- The game is 800x400 and scales to fit the screen.
- npx tsc --noEmit must pass.
- When done, explain the file structure and the values in config.ts.
La regla más valiosa aquí es config.ts. Afinarás el feel jugando con los números de ese archivo; si están repartidos por el código, cada retoque significa volver al agente.
La regla de «rectángulos en lugar de arte» también importa. Primero acierta con la jugabilidad y después hazlo bonito. Un prototipo precioso que no es divertido es el peor resultado.
Paso 3: Entender el game loop
En el corazón de todo juego hay un bucle: leer la entrada, actualizar el mundo, dibujar la pantalla, repetir, decenas de veces por segundo. Phaser lo ejecuta por ti y llama a update(time, delta) de tu escena en cada frame. Con canvas puro lo escribes tú:
let last = performance.now()
function loop(now) {
const dt = (now - last) / 1000 // seconds since the last frame
last = now
update(dt)
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
El único concepto que debes conocer es dt: mueve las cosas según el tiempo transcurrido, no por frame. Los agentes a veces escriben x += 5, y entonces el juego va más rápido en una pantalla de alta frecuencia de refresco. Si no ves dt en el código de movimiento, pregúntale al agente por ello.
Paso 4: Jugar, iterar, hacer commit
El ciclo:
- Juega un minuto.
- Describe lo que sentiste, de forma concreta: «El salto se queda demasiado tiempo en el aire; esquivar cactus es demasiado fácil».
- Deja que el agente lo cambie y vuelve a jugar.
- Haz commit de cada versión que se sienta bien.
Pega tal cual en el agente los errores de la consola del navegador (F12). Para problemas visuales, envía una captura de pantalla.
Una advertencia: no hagas crecer la lógica del juego con una sola petición enorme. «Añade power-ups, un jefe final y un sistema de niveles» enreda las tres cosas. Una mecánica cada vez.
Paso 5: Game feel
Lo que hace que un juego se sienta bien no suelen ser las grandes funciones sino los pequeños detalles. Los agentes no los añadirán por iniciativa propia, pero los implementan bien si se lo pides:
- Coyote time: permite saltar un instante después de salir de una plataforma.
- Jump buffering: recuerda un salto pulsado justo antes de aterrizar.
- Altura de salto variable: recorta la velocidad ascendente al soltar el botón.
- Screen shake y hit stop: congela unos frames en el impacto.
- Tweens: la puntuación que «salta», un enemigo que se tambalea al desaparecer.
- Sonido: un sonido corto de salto cambia el feel más que cualquier cosa en pantalla.
Este es el tipo de prompt que uso:
Improve the jump feel:
- Add 100 ms of coyote time and a 100 ms jump buffer.
- If space is released early, halve the upward velocity.
- On collision, add an 80 ms hit stop and a light screen shake.
Put all durations in config.ts. Don't change any other behaviour.
Después juega tú mismo con los números de config.ts. Esta parte no se puede delegar en una IA; solo notas unos pocos milisegundos de diferencia mientras juegas.
Paso 6: Arte, sonido y licencias
Cuando la jugabilidad esté bien, cambia los rectángulos por arte de verdad. Lo único con lo que hay que tener cuidado es la licencia.
Packs ya hechos:
- Muchos packs de fuentes como Kenney son CC0, utilizables incluso sin atribución.
- En OpenGameArt cada archivo tiene su propia licencia (CC0, CC‑BY, CC‑BY‑SA, GPL…). CC‑BY exige atribución; CC‑BY‑SA puede exigir que compartas las obras derivadas con la misma licencia. Lee la licencia de cada archivo.
- Los packs de assets de pago y gratuitos de itch.io traen cada uno su propia licencia; comprueba si se permite el uso comercial.
Mantén un CREDITS.md o una pantalla de créditos en el juego con la fuente y la licencia de cada asset.
El arte generado por IA es rápido y tentador, pero con algunas salvedades:
- El estatus de los derechos de autor del contenido generado por IA varía según el país y algunas cuestiones siguen sin resolverse.
- Cada herramienta de imágenes tiene sus propios términos de uso; comprueba el uso comercial.
- Algunas tiendas de juegos piden que declares el contenido generado por IA.
- También es técnicamente delicado: la coherencia de estilo, la disposición de las sprite sheets y los frames de animación a menudo necesitan limpieza manual.
Mi enfoque: packs de licencia abierta para el prototipo; para el lanzamiento, arte hecho por mí o cuya licencia conozca con seguridad.
Hay trabajo con assets que el agente hace bien: cargar una sprite sheet en Phaser, definir animaciones, conectar archivos de sonido. Dale los nombres de archivo y el tamaño de frame en lugar de dejar que lo adivine.
Paso 7: Playtesting
Quien construyó el juego es su peor tester; ya sabe qué hacer. Con el agente pasa lo mismo. Qué hacer:
- Pasa el juego a alguien y no expliques nada. Observa en silencio dónde se atasca.
- Toma notas: dónde murió, dónde se aburrió, qué malinterpretó.
- Convierte esas notas en tareas para el agente: «Los jugadores siempre chocan con el primer cactus; que no haya cactus en los primeros 5 segundos».
Las piezas pequeñas de lógica del juego (puntuación, reglas de colisión) se pueden comprobar con tests unitarios; pídele al agente que los escriba. El feel solo se puede probar jugando.
Paso 8: Publicar en itch.io
Subir un juego de navegador a itch.io lleva unos minutos:
npm run build
cd dist && zip -r ../cactus-run.zip . && cd ..
Después crea un proyecto nuevo en itch.io, ponle el tipo HTML, sube el zip y márcalo como jugable en el navegador. Define el tamaño del viewport (800×400, por ejemplo) y el botón de pantalla completa. El zip necesita index.html en su raíz; con Vite puede que necesites base: './' en vite.config.ts para las rutas relativas, algo que el agente puede comprobar por ti.
En Godot, instala la plantilla de exportación Web, exporta a HTML5 y sube de la misma manera. Si vas a actualizar a menudo, la herramienta de línea de comandos butler de itch.io automatiza las subidas.
Lo que los agentes suelen hacer mal en los juegos
- No pueden ver el juego. El agente escribe código pero no sabe qué hay en pantalla. Las capturas o una descripción de lo que ves son imprescindibles.
- Números mágicos. Los valores se reparten por el código. Repite la regla de
config.tscon cada mecánica nueva. - Movimiento dependiente del frame. Sin
dt, el juego va a velocidades distintas en pantallas distintas. - APIs obsoletas. Phaser y Godot cambiaron de API entre versiones mayores, y el agente puede escribir código para la antigua. Dile la versión: «Estamos en Godot 4, no escribas sintaxis de Godot 3».
- Todo en un solo archivo. A medida que el juego crece, pídele que separe escenas, entidades y ajustes en archivos distintos.
- Ignorar el rendimiento. Con cientos de balas o enemigos el juego se ralentiza. Pide object pooling.
Seguridad
Un juego parece inofensivo, pero se aplican las mismas reglas:
- Si añades una tabla de clasificación o un backend multijugador, guarda las claves en
.envy añade.enva.gitignore. - Todo lo que hay en un juego de navegador puede leerlo el jugador; las claves secretas nunca van en el código del cliente.
- No pegues API keys en el chat; dile al agente qué variable de entorno leer.
- Lee los comandos que ejecuta el agente antes de aprobarlos, sobre todo instalaciones de paquetes y borrados.
- No te fíes de las puntuaciones enviadas desde el cliente; hacer trampas en una clasificación online es fácil.
Hacerlo con AgentVera
Todo esto funciona con un terminal y un navegador. En proyectos de juegos me gusta ejecutar varios agentes en paralelo y ver el resultado en la misma ventana, y por eso uso AgentVera:
- Experimentos separados en worktrees separados. Un agente trabaja el feel del salto en un git worktree mientras otro añade un nuevo tipo de enemigo en un segundo; descarta el experimento que no te guste. El panel Git muestra las ramas.
- El navegador del agente. Con el navegador del agente, el agente puede abrir el juego mediante Playwright y hacer capturas mientras tú ves la pestaña en directo. Eso resuelve en parte lo de «el agente no puede ver el juego»; no resuelve el feel.
- Terminal y editor.
npm run devqueda abierto en un panel y editasconfig.tstú mismo en el editor. - Revisión y tokens. La revisión de código comprueba cada turno antes de hacer merge, y el uso de tokens se ve por panel.
AgentVera no es un motor de juegos; no sustituye al editor de Godot ni a itch.io.
Lista de comprobación rápida
- El primer juego es pequeño: una mecánica, una pantalla
- Los números ajustables viven en
config.ts - El movimiento usa
dt - Primero jugabilidad con rectángulos, después arte
- Fuente y licencia de cada asset anotadas
- Al menos una persona lo jugó sin explicaciones
- El zip de itch.io tiene
index.htmlen su raíz
Para terminar
Hacer un juego con IA es uno de los usos más divertidos del vibe coding. Empieza pequeño con Phaser en el navegador, guarda los números en un solo archivo, acierta con la jugabilidad usando rectángulos, afina el feel con tus propias manos y vigila las licencias. El agente escribe el código; tú eres quien lo hace divertido. Para ejecutar experimentos con varios agentes, consulta agentes de código en paralelo; para elegir herramienta, consulta las mejores herramientas CLI de código con IA.