Lane Runner Endless Game — HTML Canvas Neon 3D Runner

Endless runners are the most touch-native game genre there is: the whole game is a handful of instant decisions — left, right, jump, slide — against an obstacle stream that never stops speeding up. This snippet builds a complete, polished one on a single HTML5 <canvas>: a synthwave track in perspective, a runner with a real run cycle, three obstacle types that each demand a different move, coins, a shield power-up, swipe and tap controls, synthesized sound, pause and a saved high score.

Pseudo-3D from one formula

There is no 3D engine. Every object has a distance d ahead of the runner, and one function turns it into a scale: t = FOCAL / (FOCAL + d). At the runner t is 1; far away it shrinks toward 0 at the horizon. Screen y is HORIZON + (BASE_Y − HORIZON) × t and screen x is the lane offset multiplied by t, so lanes converge on the vanishing point and objects accelerate toward you naturally. The track is drawn as scrolling quads between depth slices, alternating two shades with dashed lane markers, and a magenta grid, a glowing edge, a retro striped sun and a parallax skyline complete the scene.

Three obstacles, three verbs

A green barrier must be jumped, an amber overhead gate must be slid under, and red blocks fill every lane but one, so you must switch lanes. Some rows span all three lanes and force a jump or slide. Collisions are simple depth checks: an obstacle only matters when its d is within about ±1.3 of the runner and its lane is within 0.55 of the runner's smoothed lane position. Jump and slide are timed windows, and sliding in mid-air cancels the jump so the runner drops immediately, which makes the controls feel responsive.

Controls built for thumbs

Every action is a one-shot event, not a held key. The on-screen buttons fire on pointerdown, the keyboard uses ← → ↑ ↓ plus WASD and Space, and the track itself accepts swipes: a horizontal swipe changes lane, up jumps, down slides, and a short tap jumps. The lane is an integer used for logic while the drawn position eases toward it, so lane changes slide instead of snapping. Arrow and Space keys call preventDefault so the page never scrolls while you play.

Coins, shield and fair spawning

Rows are chosen from patterns: single obstacles with coins in the free lanes, double blocks with coins in the open lane, full-width walls, pure coin lines and an occasional shield. The gap between rows is tied to speed (speed × 0.62 plus a little randomness), so there is always time to react at high speed. A shield absorbs one hit, gives 1.3 seconds of blink-invulnerability and pops with a particle ring. Score is distance in metres plus ten per coin, and speed ramps smoothly with distance up to a cap, shown as a bar in the HUD.

An autopilot demo behind the title screen

While you are on the start screen the game plays itself: a few lines of autopilot look ahead at the next obstacle in the current lane, jump a barrier, slide a gate or pick the nearest free lane for a block. The same update code runs with crashes disabled, so the title screen shows a live scene instead of a static image.

Juice, sound and accessibility

Coins spin by squashing their width with a cosine, speed lines streak from the vanishing point as you accelerate, crashes flash, shake and burst into particles, and dust and a shadow ground the runner. Sound is synthesized with the Web Audio API (jump, slide, lane tick, coin pitch that rises with your streak, shield, crash) with a saved mute toggle, created on the first click. The canvas is scaled by devicePixelRatio for sharp lines, the game pauses on blur or a hidden tab, and prefers-reduced-motion disables screen shake. For related canvas games see the Dodge the falling blocks game and the Frog crossing game.