A little endless runner

Lop Hop

Hop through one day and one night. Get home by dawn, and the animal that chased you joins your herd.

Play it now See the code

Runs in the browser, on a computer or a phone held sideways. Nothing to install.

The lop-eared rabbit runs through the meadow, ducks under a branch, eats a golden carrot and gets SUPER HOP.

The herd

Meet the herd

21 animals in the order they join: rabbit, guinea pig, cat, dog, pig, fox, hedgehog, squirrel, otter, skunk, wolf, boar, bear, yak, ostrich, cheetah, gorilla, elephant, dromedary, rhino and dino. Each one has its own food, its own super power and its own version of the song.

The goal

Home by dawn

Every run is one day and one night. When the sky turns dark, the next animal in line starts chasing you. Keep going until the sun comes up and it joins your herd.

  • Each animal is a bit harder than the one before, and worth more points.
  • At night each bump brings the chaser closer. A second bump while it's close and you're caught.
  • An animal's course is the same every run, and every obstacle can be cleared.
The fox runs through the end of the night with the hedgehog behind it, the sun rises, LOST YOU!, then HOME! and HEDGEHOG UNLOCKED! as the hedgehog runs to the middle of the screen.
The fox's last stretch of night: the hedgehog loses it at sunrise and joins the herd.

The world

Six lands, day and night

Each animal runs in a land of its own, with its own obstacles and its own food. As night falls the colours change through sunset and dusk, and stars and a moon come out.

  • Meadow, desert, forest, mountains, canyon and snow.
  • Golden food gives a super power for 8 seconds: a different one for every animal.
The cat in the forest by day, about to jump for a fish under a hanging branch.
The same moment by night: navy sky, stars and a crescent moon.
DayNight
Drag across to bring the night in. Same frame, same cat.
A bear jumps over a bush, blueberries floating ahead.
Meadowbear
A yak ducks under a hanging cactus.
Desertyak
An ostrich lies flat under a pine branch, a melon slice ahead.
Forestostrich
A cheetah runs toward a boulder, golden food floating above it.
Mountainscheetah
A wolf ducks under an autumn branch.
Canyonwolf
An elephant runs toward a block of ice.
Snowelephant

On the title screen

Between runs

Your herd waits in a row on the title screen, and every animal in it can be handled.

  • Rub along its back to pet it. It closes its eyes and hearts float up.
  • Pull it up to carry it, and drop it anywhere in the row.
  • Eat while your energy is full and the extra food becomes a treat. Bring up to five home, then hold one out: your animal stands up to reach it.
The dog stands on its hind legs for a bone held above it, takes it, chews it, and hearts float up.
Feed: a bone held up high.
A hand rubs the rabbit's back; its eyes close happily and hearts float up.
Pet: rub back and forth.
A hand lifts the cat out of the row and carries it to the left; the others shuffle along and the cat drops into its new place.
Carry: the others make room.

For the curious

Behind the scenes

Plain JavaScript files and one canvas, with no build step. The whole world is 300 pixels wide and drawn from code.

Music that follows the run

One song, played by Stardrift, a procedural chiptune engine. Every animal gets its own key, mode, pace, voices and motif. The game names a mood and the music follows: menu, exploring, tension, action, wonder at night, danger in the chase.

The squirrel at dusk, the otter behind it, banner THE OTTER IS AFTER YOU!
The music panel: mood chips with danger lit in orange, and the latest calls: music.setMood('danger'), music.sting('chased').

Add ?music to the address on a computer to watch the calls as you play.

A browser editor for the animals

Each animal is a rig of bones and shapes, with ears and tails that swing on physics. The editor has Setup, Animate and Play modes, and faces are drawn pixel by pixel. It saves back into one plain data file per animal.

The editor in Setup mode: the cat's shapes listed on the left, the cat drawn large with its bones on the stage, a live preview running past cacti below. 
// assets/cat.js, written by the editor; data only
export default {
  format: 5,
  name: 'cat',
  fur: 'tan',
  joints: { hip: [7, 12], chest: [14, 12], head: [19.5, 8.5] },
  layers: [
    { name: 'tail', shapes: [{ name: 'tail',
        chain: { on: 'hip', links: 4, length: 8, curl: 0.3, role: 'tail' },
        along: 'capsule', r: 1.1 }] },
    ...