BALLOON GUARD:
A THREE.JS 3D SHIELD PHYSICS GAME

What Is Balloon Guard?

Balloon Guard is a free portrait 3D physics arcade game for phones and desktop. A pink balloon floats up through a starry sky while balls, blocks and rows of steel spikes tumble down toward it. You steer a glowing shield to bat them out of the way and touch gold gems for bonus points. One hit pops the balloon, and the sky falls faster the higher you climb.

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/balloon-guard/. It is free with no download.

How to Play Balloon Guard

• Move the shield: drag anywhere on the screen. The shield follows your finger's movement, not its position, so your hand never hides it.
• Clear the sky: push falling balls, blocks and spike rows sideways or back up, away from the balloon.
• Watch the chain reactions: pieces bump into each other, so one shove can scatter a whole stack, or knock it onto the balloon.
• Grab gems: touch a gold gem with the shield for +5 points. Height climbed adds to your score too.
• Pause and mute: the buttons at the top, or P and M on a keyboard.

How Balloon Guard Is Built with Three.js

Balloon Guard 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 one THREE.WebGLRenderer. Every model is built in code from Three.js primitives. Here is what the game code does:

• An OrthographicCamera keeps the world exactly 9 units wide, and the visible height is recalculated from the portrait frame with a ResizeObserver, so the play area matches every phone.
• The balloon is a stretched SphereGeometry with a ConeGeometry knot and a THREE.Line string. The shield is a sphere with a spinning TorusGeometry ring.
• Falling pieces are spheres, boxes and metal spike balls lit by a HemisphereLight and a DirectionalLight, with gold OctahedronGeometry gems.
• Physics is a tiny custom circle solver: the shield pushes pieces out along the contact normal and adds its own speed, pieces push each other apart, and every piece eases back toward the sky's fall speed.
• Parallax cloud planes drift down at different speeds to sell the feeling of rising, and a burst of TetrahedronGeometry confetti pops the balloon.
• Sound effects are generated with Web Audio oscillators, and your best score and mute setting are kept in localStorage.

Code from Balloon Guard

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

Relative drag for the shield

Pointer movement is converted to world units and added to the shield's target, so the shield moves with your finger from wherever you touch.

// relative drag: the shield moves with the finger, so the finger never hides it
window.addEventListener('pointermove', (e) => {
  if (!pointer.active || core.mode !== 'play') return;
  const [x, y] = toWorld(e.clientX, e.clientY); shieldTarget.x += (x - pointer.lx) * 1.15; shieldTarget.y += (y - pointer.ly) * 1.15; pointer.lx = x; pointer.ly = y;
});

From games/balloon-guard/game.js, lines 87–91

Shield vs falling pieces

Each piece is a circle. When it overlaps the shield it is pushed out along the contact normal, and the shield's own velocity along that normal becomes a shove. Gems are collected instead.

    // collisions: shield vs pieces
    const sx = shield.position.x, sy = shield.position.y;
    for (let i = pieces.length - 1; i >= 0; i--) {
      const p = pieces[i]; const dx = p.x - sx, dy = p.y - sy, d = Math.hypot(dx, dy), md = p.r + RS;
      if (d < md && d > 1e-4) {
        if (p.kind === 'gem') { S.gems++; core.float('+5', 50 + p.x / W * 100, 50 - p.y / HH * 50, '#facc15'); core.beep(1200, 0.07, 'triangle', 0.05, 400); burst(p.x, p.y, 0xfacc15, 8); scene.remove(p.m); pieces.splice(i, 1); continue; }
        const nx = dx / d, ny = dy / d; p.x = sx + nx * md; p.y = sy + ny * md;
        const rel = (shieldV.x - p.vx) * nx + (shieldV.y - p.vy) * ny;
        const push = Math.max(rel, 0) * 1.25 + 1.5; p.vx += nx * push; p.vy += ny * push;
        if (rel > 3) core.beep(300 + Math.random() * 120, 0.04, 'triangle', 0.03);
      }
    }

From games/balloon-guard/game.js, lines 127–138

Built for Mobile and Portrait Play

Balloon Guard is designed for phones held upright. It runs in a 9:16 portrait frame, keeps the top of the screen clear for falling objects with pause, score and mute in a thin bar, and uses pointer events so touch and mouse share one code path. On desktop it plays in a centered portrait frame with keyboard controls.

To stay smooth on phones the renderer caps the device pixel ratio, and the game pauses itself when you switch tabs or apps.

Frequently Asked Questions