SKY HOPPER:
A THREE.JS BOUNCING JUMP GAME

What Is Sky Hopper?

Sky Hopper is a free portrait 3D jumping game for phones and desktop. Your cute hopper bounces automatically, and you drag or hold left and right to steer it onto the next platform. Watch for moving, crumbling and boost platforms as you climb. Your best height 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. It is free with no download or sign-up.

How to Play Sky Hopper

• Bounce: your hopper jumps automatically every time it lands on a platform.
• Steer: drag your finger, or hold the left or right side of the screen, to move toward that side. On a keyboard use the arrow keys or A and D.
• Watch the platforms: green platforms slide sideways, brown ones crumble after one bounce and yellow boost pads launch you much higher.
• Climb combo: land on higher and higher platforms to build a climb combo; every 10 in a row is worth bonus points.
• Do not fall: drop off the bottom of the screen and the run ends. Tap to restart instantly.

Controls: Phones: drag, or hold the left / right side of the screen · Desktop: ← → or A / D · P pause · M mute

How Sky Hopper Is Built with Three.js

Sky Hopper 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 hopper is a flat-shaded IcosahedronGeometry body with sphere eyes, a half-torus mouth and a ConeGeometry crown, grouped together so it can squash and stretch on each bounce.
• Platforms share one BoxGeometry and are reused from a pool. Each is stretched with mesh.scale and recolored by type (moving, crumbling or boost).
• Clouds are small groups of low-detail icosahedrons, which keeps the triangle count low on phones.
• The jump is simple physics: gravity pulls the hopper's speed down every frame, a landing resets it to the jump speed, and boost pads use a bigger value.
• 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 Sky Hopper

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

Steering, gravity and landing

Steering eases the sideways speed, gravity pulls the hopper down, and a landing is only counted while falling onto the top of a platform. Boost pads give a bigger jump.

    S.vx += (ax * 7.5 - S.vx) * Math.min(1, dt * 10);
    S.x = THREE.MathUtils.clamp(S.x + S.vx * dt, -HALF, HALF);
    const prevY = S.y; S.vy += G * dt; S.y += S.vy * dt;
    if (S.vy < 0) for (const p of plats) {
      if (!p.alive || p.broken) continue; const top = p.y + 0.16 + 0.55;
      if (prevY >= top - 0.05 && S.y <= top && Math.abs(S.x - p.x) < p.w / 2 + 0.3) {
        S.y = top; S.squash = 1;
        if (p.type === 'boost') { S.vy = BOOST; core.beep(500, 0.25, 'triangle', 0.07, 900); core.float('BOOST!', 50, 55, '#facc15'); }
        else { S.vy = JUMP; core.beep(360 + Math.min(S.combo, 12) * 30, 0.1, 'triangle', 0.05, 240); }

From games/sky-hopper/game.js, lines 71–79

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/sky-hopper/core.js, lines 67–75

Built for Mobile and Portrait Play

Sky Hopper 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 touch and mouse, 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