Loading demo...
canvasgamesdithermobile

Mike's Moonwalk

A night hike you play with one thumb. Drag to climb, stop to let the rocks go by, moonwalk away from the ghost, and make the summit by sunrise.

Mike sets off up a switchback trail at sunset and has until sunrise to reach the summit. There is one control: drag, and he walks exactly as far as your thumb moves. Lift your thumb and he stops. Drag the other way and he backs down the trail — a moonwalk, which is the other half of the name. Rocks fall, bats cross, gusts blow, ledges crumble, and somewhere past midnight a ghost comes down the trail toward him.

It was built for a phone first. On a phone, Start hike takes the whole screen, and the page behind it holds still until you leave.

Where it comes from

The mechanic belongs to A Fool's Errand by IORAMA, a Playdate game from 2025. In it, turning the crank walks young Roland up an endlessly spiralling tower, and the whole game is timing: when to go, when to stop, when to back off. A reel of it is what started this one. Only the mechanic is borrowed. The mountain, Mike, the night, the hazards and the art are this site's own.

What makes the idea work is that the input is proportional. The thumb doesn't press a button that starts a walk; its movement is the walk. There's no momentum to fight and no animation to wait out, so every mistake belongs to you, and so does every near miss.

One thumb

Mike's position is a single number: how far along the trail he is. His height, his place on screen and which way he faces all follow from it. A drag adds to that number, a thumb held still adds nothing, and a drag back takes some away.

A pixel of thumb moves him a pixel and a half along the trail. One-to-one was the first try, and it felt slow on a phone. His speed is capped at five times walking pace, and anything past the cap is dropped rather than saved for later, so a flick can't carry him through a rock. On desktop the same thing runs off a scroll wheel or trackpad, and ↑ and ↓ walk him at walking pace.

Five hazards, one verb each

  • Rocks — be elsewhere. A rock loosens with a puff of grit and a wobble, then bounces down the face, crossing the trail below it one switchback at a time.
  • Bats and crows — time the pass. A bat by night, a crow by day, crossing in a straight line. Wait for it, or beat it through.
  • Gusts — hold still. Streaks build, then the wind blows for a second and a half. Keep walking and you're blown off. Lift your thumb and Mike crouches and rides it out.
  • Crumbling ledges — commit. A cracked stretch gives way a set time after Mike steps onto it. Hesitating on it is the only way to lose.
  • The ghost — back away. It only comes out at night. It forms on the trail ahead of him and glides down it for three seconds at just under walking pace. You can't get past it, and it doesn't wait for you, so you give ground: you moonwalk.

Every warning lasts at least a second, and at night each hazard carries its own light, so the dark never shortens a warning. The game gets harder by laying hazards closer together and pairing them, never by making the warnings shorter. The two hazards that ask for opposite things — hold still for a gust, back away from a ghost — never overlap.

Hazards come in by altitude:

  • nothing for the first 40 m, while the game teaches the thumb
  • rocks from dusk
  • bats once it's dark
  • the ghost from 300 m
  • gusts from midnight
  • crumbling ledges toward first light

A hit takes one of three hearts and rolls Mike down to the switchback below, and the sky slips back with him.

Sunset to sunrise

The time of day is set by altitude, not by the clock. The trailhead is 6 p.m. and the first summit, at 1,000 m, is 6 a.m. Climb, and the night goes on. Back down, and the dusk comes back. The sun is down by about 50 m, the moon crosses the middle of the night, and first light comes on the last stretch before the summit.

The summit isn't the end. The day runs on past it, and every later sunrise brings another, higher peak. The end card reads your height back as a time: "Fell at 590 m. Just after 1 a.m."

One bit on purpose

Everything is drawn in shades of grey into a small buffer and then dithered. Each pixel is checked against an 8×8 ordered pattern and comes out either ink or black. There are no canvas paths, so no half-lit edge ever reaches the screen.

The ink changes with the light: blue at night, purple through the twilights, pink with the sun on the horizon, near-white by day. There is only ever one colour on screen, drifting from one to the next as you climb.

Dithering something that moves has a well-known flaw: the pattern stays put while the picture slides through it, and the dots crawl. Here every pixel remembers which layer drew it, and each layer carries its own dither pattern with it. The mountain's dots climb with the mountain and the sky's stay put, so nothing shimmers as the camera rises.

The buffer is scaled up by a whole number of device pixels, so the dots never land on a fractional pixel.

Mike

Mike is about twenty pixels tall: beanie, headlamp, pack and walking stick. His legs don't play a walk cycle on a timer. The gait is driven by distance walked, so his feet keep pace with your thumb: stop, and he stops mid-stride.

Each foot is placed on the slope and the knee is worked out to reach it, so a planted foot stays planted while he walks over it. Walk him backwards and the stride runs in reverse: the planted foot rises onto its toe and the other slides back flat. That's the moonwalk.

At twenty pixels, legibility is most of the work. Every part of him gets a black outline before its ink, so the near leg cuts through the far one and the head stands clear of the shoulders. The stick goes down well ahead of him and he walks up to it, so it never tangles with his legs.

Stand still for two seconds and he leans on the stick. After six he sits down. On a summit he sits straight away, to watch the sun come up. A hit curls him into a roll and sends him down the trail in a spray of grit. The shake from a hit moves the mountain but not the sky.

Built like the roguelite

It shares its bones with the roguelite: a fixed 60Hz simulation, a seeded random number generator, and a rule that the game logic never touches the canvas or React. React draws the altitude readout, the hearts and the end card. It only re-renders when one of them changes, never sixty times a second.

The trail is generated from the hike's seed, so a seed is a mountain. Hazards are laid from their own random stream by a table of altitude bands.

The scores and the first hike's three lessons (climb, stop, back away) belong to the page around the game, not the game. They're kept in localStorage, which the game never reads, so nothing they do can change how a hike plays.

Nothing was added to the site's dependencies to build it.