FRUIT SLASH:
A THREE.JS FRUIT SLICING GAME

What Is Fruit Slash?

Fruit Slash is a free portrait 3D fruit slicing game for phones and desktop. Fruit is tossed up from the bottom of the screen and you swipe across it to slice it in half. Cut three or more in one swipe for a combo bonus, but never slice a bomb, and miss three fruits and the run is over. 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 Fruit Slash

• Swipe: drag your finger (or the mouse) across the fruit to slice it.
• Score: each fruit is worth a point; big watermelons are worth two.
• Combo: slice 3 or more fruits in a single swipe for a combo bonus.
• Avoid bombs: slicing a black bomb ends the run instantly.
• Do not miss: you have 3 lives. Each fruit that falls back off the screen unsliced costs one.

Controls: Phones: swipe to slice · Desktop: click and drag the mouse to slice · P pause · M mute

How Fruit Slash Is Built with Three.js

Fruit Slash 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:

• Each fruit is a SphereGeometry skin with a small cone leaf. Big fruit like watermelon is stretched with mesh.scale.
• A sliced fruit is replaced by two halves. Each half is a hemisphere (a SphereGeometry with a partial angle) capped with a CircleGeometry in the flesh color, and the halves fly apart.
• Bombs are a glossy black sphere with a cylinder fuse and a glowing spark. Juice splashes are bursts of small spheres.
• The blade trail is a BufferGeometry whose points are rewritten every frame from your swipe.
• 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 Fruit Slash

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

Cutting along your swipe

For each fruit, the game finds the closest point on the latest swipe segment. If that point is inside the fruit's radius, the fruit is sliced at the swipe angle.

function cut(p) {
  if (last && core.mode === 'play') {
    const dx = p.x - last.x, dy = p.y - last.y, L2 = dx * dx + dy * dy; if (L2 < 1e-6) return;
    for (const it of S.items.slice()) {
      let t = ((it.x - last.x) * dx + (it.y - last.y) * dy) / L2; t = Math.max(0, Math.min(1, t));
      const qx = last.x + dx * t - it.x, qy = last.y + dy * t - it.y;
      if (qx * qx + qy * qy < (it.r + 0.15) ** 2) { S.items.splice(S.items.indexOf(it), 1); slice(it, Math.atan2(dy, dx)); if (core.mode !== 'play') break; }
    }
  }
  last = p; S.trail.push({ x: p.x, y: p.y, life: 0.18 });
}

From games/fruit-slash/game.js, lines 89–99

Swipe input

Pressing down starts a new stroke, and every pointermove while pressed adds a cut point.

function onAction(ev) { if (!ev) return; S.down = true; last = null; S.strokeHits = 0; cut(toWorld(ev)); }
fr.addEventListener('pointermove', (e) => { if (!S.down) return; cut(toWorld(e)); });

From games/fruit-slash/game.js, lines 100–101

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

Built for Mobile and Portrait Play

Fruit Slash 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