Dietro le quinte: come abbiamo creato Mario.Game Adventure

Mario.Game Adventure è un unico file JavaScript, senza motore di gioco, senza file immagine e senza file audio. Ecco come è nato.

Pixel art disegnata nel codice

Ogni sprite (l'eroe in versione piccola e grande, i Walker, i Koopa, gli Spiny, le Piante Piranha, il boss, i blocchi, le nuvole e i castelli) è descritto nel codice sorgente come righe di lettere che indicano i colori, oppure è disegnato con piccole routine di forme. All'avvio il gioco li dipinge una sola volta su canvas fuori schermo, poi li copia sullo schermo a ogni frame. Ogni mondo ha una sua palette: gli stessi mattoni diventano blu nel sottosuolo, ghiacciati di notte e grigi nel castello.

Una fisica che sa di classico

In un platform tutto si gioca sul movimento. L'eroe ha velocità di camminata e di corsa distinte, accelerazione e decelerazione, una frenata decisa quando cambia direzione e un salto a altezza variabile: la gravità è minore finché tieni premuto il salto e stai ancora salendo. Abbiamo regolato i valori finché un salto in corsa superava senza problemi i vuoti larghi tre blocchi e un salto da fermo o camminando no, così correre diventa un'abilità che vale la pena imparare. Leggi la guida al movimento per tutti i dettagli.

Otto livelli, quattro temi

Ogni mondo introduce un'idea principale:

1. Mondo 1 — le basi: tubi, burroni, potenziamenti e poi una caverna con il soffitto basso.
2. Mondo 2 — Spiny che non si possono schiacciare e le prime piattaforme mobili tra le nuvole.
3. Mondo 3 — un livello notturno che mescola tutto, poi cime degli alberi sopra un vuoto senza fondo.
4. Mondo 4 — strade di fortezza affollate, poi un castello con barre di fuoco, lava e un boss.

Un bot che gioca ogni livello

Per essere sicuri che ogni livello si possa finire, abbiamo scritto un bot di test che percorre ogni stage con l'invincibilità attiva, saltando davanti a muri e vuoti. Quando restava bloccato, andavamo a guardare il punto esatto: più di una volta ha rivelato un salto troppo alto di un pixel o un blocco impossibile da raggiungere, e abbiamo corretto il livello. Insieme a un controllo dell'altezza di salto per ogni blocco, ci ha permesso di trovare tutti i punti irraggiungibili che siamo riusciti a scovare.

Musica con Web Audio

La colonna sonora è generata in tempo reale da un minuscolo sequencer che usa la Web Audio API del browser: onde quadre e triangolari per melodia e basso, rumore per la batteria. Ogni mondo ha il suo motivo originale, più jingle per i potenziamenti, la bandiera, il game over e il finale. Quando il timer scende a 100, il tempo accelera, proprio come ti aspetteresti.

Provalo

Gioca a Mario.Game Adventure, oppure vai direttamente alla nostra soluzione se ti blocchi.