BRICK BLASTER:
A THREE.JS NEON BREAKOUT GAME

What Is Brick Blaster?

Brick Blaster is a free portrait 3D neon breakout game for phones and desktop. Drag to move the paddle, smash every brick in each generated level and catch falling power-ups for multi-ball, lasers, a wide paddle and a shield. You have 3 lives. 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. It is free with no download or sign-up.

How to Play Brick Blaster

• Move the paddle: drag anywhere on the screen, or use the arrow keys or A and D.
• Launch: tap or press Space to launch the ball from the paddle.
• Smash bricks: darker bricks take more than one hit. Chain hits before the ball returns to grow your combo.
• Grab power-ups: M is multi-ball, L fires lasers, W widens the paddle and S adds a shield that saves one ball.
• Keep your lives: you have 3 lives. Losing every ball costs one; clear all bricks to reach the next level.

Controls: Phones: drag to move, tap to launch · Desktop: ← → or A / D, Space to launch · P pause · M mute

How Brick Blaster Is Built with Three.js

Brick Blaster 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 neon floor is a THREE.GridHelper, and the walls are thin BoxGeometry bars around the play area.
• Bricks share one BoxGeometry and are sized with mesh.scale. Tougher bricks are made deeper, so you can see they take more than one hit.
• The paddle is a 7-sided CylinderGeometry with a glowing bar under it, and balls are small IcosahedronGeometry meshes.
• Power-ups are CapsuleGeometry pills with a letter label (M, L, W or S) drawn into a CanvasTexture on a THREE.Sprite.
• 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 Brick Blaster

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

Dragging the paddle

The pointer's screen X is converted into world units using the camera's field of view, so the paddle follows your finger exactly across the portrait frame.

const halfW = () => CAM_Z * Math.tan(THREE.MathUtils.degToRad(camera.fov / 2)) * camera.aspect;
const toWorldX = (cx) => { const r = $('frame').getBoundingClientRect(); return ((cx - r.left) / r.width * 2 - 1) * halfW(); };
const core = createCore({ key: 'brickBlaster', onStart: reset, onAction: (e) => { if (e && e.clientX != null) S.ptr = toWorldX(e.clientX); launch(); }, onFrame: frame });
const fr = $('frame');
fr.addEventListener('pointermove', (e) => { if (S.ptr !== null) S.ptr = toWorldX(e.clientX); });
for (const ev of ['pointerup', 'pointercancel', 'pointerleave']) fr.addEventListener(ev, () => { S.ptr = null; });

From games/brick-blaster/game.js, lines 61–66

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

Built for Mobile and Portrait Play

Brick Blaster 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