COLOR GATE RUSH:
A THREE.JS NEON ARCADE GAME

What Is Color Gate Rush?

Color Gate Rush is a free portrait neon 3D arcade game for phones and desktop. Your glowing ball rolls down a synthwave track toward colored gates. Tap to switch its color so it matches each gate, chain perfect streaks for bigger multipliers and survive as the speed climbs. 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 Color Gate Rush

• Switch color: tap anywhere (or press Space) to cycle the ball through red, blue and green. Yellow joins after 12 gates.
• Match the gate: roll through a gate in the same color to score 10 points times your multiplier.
• Build streaks: every 5 matched gates in a row raise your multiplier, up to x10. The NEXT swatch shows the coming gate.
• One mistake ends it: hit a gate in the wrong color and the run is over. Tap anywhere to restart instantly.
• Go faster: the track speeds up and gates come closer together the longer you last.

Controls: Phones: tap anywhere to switch color · Desktop: Space / Enter switch · P pause · M mute

How Color Gate Rush Is Built with Three.js

Color Gate Rush 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 synthwave look comes from CanvasTextures drawn in code: a striped sunset sun on a PlaneGeometry, a grid texture on the track and a floor texture set to RepeatWrapping.
• A star field is a single THREE.Points object built from a BufferGeometry, and the city skyline is a row of BoxGeometry buildings.
• The ball is a SphereGeometry with a THREE.Sprite glow behind it that uses AdditiveBlending and takes on the ball's current color.
• THREE.Fog fades the track into the distance, and a dark CircleGeometry under the ball fakes a soft shadow without a shadow map.
• 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 Color Gate Rush

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

Fog, camera and light

Purple THREE.Fog fades the far track, a 9:16 perspective camera sits behind the ball looking down the track, and a hemisphere light adds the neon tint.

scene.fog = new THREE.Fog(0x2a0650, 40, 110);
const camera = new THREE.PerspectiveCamera(60, 9 / 16, 0.1, 300);
camera.position.set(0, 3.4, 8.6); camera.lookAt(0, 1.0, -12);
scene.add(new THREE.HemisphereLight(0xb06cff, 0x1a0033, 1.2));

From games/color-gate-rush/game.js, lines 21–24

Passing a gate

When a gate reaches the ball, its color is compared with the ball's color. A match adds points with the streak multiplier, and a mismatch ends the run.

    if (playing && !gt.passed && pz >= 0) {
      gt.passed = true; hud = true;
      if (gt.color === S.color) {
        S.streak++; S.gates++; const pts = 10 * mult(); S.score += pts;
        floatText('+' + pts, COLORS[gt.color].css); burst(new THREE.Vector3(0, 1.5, 0), COLORS[gt.color].hex, 10);
        beep(660 + Math.min(S.streak, 24) * 30, 0.08, 'triangle', 0.06);
        if (S.streak % 5 === 0) { const cb = $('comboBox'); cb.classList.add('bump'); setTimeout(() => cb.classList.remove('bump'), 150); beep(1320, 0.14, 'square', 0.04); }
      } else gameOver(gt.color);

From games/color-gate-rush/game.js, lines 228–235

One tap does everything

A single pointerdown handler calls primary(), which switches color during play, or starts, restarts and resumes the game.

function primary() {
  if (S.mode === 'play') cycleColor();
  else if (S.mode === 'start') start();
  else if (S.mode === 'over' && performance.now() - S.overAt > 350) start();
  else if (S.mode === 'pause') setPause(false);
}
frame.addEventListener('pointerdown', (e) => { if (e.target.closest('.icon-btn')) return; audio(); e.preventDefault(); primary(); });

From games/color-gate-rush/game.js, lines 185–191

Built for Mobile and Portrait Play

Color Gate Rush 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