Za kulisami: jak powstawał Mario.Game Adventure

Mario.Game Adventure to jeden plik JavaScript – bez silnika, bez plików graficznych i bez plików audio. Oto jak to wszystko powstało.

Pixel art rysowany w kodzie

Każdy sprite – bohater w małej i dużej postaci, Walkers, Koopy, Spiny, Piranha Plants, boss, bloki, chmury i zamki – jest opisany w kodzie źródłowym jako rzędy liter oznaczających kolory albo rysowany za pomocą małych procedur kształtów. Przy starcie gra jednorazowo maluje je na pozaekranowych canvasach, a potem w każdej klatce kopiuje na ekran. Każdy świat ma własną paletę: te same cegły pod ziemią robią się niebieskie, nocą lodowate, a w zamku szare.

Fizyka z klasycznym feelingiem

W platformówce wszystko zależy od ruchu. Bohater ma osobne prędkości chodu i biegu, przyspieszanie i hamowanie, wyraźny poślizg przy zmianie kierunku oraz zmienną wysokość skoku: grawitacja jest mniejsza, dopóki trzymasz skok i jeszcze wznosisz się w górę. Dostrajaliśmy wartości, aż skok z biegu wygodnie pokonywał przerwy o szerokości trzech kratek, a skok z chodu – nie. Dzięki temu bieganie to umiejętność, którą warto opanować. Szczegóły znajdziesz w poradniku o ruchu.

Osiem leveli, cztery motywy

Każdy świat wprowadza jeden główny pomysł:

1. Świat 1 – podstawy: rury, przepaście, power-upy, a potem jaskinia z niskim sufitem.
2. Świat 2 – Spiny, na które nie można skakać, i pierwsze ruchome windy wśród chmur.
3. Świat 3 – nocny level łączący wszystko, a potem korony drzew nad bezdenną przepaścią.
4. Świat 4 – zatłoczone drogi przez fortecę, a na koniec zamek z ognistymi belkami, lawą i bossem.

Bot, który przechodzi każdy level

Żeby mieć pewność, że każdy level da się ukończyć, napisaliśmy bota testowego, który przechodzi każdy etap z włączoną nieśmiertelnością, skacząc przy ścianach i przerwach. Gdy się zacinał, sprawdzaliśmy dane miejsce: kilka razy wyszedł na jaw skok o piksel za wysoki albo blok, do którego nie dało się dotrzeć, i poprawialiśmy level. W połączeniu ze sprawdzeniem wysokości skoku do każdego bloku pozwoliło to wyłapać wszystkie niedostępne miejsca, jakie udało nam się znaleźć.

Muzyka z Web Audio

Ścieżka dźwiękowa jest generowana na żywo przez malutki sekwencer korzystający z Web Audio API przeglądarki: fale prostokątne i trójkątne do melodii i basu, szum do perkusji. Każdy świat ma własną, oryginalną melodię, a do tego jingle dla power-upów, flagi, game over i finału. Gdy czas spadnie do 100, tempo przyspiesza – dokładnie tak, jak się spodziewasz.

Wypróbuj

Zagraj w Mario.Game Adventure albo przejdź od razu do naszego poradnika krok po kroku, jeśli utkniesz.