SKY STRIKE LANES:
A THREE.JS 3D JET LANE SHOOTER

What Is Sky Strike Lanes?

Sky Strike Lanes is a free portrait 3D jet shooter for phones and desktop. A red low-poly fighter with twin orange afterburners races along three glowing blue sky lanes, high above a sea of faceted sunset clouds that glow peach and orange toward a low sun and fade to purple in the shadows. Dark enemy jets swoop in down the lanes, and orange, blue and purple rings float in your path. Your jet fires on its own, so the whole game is picking the lane: line up with an enemy to shoot it down, slide away from its red bolt and thread the rings.

Every kill and every ring adds to your combo and refills the segmented blue combo bar, and points are multiplied by the combo, so long chains score fast. The gold bar under your score fills as you fly, and each new stage is faster with more enemy fire. Sky Strike Lanes 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/sky-strike-lanes/. It is free with no download.

How to Play Sky Strike Lanes

• Change lanes: swipe left or right anywhere on the screen. A quick tap on the left or right half also moves one lane, and on desktop the arrow keys or A and D do the same. The jet fires automatically.
• Enemy jets: dark jets swoop in fast, hold station ahead of you for a moment and then dive down their lane. Many fire one red bolt as they arrive, so leave the lane when you see it. Armored jets from stage three take four hits.
• Rings: orange rings score 100 points times your combo, blue rings boost the combo by three steps, and purple rings repair one shield point.
• Shield: you start with 3 and can hold up to 10. A red bolt or a collision costs one point and resets the combo. Reach zero and the run ends. P pauses and M mutes.

How Sky Strike Lanes Is Built with Three.js

Sky Strike Lanes is a single self-contained ES module on a self-hosted Three.js build. Everything is made from Three.js shapes with flat shading, vertex colours and a few additive glow textures, so it loads fast on phones with no model files.

• The cloud sea is one flat-shaded plane whose heights come from sine waves. The waves along the flight direction use whole-number multiples of the tile length, so two copies of the same tile can leapfrog each other forever with no seam. Vertex colours run from purple in the valleys through mauve to peach on the peaks.
• The three lanes are translucent planes with a scrolling canvas texture of tiny light dashes. The four lane lines are additive planes with a canvas texture that has a bright core, a soft blue glow and a fade toward the horizon.
• The sky is a canvas gradient from deep blue to orange and gold. A big additive sun sprite, distant low-poly cone peaks and stretched icosahedron cloud slabs finish the sunset.
• Both jets come from one builder: a six-sided fuselage, a cone nose, a dark faceted canopy, extruded wing and tail plates, canted fins and twin engines with flame cones. The player jet is red with yellow trim, and enemies are a dark grey clone with red lights, turned to face you.
• Rings are low-segment tori, which gives them their faceted look, with a wider additive torus behind for glow.

Built for Mobile and Portrait Play

Sky Strike Lanes is designed for one thumb on a phone held upright. It runs in a centered 9:16 portrait frame on every screen. The HUD shows a 7-digit score with a gold stage bar at the top left, the combo with a ten-segment blue timer bar at the top right, and the shield under a thin divider. The swipe hint sits at the bottom left and a round pause button at the bottom right. Pointer events give touch and mouse one input path. How to Play opens a scrollable help panel that pauses rendering, and the pause menu offers Resume or Main Menu.

To stay smooth on phones the renderer caps the device pixel ratio, shots, bolts, shards and flashes come from fixed pools, enemies and rings are removed as soon as they pass, and the game pauses itself when you switch tabs or apps.

Code from Sky Strike Lanes

The cloud sea is a plane with sine-wave heights. The waves along the flight direction repeat exactly once per tile, and the sides rise higher than the middle, so the lanes always fly over a valley:

const seaGeo = (() => {
  const g = new THREE.PlaneGeometry(SEA_W, SEA_L, 60, 48); g.rotateX(-Math.PI / 2);
  const p = g.attributes.position, k = (n) => (n * Math.PI * 2) / SEA_L, cs = [], tmp = new THREE.Color();
  const lo = new THREE.Color(0x5e4690), mid = new THREE.Color(0xc27a96), hi = new THREE.Color(0xffb886);
  const ph = [Math.random() * 6, Math.random() * 6, Math.random() * 6, Math.random() * 6];
  for (let i = 0; i < p.count; i++) {
    const x = p.getX(i), z = p.getZ(i);
    let h = Math.sin(x * 0.11 + ph[0]) * Math.sin(z * k(9) + ph[1]) * 1.8 + Math.sin(x * 0.23 + z * k(17) + ph[2]) * 1.1 + Math.sin(x * 0.047 - z * k(4) + ph[3]) * 2.4 + Math.sin(x * 0.6 + z * k(41)) * 0.45;
    const side = Math.min(1, Math.max(0, (Math.abs(x) - 4) / 20));
    h = h * (0.75 + side * 1.1) + side * side * 4.5 + (Math.random() - 0.5) * 0.9;
    p.setY(i, h);
    const t = Math.min(1, Math.max(0, (h + 3.2) / 9.5));
    if (t < 0.5) tmp.copy(lo).lerp(mid, t * 2); else tmp.copy(mid).lerp(hi, (t - 0.5) * 2);
    cs.push(tmp.r, tmp.g, tmp.b);
  }
  g.setAttribute('color', new THREE.Float32BufferAttribute(cs, 3)); g.computeVertexNormals(); return g;
})();

From games/sky-strike-lanes/game.js

Each frame the lane texture scrolls and the two cloud tiles move toward the camera. When a tile passes behind you it jumps two tile lengths ahead:

// scrolling world: lanes texture + cloud sea tiles
laneTex.offset.y += (v * dt) / (LANE_LEN / 12);
for (const t of seaTiles) { t.position.z += v * 0.55 * dt; if (t.position.z - SEA_L / 2 > 40) t.position.z -= SEA_L * 2; }

From games/sky-strike-lanes/game.js

Every beat spawns an enemy jet, a chain of three rings in one lane, or a pair of rings in two lanes. Enemies favour your lane, and even more so if you stay put:

function spawnBeat() {
  const r = Math.random();
  const camp = S.mode === 'play' && S.t - S.movedAt > 4; // staying in one lane draws enemy fire
  const lane = Math.random() < (camp ? 0.85 : 0.55) ? S.lane : (Math.random() * 3) | 0;
  if (r < 0.46) {
    spawnEnemy(lane, SPAWN_Z, S.stage >= 3 && Math.random() < 0.25);
    if (S.stage >= 2 && Math.random() < 0.3) spawnEnemy((lane + 1 + ((Math.random() * 2) | 0)) % 3, SPAWN_Z - 9, false);
  } else if (r < 0.74) {
    const ringLane = (Math.random() * 3) | 0, kinds = ['orange', 'orange', 'blue'];
    for (let i = 0; i < 3; i++) spawnRing(kinds[i], ringLane, SPAWN_Z - i * 6);
  } else {
    const a = (Math.random() * 3) | 0, b = (a + 1 + ((Math.random() * 2) | 0)) % 3;
    spawnRing(Math.random() < 0.6 ? 'orange' : 'blue', a, SPAWN_Z);
    spawnRing(Math.random() < (S.shield < 5 ? 0.45 : 0.2) ? 'purple' : 'orange', b, SPAWN_Z);
  }
  return Math.max(0.55, 1.0 - (S.stage - 1) * 0.06);
}

From games/sky-strike-lanes/game.js

Enemy jets fly in three phases: they swoop in fast, hold station ahead of you for a moment, then dive down their lane:

const pz = e.z; // enemies fire one bolt as they swoop into range (z > -57)
if (e.phase === 0) { e.z += v * 1.5 * dt; if (e.z >= e.holdZ) { e.z = e.holdZ; e.phase = 1; } }
else if (e.phase === 1) { e.holdT -= dt; e.z += Math.sin(S.t * 2 + e.ph) * 0.6 * dt; if (e.holdT <= 0) e.phase = 2; }
else e.z += v * 1.2 * dt;

From games/sky-strike-lanes/game.js

Swipes are read from pointer events. Every 28 pixels of sideways drag moves one lane, so a long swipe can cross two:

frame.addEventListener('pointermove', (e) => {
  if (S.mode !== 'play' || touch.id !== e.pointerId) return;
  const dx = e.clientX - touch.x0;
  if (Math.abs(dx) > 28) { moveLane(dx > 0 ? 1 : -1); touch.x0 = e.clientX; touch.swiped = true; }
});

From games/sky-strike-lanes/game.js

Frequently Asked Questions