Hinter den Kulissen: Die Entstehung von Mario.Game Adventure

Mario.Game Adventure besteht aus einer einzigen JavaScript-Datei, ganz ohne Engine, ohne Bilddateien und ohne Audiodateien. So ist es entstanden.

Pixel-Art direkt im Code gezeichnet

Jeder Sprite – der Held in kleiner und großer Form, Walker, Koopas, Stachis, Piranha-Pflanzen, der Boss, Blöcke, Wolken und Burgen – wird im Quellcode als Reihen aus Farbbuchstaben beschrieben oder mit kleinen Formroutinen gezeichnet. Beim Start malt das Spiel sie einmalig auf Offscreen-Canvases und kopiert sie dann in jedem Frame auf den Bildschirm. Jede Welt hat ihre eigene Farbpalette: Dieselben Ziegel werden unter der Erde blau, nachts eisig und in der Burg grau.

Physik mit klassischem Spielgefühl

Bei einem Platformer steht und fällt alles mit der Steuerung. Der Held hat getrennte Geschwindigkeiten fürs Gehen und Rennen, Beschleunigung und Abbremsen, ein deutliches Rutschen beim Richtungswechsel und eine variable Sprunghöhe: Die Schwerkraft ist geringer, solange du die Sprungtaste gedrückt hältst und noch aufsteigst. Wir haben die Werte so lange angepasst, bis man mit einem Sprung im Lauf Lücken von drei Feldern bequem überwand und mit einem Sprung aus dem Gehen nicht – so wird Rennen zu einer Fähigkeit, die sich zu lernen lohnt. Alle Details findest du in unserem Bewegungsguide.

Acht Level, vier Themen

Jede Welt führt eine zentrale Idee ein:

1. Welt 1 – die Grundlagen: Rohre, Abgründe, Power-ups und anschließend eine Höhle mit niedriger Decke.
2. Welt 2 – Stachis, auf die man nicht springen kann, und die ersten beweglichen Aufzüge in den Wolken.
3. Welt 3 – ein Nachtlevel, das alles mixt, danach Baumwipfel über einem bodenlosen Abgrund.
4. Welt 4 – überfüllte Festungswege, dann eine Burg mit Feuerbalken, Lava und einem Boss.

Ein Bot, der jedes Level spielt

Damit sich wirklich jedes Level abschließen lässt, haben wir einen Testbot geschrieben, der mit eingeschalteter Unverwundbarkeit jede Stage durchläuft und an Wänden und Lücken springt. Wenn er hängen blieb, haben wir uns die Stelle genauer angesehen: Mehrmals zeigte sich dabei ein Sprung, der einen Pixel zu hoch war, oder ein Block, der nicht erreichbar war – und wir haben das Level korrigiert. Zusammen mit einer Sprunghöhenprüfung für jeden Block hat das alle unerreichbaren Stellen aufgedeckt, die wir finden konnten.

Musik mit Web Audio

Der Soundtrack wird live von einem winzigen Sequencer mit der Web Audio API des Browsers erzeugt: Rechteck- und Dreieckwellen für Melodie und Bass, Rauschen für das Schlagzeug. Jede Welt hat ihre eigene Originalmelodie, dazu kommen Jingles für Power-ups, die Flagge, Game Over und das Finale. Wenn der Timer auf 100 fällt, wird das Tempo schneller – genau so, wie man es erwartet.

Probier es aus

Spiel Mario.Game Adventure oder spring direkt zu unserer Komplettlösung, wenn du nicht weiterkommst.