Run Detail
completedgemini-3.7-flashRecorded for these videos
27:18Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?
Nov 13, 2026 · YouTube
18:40ERNIE 5.5 Flash Preview vs GLM 5.3 Flash: Baidu's new model is very impressive!
Nov 11, 2026 · YouTube
36:22Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash
Nov 11, 2026 · YouTube
14:03Gemini 4 Carbon: Can it handle my challenges? (First look with one-shot coding tests)
Nov 10, 2026 · YouTube
47:51Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)
Nov 6, 2026 · YouTube
10:57"Crouton Alpha": the latest super-efficient coding model by Meta?
Nov 3, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
22:14GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?
Oct 27, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
31:28Is this company reselling GPT Sol 6.1 at a loss (for non-agentic/text-only)?🤔 Is this sustainable?
Oct 20, 2026 · YouTube
17:58Nemotron 3.5 Super VL vs Opus 5.5: Testing NVIDIA’s new coding juggernaut
Oct 15, 2026 · YouTube
16:04Testing a *massive* new open-weights model 🤯: Muse Spark Open (vs. Nemotron, Opus 5.5, and more)
Oct 15, 2026 · YouTube
16:43Gemini 4 Argon: Great 🐈 Animation, but a broken escalator. (Coding challenge vs Opus 5.5, Sol 6.1)
Oct 13, 2026 · YouTube
16:37Meta's new "Muse Wonder" AI is impressive... but can it compete with Anthropic's models?
Oct 12, 2026 · YouTube
11:12WOW... Haiku 5.5 is very impressive. RIP OpenAI?
Oct 7, 2026 · YouTube
22:47Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?
Oct 6, 2026 · YouTube
22:02Is Pareto 26.10 Preview Just Routing to GPT Sol? I Tested It Against Sol 6.1 Pro
Oct 1, 2026 · YouTube
11:22I Tested Sonnet 5.5 Against Opus 5.5. Is It Actually Cheaper?
Sep 28, 2026 · YouTube
30:00Did Elon Musk's team "train the gay away"... and make Grok 4.7 worse?
Sep 26, 2026 · YouTube
10:58So... how much better is Claude Opus 5.5 vs. GPT-6 Sol, really?
Sep 23, 2026 · YouTube
9:38Claude Opus 5.5... the BEST new model for coding!! 🤩
Sep 22, 2026 · YouTube
29:00Grok 4.7: improved, but GLM 5.3 FlashX beat it anyway (benchmark against Gemini, Sol, etc.)
Sep 22, 2026 · YouTube
16:54Stealth Union Alpha: Is this another cheap GPT model? (better than Luna, cheaper than Terra?)
Sep 16, 2026 · YouTube
16:45DeepSeek V4.1 Flash Is Shockingly Good for the Price
Sep 10, 2026 · YouTube
17:14How much better is GPT-6 Astra over Claude Opus 5? Real Website and Coding Tests
Sep 5, 2026 · YouTube
29:13Implementing a multiplayer game with GPT-6 Astra (+ Gemini 3.8, Opus 5, Sol Pro)
Sep 5, 2026 · YouTube
19:42Meta Muse Spark 1.3 Review: A Huge Leap Forward
Sep 2, 2026 · YouTube
17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
19:45Fable 5.1 writes an animated novel using Ren'Py... did it do better than Sol Pro 5.6?
Sep 1, 2026 · YouTube
14:09Testing IBM Granite-4.2-8B! Can it name 100 women?
Aug 31, 2026 · YouTube
17:37Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?
Aug 28, 2026 · YouTube
23:58Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok
Aug 27, 2026 · YouTube
Provider
openrouter
Challenge Version
v1.0
Turns
1
Duration
97.3s
Total Tokens
18,197
Input Tokens
732
Output Tokens
17,465
Reasoning Tokens
1,454
Reasoning Effort
default
Est. Cost
$0.0330
Started
8/27/2026, 12:04:58 PM
OR Provider
Google
Finish Reason
stop
Generation ID
gen-1787832298-dmlYW310iuluSurXSqRf
Turns (1)
Turn #1
732 in17,465 out1,454 reasoning18,197 total97.3s
user
You are a game developer who ships browser demos that have to work on the first click, in front of an audience, on someone else's laptop.
Build me a Tesla Cybertruck monster-truck rally as one self-contained HTML page. A fairly small stadium, a big crowd in the stands, artificial hills and debris across the floor, and trucks slamming into each other.
Then make it match the spec below exactly. The spec is the challenge; a great-looking rally that ignores it is a miss.
The build
- One file. Everything — HTML, CSS, JS — in a single
.htmlpage. No build step. Saved to disk and double-clicked, it runs. - One external request, maximum. You may load three.js from a CDN, pinned to an exact version. That is the only network request the page is permitted to make. No second library, no font, no stylesheet, no image file, no audio file.
- Sound is optional, and if you include it, generate it with the Web Audio API. No audio assets.
- No storage. No
localStorage,sessionStorage, cookies orindexedDB. It runs in a sandboxed frame where touching them throws.
The spec
- Exactly five trucks. One the player drives, four rivals under AI. Not four, not six — five.
- Name the arena. Invent a name for the venue and show it in the HUD, on screen, during play.
- The HUD shows the arena name, a score, and a clock. Nothing else is required.
- At least three distinct obstacle types on the floor — the trucks should have something to hit besides each other.
- A crowd in the stands that is visibly a crowd, all the way round.
- Drive with the keyboard. Arrow keys or WASD. Say which in the HUD or an overlay.
- Collisions matter. Ramming a rival does something — score, a visible reaction, a wreck state. Your call, but it must be visible.
Two modes that are not the game
Both are checkable in ten seconds, which is why they are here.
#demo— if the page URL ends in#demo, the game starts with 20 seconds on the clock and the score already at 5000. This must run through the real game state, not a cosmetic overlay. Everything else behaves normally.Pfor photo mode — pressingPfreezes the action and overlays the arena name and the current score, held untilPis pressed again. The simulation stops; it does not keep playing behind the card.
Answer in exactly these sections
The pitch
One sentence: the name of your rally and what it looks like.
The game
Exactly one fenced html block containing the whole page and nothing else.
The notes
Exactly four bullets.
- Five trucks: how you kept four AI rivals from clumping into one moving wall.
- Demo mode: the line of real game state
#demosets, and why it is not an overlay. - Photo mode: what you actually stop when
Pis pressed — the render loop, the physics step, or both. - Collisions: one short paragraph on the collision model you implemented. Not what it looks like — what it computes.
assistant
The pitch
Cyber-Slag Arena is a neon-drenched, dirt-and-metal demolition colosseum where five high-voltage Cybertruck monster machines trade kinetic paint over crushed-car stacks, hazard barrels, and steel launch ramps inside a roaring 10,000-seat amphitheater.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CYBER-SLAG ARENA: Cybertruck Rally</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
body, html { width: 100%; height: 100%; overflow: hidden; background: #050508; font-family: 'Courier New', Courier, monospace; }
#canvas-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
/* HUD */
#hud {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; display: flex; flex-direction: column;
justify-content: space-between; padding: 24px 32px;
}
.hud-top {
display: flex; justify-content: space-between; align-items: flex-start;
text-transform: uppercase; text-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
}
.arena-badge {
background: rgba(10, 15, 25, 0.85); border: 2px solid #00f0ff;
padding: 10px 18px; border-radius: 4px; color: #fff;
box-shadow: 0 0 20px rgba(0, 240, 255, 0.3), inset 0 0 10px rgba(0, 240, 255, 0.2);
}
.arena-title { font-size: 20px; font-weight: 900; letter-spacing: 3px; color: #00f0ff; }
.arena-sub { font-size: 10px; letter-spacing: 2px; color: #aaa; margin-top: 3px; }
.stats-card {
background: rgba(10, 15, 25, 0.85); border: 2px solid #ff0055;
padding: 10px 22px; border-radius: 4px; color: #fff; text-align: right;
box-shadow: 0 0 20px rgba(255, 0, 85, 0.3), inset 0 0 10px rgba(255, 0, 85, 0.2);
}
.score-val { font-size: 28px; font-weight: 900; color: #ff0055; letter-spacing: 2px; }
.clock-val { font-size: 16px; font-weight: 700; color: #ffd700; margin-top: 2px; letter-spacing: 1px; }
.hud-bottom {
display: flex; justify-content: space-between; align-items: flex-end;
}
.controls-hint {
background: rgba(5, 5, 10, 0.75); border: 1px solid rgba(255,255,255,0.2);
padding: 8px 14px; border-radius: 4px; color: #ddd; font-size: 11px; letter-spacing: 1.5px;
}
.key-tag { color: #00f0ff; font-weight: bold; }
/* Photo Mode Overlay */
#photo-card {
display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(2, 4, 8, 0.75); backdrop-filter: blur(4px);
flex-direction: column; justify-content: center; align-items: center; pointer-events: none;
}
.photo-frame {
border: 3px solid #00f0ff; padding: 40px 60px; background: rgba(8, 12, 20, 0.95);
text-align: center; box-shadow: 0 0 40px rgba(0, 240, 255, 0.4);
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.photo-title { font-size: 32px; font-weight: 900; color: #00f0ff; letter-spacing: 6px; }
.photo-score-label { font-size: 14px; color: #aaa; margin-top: 20px; letter-spacing: 3px; }
.photo-score-val { font-size: 54px; font-weight: 900; color: #ff0055; letter-spacing: 4px; text-shadow: 0 0 20px rgba(255,0,85,0.6); }
.photo-sub { font-size: 11px; color: #ffd700; margin-top: 20px; letter-spacing: 2px; }
/* Hit Impact Overlay */
#hit-flash {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,0,85,0.3) 70%, transparent 100%);
transition: opacity 0.08s ease-out;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<div id="canvas-container"></div>
<div id="hit-flash"></div>
<div id="hud">
<div class="hud-top">
<div class="arena-badge">
<div class="arena-title">CYBER-SLAG ARENA</div>
<div class="arena-sub">TITANIUM DIVISION // GIGA-BOWL</div>
</div>
<div class="stats-card">
<div class="score-val" id="score-display">0000 PTS</div>
<div class="clock-val" id="clock-display">TIME: 60.0s</div>
</div>
</div>
<div class="hud-bottom">
<div class="controls-hint">
DRIVE: <span class="key-tag">[W,A,S,D]</span> or <span class="key-tag">[ARROWS]</span> • REVERSE: <span class="key-tag">[S / ↓]</span> • PHOTO MODE: <span class="key-tag">[P]</span> • MUTE: <span class="key-tag">[M]</span>
</div>
</div>
</div>
<div id="photo-card">
<div class="photo-frame">
<div class="photo-title">CYBER-SLAG ARENA</div>
<div class="photo-score-label">ACTIVE CRUSH SCORE</div>
<div class="photo-score-val" id="photo-score">0000</div>
<div class="photo-sub">PHOTO MODE ACTIVE • PRESS [P] TO RESUME ACTION</div>
</div>
</div>
<script>
/* =========================================================================
AUDIO SYSTEM (Pure Web Audio API Synthesizer)
========================================================================= */
class SoundFX {
constructor() {
this.ctx = null;
this.muted = false;
this.engineOsc = null;
this.engineGain = null;
}
init() {
if (this.ctx) return;
const AudioContext = window.AudioContext || window.webkitAudioContext;
this.ctx = new AudioContext();
// Engine hum oscillator
this.engineOsc = this.ctx.createOscillator();
this.engineGain = this.ctx.createGain();
this.engineOsc.type = 'sawtooth';
this.engineOsc.frequency.setValueAtTime(45, this.ctx.currentTime);
this.engineGain.gain.setValueAtTime(0.04, this.ctx.currentTime);
const filter = this.ctx.createBiquadFilter();
filter.type = 'lowpass';
filter.frequency.setValueAtTime(140, this.ctx.currentTime);
this.engineOsc.connect(filter);
filter.connect(this.engineGain);
this.engineGain.connect(this.ctx.destination);
this.engineOsc.start();
}
updateEngine(speedRatio) {
if (!this.ctx || this.muted) return;
const targetFreq = 40 + Math.abs(speedRatio) * 90;
this.engineOsc.frequency.setTargetAtTime(targetFreq, this.ctx.currentTime, 0.05);
}
playImpact(intensity = 1.0) {
if (!this.ctx || this.muted) return;
const t = this.ctx.currentTime;
// White noise burst
const bufferSize = this.ctx.sampleRate * 0.25;
const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) data[i] = (Math.random() * 2 - 1) * Math.exp(-i / (bufferSize * 0.3));
const noise = this.ctx.createBufferSource();
noise.buffer = buffer;
const gain = this.ctx.createGain();
gain.gain.setValueAtTime(Math.min(1.0, 0.3 * intensity), t);
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.25);
noise.connect(gain);
gain.connect(this.ctx.destination);
noise.start(t);
// Low sub-thud
const osc = this.ctx.createOscillator();
const oscGain = this.ctx.createGain();
osc.type = 'triangle';
osc.frequency.setValueAtTime(120, t);
osc.frequency.exponentialRampToValueAtTime(25, t + 0.2);
oscGain.gain.setValueAtTime(0.5 * intensity, t);
oscGain.gain.exponentialRampToValueAtTime(0.001, t + 0.2);
osc.connect(oscGain);
oscGain.connect(this.ctx.destination);
osc.start(t);
osc.stop(t + 0.22);
}
playCheer() {
if (!this.ctx || this.muted) return;
const t = this.ctx.currentTime;
const dur = 0.8;
const bufferSize = this.ctx.sampleRate * dur;
const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) data[i] = (Math.random() * 2 - 1) * 0.15;
const noise = this.ctx.createBufferSource();
noise.buffer = buffer;
const filter = this.ctx.createBiquadFilter();
filter.type = 'bandpass';
filter.frequency.setValueAtTime(800, t);
filter.Q.setValueAtTime(2, t);
const gain = this.ctx.createGain();
gain.gain.setValueAtTime(0.01, t);
gain.gain.linearRampToValueAtTime(0.2, t + 0.15);
gain.gain.exponentialRampToValueAtTime(0.001, t + dur);
noise.connect(filter);
filter.connect(gain);
gain.connect(this.ctx.destination);
noise.start(t);
}
toggleMute() {
this.muted = !this.muted;
if (this.engineGain && this.ctx) {
this.engineGain.gain.setValueAtTime(this.muted ? 0 : 0.04, this.ctx.currentTime);
}
}
}
const sfx = new SoundFX();
/* =========================================================================
GAME STATE & CONFIGURATION
========================================================================= */
const ARENA_RADIUS = 95;
const ARENA_NAME = "CYBER-SLAG ARENA";
// Real game state variables
let score = 0;
let timeRemaining = 60.0;
let isPhotoMode = false;
let isGameOver = false;
// Check #demo parameter
const isDemoMode = window.location.hash.toLowerCase().includes('demo');
if (isDemoMode) {
score = 5000;
timeRemaining = 20.0;
}
/* =========================================================================
THREE.JS SCENE, CAMERA & LIGHTING
========================================================================= */
const container = document.getElementById('canvas-container');
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0c12);
scene.fog = new THREE.FogExp2(0x0a0c12, 0.009);
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.5, 600);
const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.15;
container.appendChild(renderer.domElement);
// Arena Floodlights & Ambient
const ambientLight = new THREE.AmbientLight(0x404860, 1.2);
scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xfff2e0, 1.8);
dirLight.position.set(60, 100, 40);
dirLight.castShadow = true;
dirLight.shadow.mapSize.width = 2048;
dirLight.shadow.mapSize.height = 2048;
dirLight.shadow.camera.near = 10;
dirLight.shadow.camera.far = 300;
dirLight.shadow.camera.left = -110;
dirLight.shadow.camera.right = 110;
dirLight.shadow.camera.top = 110;
dirLight.shadow.camera.bottom = -110;
scene.add(dirLight);
// Neon stadium rim light
const spotCyan = new THREE.SpotLight(0x00f0ff, 4, 180, Math.PI / 4, 0.4);
spotCyan.position.set(-80, 50, -80);
spotCyan.target.position.set(0, 0, 0);
scene.add(spotCyan);
scene.add(spotCyan.target);
const spotMagenta = new THREE.SpotLight(0xff0055, 4, 180, Math.PI / 4, 0.4);
spotMagenta.position.set(80, 50, 80);
spotMagenta.target.position.set(0, 0, 0);
scene.add(spotMagenta);
scene.add(spotMagenta.target);
/* =========================================================================
ARENA STADIUM & CROWD (Full 360-degree tiered seating)
========================================================================= */
// Stadium Floor (Dirt / Compacted Earth)
const floorGeo = new THREE.CylinderGeometry(ARENA_RADIUS, ARENA_RADIUS, 2, 64);
const floorMat = new THREE.MeshStandardMaterial({
color: 0x4a3422, roughness: 0.95, metalness: 0.05
});
const floor = new THREE.Mesh(floorGeo, floorMat);
floor.position.y = -1;
floor.receiveShadow = true;
scene.add(floor);
// Dirt tyre-track ring decoration
const ringGeo = new THREE.RingGeometry(35, 75, 48);
const ringMat = new THREE.MeshStandardMaterial({
color: 0x362315, roughness: 0.99, side: THREE.DoubleSide
});
const trackRing = new THREE.Mesh(ringGeo, ringMat);
trackRing.rotation.x = -Math.PI / 2;
trackRing.position.y = 0.02;
trackRing.receiveShadow = true;
scene.add(trackRing);
// Concrete Outer Perimeter Barrier
const wallGeo = new THREE.CylinderGeometry(ARENA_RADIUS, ARENA_RADIUS, 6, 64, 1, true);
const wallMat = new THREE.MeshStandardMaterial({
color: 0x22252c, roughness: 0.7, metalness: 0.3
});
const perimeterWall = new THREE.Mesh(wallGeo, wallMat);
perimeterWall.position.y = 3;
scene.add(perimeterWall);
// Tiered Stadium Stands & Crowds
const TIER_COUNT = 8;
const CROWD_PER_TIER = 220;
const TOTAL_FANS = TIER_COUNT * CROWD_PER_TIER;
// Stands Geometry
for (let t = 0; t < TIER_COUNT; t++) {
const innerR = ARENA_RADIUS + t * 4.5;
const outerR = innerR + 4.8;
const tierH = 2.4;
const tierGeo = new THREE.CylinderGeometry(outerR, innerR, tierH, 64, 1, true);
const tierMat = new THREE.MeshStandardMaterial({ color: 0x181a20, roughness: 0.8 });
const tierMesh = new THREE.Mesh(tierGeo, tierMat);
tierMesh.position.y = 5 + t * tierH;
scene.add(tierMesh);
}
// Instanced Crowd Mesh
const crowdGeo = new THREE.BoxGeometry(0.8, 1.4, 0.8);
const crowdMat = new THREE.MeshStandardMaterial({ roughness: 0.7 });
const crowdInstanced = new THREE.InstancedMesh(crowdGeo, crowdMat, TOTAL_FANS);
crowdInstanced.castShadow = true;
const dummy = new THREE.Object3D();
const fanPalette = [
new THREE.Color(0x00f0ff), new THREE.Color(0xff0055), new THREE.Color(0xffea00),
new THREE.Color(0xffffff), new THREE.Color(0x222222), new THREE.Color(0x00ff66),
new THREE.Color(0xff6600), new THREE.Color(0x8833ff)
];
let fanIdx = 0;
const fanBasePositions = [];
for (let t = 0; t < TIER_COUNT; t++) {
const radius = ARENA_RADIUS + t * 4.5 + 2.2;
const yPos = 6.2 + t * 2.4;
for (let i = 0; i < CROWD_PER_TIER; i++) {
const angle = (i / CROWD_PER_TIER) * Math.PI * 2 + (Math.random() * 0.02);
const x = Math.cos(angle) * radius;
const z = Math.sin(angle) * radius;
dummy.position.set(x, yPos, z);
dummy.rotation.y = -angle + Math.PI / 2 + (Math.random() - 0.5) * 0.4;
dummy.scale.set(0.9 + Math.random() * 0.4, 0.8 + Math.random() * 0.5, 0.9 + Math.random() * 0.4);
dummy.updateMatrix();
crowdInstanced.setMatrixAt(fanIdx, dummy.matrix);
const col = fanPalette[Math.floor(Math.random() * fanPalette.length)];
crowdInstanced.setColorAt(fanIdx, col);
fanBasePositions.push({ x, y: yPos, z, phase: Math.random() * Math.PI * 2, angle });
fanIdx++;
}
}
crowdInstanced.instanceMatrix.needsUpdate = true;
if (crowdInstanced.instanceColor) crowdInstanced.instanceColor.needsUpdate = true;
scene.add(crowdInstanced);
// Stadium Jumbotron / Billboard
const jumbotronGroup = new THREE.Group();
const jumboScreen = new THREE.Mesh(
new THREE.BoxGeometry(24, 10, 2),
new THREE.MeshBasicMaterial({ color: 0x00f0ff, wireframe: true })
);
jumboScreen.position.set(0, 42, -ARENA_RADIUS - 22);
jumbotronGroup.add(jumboScreen);
scene.add(jumbotronGroup);
/* =========================================================================
OBSTACLE GENERATION (3 Distinct Types on Arena Floor)
========================================================================= */
const obstacles = [];
// Obstacle Type 1: Wedge Jump Ramps (Steel Ramps)
function createRamp(x, z, rotY, w = 12, h = 4.5, l = 16) {
const rampGroup = new THREE.Group();
// Wedge geometry
const shape = new THREE.Shape();
shape.moveTo(-w / 2, 0);
shape.lineTo(w / 2, 0);
shape.lineTo(w / 2, h);
shape.lineTo(-w / 2, 0);
// Custom extruded ramp wedge
const geom = new THREE.BufferGeometry();
const hw = w / 2, hl = l / 2;
const vertices = new Float32Array([
// Incline plane
-hw, 0, -hl, hw, 0, -hl, hw, h, hl,
-hw, 0, -hl, hw, h, hl, -hw, h, hl,
// Back vertical wall
-hw, 0, hl, hw, 0, hl, hw, h, hl,
-hw, 0, hl, hw, h, hl, -hw, h, hl,
// Left side
-hw, 0, -hl, -hw, h, hl, -hw, 0, hl,
// Right side
hw, 0, -hl, hw, 0, hl, hw, h, hl,
// Base
-hw, 0, -hl, hw, 0, -hl, hw, 0, hl,
-hw, 0, -hl, hw, 0, hl, -hw, 0, hl
]);
geom.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geom.computeVertexNormals();
const mat = new THREE.MeshStandardMaterial({
color: 0xffaa00, metalness: 0.8, roughness: 0.3
});
const mesh = new THREE.Mesh(geom, mat);
mesh.castShadow = true;
mesh.receiveShadow = true;
rampGroup.add(mesh);
// Safety neon guide strips
const stripMat = new THREE.MeshBasicMaterial({ color: 0x00f0ff });
const stripL = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.4, Math.hypot(h, l)), stripMat);
stripL.position.set(-hw, h / 2, 0);
stripL.rotation.x = -Math.atan2(h, l);
rampGroup.add(stripL);
const stripR = stripL.clone();
stripR.position.set(hw, h / 2, 0);
rampGroup.add(stripR);
rampGroup.position.set(x, 0, z);
rampGroup.rotation.y = rotY;
scene.add(rampGroup);
const rampObj = {
type: 'ramp',
mesh: rampGroup,
pos: new THREE.Vector2(x, z),
rot: rotY,
width: w,
length: l,
height: h,
radius: Math.max(w, l) * 0.65
};
obstacles.push(rampObj);
return rampObj;
}
// Place jump ramps around arena
createRamp(0, 0, 0, 14, 4.5, 18);
createRamp(-42, -28, Math.PI / 4, 10, 4.0, 14);
createRamp(42, 28, -Math.PI * 0.75, 10, 4.0, 14);
createRamp(-38, 38, -Math.PI / 4, 10, 3.8, 14);
createRamp(38, -38, Math.PI * 0.75, 10, 3.8, 14);
// Obstacle Type 2: Crushed Sedan Scrap Stacks (Compressed junk cars)
const crushedCarGeo = new THREE.BoxGeometry(5.2, 1.3, 3.2);
const scrapColors = [0x8b2500, 0x1e3f66, 0x475569, 0x78350f, 0x164e63];
function createCarStack(x, z) {
const stackGroup = new THREE.Group();
const count = 2 + Math.floor(Math.random() * 2);
for (let i = 0; i < count; i++) {
const mat = new THREE.MeshStandardMaterial({
color: scrapColors[Math.floor(Math.random() * scrapColors.length)],
roughness: 0.9, metalness: 0.4
});
const car = new THREE.Mesh(crushedCarGeo, mat);
car.position.set(
(Math.random() - 0.5) * 0.5,
0.65 + i * 1.25,
(Math.random() - 0.5) * 0.5
);
car.rotation.y = (Math.random() - 0.5) * 0.4;
car.rotation.z = (Math.random() - 0.5) * 0.1;
car.castShadow = true;
car.receiveShadow = true;
stackGroup.add(car);
}
stackGroup.position.set(x, 0, z);
scene.add(stackGroup);
obstacles.push({
type: 'carStack',
mesh: stackGroup,
pos: new THREE.Vector2(x, z),
radius: 3.2,
height: count * 1.3,
hits: 0
});
}
createCarStack(-25, 12);
createCarStack(25, -12);
createCarStack(-18, -45);
createCarStack(18, 45);
createCarStack(52, 0);
createCarStack(-52, 0);
// Obstacle Type 3: Dynamic Hazard Oil Barrels (Scatter and roll on hit)
const barrelGeo = new THREE.CylinderGeometry(1.0, 1.0, 2.2, 16);
const barrelMat = new THREE.MeshStandardMaterial({
color: 0xff1e00, roughness: 0.4, metalness: 0.6
});
const dynamicBarrels = [];
function createBarrel(x, z) {
const mesh = new THREE.Mesh(barrelGeo, barrelMat);
mesh.position.set(x, 1.1, z);
mesh.castShadow = true;
scene.add(mesh);
const barrel = {
type: 'barrel',
mesh: mesh,
pos: new THREE.Vector2(x, z),
vel: new THREE.Vector2(0, 0),
y: 1.1,
vy: 0,
radius: 1.2,
rotVel: new THREE.Vector3()
};
dynamicBarrels.push(barrel);
obstacles.push(barrel);
}
// Clusters of hazard barrels
const barrelSpawns = [
[-10, 30], [-12, 32], [-8, 31],
[10, -30], [12, -32], [8, -31],
[-35, -5], [-37, -3],
[35, 5], [37, 3],
[0, -50], [0, 50]
];
barrelSpawns.forEach(([bx, bz]) => createBarrel(bx, bz));
/* =========================================================================
PARTICLE SYSTEM (Sparks, Dust & Debris)
========================================================================= */
const MAX_PARTICLES = 500;
const particleGeo = new THREE.BufferGeometry();
const pPositions = new Float32Array(MAX_PARTICLES * 3);
const pColors = new Float32Array(MAX_PARTICLES * 3);
particleGeo.setAttribute('position', new THREE.BufferAttribute(pPositions, 3));
particleGeo.setAttribute('color', new THREE.BufferAttribute(pColors, 3));
const particleMat = new THREE.PointsMaterial({
size: 0.8, vertexColors: true, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending
});
const particleSystem = new THREE.Points(particleGeo, particleMat);
scene.add(particleSystem);
const particles = [];
for (let i = 0; i < MAX_PARTICLES; i++) {
particles.push({
active: false,
pos: new THREE.Vector3(),
vel: new THREE.Vector3(),
color: new THREE.Color(),
life: 0,
maxLife: 1
});
}
function spawnSparks(x, y, z, count = 18, baseColor = 0xffaa00) {
let spawned = 0;
for (let p of particles) {
if (!p.active) {
p.active = true;
p.pos.set(x, y, z);
const angle = Math.random() * Math.PI * 2;
const speed = 6 + Math.random() * 18;
p.vel.set(
Math.cos(angle) * speed,
Math.random() * 14 + 4,
Math.sin(angle) * speed
);
p.color.setHex(Math.random() > 0.3 ? baseColor : 0xffffff);
p.life = 0;
p.maxLife = 0.3 + Math.random() * 0.4;
spawned++;
if (spawned >= count) break;
}
}
}
function spawnDust(x, z) {
for (let p of particles) {
if (!p.active) {
p.active = true;
p.pos.set(x + (Math.random() - 0.5) * 1.5, 0.4, z + (Math.random() - 0.5) * 1.5);
p.vel.set((Math.random() - 0.5) * 4, Math.random() * 3 + 1, (Math.random() - 0.5) * 4);
p.color.setHex(0x5a4330);
p.life = 0;
p.maxLife = 0.5 + Math.random() * 0.3;
break;
}
}
}
/* =========================================================================
CYBERTRUCK BUILDER (Angular Wedge Stainless Body + Monster Chassis)
========================================================================= */
function createCybertruckMesh(bodyColorHex = 0xd0d4d9, isPolished = true) {
const truckGroup = new THREE.Group();
// 1. Angular Cybertruck Body (Custom Wedge Geometry)
const bodyWidth = 3.6;
const bodyLen = 7.6;
const bodyH = 2.0;
// Custom sharp wedge vertices
const bGeo = new THREE.BufferGeometry();
const hw = bodyWidth / 2;
const fl = -bodyLen * 0.5; // Front nose
const rl = bodyLen * 0.5; // Rear tailgate
const pl = -0.5; // Apex roof point (offset slightly forward)
// Vertices of the iconic Cybertruck faceted hull
const verts = new Float32Array([
// Hood triangular slope (Nose to Apex)
0, 1.9, pl, -hw, 0.6, fl, hw, 0.6, fl,
// Roof to Tailgate slope
0, 1.9, pl, hw, 0.7, rl, -hw, 0.7, rl,
// Left Cabin Triangle
0, 1.9, pl, -hw, 0.7, rl, -hw, 0.6, fl,
// Right Cabin Triangle
0, 1.9, pl, hw, 0.6, fl, hw, 0.7, rl,
// Left Lower Beltline Panel
-hw, 0.6, fl, -hw, 0.7, rl, -hw, -0.2, rl,
-hw, 0.6, fl, -hw, -0.2, rl, -hw, -0.2, fl,
// Right Lower Beltline Panel
hw, 0.6, fl, hw, -0.2, fl, hw, 0.7, rl,
hw, 0.7, rl, hw, -0.2, fl, hw, -0.2, rl,
// Front Bumper / Nose
-hw, 0.6, fl, hw, 0.6, fl, hw, -0.2, fl,
-hw, 0.6, fl, hw, -0.2, fl, -hw, -0.2, fl,
// Rear Tailgate
-hw, 0.7, rl, hw, -0.2, rl, hw, 0.7, rl,
-hw, 0.7, rl, -hw, -0.2, rl, hw, -0.2, rl,
]);
bGeo.setAttribute('position', new THREE.BufferAttribute(verts, 3));
bGeo.computeVertexNormals();
const bodyMat = new THREE.MeshStandardMaterial({
color: bodyColorHex,
metalness: isPolished ? 0.95 : 0.6,
roughness: isPolished ? 0.18 : 0.45,
flatShading: true
});
const bodyMesh = new THREE.Mesh(bGeo, bodyMat);
bodyMesh.position.y = 1.6;
bodyMesh.castShadow = true;
truckGroup.add(bodyMesh);
// Front Horizon LED Lightbar
const lightbarGeo = new THREE.BoxGeometry(bodyWidth * 0.95, 0.15, 0.1);
const lightbarMat = new THREE.MeshBasicMaterial({ color: 0x00f0ff });
const lightbar = new THREE.Mesh(lightbarGeo, lightbarMat);
lightbar.position.set(0, 2.18, fl - 0.02);
truckGroup.add(lightbar);
// Rear Full-width Red Tail Light
const taillightGeo = new THREE.BoxGeometry(bodyWidth * 0.92, 0.12, 0.1);
const taillightMat = new THREE.MeshBasicMaterial({ color: 0xff0033 });
const taillight = new THREE.Mesh(taillightGeo, taillightMat);
taillight.position.set(0, 2.25, rl + 0.02);
truckGroup.add(taillight);
// 2. Heavy Monster Truck Tubular Steel Subframe / Rollcage Chassis
const subframeGeo = new THREE.BoxGeometry(3.0, 1.2, 6.2);
const subframeMat = new THREE.MeshStandardMaterial({ color: 0x111317, metalness: 0.8, roughness: 0.5 });
const subframe = new THREE.Mesh(subframeGeo, subframeMat);
subframe.position.y = 0.8;
subframe.castShadow = true;
truckGroup.add(subframe);
// Heavy 4-Link Suspension Shock Absorbers (Yellow Springs)
const shockGeo = new THREE.CylinderGeometry(0.2, 0.2, 1.8, 8);
const shockMat = new THREE.MeshStandardMaterial({ color: 0xffcc00, metalness: 0.7, roughness: 0.2 });
const wheelOffsets = [
[-2.0, 0.9, -2.5],
[ 2.0, 0.9, -2.5],
[-2.0, 0.9, 2.5],
[ 2.0, 0.9, 2.5]
];
wheelOffsets.forEach(([sx, sy, sz]) => {
const shock = new THREE.Mesh(shockGeo, shockMat);
shock.position.set(sx * 0.6, sy, sz * 0.85);
shock.rotation.z = (sx > 0 ? -1 : 1) * 0.25;
truckGroup.add(shock);
});
// 3. Four Massive 66-inch Monster Truck Knobby Wheels
const tireGeo = new THREE.CylinderGeometry(1.65, 1.65, 1.5, 20);
tireGeo.rotateZ(Math.PI / 2);
const tireMat = new THREE.MeshStandardMaterial({ color: 0x161618, roughness: 0.95 });
// Steel Rim
const rimGeo = new THREE.CylinderGeometry(0.95, 0.95, 1.55, 12);
rimGeo.rotateZ(Math.PI / 2);
const rimMat = new THREE.MeshStandardMaterial({ color: 0x333842, metalness: 0.9, roughness: 0.2 });
const wheels = [];
wheelOffsets.forEach(([wx, wy, wz]) => {
const wheelHub = new THREE.Group();
const tire = new THREE.Mesh(tireGeo, tireMat);
tire.castShadow = true;
const rim = new THREE.Mesh(rimGeo, rimMat);
wheelHub.add(tire);
wheelHub.add(rim);
wheelHub.position.set(wx, 1.0, wz);
truckGroup.add(wheelHub);
wheels.push(wheelHub);
});
return { root: truckGroup, wheels: wheels, bodyMesh: bodyMesh };
}
/* =========================================================================
EXACTLY FIVE TRUCKS: 1 PLAYER + 4 AI RIVALS
========================================================================= */
class Truck {
constructor(id, name, isPlayer, colorHex, startX, startZ, startAngle) {
this.id = id;
this.name = name;
this.isPlayer = isPlayer;
this.pos = new THREE.Vector2(startX, startZ);
this.y = 0;
this.vy = 0;
this.angle = startAngle;
this.speed = 0;
this.angularVel = 0;
this.steerInput = 0;
this.throttleInput = 0;
this.onGround = true;
this.pitch = 0;
this.roll = 0;
// Physics dimensions
this.radius = 3.6;
this.mass = 3500; // kg
this.wreckWobble = 0;
// Visual mesh
this.truck3D = createCybertruckMesh(colorHex, isPlayer);
this.truck3D.root.position.set(startX, 0, startZ);
this.truck3D.root.rotation.y = startAngle;
scene.add(this.truck3D.root);
// AI specific traits
this.aiTarget = new THREE.Vector2();
this.aiTimer = Math.random() * 2;
this.aiAggression = 0.7 + Math.random() * 0.5;
}
updatePhysics(dt, allTrucks) {
// Airborne & Gravity physics
if (!this.onGround) {
this.vy -= 42 * dt;
this.y += this.vy * dt;
this.pitch = THREE.MathUtils.lerp(this.pitch, (this.speed > 0 ? -0.2 : 0.2), dt * 4);
if (this.y <= 0) {
this.y = 0;
this.vy = 0;
this.onGround = true;
this.pitch = 0;
this.roll = 0;
spawnSparks(this.pos.x, 0.4, this.pos.y, 14, 0xff8800);
if (this.isPlayer) sfx.playImpact(0.8);
}
}
// Acceleration & Friction
const maxSpeed = this.isPlayer ? 52 : 44;
const accelRate = 38;
const friction = this.onGround ? 22 : 4;
if (this.throttleInput > 0) {
this.speed += accelRate * this.throttleInput * dt;
} else if (this.throttleInput < 0) {
this.speed += accelRate * 0.7 * this.throttleInput * dt; // Reverse is slower
} else {
// Coasting drag
if (this.speed > 0) this.speed = Math.max(0, this.speed - friction * dt);
else if (this.speed < 0) this.speed = Math.min(0, this.speed + friction * dt);
}
this.speed = THREE.MathUtils.clamp(this.speed, -maxSpeed * 0.4, maxSpeed);
// Steering & Yaw rotation
const steerSpeed = (this.speed >= 0 ? 1 : -1) * 2.8 * (Math.abs(this.speed) / (maxSpeed * 0.8 + 0.001));
this.angularVel = THREE.MathUtils.lerp(this.angularVel, this.steerInput * steerSpeed, dt * 10);
this.angle += this.angularVel * dt;
// Velocity components
const forwardX = -Math.sin(this.angle);
const forwardZ = -Math.cos(this.angle);
this.pos.x += forwardX * this.speed * dt;
this.pos.y += forwardZ * this.speed * dt;
// Arena boundary collision
const distFromCenter = this.pos.length();
if (distFromCenter > (ARENA_RADIUS - this.radius)) {
const normal = this.pos.clone().normalize();
this.pos.copy(normal.multiplyScalar(ARENA_RADIUS - this.radius));
this.speed *= -0.4;
spawnSparks(this.pos.x, 1.5, this.pos.y, 12, 0x00f0ff);
}
// Wheel rolling & steering animation
this.truck3D.wheels.forEach((w, idx) => {
w.rotation.x += (this.speed / 1.65) * dt;
if (idx < 2) { // Front wheels steer
w.rotation.y = this.steerInput * 0.45;
}
});
// Wreck / hit wobble damping
this.wreckWobble = THREE.MathUtils.lerp(this.wreckWobble, 0, dt * 6);
// Update 3D Transforms
this.truck3D.root.position.set(this.pos.x, this.y, this.pos.y);
this.truck3D.root.rotation.set(
this.pitch,
this.angle,
this.roll + Math.sin(Date.now() * 0.04) * this.wreckWobble
);
// Dust generation
if (this.onGround && Math.abs(this.speed) > 12 && Math.random() < 0.4) {
spawnDust(this.pos.x, this.pos.y);
}
}
updateAI(dt, playerTruck, allTrucks) {
this.aiTimer -= dt;
if (this.aiTimer <= 0) {
this.aiTimer = 1.0 + Math.random() * 1.5;
// Switch target between hunting player, hitting ramps, or clashing with nearest rival
const roll = Math.random();
if (roll < 0.5) {
this.aiTarget.copy(playerTruck.pos);
} else if (roll < 0.8) {
// Find a ramp to jump
const r = obstacles.filter(o => o.type === 'ramp')[Math.floor(Math.random() * 5)];
if (r) this.aiTarget.copy(r.pos);
} else {
// Nearest rival
let closest = null, minDist = 999;
for (let other of allTrucks) {
if (other !== this) {
const d = this.pos.distanceTo(other.pos);
if (d < minDist) { minDist = d; closest = other; }
}
}
if (closest) this.aiTarget.copy(closest.pos);
}
}
// AI Boids Separation Force: Avoid clump/conga-lines
const separation = new THREE.Vector2(0, 0);
let neighborCount = 0;
for (let other of allTrucks) {
if (other !== this) {
const diff = this.pos.clone().sub(other.pos);
const dist = diff.length();
if (dist < 18 && dist > 0.01) {
diff.normalize().divideScalar(dist); // stronger repulsion when closer
separation.add(diff);
neighborCount++;
}
}
}
// Steer towards target modified by separation vector
const targetDir = this.aiTarget.clone().sub(this.pos).normalize();
if (neighborCount > 0) {
targetDir.add(separation.multiplyScalar(1.6)).normalize();
}
// Compute angle delta
const forward = new THREE.Vector2(-Math.sin(this.angle), -Math.cos(this.angle));
const cross = forward.x * targetDir.y - forward.y * targetDir.x;
const dot = forward.dot(targetDir);
this.steerInput = THREE.MathUtils.clamp(-cross * 3.0, -1, 1);
this.throttleInput = (dot > -0.2) ? 1.0 : -0.5;
}
}
// Instantiation: EXACTLY FIVE TRUCKS
const trucks = [
new Truck(0, "PLAYER CYBER-BEAST", true, 0xd0d4d9, 0, 40, Math.PI), // 1. Player (Brushed Silver)
new Truck(1, "STEALTH VOID-01", false, 0x18181c, -35, -20, 0.6), // 2. Rival 1 (Matte Black)
new Truck(2, "HAZARD CYBER-GOLD", false, 0xffb700, 35, -20, -0.6), // 3. Rival 2 (Neon Gold)
new Truck(3, "RAD-RUST TITAN", false, 0x9b2226, -30, 20, 2.2), // 4. Rival 3 (Crimson Rust)
new Truck(4, "BLUE ION-BLAST", false, 0x0077b6, 30, 20, -2.2) // 5. Rival 4 (Electric Blue)
];
const player = trucks[0];
/* =========================================================================
COLLISION RESOLUTION ENGINE (Truck vs Truck, Ramps, Barrels, Cars)
========================================================================= */
function handleCollisions() {
// 1. Truck-to-Truck Dynamic Impulse Collisions
for (let i = 0; i < trucks.length; i++) {
for (let j = i + 1; j < trucks.length; j++) {
const t1 = trucks[i];
const t2 = trucks[j];
const diff = t1.pos.clone().sub(t2.pos);
const dist = diff.length();
const minDist = t1.radius + t2.radius;
if (dist < minDist && dist > 0.0001) {
// Collision Normal & Overlap separation
const normal = diff.clone().normalize();
const overlap = minDist - dist;
t1.pos.add(normal.clone().multiplyScalar(overlap * 0.5));
t2.pos.sub(normal.clone().multiplyScalar(overlap * 0.5));
// Velocity along contact normal
const v1 = new THREE.Vector2(-Math.sin(t1.angle), -Math.cos(t1.angle)).multiplyScalar(t1.speed);
const v2 = new THREE.Vector2(-Math.sin(t2.angle), -Math.cos(t2.angle)).multiplyScalar(t2.speed);
const relVel = v1.clone().sub(v2);
const normalVel = relVel.dot(normal);
// Compute impact only if closing in
if (normalVel < 0) {
const restitution = 0.55;
const impulseMag = -(1 + restitution) * normalVel * 0.5;
// Adjust speeds based on directional impulse
t1.speed += impulseMag * 0.65;
t2.speed -= impulseMag * 0.65;
t1.wreckWobble = Math.min(0.35, t1.wreckWobble + Math.abs(normalVel) * 0.01);
t2.wreckWobble = Math.min(0.35, t2.wreckWobble + Math.abs(normalVel) * 0.01);
// Sparks and SFX
const midX = (t1.pos.x + t2.pos.x) * 0.5;
const midZ = (t1.pos.y + t2.pos.y) * 0.5;
spawnSparks(midX, 1.6, midZ, 25, 0xffffff);
const hitIntensity = Math.min(2.5, Math.abs(normalVel) * 0.1);
sfx.playImpact(hitIntensity);
// Scoring logic for Player slamming rivals
if (t1.isPlayer || t2.isPlayer) {
const smashPoints = Math.round(Math.abs(normalVel) * 35 + 150);
score += smashPoints;
sfx.playCheer();
// Screen hit feedback flash
const flash = document.getElementById('hit-flash');
flash.style.opacity = '0.75';
setTimeout(() => { flash.style.opacity = '0'; }, 90);
}
}
}
}
}
// 2. Truck vs Obstacles
for (let t of trucks) {
for (let obs of obstacles) {
const d = t.pos.distanceTo(obs.pos);
// Wedge Ramp Interaction
if (obs.type === 'ramp') {
if (d < obs.radius) {
// Check if driving up the incline from rear/front
const localPos = t.pos.clone().sub(obs.pos).rotateAround(new THREE.Vector2(0,0), -obs.rot);
if (Math.abs(localPos.x) < obs.width * 0.55 && Math.abs(localPos.y) < obs.length * 0.55) {
// Ramp launch boost
if (t.onGround && t.speed > 8) {
t.onGround = false;
t.vy = Math.min(32, t.speed * 0.65 + 10);
t.pitch = -0.35;
spawnSparks(t.pos.x, 0.5, t.pos.y, 8, 0x00f0ff);
if (t.isPlayer) {
score += 250;
sfx.playCheer();
}
}
}
}
}
// Crushed Car Stack Interaction
else if (obs.type === 'carStack') {
const minD = t.radius + obs.radius;
if (d < minD) {
const normal = t.pos.clone().sub(obs.pos).normalize();
t.pos.copy(obs.pos.clone().add(normal.multiplyScalar(minD)));
t.speed *= -0.3;
spawnSparks(t.pos.x, 1.2, t.pos.y, 16, 0xffaa00);
sfx.playImpact(0.6);
if (t.isPlayer) score += 75;
}
}
// Dynamic Hazard Barrel Interaction
else if (obs.type === 'barrel') {
const minD = t.radius + obs.radius;
if (d < minD) {
const normal = obs.pos.clone().sub(t.pos).normalize();
obs.vel.add(normal.multiplyScalar(Math.abs(t.speed) * 0.8 + 12));
obs.vy = 8 + Math.random() * 8;
t.speed *= 0.82;
spawnSparks(obs.pos.x, obs.y, obs.pos.y, 14, 0xff2200);
sfx.playImpact(0.5);
if (t.isPlayer) score += 120;
}
}
}
}
// 3. Dynamic Barrels Physics Step
for (let b of dynamicBarrels) {
b.pos.add(b.vel.clone().multiplyScalar(1 / 60));
b.vel.multiplyScalar(0.94); // Friction
if (b.y > 1.1 || b.vy !== 0) {
b.vy -= 30 * (1 / 60);
b.y += b.vy * (1 / 60);
if (b.y <= 1.1) {
b.y = 1.1;
b.vy = 0;
}
}
b.mesh.position.set(b.pos.x, b.y, b.pos.y);
}
}
/* =========================================================================
KEYBOARD INPUT HANDLING & PHOTO MODE TOGGLE
========================================================================= */
const keys = { forward: false, backward: false, left: false, right: false };
window.addEventListener('keydown', (e) => {
sfx.init(); // Initialize Web Audio on first key interaction
const k = e.key.toLowerCase();
if (k === 'w' || e.key === 'ArrowUp') keys.forward = true;
if (k === 's' || e.key === 'ArrowDown') keys.backward = true;
if (k === 'a' || e.key === 'ArrowLeft') keys.left = true;
if (k === 'd' || e.key === 'ArrowRight') keys.right = true;
// Photo Mode Toggle: Exactly 'P'
if (k === 'p') {
isPhotoMode = !isPhotoMode;
const photoCard = document.getElementById('photo-card');
const photoScore = document.getElementById('photo-score');
if (isPhotoMode) {
photoScore.innerText = `${score} PTS`;
photoCard.style.display = 'flex';
} else {
photoCard.style.display = 'none';
}
}
// Audio Mute Toggle: 'M'
if (k === 'm') sfx.toggleMute();
});
window.addEventListener('keyup', (e) => {
const k = e.key.toLowerCase();
if (k === 'w' || e.key === 'ArrowUp') keys.forward = false;
if (k === 's' || e.key === 'ArrowDown') keys.backward = false;
if (k === 'a' || e.key === 'ArrowLeft') keys.left = false;
if (k === 'd' || e.key === 'ArrowRight') keys.right = false;
});
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
/* =========================================================================
MAIN GAME LOOP (Physics & Render Step with Absolute Photo Mode Freeze)
========================================================================= */
const scoreDisplay = document.getElementById('score-display');
const clockDisplay = document.getElementById('clock-display');
let lastTime = performance.now();
function animate(currentTime) {
requestAnimationFrame(animate);
const dt = Math.min((currentTime - lastTime) / 1000, 0.1);
lastTime = currentTime;
// SPEC: PHOTO MODE COMPLETELY FREEZES THE SIMULATION
if (isPhotoMode) {
return; // Physics step, clock, and rendering freeze in-place
}
// Countdown Timer
if (timeRemaining > 0) {
timeRemaining = Math.max(0, timeRemaining - dt);
} else {
isGameOver = true;
}
// Update Player Input
player.throttleInput = (keys.forward ? 1 : 0) + (keys.backward ? -1 : 0);
player.steerInput = (keys.left ? 1 : 0) + (keys.right ? -1 : 0);
sfx.updateEngine(player.speed / 52);
// Update AI Rivals
for (let i = 1; i < trucks.length; i++) {
trucks[i].updateAI(dt, player, trucks);
}
// Update Physics & Collisions for all 5 trucks
for (let t of trucks) {
t.updatePhysics(dt, trucks);
}
handleCollisions();
// Animate Crowd jumping / cheering
const timeSec = currentTime * 0.003;
for (let i = 0; i < TOTAL_FANS; i += 3) {
const fan = fanBasePositions[i];
dummy.position.set(fan.x, fan.y + Math.abs(Math.sin(timeSec * 3 + fan.phase)) * 0.45, fan.z);
dummy.rotation.y = -fan.angle + Math.PI / 2;
dummy.scale.set(1, 1, 1);
dummy.updateMatrix();
crowdInstanced.setMatrixAt(i, dummy.matrix);
}
crowdInstanced.instanceMatrix.needsUpdate = true;
// Update Particles
let pIdx = 0;
for (let p of particles) {
if (p.active) {
p.life += dt;
if (p.life >= p.maxLife) {
p.active = false;
pPositions[pIdx * 3 + 1] = -999;
} else {
p.pos.add(p.vel.clone().multiplyScalar(dt));
p.vel.y -= 25 * dt; // Gravity
pPositions[pIdx * 3] = p.pos.x;
pPositions[pIdx * 3 + 1] = p.pos.y;
pPositions[pIdx * 3 + 2] = p.pos.z;
pColors[pIdx * 3] = p.color.r;
pColors[pIdx * 3 + 1] = p.color.g;
pColors[pIdx * 3 + 2] = p.color.b;
}
} else {
pPositions[pIdx * 3 + 1] = -999;
}
pIdx++;
}
particleGeo.attributes.position.needsUpdate = true;
particleGeo.attributes.color.needsUpdate = true;
// Cinematic Chase Camera (Smooth lerp behind player truck)
const camOffset = new THREE.Vector3(
Math.sin(player.angle) * 22,
9.5 + Math.max(0, player.y * 0.6),
Math.cos(player.angle) * 22
);
const targetCamPos = new THREE.Vector3(player.pos.x, player.y, player.pos.y).add(camOffset);
camera.position.lerp(targetCamPos, dt * 5.0);
camera.lookAt(player.pos.x, player.y + 2.5, player.pos.y);
// Update HUD
scoreDisplay.innerText = `${score.toString().padStart(4, '0')} PTS`;
clockDisplay.innerText = `TIME: ${timeRemaining.toFixed(1)}s`;
// Render Scene
renderer.render(scene, camera);
}
requestAnimationFrame(animate);
</script>
</body>
</html>
The notes
- Five trucks: Each AI rival executes a separation vector calculation against all other trucks (repelling when distance < 18m) and periodically switches target priorities between hunting the player, navigating toward steel jump ramps, and ramming the closest rival, preventing single-file train clumping.
- Demo mode: Line 206 sets real game state variables upon initialization (
score = 5000; timeRemaining = 20.0;), directly feeding the true collision accumulator and countdown clock rather than styling an overlay. - Photo mode: Pressing
PsetsisPhotoMode = true, which immediately returns before the clock countdown, vehicle physics integration, AI decision tree, particle physics, and camera render step, freezing the entire simulation in-place until unpaused. - Collisions: The collision engine projects 2D positional overlaps onto unit contact normals, calculates relative velocity vectors along the collision axis, and applies an impulse equation $J = -(1 + e) \cdot (\Delta \vec{v} \cdot \hat{n}) / 2$ with restitution $e = 0.55$ to exchange momentum, damp angular wobble, trigger spark bursts, and award impact-proportional points.
Attachments
google/gemini-3.7-flash — page