За кулисами: как создавалась Mario.Game Adventure

Mario.Game Adventure — это один файл JavaScript без движка, без файлов изображений и без аудиофайлов. Расскажем, как всё получилось.

Пиксель-арт, нарисованный кодом

Каждый спрайт — герой в маленькой и большой форме, ходячие враги, Koopa, Spiny, растения-пираньи, босс, блоки, облака и замки — описан в исходном коде как строки из букв-цветов или нарисован небольшими процедурами с фигурами. При запуске игра один раз рисует их на невидимых холстах, а затем каждый кадр копирует на экран. У каждого мира своя палитра: одни и те же кирпичи под землёй становятся синими, ночью — ледяными, а в замке — серыми.

Физика с классическим ощущением

Управление решает судьбу платформера. У героя разные скорости ходьбы и бега, разгон и торможение, резкий занос при смене направления и переменная высота прыжка: гравитация слабее, пока вы держите кнопку прыжка и герой ещё поднимается. Мы подбирали значения, пока прыжок с разбега уверенно не стал перелетать пропасти шириной в три клетки, а прыжок с шага — нет. Так бег превратился в навык, который стоит освоить. Подробности — в руководстве по управлению.

Восемь уровней, четыре темы

Каждый мир вводит одну главную идею:

1. Мир 1 — основы: трубы, ямы, бонусы, а затем пещера с низким потолком.
2. Мир 2 — Spiny, на которых нельзя прыгать, и первые движущиеся платформы-лифты в облаках.
3. Мир 3 — ночной уровень, где есть всё понемногу, а затем верхушки деревьев над бездонной пропастью.
4. Мир 4 — многолюдные дороги крепости, а затем замок с огненными палками, лавой и боссом.

Бот, который проходит каждый уровень

Чтобы убедиться, что любой уровень можно пройти, мы написали тестового бота: он проходит каждый этап с включённой неуязвимостью и прыгает у стен и провалов. Когда бот застревал, мы смотрели на это место: несколько раз выяснялось, что прыжок слишком высок на один пиксель или до блока не добраться, — и мы исправляли уровень. Вместе с проверкой высоты прыжка до каждого блока это помогло найти все недостижимые места, какие мы смогли обнаружить.

Музыка на Web Audio

Саундтрек генерируется на лету крошечным секвенсором с помощью Web Audio API браузера: прямоугольные и треугольные волны для мелодии и баса, шум для ударных. У каждого мира своя оригинальная мелодия, а ещё есть джинглы для бонусов, флага, конца игры и финала. Когда на таймере остаётся 100, темп ускоряется — как и положено.

Попробуйте

Играйте в Mario.Game Adventure или сразу заглядывайте в наше прохождение, если застряли.