TAP JUMP ROAD:
A THREE.JS 3D ROAD CROSSING GAME

What Is Tap Jump Road?

Tap Jump Road is a free portrait 3D road crossing game for phones and desktop. Tap to hop your blocky chick forward across an endless world of grassy lanes, busy roads and rivers. Dodge cars and trucks, ride drifting logs over the water, weave between trees and grab gold coins. Your best score is saved on your device.

It is a Three.js game that runs as a 3D browser game on WebGL, developed by Shane Brumback and hosted by Indie Forge Studio, where you can play it at indieforgestudio.com/games/tap-jump-road/. It is free with no download or sign-up.

How to Play Tap Jump Road

• Hop forward: tap anywhere, or press ↑, W or Space.
• Sidestep and step back: swipe left, right or down, or use the arrow keys or A, D and S.
• Dodge traffic: cars and trucks get faster the farther you go. Getting hit squashes you.
• Ride the logs: rivers can only be crossed on drifting logs. Miss a log and you splash; ride one off the edge and you are swept away.
• Keep moving and grab coins: every new lane is a point and each gold coin is worth 5 more, but wait too long and the run ends.

Controls: Phones: tap to hop, swipe to sidestep or step back · Desktop: ↑ / W / Space hop, ← → side, ↓ back · P pause · M mute

How Tap Jump Road Is Built with Three.js

Tap Jump Road is plain JavaScript with no build step. It loads Three.js r160 as an ES module from a local copy of three.module.min.js and draws everything with a single THREE.WebGLRenderer. All the 3D models are built in code from Three.js primitives, so there are no 3D model files to download. Here is what the game code actually does:

• The world is an endless stack of lanes. Each lane is a THREE.Group of BoxGeometry strips for grass, road or water, generated ahead of you and removed once it falls behind.
• Trees, cars, trucks, logs and the chick are all built from boxes. Gold coins are thin CylinderGeometry discs with an emissive glow.
• A HemisphereLight and a shadow-casting DirectionalLight light the scene, with THREE.Fog fading the far lanes into the sky.
• Falling in a river throws a burst of small SphereGeometry droplets for the splash effect.
• Sound effects are made on the fly with the Web Audio API (AudioContext oscillators) instead of audio files, and your best score and mute setting are stored in localStorage.

Code from Tap Jump Road

These short snippets are copied straight from the game's source code.

Tap to hop, swipe to sidestep

A short tap hops forward, a sideways swipe sidesteps and a downward swipe steps back. Pointer events handle touch and mouse with the same code.

// input: tap = forward, swipe = direction
const fr = $('frame'); let p0 = null;
fr.addEventListener('pointerdown', (e) => { p0 = { x: e.clientX, y: e.clientY }; });
window.addEventListener('pointerup', (e) => {
  if (!p0 || core.mode !== 'play') { p0 = null; return; }
  const dx = e.clientX - p0.x, dy = e.clientY - p0.y; p0 = null;
  if (Math.abs(dx) > 28 && Math.abs(dx) > Math.abs(dy)) tryHop(0, dx > 0 ? 1 : -1);
  else if (dy > 36) tryHop(-1, 0);
  else tryHop(1, 0);
});

From games/tap-jump-road/game.js, lines 105–114

Renderer setup (shared core.js)

The shared arcade core creates one WebGLRenderer, caps the pixel ratio for phones, and uses a ResizeObserver to keep the canvas and camera aspect matched to the portrait frame.

export function setupRenderer(THREE, canvas, camera, dprCap = 1.75) {
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, powerPreference: 'high-performance' });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, dprCap));
  renderer.outputColorSpace = THREE.SRGBColorSpace;
  const frame = document.getElementById('frame');
  const resize = () => { const w = frame.clientWidth, h = frame.clientHeight; renderer.setSize(w, h, false); camera.aspect = w / h; camera.updateProjectionMatrix(); };
  new ResizeObserver(resize).observe(frame); resize();
  return renderer;
}

From games/tap-jump-road/core.js, lines 67–75

Built for Mobile and Portrait Play

Tap Jump Road is designed for phones held upright. The game runs in a 9:16 portrait frame, and on desktop it plays in a centered portrait frame. Input uses pointer events, so the same code handles taps, swipes and mouse clicks, with keyboard controls on desktop.

To keep it smooth on phones, the renderer caps the device pixel ratio, and the game pauses itself when you switch tabs or apps. Phones that support it give a short vibration as feedback.

Frequently Asked Questions