Achter de schermen: het maken van Mario.Game Adventure

Mario.Game Adventure is één enkel JavaScript-bestand, zonder engine, zonder afbeeldingsbestanden en zonder audiobestanden. Zo is het allemaal tot stand gekomen.

Pixelart getekend in code

Elke sprite — de held in kleine en grote vorm, Walkers, Koopa's, Spinies, Piranha Plants, de eindbaas, blokken, wolken en kastelen — staat in de broncode beschreven als rijen kleurletters, of wordt getekend met kleine vormroutines. Bij het opstarten tekent het spel ze één keer op canvassen buiten beeld en kopieert ze daarna elk frame naar het scherm. Elke wereld heeft een eigen kleurenpalet: dezelfde bakstenen worden blauw onder de grond, ijzig 's nachts en grijs in het kasteel.

Natuurkunde die klassiek aanvoelt

Bewegen is waar een platformgame staat of valt. De held heeft aparte loop- en rensnelheden, acceleratie en deceleratie, een harde slip bij het wisselen van richting en variabele sprronghoogte: de zwaartekracht is lager zolang je de springknop vasthoudt en nog stijgt. We hebben de waarden zo lang bijgesteld tot je met een rennende sprong gaten van drie tegels gemakkelijk overbrugde en met een lopende sprong niet — zodat rennen een vaardigheid is die het leren waard is. Lees de bewegingsgids voor alle details.

Acht levels, vier thema's

Elke wereld introduceert één hoofdidee:

1. Wereld 1 — de basis: pijpen, kuilen, power-ups en daarna een grot met een laag plafond.
2. Wereld 2 — Spinies die je niet kunt platspringen en de eerste bewegende liften in de wolken.
3. Wereld 3 — een nachtlevel waarin alles samenkomt, daarna boomtoppen boven een bodemloze afgrond.
4. Wereld 4 — drukke vestingwegen, daarna een kasteel met vuurbalken, lava en een eindbaas.

Een bot die elk level speelt

Om zeker te weten dat elk level uitgespeeld kan worden, schreven we een testbot die elk level doorloopt met onkwetsbaarheid aan en tegen muren en over gaten springt. Als hij vastliep, bekeken we die plek: een paar keer kwam er een sprong aan het licht die een pixel te hoog was of een blok dat onbereikbaar was, en dan pasten we het level aan. Samen met een controle van de sprronghoogte bij elk blok ving dit alle onbereikbare plekken die we konden vinden.

Muziek met Web Audio

De soundtrack wordt live gegenereerd door een kleine sequencer die de Web Audio API van de browser gebruikt: blokgolven en driehoeksgolven voor melodie en bas, ruis voor de drums. Elke wereld heeft een eigen originele melodie, plus jingles voor power-ups, de vlag, game over en de finale. Als de timer op 100 komt, gaat het tempo omhoog — precies zoals je zou verwachten.

Probeer het zelf

Speel Mario.Game Adventure, of ga meteen naar onze walkthrough als je vastzit.