MARIO.GAME
en
Dev diary

Behind the Scenes: Making Mario.Game Adventure

How we built Mario.Game Adventure: pixel art drawn in code, physics tuned to feel classic, a Web Audio soundtrack and eight levels tested by a bot.

5 min read

Behind the Scenes: Making Mario.Game Adventure

Mario.Game Adventure is a single JavaScript file with no engine, no image files and no audio files. Here's how it came together.

Pixel art drawn in code

Every sprite — the hero in small and big form, Walkers, Koopas, Spinies, Piranha Plants, the boss, blocks, clouds and castles — is described in the source code as rows of colour letters, or drawn with small shape routines. At start-up the game paints them onto off-screen canvases once, then copies them to the screen each frame. Each world has its own palette: the same bricks turn blue underground, icy at night and grey in the castle.

Physics that feel classic

Movement is where a platformer lives or dies. The hero has separate walking and running speeds, acceleration and deceleration, a hard skid when changing direction, and variable jump height: gravity is lower while you hold jump and still rising. We tuned the values until a running jump cleared three-tile gaps comfortably and a walking jump didn't — so running feels like a skill worth learning. Read the movement guide for the details.

Eight levels, four themes

Each world introduces one main idea:

  1. World 1 — the basics: pipes, pits, power-ups, then a cave with a low ceiling.
  2. World 2 — Spinies that can't be stomped, and the first moving lifts in the clouds.
  3. World 3 — a night level mixing everything, then treetops over a bottomless drop.
  4. World 4 — crowded fortress roads, then a castle with fire bars, lava and a boss.

A bot that plays every level

To make sure every level can be finished, we wrote a test bot that runs through each stage with invincibility turned on, jumping at walls and gaps. When it got stuck, we looked at the spot: several times it revealed a jump that was a pixel too high or a block that couldn't be reached, and we fixed the level. Combined with a jump-height check of every block, this caught all the unreachable spots we could find.

Music with Web Audio

The soundtrack is generated live by a tiny sequencer using the browser's Web Audio API: square and triangle waves for melody and bass, noise for drums. Every world has its own original tune, plus jingles for power-ups, the flag, game over and the finale. When the timer drops to 100, the tempo goes up — just like you'd expect.

Try it

Play Mario.Game Adventure, or jump straight to our walkthrough if you get stuck.

More news