Blog de Vibe Arcade

Historias de desarrollo, diseño de juegos y el arte de crear con IA

Fuse Alley: Cómo Creamos el Juego de Física de Bombas con IA

El encargo era una bolera donde la bola es una bomba. Lo que terminamos creando fue nuestro primer juego 3D real, once niveles hechos a mano, cinco tipos de bomba distintos y un reto diario que da a todo el mundo el mismo puzle.

· Vibe Arcade

desarrollo de juegos vibe coding física 3D entre bambalinas

Cada juego en la colección de Vibe Arcade antes de este era plano. Canvas 2D, trucos de DOM, quizá algo de falsa perspectiva sobre una rejilla de tiles — nada que existiera realmente en tres dimensiones. Fuse Alley fue el juego en el que nos comprometimos con 3D real en el navegador, con un motor de física real, porque el concepto solo funcionaba si la física era real. No puedes fingir la satisfacción de una reacción en cadena bien sincronizada. O los pines caen unos sobre otros bajo el momento simulado, o todo se siente como un pase de diapositivas.

¿Quieres jugar primero y luego leer la historia de cómo lo creamos?

▶ Juega Fuse Alley Ahora

Fase 1: Romper Nuestras Propias Reglas

Vibe Arcade tiene una regla por defecto de que cada juego se envía como un único archivo HTML con cero dependencias externas. Sin paso de build, sin scripts de CDN que no entendamos. Esa regla mantiene los juegos fáciles de auditar, fáciles de bifurcar y fáciles de servir desde un host estático plano. También mantiene nuestro flujo asistido por IA honesto — la IA no puede esconder complejidad dentro de un gestor de paquetes cuando no hay gestor de paquetes.

Fuse Alley fue el primer juego donde aprobamos una excepción. Añadimos dos librerías: Three.js para renderizado WebGL y cannon-es para física de cuerpos rígidos. La excepción fue explícita y con alcance — esas dos librerías, este juego, sin adiciones más allá. Simular una pista de bolos con explosiones de bomba y reacciones en cadena en matemáticas escritas a mano habría consumido todo el presupuesto y probablemente aún se habría sentido mal. Delegar las matemáticas a un motor de física probado significaba que podíamos gastar el tiempo en diseño de niveles en lugar de resolver respuesta a colisión desde cero.

Fase 2: Bolos, No Tirachinas

La primera decisión real de diseño fue qué hace el jugador realmente. Angry Birds enseñó a una generación que "lanza un explosivo a un objetivo" significa tirar de un tirachinas. Casi fuimos por ese camino.

Aterrizamos en bolos en su lugar, y resultó ser la decisión correcta por dos razones. Primero, una rodada por el suelo le da al motor de física algo digno que hacer — la bola rueda, la fricción quita velocidad, las paredes laterales desvían los tiros errados, y la posición final de la bomba es producto de toda la trayectoria en lugar de un único proyectil con arco. Segundo, los bolos tienen un vocabulario integrado que los jugadores ya entienden: apunta, potencia, suelta. Enseñar un nuevo esquema de control consume atención del primer minuto que preferimos gastar en las explosiones.

La cámara se sitúa detrás de la bola, mirando por la pista en perspectiva. El jugador ajusta el ángulo con las teclas de flecha, mantiene espacio para cargar potencia y suelta para lanzar. En dispositivos táctiles, la misma sensación se reproduce arrastrando hacia atrás sobre la bola. Esa última parte nos llevó tres intentos hasta dar con la fórmula.

Fase 3: Cinco Bombas, Cinco Puzles

Un único tipo de bomba habría sido un juego aburrido. Cinco tipos de bomba, cada uno con comportamiento genuinamente distinto, lo convirtieron en una serie de puzles. El roster se desbloquea progresivamente al despejar niveles:

Cada tipo de bomba tiene un puzle del que es la respuesta obvia, y un puzle donde es una trampa. Cluster sobre un triángulo apretado desperdicia las explosiones periféricas. Shaped Charge en pines a nivel del suelo lanza la mayor parte de su fuerza al techo. Darle al jugador la herramienta equivocada en un nivel y dejarle averiguar la correcta fue más satisfactorio de lo esperado.

Fase 4: Once Niveles Hechos a Mano

La especificación original pedía cinco niveles hechos a mano y luego un cambio a generación procedural para la campaña. Seguimos añadiendo niveles hechos a mano en su lugar. La generación procedural es buena rellenando espacio y mala construyendo tensión.

La progresión va Boot Camp (un triángulo clásico de diez pines, solo para enseñar el apuntado), Split Decision (dos clusters separados que te obligan a gestionar dos bombas), The Stack (filas verticales diseñadas en torno a reacciones en cadena), Platform Problem (el primer nivel elevado) y Domino Rally (un corredor en forma de L donde la única forma de despejar quince pines es una cadena perfecta). Las rondas posteriores añadieron Crossfire, High Rise, Minefield, Pyramid Prime y The Gauntlet. El nivel final es el jefe Detonation Chamber: un objetivo apilado de cuatro segmentos rodeado de ocho pines secuaces, con los cuatro power-ups colocados en la arena para un final deliberadamente caótico.

Cada uno de esos layouts es un puzle geométrico específico que sabe lo que está pidiendo al jugador averiguar. Un generador por semilla produce "quince posiciones de pin válidas". Un nivel hecho a mano produce "quince posiciones de pin que se resuelven en un derribo satisfactorio si golpeas el primero en el ángulo correcto".

Fase 5: El Reto Diario

Dicho eso, el modo diario es procedural, y es el único lugar donde los layouts aleatorios tienen sentido. El reto diario usa generación con semilla — una disposición fresca de quince pines cada día, construida a partir de una semilla derivada de la fecha del calendario. Todo el mundo que abra el juego un día dado se enfrenta al mismo layout, que es la parte que importa. Los puzles diarios son sociales; si el puzle es distinto para cada jugador, no hay nada que comparar.

La semilla es determinista. Dada la misma fecha, la misma secuencia pseudoaleatoria produce las mismas posiciones con el mismo espaciado mínimo entre pines. El layout de mañana será distinto. Un pequeño trozo de almacenamiento local previene reintentar el puzle del día por una mejor puntuación, lo que mantiene el leaderboard honesto.

Fase 6: Controles Táctiles, Tercera Toma

La primera implementación táctil estaba mal. No rota — la bola volaba, los pines caían — pero se sentía mal. El touchstart empezaba inmediatamente a cargar potencia, acoplando apuntado y carga en un gesto sin forma de alinear un tiro sin comprometerte también a lanzarlo. El apuntado se conducía por movimiento relativo, así que un arrastre lento apenas movía el ángulo y uno rápido lo balanceaba salvajemente.

La tercera versión reconstruyó toda la interacción como arrastrar-hacia-atrás: el toque comienza, la fase se mantiene en modo apuntado, y el arrastre se mapea de forma absoluta. El offset horizontal fija el ángulo de apuntado, el arrastre hacia arriba fija la potencia, soltar lanza con los valores que el dedo tuviera al levantarse. Esa versión se sintió bien de inmediato. La lección: "se siente mal" no es un reporte de bug útil, pero "el ángulo se mueve en proporción a la velocidad del arrastre en lugar de la posición" sí lo es.

Lo Que Aprendimos Construyendo en 3D

La física real significa que el estado del juego no es determinista de la forma en que lo es un juego por turnos — dos ejecuciones del mismo tiro pueden asentarse con diez pines caídos o nueve. Eso hizo más difíciles las pruebas automatizadas; un test que falla ocasionalmente por suerte física no es una señal útil.

El reto diario, los power-ups, la cámara orbital del replay del tiro, la pelea del jefe en el nivel once — todos empezaron como "quizá en una versión futura" y se construyeron durante las pasadas de iteración. El juego final es significativamente más grande que la especificación original porque cada pasada reveló lo que la mecánica central podía soportar, y seguimos añadiendo hasta que la forma del juego se sintió completa.

Lo que más nos sorprendió es que la física 3D en el navegador es genuinamente viable ahora. Un equipo pequeño con asistencia de IA puede enviar un puzle real de física 3D en un único archivo HTML que carga en una pestaña del navegador, funciona en un teléfono y no requiere que nadie instale nada.

Juega Fuse Alley — recorre los once niveles, luego vuelve mañana para el diario.


Lecturas relacionadas: Cómo Creamos Neon Snake · ¿Qué es Vibe Coding? · Herramientas de Vibe Coding: Desde Chatbots hasta IDEs de IA