Un arcade completo, con 26 tipos de enemigos, ranking global y audio procedural, en un solo archivo HTML de 400KB. Sin motor de juego. Sin frameworks. Aquí está cómo llegamos hasta aquí.
Todo empezó con una pregunta simple: ¿por qué no existe un juego arcade sobre la cultura de barrio española? El género existe en mil variantes culturales — zombie shooters americanos, beat 'em ups japoneses — pero nada que capture la experiencia muy específica de vivir en un barrio español.
Los personajes se escribieron solos. El Amego que siempre te pide algo. La Charo del quinto que lo sabe todo. El Político con su matraca dorada. El Criptobro convencido de que el mercado siempre sube. Cada uno representando un arquetipo reconocible, exagerado hasta el absurdo.
La primera decisión fue la más radical: sin motor de juego, sin npm, sin webpack, sin frameworks. Un único archivo HTML con todo dentro — CSS, JavaScript, lógica de juego, audio, gráficos.
¿Por qué? Por simplicidad de despliegue. Para publicar una nueva versión solo hay que arrastrar un archivo a Netlify. Sin proceso de build, sin dependencias que actualizar, sin entorno de desarrollo complejo. Un archivo, un juego.
El resultado: 400KB para un juego completo con 26 tipos de enemigos, sistema de física, audio procedural, ranking global y modo multijugador de oleadas.
Todos los gráficos del juego se dibujan en tiempo real con la Canvas 2D API del navegador. No hay sprites, no hay imágenes cargadas — cada personaje, cada proyectil, cada edificio del fondo se genera con código en cada frame.
Esto tiene una ventaja enorme: los personajes son vectoriales y se escalan perfectamente a cualquier resolución, desde un móvil de 360px hasta un monitor 4K. Y tiene un reto interesante: hay que dibujar ~60 veces por segundo todos los elementos sin que el rendimiento caiga.
La solución fue un sistema de object pooling agresivo y la separación del loop en capas: primero el escenario (edificios, carretera, aceras), luego los enemigos, luego el jugador, luego los proyectiles y finalmente los efectos de partículas.
No hay ni un solo archivo de audio en el juego. Toda la música y los efectos de sonido se generan con la Web Audio API usando osciladores, filtros y generadores de ruido.
Cada fase tiene su propia melodía y tipo de oscilador: la fase de Políticos usa sawtooth a tempo marcial, los Funcionarios tienen un square monótono y lento, los Criptobros llevan square sincopado con silencios rítmicos. La música del Boss usa sawtooth acelerado a 160ms por nota.
El resultado son aproximadamente 20 melodías distintas sin ocupar un solo byte en disco.
El audio en iOS. Safari requiere que el contexto de audio se inicialice dentro de un evento de usuario. Toda la lógica de audio hubo que condicionarla al primer toque o clic del jugador.
El rendimiento en móvil. Dibujar 20 enemigos con animación, efectos de lluvia, paralaje de edificios y partículas a 60fps en un móvil de gama media requiere ser muy cuidadoso con qué se recalcula en cada frame y qué se puede cachear.
La sincronización de fases. El juego tiene 26 tipos de enemigos que deben aparecer exactamente en la oleada correcta, con su música, su escenario y sus proyectiles. Todo calculado a partir de un único valor: el score del jugador.
El juego sigue en desarrollo activo. Próximamente: sistema de logros persistente, pantalla de resultado compartible para redes sociales, y posiblemente un modo cooperativo local para dos jugadores en el mismo dispositivo.
Si tienes sugerencias, encontraste un bug o simplemente quieres decir algo, escríbenos a s7udio9@gmail.com.
Más artículos