Nos bastidores: como fizemos o Mario.Game Adventure

O Mario.Game Adventure é um único arquivo JavaScript, sem engine, sem arquivos de imagem e sem arquivos de áudio. Veja como tudo isso ganhou vida.

Pixel art desenhada em código

Cada sprite — o herói na forma pequena e na grande, Caminhantes, Koopas, Spinies, Plantas Piranha, o chefão, blocos, nuvens e castelos — é descrito no código-fonte como linhas de letras de cores, ou desenhado com pequenas rotinas de formas. Na inicialização, o jogo pinta tudo uma única vez em canvases fora da tela e depois os copia para a tela a cada quadro. Cada mundo tem sua própria paleta: os mesmos tijolos ficam azuis no subsolo, gelados à noite e cinza no castelo.

Uma física com cara de clássico

É no movimento que um jogo de plataforma vive ou morre. O herói tem velocidades separadas de caminhada e corrida, aceleração e desaceleração, uma derrapada forte ao mudar de direção e altura de pulo variável: a gravidade é menor enquanto você segura o botão de pulo e ainda está subindo. Ajustamos os valores até que um pulo correndo atravessasse com folga buracos de três blocos e um pulo andando não atravessasse — assim, correr parece uma habilidade que vale a pena aprender. Leia o guia de movimento para ver os detalhes.

Oito fases, quatro temas

Cada mundo apresenta uma ideia principal:

1. Mundo 1 — o básico: canos, buracos, power-ups e, depois, uma caverna com teto baixo.
2. Mundo 2 — Spinies que não podem ser pisoteados e os primeiros elevadores móveis entre as nuvens.
3. Mundo 3 — uma fase noturna que mistura tudo e, depois, copas de árvores sobre um abismo sem fim.
4. Mundo 4 — estradas de fortaleza lotadas e, por fim, um castelo com barras de fogo, lava e um chefão.

Um bot que joga todas as fases

Para garantir que todas as fases possam ser concluídas, escrevemos um bot de testes que percorre cada fase com invencibilidade ativada, pulando em paredes e buracos. Quando ele travava, olhávamos o local: várias vezes isso revelou um pulo alto demais por um pixel ou um bloco impossível de alcançar, e então corrigimos a fase. Junto com uma verificação da altura de pulo de cada bloco, isso pegou todos os pontos inalcançáveis que conseguimos encontrar.

Música com Web Audio

A trilha sonora é gerada ao vivo por um sequenciador minúsculo que usa a Web Audio API do navegador: ondas quadradas e triangulares para melodia e baixo, e ruído para a bateria. Cada mundo tem sua própria melodia original, além de jingles para power-ups, a bandeira, o fim de jogo e o final. Quando o cronômetro chega a 100, o ritmo acelera — exatamente como você esperaria.

Experimente

Jogue Mario.Game Adventure ou vá direto ao nosso passo a passo se ficar travado.