Cómo Creamos Space Destroyers Con IA: Del Chat de Gemini al Juego Jugable

Una mirada entre bambalinas a cómo un shooter espacial de navegador pasa de una idea a un juego listo para arcade — usando chatbots de IA, flujo de copiar-pegar, y eventualmente un IDE de IA completo.

14 de noviembre de 2025 · Vibe Arcade

Space Destroyers empezó en el Canvas de Google Gemini — no un editor de código, no un IDE, no una terminal. Alguien describió un shooter espacial, Gemini generó el código, y Canvas lo renderizó como un juego en vivo, jugable, justo dentro de la interfaz de chat. Esa fue la primera versión de lo que eventualmente se convertiría en nuestro juego insignia.

Esta es la historia de cómo ocurrió, cómo se veía realmente el flujo de trabajo en cada etapa, y cómo las herramientas y el proceso evolucionaron desde "constrúyelo en Canvas" a un IDE de IA completo con despliegue. Es honesta, no pulida — porque la versión honesta es más útil para cualquiera que intente construir algo similar.

Fase 1: Gemini Canvas — Velo Mientras Lo Construyes

La cosa que hizo a Gemini Canvas tan efectivo para empezar fue la inmediatez. Describes lo que quieres, y el juego aparece justo ahí en la conversación — jugable, visible, sin necesidad de una pestaña de navegador separada. Ese bucle de feedback visual es increíblemente poderoso cuando estás explorando un concepto.

El prompt era directo: un shooter espacial con estética neón retro, oleadas de enemigos y algún tipo de progresión. Gemini produjo un archivo HTML completo y Canvas lo renderizó en línea. Podías jugarlo inmediatamente, describir qué cambiar, y ver la versión actualizada segundos después — todo sin salir del chat.

El flujo de Canvas se veía así:

1. Describe el concepto del juego en el chat
2. Gemini genera código; Canvas lo renderiza como vista previa en vivo
3. Juega el juego justo ahí en la interfaz de chat
4. Describe qué está roto o qué quieres cambiar
5. Gemini actualiza el código; Canvas re-renderiza inmediatamente
6. Repite — el bucle de iteración es notablemente rápido

Este enfoque nos llevó sorprendentemente lejos. Como podías ver y jugar el juego en cada paso, detectabas los problemas inmediatamente. "La nave se mueve demasiado lento". "Las explosiones necesitan ser más grandes". "Añade un power-up de escudo". Cada iteración era visual y tangible — no revisión abstracta de código. Para cuando habíamos pasado por unas docenas de iteraciones, teníamos un shooter espacial genuinamente completo: múltiples tipos de enemigos, peleas de jefe, drops de power-up, un sistema de puntuación, efectos de partículas y controles táctiles móviles. Todo construido dentro de una ventana de chat.

Lo Que Gemini Canvas Hizo Bien

Vale la pena ser específico sobre lo que este enfoque produjo bien:

• El bucle inicial del juego: Mueve la nave, dispara balas, golpea enemigos, suma puntos. Todo funcionando en la primera versión.
• Estilo visual: Cuando se le dio la dirección estética neón retro-futurista, produjo renderizado basado en canvas con efectos de partículas brillantes que se veían inmediatamente convincentes.
• Variedad de enemigos: Múltiples tipos de enemigos con patrones de movimiento distintivos emergieron sin mucho prompting. La IA parecía saber que un buen shooter espacial necesita variedad de comportamiento.
• Acumulación rápida de funciones: Como Canvas nos dejaba ver cada cambio al instante, podíamos añadir funciones a un ritmo que no habría sido posible con un flujo de copiar-pegar-a-archivo. Peleas de jefe, rutas de mejora, controles móviles, pantallas de game over — cada una llevó minutos, no horas.

La primera versión jugable era legítimamente divertida. Esa no es una cosa pequeña. Muchos prototipos nunca pasan del "técnicamente funciona". Este era inmediatamente atractivo — y Canvas fue una gran razón de por qué, porque el feedback visual mantuvo el momento creativo.

Donde Canvas Tocó Sus Límites

El flujo de Canvas era excelente para construir el juego en aislamiento. Los problemas empezaron cuando decidimos realmente publicarlo.

Space Destroyers era un único archivo HTML con todo en línea — CSS, JavaScript, lógica del juego, todo en un documento. Eso está bien cuando estás iterando en Canvas. Es un problema cuando necesitas integrar el juego en un sitio web con navegación compartida, una API de leaderboard, seguimiento de juego y un sistema de diseño consistente.

La fricción central: cada vez que queríamos añadir una función o arreglar un bug en el juego, iterábamos sobre él en Gemini Canvas, conseguíamos que funcionara, y luego teníamos que re-integrarlo manualmente de vuelta a nuestra página web. Extraer el JavaScript actualizado, fusionarlo con el wrapper del sitio, probar que nada se rompiera en la integración. Luego hacerlo otra vez para el siguiente cambio. El coste de ida y vuelta era alto y crecía con cada iteración.

Canvas también tenía tendencia a cambiar inadvertidamente cosas que no estábamos tratando de cambiar. Pedirías un nuevo tipo de enemigo, y el sistema de power-ups se rompería sutilmente. O arreglarías un problema de layout móvil, y la visualización de puntuación cambiaría. Gemini estaba regenerando el archivo completo cada vez, y con una base de código creciente, estas regresiones se volvían más difíciles de detectar. Tuvimos que empezar a comprobar más cuidadosamente los casos límite tras cada cambio — lo que ralentizó el bucle rápido de iteración que hizo a Canvas tan atractivo en primer lugar.

El disparador final para cambiar de herramientas: el juego había crecido más allá del punto donde un único archivo en línea era manejable. Necesitábamos reestructurar desde una página HTML monolítica a un proyecto adecuado con CSS, módulos JavaScript y dependencias externas separadas. Ese tipo de refactorización estructural es exactamente para lo que Canvas no está diseñado.

Fase 2: Reestructuración y Mudanza a Antigravity

La mudanza a Antigravity — un IDE de IA completo construido para vibe coding — no era solo sobre cambiar de herramientas. Requirió reestructurar fundamentalmente el juego primero.

La versión Canvas de Space Destroyers era un único archivo HTML con CSS en línea y JavaScript en línea — todo en un documento. Esa es la salida natural de un chatbot: un archivo autocontenido. Pero para integrarlo en un sitio web real con navegación compartida, estilos globales, scripts de seguimiento y una API de leaderboard, necesitábamos una estructura adecuada de proyecto: archivos CSS separados, JavaScript como módulos externos, HTML como una plantilla que tira de dependencias. Antigravity manejó esta reestructuración naturalmente porque entiende proyectos multi-archivo — algo que Canvas no podía hacer.

Las diferencias clave del flujo de Canvas:

• Sin copiar-pegar o re-integración: Los cambios se aplican directamente al archivo correcto. Describe lo que quieres, Antigravity edita el código en sitio. No más extraer código de juego de Canvas y fusionarlo de vuelta a una página web.
• Conciencia multi-archivo: Antigravity sabe qué archivos existen en tu proyecto. Puedes decir "actualiza la lógica de spawn de enemigos" y sabe qué archivo editar sin que pegues el código relevante en el prompt. Esta fue la mayor mejora desde Canvas — los cambios al juego no rompían accidentalmente el wrapper del sitio, y los cambios al sitio no rompían accidentalmente el juego.
• Auto-publicación: Uno de los diferenciadores de Antigravity es que puede empujar cambios directamente al despliegue. En nuestro caso, eso significa empujar a Cloudflare Pages — el juego está vivo segundos después de un cambio aprobado. No más paso de despliegue manual.
• Contexto persistente: A diferencia de una sesión de Canvas, el contexto del proyecto persiste. Puedes volver a un juego días después y retomar donde lo dejaste sin re-explicar lo que construiste. Esto fue crítico a medida que Space Destroyers se hacía más complejo.

El Space Destroyers que existe hoy — con peleas de jefe, mecánicas de recolección de Núcleos Vibe, múltiples rutas de mejora y un leaderboard global — tomó forma en gran medida durante esta fase. Canvas había establecido el juego central y demostrado que el concepto era divertido; Antigravity permitió la profundidad, la integración y la iteración continua sin el impuesto de re-integración.

El Rol del Juicio Humano Durante Todo el Proceso

Una cosa que vale la pena clarificar: vibe coding no significa que el humano desaparezca del proceso. Cada función en Space Destroyers fue una decisión creativa deliberada. ¿Cuándo es el primer jefe? ¿Qué hace? ¿Cómo escala la dificultad? ¿Qué debería recompensar el sistema de mejoras?

La IA ejecuta la visión. El humano proporciona la visión — y las pruebas. Mucho del pulido de Space Destroyers vino de jugarlo repetidamente, notar qué se sentía mal y describir el arreglo. "El jefe aparece demasiado de repente — añade un indicador de advertencia durante 3 segundos antes de que aparezca". "El power-up de escudo se siente inútil porque los enemigos se mueven demasiado rápido para esquivar de todos modos — haz que también ralentice a los enemigos cercanos durante 2 segundos". Estas son observaciones humanas sobre la sensación del juego que una IA no podría notar por sí sola.

Lo Que Haríamos Diferente

Si estuviéramos empezando Space Destroyers hoy con lo que sabemos ahora:

• Usa Canvas para prototipado, pero planea la transición temprano. Gemini Canvas es genuinamente la forma más rápida de ir de idea a juego jugable. Pero sabe entrando que necesitarás reestructurar una vez estés listo para publicar. Planifica tu separación de archivos (CSS externo, módulos JS) antes de que el juego se vuelva demasiado complejo en Canvas — es más barato reestructurar un juego de 300 líneas que uno de 2.000.
• Comprueba regresiones tras cada iteración de Canvas. Canvas regenera el archivo completo. Adquiere el hábito de verificar las funciones que no pediste cambiar — especialmente casos límite como interacciones de power-up, controles móviles y cálculos de puntuación. Cuanto mayor el archivo, más probable que algo derive sin que lo notes.
• Escribe el documento de diseño del juego antes de codificar. Describe la experiencia objetivo, el bucle central, el sistema de progresión y el estilo visual en un archivo de texto antes de generar cualquier código. Actúa como referencia estable para la IA y mantiene coherente la visión entre sesiones — ya sea en Canvas, Antigravity o cualquier otra herramienta.
• Prueba en móvil más pronto. Varias iteraciones de Space Destroyers tuvieron que ser significativamente revisadas para funcionar bien en pantallas táctiles. Esto habría sido más barato detectar más temprano.

El Resultado

Space Destroyers es un juego de navegador completo y pulido con múltiples niveles, peleas de jefe, cuatro tipos de enemigos, mejoras de power-up y un leaderboard global. No empezó así. Empezó en Gemini Canvas — un juego que podías jugar dentro de una ventana de chat.

Esa historia de origen vale la pena saberla — no porque sea impresionante, sino porque es honesta. Canvas era brillante para construir y visualizar el juego. Tocó un muro cuando necesitábamos publicar, integrar e iterar en un sitio en vivo. Antigravity retomó donde Canvas lo dejó y convirtió un prototipo en un producto. Vibe coding es un flujo real con transiciones reales de fase — saber cuándo cambiar de herramienta es tan importante como saber cómo usarla.

Juega Space Destroyers — y mira lo que puede producir un ciclo completo de desarrollo de vibe coding.

Lecturas relacionadas: Consejos de Space Destroyers: Cómo Vencer al Jefe y Alcanzar una Alta Puntuación · Juego Gratis Online de Space Shooter · ¿Qué es Vibe Coding? · Herramientas de Vibe Coding: Desde Chatbots hasta IDEs de IA