Hemos creado un minijuego con IA: así hemos hecho «Sobrevive a las Oleadas»
Los demás artículos de esta web se apoyan en IA como herramienta de trabajo, pero el contenido final es siempre una prueba real hecha a mano. Este es distinto a propósito: hemos construido, de principio a fin, un minijuego jugable en el navegador usando IA para casi todo (el código, los personajes, el fondo), para ver hasta dónde se podía llegar sin ser programador de videojuegos ni artista. Aquí lo contamos tal cual ha salido, con lo que ha funcionado a la primera y lo que no.
Pruébalo tú mismo
El resultado está publicado como una página aparte: aquidetodo.es/minijuego-sobrevive-oleadas. Es un survivor 2D sencillo: te mueves con WASD o las flechas, disparas solo de forma automática al enemigo más cercano, subes de nivel eligiendo mejoras, y aguantas el máximo de rondas posible. Al morir puedes dejar tu nombre en un ranking.
Por qué JavaScript y no Java
La idea inicial hablaba de «Java», pero un juego que se ejecuta directamente en una página web se hace con HTML5 Canvas y JavaScript: los applets de Java que antes se usaban para esto dejaron de funcionar en los navegadores hace años. El resultado es el mismo que se buscaba, un juego 2D jugable sin instalar nada.
Los sprites: la misma IA que ya usamos para generar imágenes
Ya habíamos probado a generar imágenes con IA en tu propio PC con ComfyUI y Stable Diffusion XL. Para este juego usamos exactamente esa misma instalación, con el LoRA de pixel art, para generar el personaje, los enemigos, las balas y el fondo. A diferencia de aquella prueba, esta vez sí aplicamos el paso de reescalado a resolución de píxel real que la ficha del LoRA recomienda (y que entonces nos habíamos saltado): se nota, el resultado sale más nítido.
- Cada sprite se generó a 1024×1024 y se redujo a 128×128 con un algoritmo que no suaviza (Nearest Neighbor), para que se vea como píxel de verdad y no como una foto borrosa encogida.
- El fondo quitado con una clave de color simple (todo lo parecido al color de las esquinas se vuelve transparente), no con una IA aparte de recorte.
- El personaje y los enemigos se voltean en espejo según hacia dónde se mueven (izquierda o derecha) y tienen un ligero rebote al andar, en vez de una animación de piernas real.
El primer enemigo salió mal, y por qué
A la primera, el enemigo no salió como un único bicho: la IA generó un patrón repetido de cabecitas, como una textura de fondo en vez de un personaje. Lo solucionamos bajando la fuerza del LoRA de 1.0 a 0.85 y siendo mucho más explícitos en el texto («una sola criatura, aislada, centrada») y en lo que no queríamos («patrón, mosaico, repetido, hoja de sprites»). A la segunda, salió bien.
Por qué no tiene una animación de caminar «de verdad»
Nos planteamos intentar una hoja de sprites con el personaje visto desde varias direcciones, como en los RPG clásicos. Lo descartamos a propósito: Stable Diffusion XL, sin herramientas adicionales de control de pose que no tenemos instaladas, no genera el mismo personaje de forma consistente entre varias imágenes — cada intento tiende a salir como alguien distinto. Antes que enseñar un personaje que cambia de cara al andar, preferimos el volteo y el rebote, que son gratis y siempre coherentes.
Un fallo real de WordPress, no del juego
El primer intento de meter el código del juego directamente en el contenido de la página falló de una forma rara: WordPress corrige automáticamente comillas y símbolos sueltos en los artículos, y ese proceso se confundió con las etiquetas <div>, <canvas>, etc. que el propio código generaba como texto, llegando a corromper operadores del programa. La solución fue servir el código como un archivo .js real, generado por el propio plugin de la web, en vez de como texto dentro del artículo.
El ranking es real, pero no es a prueba de trampas
Las puntuaciones se guardan de verdad en la base de datos de la web, con un límite de tiempo entre envíos para frenar el spam más básico. Pero la puntuación la manda el propio navegador de quien juega, así que alguien con conocimientos técnicos podría enviar un resultado falso llamando directamente a esa dirección. Lo decimos así de claro: es un marcador por diversión, no un sistema anti-trampas.
Ficha técnica
- Juego: HTML5 Canvas + JavaScript, sin librerías externas.
- Sprites y fondo: ComfyUI + Stable Diffusion XL 1.0 + LoRA Pixel Art XL, generados en el PC del autor.
- Ranking: ruta propia en la API de WordPress, guardado en la base de datos del sitio.
- Lo que no lleva: animación de piernas real, protección real contra puntuaciones falsas.
Si te interesa la IA que corre en tu propio ordenador en vez de en la nube, además de este experimento tenemos el artículo sobre generar imágenes con IA en tu propio PC, y si prefieres las noticias del sector, el del lanzamiento de Claude Sonnet 5.5.