Entre bastidores: así se hizo Mario.Game Adventure

Mario.Game Adventure es un único archivo JavaScript, sin motor, sin archivos de imagen y sin archivos de audio. Así fue tomando forma.

Pixel art dibujado con código

Cada sprite —el héroe en tamaño pequeño y grande, los Walkers, los Koopas, los Spinies, las Piranha Plants, el jefe, los bloques, las nubes y los castillos— se describe en el código fuente como filas de letras de colores, o se dibuja con pequeñas rutinas de formas. Al arrancar, el juego los pinta una sola vez en canvas fuera de pantalla y después los copia a la pantalla en cada fotograma. Cada mundo tiene su propia paleta: los mismos ladrillos se vuelven azules bajo tierra, helados de noche y grises en el castillo.

Una física con sabor clásico

El movimiento es lo que hace o deshace un juego de plataformas. El héroe tiene velocidades distintas al caminar y al correr, aceleración y deceleración, un derrape brusco al cambiar de dirección y altura de salto variable: la gravedad es menor mientras mantienes pulsado el salto y sigues subiendo. Ajustamos los valores hasta que un salto corriendo salvaba huecos de tres bloques con comodidad y un salto caminando no, de modo que correr se siente como una habilidad que vale la pena aprender. Lee la guía de movimiento para ver los detalles.

Ocho niveles, cuatro temas

Cada mundo introduce una idea principal:

1. Mundo 1 — lo básico: tuberías, abismos, potenciadores y, después, una cueva con el techo bajo.
2. Mundo 2 — Spinies que no se pueden pisar y las primeras plataformas móviles entre las nubes.
3. Mundo 3 — un nivel nocturno que mezcla de todo y, después, copas de árboles sobre un vacío sin fondo.
4. Mundo 4 — caminos de fortaleza abarrotados y, al final, un castillo con barras de fuego, lava y un jefe.

Un bot que juega todos los niveles

Para asegurarnos de que todos los niveles se pueden terminar, escribimos un bot de pruebas que recorre cada fase con la invencibilidad activada, saltando ante paredes y huecos. Cuando se atascaba, revisábamos el punto exacto: varias veces nos reveló un salto que quedaba un píxel demasiado alto o un bloque inalcanzable, y corregimos el nivel. Junto con una comprobación de la altura de salto de cada bloque, esto nos permitió detectar todos los puntos inalcanzables que pudimos encontrar.

Música con Web Audio

La banda sonora se genera en directo con un diminuto secuenciador que usa la API Web Audio del navegador: ondas cuadradas y triangulares para la melodía y el bajo, y ruido para la batería. Cada mundo tiene su propia melodía original, además de jingles para los potenciadores, la bandera, el fin de la partida y el final del juego. Cuando el temporizador baja a 100, el tempo se acelera, justo como cabría esperar.

Pruébalo

Juega a Mario.Game Adventure o ve directo a nuestra guía paso a paso si te atascas.