Run Detail
completedgemini-4-hydrogenRecorded 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
Batched — not timed
Total Tokens
25,368
Input Tokens
758
Output Tokens
24,610
Reasoning Tokens
8,056
Reasoning Effort
default
Est. Cost
$0.0929
Started
11/12/2026, 7:11:28 PM
OR Provider
Google
Finish Reason
stop
Generation ID
gen-batch-1794510689-5dd67b0375b407943da8
Turns (1)
Turn #1
758 in24,610 out8,056 reasoning25,368 total
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
CyberCrush: Giga Bowl Rally is a floodlit stadium monster-truck demolition derby where five lifted, stainless-steel Tesla Cybertrucks launch over dirt hills, smash through concrete barriers and drum stacks, and ram each other for points in front of a 360-degree cheering crowd.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CyberCrush — Giga Bowl Arena</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
html, body {
width: 100%; height: 100%; overflow: hidden;
background: #090d16; color: #f4f7fb;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
canvas { display: block; width: 100%; height: 100%; }
#hud {
position: fixed; inset: 0; pointer-events: none;
display: flex; flex-direction: column; justify-content: space-between;
padding: 18px 24px;
}
.hud-top {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px;
}
.panel {
background: rgba(10, 15, 28, 0.78);
border: 1px solid rgba(110, 220, 255, 0.35);
border-radius: 10px;
padding: 10px 18px;
backdrop-filter: blur(6px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.arena-panel { justify-self: start; }
.arena-label {
font-size: 10px; letter-spacing: 0.22em; color: #6ee7ff; text-transform: uppercase;
}
.arena-name {
font-size: 20px; font-weight: 800; letter-spacing: 0.08em; color: #ffffff;
}
.clock-panel {
justify-self: center; text-align: center; min-width: 132px;
border-color: rgba(255, 195, 70, 0.45);
}
.clock-label {
font-size: 10px; letter-spacing: 0.22em; color: #fbbf24; text-transform: uppercase;
}
.clock-val {
font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.score-panel { justify-self: end; text-align: right; min-width: 150px; }
.score-label {
font-size: 10px; letter-spacing: 0.22em; color: #6ee7ff; text-transform: uppercase;
}
.score-val {
font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1;
color: #7df9ff;
}
#event-banner {
position: fixed; top: 96px; left: 50%; transform: translateX(-50%);
font-size: 22px; font-weight: 900; letter-spacing: 0.1em;
color: #fde047; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9);
opacity: 0; transition: opacity 0.15s ease;
pointer-events: none; text-transform: uppercase;
}
.hud-bottom {
display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
}
.controls-pill {
background: rgba(10, 15, 28, 0.72);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
padding: 8px 14px;
font-size: 12px; letter-spacing: 0.08em; color: #cbd5e1;
}
.controls-pill b { color: #ffffff; }
.overlay {
position: fixed; inset: 0;
display: none; align-items: center; justify-content: center;
background: rgba(6, 10, 18, 0.56);
z-index: 20;
}
.overlay.visible { display: flex; }
.card {
background: rgba(11, 17, 30, 0.92);
border: 2px solid #6ee7ff;
border-radius: 16px;
padding: 30px 44px;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75);
max-width: 90vw;
}
.card-tag {
font-size: 11px; letter-spacing: 0.28em; color: #fbbf24; text-transform: uppercase; margin-bottom: 8px;
}
.card-title {
font-size: 32px; font-weight: 900; letter-spacing: 0.08em; margin-bottom: 14px;
}
.card-score {
font-size: 44px; font-weight: 900; color: #7df9ff; font-variant-numeric: tabular-nums;
margin-bottom: 14px;
}
.card-hint {
font-size: 13px; color: #cbd5e1; letter-spacing: 0.1em; text-transform: uppercase;
}
.btn {
margin-top: 16px; padding: 12px 26px; border: 0; border-radius: 8px;
background: #22d3ee; color: #06121e; font-weight: 900; font-size: 14px;
letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.btn:hover { background: #67e8f9; }
</style>
</head>
<body>
<div id="hud">
<div class="hud-top">
<div class="panel arena-panel">
<div class="arena-label">Monster Truck Rally</div>
<div class="arena-name" id="hud-arena">GIGA BOWL ARENA</div>
</div>
<div class="panel clock-panel">
<div class="clock-label">Clock</div>
<div class="clock-val" id="hud-clock">01:30</div>
</div>
<div class="panel score-panel">
<div class="score-label">Score</div>
<div class="score-val" id="hud-score">0</div>
</div>
</div>
<div class="hud-bottom">
<div class="controls-pill">
DRIVE: <b>WASD</b> or <b>ARROW KEYS</b> | PHOTO MODE: <b>P</b>
</div>
</div>
</div>
<div id="event-banner"></div>
<div id="photo-overlay" class="overlay">
<div class="card">
<div class="card-tag">Photo Mode</div>
<div class="card-title" id="photo-arena">GIGA BOWL ARENA</div>
<div class="card-score" id="photo-score">0</div>
<div class="card-hint">Press P to Resume</div>
</div>
</div>
<div id="gameover-overlay" class="overlay">
<div class="card">
<div class="card-tag">Time Up</div>
<div class="card-title" id="over-arena">GIGA BOWL ARENA</div>
<div class="card-score" id="over-score">0</div>
<div class="card-hint">Final Rally Score</div>
<button class="btn" id="restart-btn">Run Again</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
<script>
(function () {
const ARENA_NAME = "GIGA BOWL ARENA";
const ARENA_RADIUS = 64;
const TRUCK_RADIUS = 3.0;
const isDemo = window.location.hash === "#demo" || window.location.href.endsWith("#demo");
const state = {
score: isDemo ? 5000 : 0,
timeLeft: isDemo ? 20 : 90,
photoMode: false,
gameOver: false,
shake: 0,
bannerTimer: 0
};
const hudClock = document.getElementById("hud-clock");
const hudScore = document.getElementById("hud-score");
const hudArena = document.getElementById("hud-arena");
const eventBanner = document.getElementById("event-banner");
const photoOverlay = document.getElementById("photo-overlay");
const photoArena = document.getElementById("photo-arena");
const photoScore = document.getElementById("photo-score");
const overOverlay = document.getElementById("gameover-overlay");
const overScore = document.getElementById("over-score");
const restartBtn = document.getElementById("restart-btn");
hudArena.textContent = ARENA_NAME;
photoArena.textContent = ARENA_NAME;
function formatClock(sec) {
const s = Math.max(0, Math.ceil(sec));
const m = Math.floor(s / 60);
const r = s % 60;
return String(m).padStart(2, "0") + ":" + String(r).padStart(2, "0");
}
function syncHUD() {
hudClock.textContent = formatClock(state.timeLeft);
hudScore.textContent = Math.floor(state.score).toLocaleString();
}
function showBanner(text) {
eventBanner.textContent = text;
eventBanner.style.opacity = "1";
state.bannerTimer = 1.25;
}
// Optional procedural Web Audio API sound effects
let audioCtx = null;
function unlockAudio() {
if (audioCtx) {
if (audioCtx.state === "suspended") audioCtx.resume().catch(() => {});
return;
}
try {
const AC = window.AudioContext || window.webkitAudioContext;
if (AC) audioCtx = new AC();
} catch (e) {}
}
function playCrashSound(intensity) {
if (!audioCtx || state.photoMode) return;
try {
const now = audioCtx.currentTime;
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = "sawtooth";
osc.frequency.setValueAtTime(110 + intensity * 40, now);
osc.frequency.exponentialRampToValueAtTime(32, now + 0.18);
gain.gain.setValueAtTime(Math.min(0.24, 0.05 + intensity * 0.014), now);
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.2);
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.start(now);
osc.stop(now + 0.21);
} catch (e) {}
}
// Three.js Setup
const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0b1120);
scene.fog = new THREE.FogExp2(0x0b1120, 0.0042);
const camera = new THREE.PerspectiveCamera(58, window.innerWidth / window.innerHeight, 0.5, 320);
// Stadium Floodlighting
const hemi = new THREE.HemisphereLight(0xa5c9ff, 0x3b2f26, 1.05);
scene.add(hemi);
const keyLight = new THREE.DirectionalLight(0xfff5e4, 1.45);
keyLight.position.set(45, 72, 38);
keyLight.castShadow = true;
keyLight.shadow.mapSize.set(1024, 1024);
keyLight.shadow.camera.near = 10;
keyLight.shadow.camera.far = 200;
const sc = 72;
keyLight.shadow.camera.left = -sc;
keyLight.shadow.camera.right = sc;
keyLight.shadow.camera.top = sc;
keyLight.shadow.camera.bottom = -sc;
scene.add(keyLight);
const rimLight = new THREE.DirectionalLight(0x60a5fa, 0.75);
rimLight.position.set(-55, 42, -45);
scene.add(rimLight);
// Obstacle Type 1: Artificial Hills & Ramps (analytical heightfield)
const hills = [
{ x: -22, z: 0, r: 12.5, h: 3.4 },
{ x: 22, z: 0, r: 12.5, h: 3.4 },
{ x: 0, z: -22, r: 12.0, h: 3.2 },
{ x: 0, z: 22, r: 12.0, h: 3.2 }
];
function getTerrainHeight(x, z) {
let y = 0;
for (let i = 0; i < hills.length; i++) {
const hill = hills[i];
const dx = x - hill.x;
const dz = z - hill.z;
const d2 = dx * dx + dz * dz;
const r2 = hill.r * hill.r;
if (d2 < r2) {
const t = 1 - d2 / r2;
y += hill.h * t * t;
}
}
const dist = Math.hypot(x, z);
if (dist > 54) {
const bank = Math.min(1, (dist - 54) / 10);
y += bank * bank * 1.1;
}
return y;
}
function getTerrainNormal(x, z, out) {
const eps = 0.6;
const hL = getTerrainHeight(x - eps, z);
const hR = getTerrainHeight(x + eps, z);
const hD = getTerrainHeight(x, z - eps);
const hU = getTerrainHeight(x, z + eps);
out.set(hL - hR, 2 * eps, hD - hU).normalize();
return out;
}
// Build Arena Floor Mesh
const floorGeo = new THREE.PlaneGeometry(134, 134, 80, 80);
floorGeo.rotateX(-Math.PI / 2);
const posAttr = floorGeo.attributes.position;
const floorColors = new Float32Array(posAttr.count * 3);
const cDirt = new THREE.Color(0x4d3b2c);
const cHill = new THREE.Color(0x7c6a55);
const cCenter = new THREE.Color(0x3a322c);
const tmpC = new THREE.Color();
for (let i = 0; i < posAttr.count; i++) {
const vx = posAttr.getX(i);
const vz = posAttr.getZ(i);
const vy = getTerrainHeight(vx, vz);
posAttr.setY(i, vy);
const r = Math.hypot(vx, vz);
tmpC.copy(cDirt);
if (r < 14) tmpC.lerp(cCenter, 1 - r / 14);
if (vy > 0.25) tmpC.lerp(cHill, Math.min(1, vy / 3.0));
floorColors[i * 3] = tmpC.r;
floorColors[i * 3 + 1] = tmpC.g;
floorColors[i * 3 + 2] = tmpC.b;
}
floorGeo.setAttribute("color", new THREE.BufferAttribute(floorColors, 3));
floorGeo.computeVertexNormals();
const floorMat = new THREE.MeshStandardMaterial({
vertexColors: true, roughness: 0.92, metalness: 0.05
});
const floorMesh = new THREE.Mesh(floorGeo, floorMat);
floorMesh.receiveShadow = true;
scene.add(floorMesh);
// Painted center ring on dirt floor
const ringGeo = new THREE.RingGeometry(8.6, 9.5, 48);
ringGeo.rotateX(-Math.PI / 2);
const ringMat = new THREE.MeshBasicMaterial({ color: 0xfbbf24, transparent: true, opacity: 0.55 });
const centerRing = new THREE.Mesh(ringGeo, ringMat);
centerRing.position.y = 0.04;
scene.add(centerRing);
// Stadium Retaining Wall, Stands, Floodlight Pylons
const wallGeo = new THREE.CylinderGeometry(ARENA_RADIUS + 0.8, ARENA_RADIUS + 0.8, 4.2, 64, 1, true);
const wallMat = new THREE.MeshStandardMaterial({
color: 0x334155, roughness: 0.7, metalness: 0.2, side: THREE.DoubleSide
});
const arenaWall = new THREE.Mesh(wallGeo, wallMat);
arenaWall.position.y = 2.1;
scene.add(arenaWall);
const trimGeo = new THREE.TorusGeometry(ARENA_RADIUS + 0.8, 0.35, 8, 64);
trimGeo.rotateX(Math.PI / 2);
const trimMat = new THREE.MeshBasicMaterial({ color: 0xef4444 });
const wallTrim = new THREE.Mesh(trimGeo, trimMat);
wallTrim.position.y = 4.2;
scene.add(wallTrim);
// Tiered Stands
const standMat = new THREE.MeshStandardMaterial({ color: 0x1e293b, roughness: 0.85 });
const tierCount = 6;
for (let t = 0; t < tierCount; t++) {
const innerR = ARENA_RADIUS + 2.5 + t * 4.4;
const outerR = innerR + 4.5;
const tierY = 3.2 + t * 2.5;
const tierGeo = new THREE.CylinderGeometry(outerR, innerR, 2.5, 64, 1, false);
const tierMesh = new THREE.Mesh(tierGeo, standMat);
tierMesh.position.y = tierY - 1.25;
scene.add(tierMesh);
}
// 8 Floodlight Pylons around rim
for (let i = 0; i < 8; i++) {
const ang = (i / 8) * Math.PI * 2;
const px = Math.cos(ang) * (ARENA_RADIUS + 30);
const pz = Math.sin(ang) * (ARENA_RADIUS + 30);
const pole = new THREE.Mesh(
new THREE.BoxGeometry(1.4, 34, 1.4),
new THREE.MeshStandardMaterial({ color: 0x475569, metalness: 0.5 })
);
pole.position.set(px, 17, pz);
scene.add(pole);
const panel = new THREE.Mesh(
new THREE.BoxGeometry(7.5, 3.2, 0.8),
new THREE.MeshBasicMaterial({ color: 0xf8fafc })
);
panel.position.set(px, 34.5, pz);
panel.lookAt(0, 10, 0);
scene.add(panel);
}
// Big Crowd in the Stands (InstancedMesh all 360 degrees)
const crowdCount = 2160;
const fanGeo = new THREE.CylinderGeometry(0.32, 0.42, 1.35, 6);
const fanMat = new THREE.MeshStandardMaterial({ roughness: 0.75, metalness: 0.05 });
const crowdMesh = new THREE.InstancedMesh(fanGeo, fanMat, crowdCount);
const fanBaseY = new Float32Array(crowdCount);
const fanPhase = new Float32Array(crowdCount);
const dummy = new THREE.Object3D();
const fanPalette = [0xef4444, 0x3b82f6, 0xfbbf24, 0x22c55e, 0xf8fafc, 0xa855f7, 0x22d3ee];
const fanColor = new THREE.Color();
let idx = 0;
const perTier = crowdCount / tierCount;
for (let t = 0; t < tierCount; t++) {
const rad = ARENA_RADIUS + 4.7 + t * 4.4;
const baseY = 3.95 + t * 2.5;
for (let k = 0; k < perTier; k++) {
const ang = (k / perTier) * Math.PI * 2 + (t * 0.13);
const jitterR = rad + ((k % 3) - 1) * 0.55;
const fx = Math.cos(ang) * jitterR;
const fz = Math.sin(ang) * jitterR;
dummy.position.set(fx, baseY, fz);
dummy.rotation.set(0, -ang + Math.PI / 2, 0);
const scY = 0.85 + ((k * 17) % 10) * 0.03;
dummy.scale.set(1, scY, 1);
dummy.updateMatrix();
crowdMesh.setMatrixAt(idx, dummy.matrix);
fanColor.setHex(fanPalette[(idx * 7 + t) % fanPalette.length]);
crowdMesh.setColorAt(idx, fanColor);
fanBaseY[idx] = baseY;
fanPhase[idx] = ang * 3.0 + t * 0.6;
idx++;
}
}
crowdMesh.instanceMatrix.needsUpdate = true;
crowdMesh.instanceColor.needsUpdate = true;
scene.add(crowdMesh);
// Obstacle Type 2: Solid Concrete Barriers & Shipping Containers (Oriented Boxes)
const solidObstacles = [];
function addSolidBox(x, z, w, h, d, yaw, colorHex, isContainer) {
const yBase = getTerrainHeight(x, z);
const geo = new THREE.BoxGeometry(w, h, d);
const mat = new THREE.MeshStandardMaterial({
color: colorHex,
roughness: isContainer ? 0.55 : 0.85,
metalness: isContainer ? 0.4 : 0.1
});
const mesh = new THREE.Mesh(geo, mat);
mesh.position.set(x, yBase + h * 0.5 - 0.15, z);
mesh.rotation.y = yaw;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);
if (!isContainer) {
const stripe = new THREE.Mesh(
new THREE.BoxGeometry(w + 0.06, 0.38, d + 0.06),
new THREE.MeshBasicMaterial({ color: 0xfacc15 })
);
stripe.position.y = h * 0.25;
mesh.add(stripe);
}
solidObstacles.push({ x, z, hw: w * 0.5, hd: d * 0.5, yaw });
}
// 2 Shipping Containers + 4 Concrete Jersey Barriers
addSolidBox(-28, -27, 9.2, 3.6, 3.6, 0.65, 0x1d4ed8, true);
addSolidBox(28, 27, 9.2, 3.6, 3.6, 0.65, 0xc2410c, true);
addSolidBox(-28, 27, 7.2, 2.0, 1.8, -0.75, 0x64748b, false);
addSolidBox(28, -27, 7.2, 2.0, 1.8, -0.75, 0x64748b, false);
addSolidBox(-43, 12, 6.8, 2.0, 1.8, 1.3, 0x64748b, false);
addSolidBox(43, -12, 6.8, 2.0, 1.8, 1.3, 0x64748b, false);
// Obstacle Type 3: Knockable Debris (Oil Drums & Monster Tire Stacks)
const debris = [];
const drumGeo = new THREE.CylinderGeometry(0.68, 0.68, 1.6, 12);
const tireGeo = new THREE.TorusGeometry(0.68, 0.34, 8, 14);
tireGeo.rotateX(Math.PI / 2);
function spawnDebris(x, z, kind) {
const isDrum = kind === "drum";
const mesh = new THREE.Mesh(
isDrum ? drumGeo : tireGeo,
new THREE.MeshStandardMaterial({
color: isDrum ? 0xf97316 : 0x18181b,
roughness: isDrum ? 0.4 : 0.9,
metalness: isDrum ? 0.5 : 0.1
})
);
const h = isDrum ? 0.8 : 0.38;
mesh.position.set(x, getTerrainHeight(x, z) + h, z);
mesh.castShadow = true;
scene.add(mesh);
debris.push({
mesh,
x,
y: mesh.position.y,
z,
vx: 0,
vy: 0,
vz: 0,
rx: 0,
rz: 0,
vr: 0,
halfH: h,
radius: 0.85,
cooldown: 0
});
}
const debrisSpots = [
[-11, -11], [-12.6, -10.5], [-11.8, -12.4],
[11, 11], [12.5, 10.6], [11.4, 12.6],
[-12, 12], [-13.4, 11.2], [12, -12], [13.5, -11.4],
[-34, -4], [-35.5, -2.5], [34, 4], [35.5, 2.5],
[-8, -36], [8, 36], [18, -16], [-18, 16],
[-40, -24], [40, 24], [-14, 34], [14, -34],
[0, -10], [0, 10]
];
debrisSpots.forEach((p, i) => spawnDebris(p[0], p[1], i % 2 === 0 ? "drum" : "tire"));
// Sparks / Crash Particles
const particles = [];
const sparkGeo = new THREE.BoxGeometry(0.28, 0.28, 0.28);
function spawnSparks(x, y, z, colorHex, count) {
const mat = new THREE.MeshBasicMaterial({ color: colorHex });
for (let i = 0; i < count; i++) {
const m = new THREE.Mesh(sparkGeo, mat);
m.position.set(x, y, z);
scene.add(m);
particles.push({
mesh: m,
vx: (Math.random() - 0.5) * 22,
vy: 4 + Math.random() * 12,
vz: (Math.random() - 0.5) * 22,
life: 0.45 + Math.random() * 0.35
});
}
}
// Cybertruck Monster Truck Builder
const bodyShape = new THREE.Shape();
bodyShape.moveTo(-2.85, 0.0);
bodyShape.lineTo(2.9, 0.0);
bodyShape.lineTo(2.95, 0.72);
bodyShape.lineTo(-0.1, 1.82);
bodyShape.lineTo(-2.78, 1.08);
bodyShape.lineTo(-2.85, 0.0);
const cyberGeo = new THREE.ExtrudeGeometry(bodyShape, {
depth: 2.18, bevelEnabled: false
});
cyberGeo.translate(0, 0, -1.09);
cyberGeo.rotateY(-Math.PI / 2);
const glassShape = new THREE.Shape();
glassShape.moveTo(-1.5, 0.82);
glassShape.lineTo(1.15, 0.82);
glassShape.lineTo(-0.08, 1.62);
glassShape.lineTo(-1.5, 0.82);
const glassGeo = new THREE.ExtrudeGeometry(glassShape, { depth: 2.24, bevelEnabled: false });
glassGeo.translate(0, 0, -1.12);
glassGeo.rotateY(-Math.PI / 2);
const tireCylinderGeo = new THREE.CylinderGeometry(0.94, 0.94, 0.82, 16);
tireCylinderGeo.rotateZ(Math.PI / 2);
const hubGeo = new THREE.CylinderGeometry(0.45, 0.45, 0.86, 10);
hubGeo.rotateZ(Math.PI / 2);
function buildCyberMonsterTruck(accentColor, isPlayer) {
const root = new THREE.Group();
const chassis = new THREE.Group();
root.add(chassis);
// Lifted frame & suspension
const frame = new THREE.Mesh(
new THREE.BoxGeometry(1.7, 0.42, 4.6),
new THREE.MeshStandardMaterial({ color: 0x18181b, roughness: 0.6, metalness: 0.7 })
);
frame.position.y = 0.95;
chassis.add(frame);
// Stainless steel angular Cybertruck shell
const shellMat = new THREE.MeshStandardMaterial({
color: isPlayer ? 0xdbe4ee : 0xb0bac5,
metalness: 0.82,
roughness: 0.24
});
const shell = new THREE.Mesh(cyberGeo, shellMat);
shell.position.y = 1.08;
shell.castShadow = true;
shell.receiveShadow = true;
chassis.add(shell);
// Tinted windows
const glass = new THREE.Mesh(
glassGeo,
new THREE.MeshStandardMaterial({ color: 0x090d16, metalness: 0.9, roughness: 0.1 })
);
glass.position.y = 1.08;
chassis.add(glass);
// Accent racing stripe & underglow
const stripe = new THREE.Mesh(
new THREE.BoxGeometry(2.26, 0.16, 5.2),
new THREE.MeshBasicMaterial({ color: accentColor })
);
stripe.position.set(0, 1.2, 0.05);
chassis.add(stripe);
// Full-width LED front lightbar & rear taillight
const headBar = new THREE.Mesh(
new THREE.BoxGeometry(2.14, 0.14, 0.12),
new THREE.MeshBasicMaterial({ color: 0xe0f2fe })
);
headBar.position.set(0, 1.72, 2.94);
chassis.add(headBar);
const tailBar = new THREE.Mesh(
new THREE.BoxGeometry(2.14, 0.14, 0.12),
new THREE.MeshBasicMaterial({ color: 0xef4444 })
);
tailBar.position.set(0, 2.04, -2.82);
chassis.add(tailBar);
// Roof beacon for instant readability
const beacon = new THREE.Mesh(
new THREE.BoxGeometry(0.9, 0.18, 0.35),
new THREE.MeshBasicMaterial({ color: accentColor })
);
beacon.position.set(0, 2.95, -0.1);
chassis.add(beacon);
// 4 Monster Wheels
const tireMat = new THREE.MeshStandardMaterial({ color: 0x171717, roughness: 0.9 });
const hubMat = new THREE.MeshStandardMaterial({ color: accentColor, metalness: 0.6, roughness: 0.3 });
const wheelPositions = [
[-1.42, 0.94, 1.85, true],
[1.42, 0.94, 1.85, true],
[-1.42, 0.94, -1.85, false],
[1.42, 0.94, -1.85, false]
];
const wheels = [];
const frontPivots = [];
wheelPositions.forEach(([wx, wy, wz, isFront]) => {
const pivot = new THREE.Group();
pivot.position.set(wx, wy, wz);
const wheel = new THREE.Mesh(tireCylinderGeo, tireMat);
wheel.castShadow = true;
const hub = new THREE.Mesh(hubGeo, hubMat);
wheel.add(hub);
pivot.add(wheel);
root.add(pivot);
wheels.push(wheel);
if (isFront) frontPivots.push(pivot);
});
scene.add(root);
return { root, chassis, wheels, frontPivots, shellMat };
}
// Exactly Five Trucks: 1 Player + 4 AI Rivals
const truckSpecs = [
{ name: "YOU", isPlayer: true, color: 0x22d3ee, x: 0, z: 40, yaw: Math.PI, bias: 0 },
{ name: "VOLT", isPlayer: false, color: 0xfacc15, x: -42, z: 0, yaw: Math.PI * 0.5, bias: -1 },
{ name: "APEX", isPlayer: false, color: 0xf97316, x: 42, z: 0, yaw: -Math.PI * 0.5, bias: 1 },
{ name: "NITRO", isPlayer: false, color: 0x4ade80, x: 0, z: -2, yaw: 0, bias: -0.6 },
{ name: "FURY", isPlayer: false, color: 0xe879f9, x: 0, z: -42, yaw: 0, bias: 0.6 }
];
const trucks = truckSpecs.map((spec, idx) => {
const model = buildCyberMonsterTruck(spec.color, spec.isPlayer);
const y0 = getTerrainHeight(spec.x, spec.z);
model.root.position.set(spec.x, y0, spec.z);
model.root.rotation.y = spec.yaw;
return {
id: idx,
name: spec.name,
isPlayer: spec.isPlayer,
color: spec.color,
model,
x: spec.x,
y: y0,
z: spec.z,
vx: 0,
vy: 0,
vz: 0,
yaw: spec.yaw,
angVel: 0,
steerVisual: 0,
wheelSpin: 0,
hp: 100,
wreckTimer: 0,
stuckTimer: 0,
reverseTimer: 0,
reverseDir: spec.bias >= 0 ? 1 : -1,
aiBias: spec.bias,
aiRetarget: idx * 0.7,
targetIdx: 0,
hitCooldown: 0
};
});
const player = trucks[0];
// Keyboard Input (WASD + Arrows, plus P for Photo Mode)
const keys = Object.create(null);
window.addEventListener("keydown", (e) => {
unlockAudio();
const code = e.code;
if (code === "KeyP" && !e.repeat) {
togglePhotoMode();
return;
}
if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Space"].includes(code)) {
e.preventDefault();
}
keys[code] = true;
});
window.addEventListener("keyup", (e) => {
keys[e.code] = false;
});
window.addEventListener("pointerdown", unlockAudio);
let rafId = null;
let lastTime = performance.now();
function togglePhotoMode() {
if (state.gameOver) return;
state.photoMode = !state.photoMode;
if (state.photoMode) {
if (rafId !== null) {
cancelAnimationFrame(rafId);
rafId = null;
}
photoScore.textContent = Math.floor(state.score).toLocaleString();
photoOverlay.classList.add("visible");
} else {
photoOverlay.classList.remove("visible");
lastTime = performance.now();
rafId = requestAnimationFrame(tick);
}
}
restartBtn.addEventListener("click", () => {
state.score = 0;
state.timeLeft = 90;
state.gameOver = false;
state.shake = 0;
overOverlay.classList.remove("visible");
trucks.forEach((t, i) => {
const s = truckSpecs[i];
t.x = s.x;
t.z = s.z;
t.y = getTerrainHeight(s.x, s.z);
t.vx = t.vy = t.vz = 0;
t.yaw = s.yaw;
t.angVel = 0;
t.hp = 100;
t.wreckTimer = 0;
t.stuckTimer = 0;
t.reverseTimer = 0;
});
syncHUD();
lastTime = performance.now();
if (rafId === null) rafId = requestAnimationFrame(tick);
});
// AI Steering with anti-clumping separation + unstuck maneuver
function computeAIControls(t, dt) {
if (t.wreckTimer > 0) return { throttle: 0, steer: 0 };
const speed = Math.hypot(t.vx, t.vz);
if (t.reverseTimer > 0) {
t.reverseTimer -= dt;
return { throttle: -0.9, steer: t.reverseDir };
}
if (speed < 2.2) {
t.stuckTimer += dt;
if (t.stuckTimer > 1.05) {
t.stuckTimer = 0;
t.reverseTimer = 0.85;
t.reverseDir = -t.reverseDir;
return { throttle: -0.9, steer: t.reverseDir };
}
} else {
t.stuckTimer = Math.max(0, t.stuckTimer - dt * 1.5);
}
// Periodically pick a distinct target (mix of player and other rivals)
t.aiRetarget -= dt;
if (t.aiRetarget <= 0) {
t.aiRetarget = 2.2 + Math.random() * 1.8;
if (Math.random() < 0.55) {
t.targetIdx = 0;
} else {
let pick = 1 + Math.floor(Math.random() * 4);
if (pick === t.id) pick = 0;
t.targetIdx = pick;
}
}
const target = trucks[t.targetIdx];
// Flank offset keeps AI rivals from converging onto a single point
const flankAngle = t.aiBias * 0.55;
let goalX = target.x + Math.cos(target.yaw + flankAngle) * 5.0;
let goalZ = target.z + Math.sin(target.yaw + flankAngle) * 5.0;
// Separation force against all other AI trucks so they never form a moving wall
let sepX = 0;
let sepZ = 0;
for (let i = 1; i < trucks.length; i++) {
if (i === t.id) continue;
const o = trucks[i];
const dx = t.x - o.x;
const dz = t.z - o.z;
const dist = Math.hypot(dx, dz);
if (dist > 0.01 && dist < 16.5) {
const weight = (16.5 - dist) / 16.5;
sepX += (dx / dist) * weight * 24;
sepZ += (dz / dist) * weight * 24;
}
}
// Wall avoidance pull toward arena interior
const centerDist = Math.hypot(t.x, t.z);
if (centerDist > ARENA_RADIUS - 14) {
sepX += (-t.x / centerDist) * 26;
sepZ += (-t.z / centerDist) * 26;
}
const dirX = goalX - t.x + sepX;
const dirZ = goalZ - t.z + sepZ;
const desiredYaw = Math.atan2(dirX, dirZ);
let diff = desiredYaw - t.yaw;
while (diff > Math.PI) diff -= Math.PI * 2;
while (diff < -Math.PI) diff += Math.PI * 2;
const steer = Math.max(-1, Math.min(1, diff * 2.2));
const throttle = Math.abs(diff) > 1.7 ? 0.55 : 0.96;
return { throttle, steer };
}
const tmpNormal = new THREE.Vector3();
const tmpUp = new THREE.Vector3(0, 1, 0);
const tmpQuat = new THREE.Quaternion();
function stepPhysics(dt) {
// Countdown clock
state.timeLeft = Math.max(0, state.timeLeft - dt);
if (state.timeLeft <= 0 && !state.gameOver) {
state.gameOver = true;
overScore.textContent = Math.floor(state.score).toLocaleString();
overOverlay.classList.add("visible");
return;
}
if (state.bannerTimer > 0) {
state.bannerTimer -= dt;
if (state.bannerTimer <= 0) eventBanner.style.opacity = "0";
}
state.shake = Math.max(0, state.shake - dt * 2.6);
// Update each truck's driving, terrain height, and arena bounds
for (let i = 0; i < trucks.length; i++) {
const t = trucks[i];
if (t.hitCooldown > 0) t.hitCooldown -= dt;
if (t.wreckTimer > 0) {
t.wreckTimer -= dt;
if (Math.random() < 0.35) {
spawnSparks(t.x, t.y + 2.1, t.z, 0xf97316, 1);
}
if (t.wreckTimer <= 0) {
t.hp = 100;
}
}
let throttle = 0;
let steer = 0;
if (t.isPlayer) {
if (keys.KeyW || keys.ArrowUp) throttle += 1;
if (keys.KeyS || keys.ArrowDown) throttle -= 1;
if (keys.KeyA || keys.ArrowLeft) steer += 1;
if (keys.KeyD || keys.ArrowRight) steer -= 1;
} else {
const ai = computeAIControls(t, dt);
throttle = ai.throttle;
steer = ai.steer;
}
const fx = Math.sin(t.yaw);
const fz = Math.cos(t.yaw);
const rx = Math.cos(t.yaw);
const rz = -Math.sin(t.yaw);
const groundY = getTerrainHeight(t.x, t.z);
const grounded = t.y <= groundY + 0.18;
const fwdSpeed = t.vx * fx + t.vz * fz;
const latSpeed = t.vx * rx + t.vz * rz;
if (grounded) {
const accel = t.wreckTimer > 0 ? 10 : (t.isPlayer ? 42 : 36);
const driveForce = throttle * accel;
t.vx += fx * driveForce * dt;
t.vz += fz * driveForce * dt;
// Lateral tire grip & drag
const latGrip = Math.exp(-5.8 * dt);
const drag = Math.exp(-1.25 * dt);
const newFwd = (t.vx * fx + t.vz * fz) * drag;
const newLat = (t.vx * rx + t.vz * rz) * latGrip;
t.vx = fx * newFwd + rx * newLat;
t.vz = fz * newFwd + rz * newLat;
// Steering scales with speed & reverses when backing up
const speedFactor = Math.min(1, Math.abs(fwdSpeed) / 7.5);
const dirSign = fwdSpeed >= -0.6 ? 1 : -1;
t.yaw += steer * 2.55 * speedFactor * dirSign * dt;
}
// Rotational impulse spin decay
t.yaw += t.angVel * dt;
t.angVel *= Math.exp(-5.5 * dt);
// Speed cap
const maxSpd = t.isPlayer ? 34 : 30;
const planarSpd = Math.hypot(t.vx, t.vz);
if (planarSpd > maxSpd) {
t.vx = (t.vx / planarSpd) * maxSpd;
t.vz = (t.vz / planarSpd) * maxSpd;
}
// Vertical gravity & hill launch
t.vy -= 28 * dt;
t.x += t.vx * dt;
t.y += t.vy * dt;
t.z += t.vz * dt;
const newGroundY = getTerrainHeight(t.x, t.z);
if (t.y <= newGroundY) {
if (t.vy < -5) {
// Suspension landing bounce
t.vy = -t.vy * 0.16;
} else {
// Follow terrain upward ramp slope smoothly
const slopeVy = (newGroundY - groundY) / Math.max(dt, 0.001);
t.vy = Math.min(12, Math.max(0, slopeVy * 0.45));
}
t.y = newGroundY;
}
// Circular Arena Wall Collision
const distFromCenter = Math.hypot(t.x, t.z);
const maxR = ARENA_RADIUS - TRUCK_RADIUS;
if (distFromCenter > maxR) {
const nx = t.x / distFromCenter;
const nz = t.z / distFromCenter;
t.x = nx * maxR;
t.z = nz * maxR;
const vn = t.vx * nx + t.vz * nz;
if (vn > 0) {
t.vx -= 1.55 * vn * nx;
t.vz -= 1.55 * vn * nz;
if (vn > 9) {
spawnSparks(t.x + nx * 2.2, t.y + 1.4, t.z + nz * 2.2, 0xfbbf24, 6);
}
}
}
// Solid Oriented-Box Obstacle Collisions (Containers & Concrete Barriers)
for (let k = 0; k < solidObstacles.length; k++) {
const box = solidObstacles[k];
const cos = Math.cos(-box.yaw);
const sin = Math.sin(-box.yaw);
const dx = t.x - box.x;
const dz = t.z - box.z;
const lx = dx * cos - dz * sin;
const lz = dx * sin + dz * cos;
const cx = Math.max(-box.hw, Math.min(box.hw, lx));
const cz = Math.max(-box.hd, Math.min(box.hd, lz));
const px = lx - cx;
const pz = lz - cz;
const d2 = px * px + pz * pz;
if (d2 < TRUCK_RADIUS * TRUCK_RADIUS && d2 > 1e-6) {
const d = Math.sqrt(d2);
const lnx = px / d;
const lnz = pz / d;
const pen = TRUCK_RADIUS - d;
const wCos = Math.cos(box.yaw);
const wSin = Math.sin(box.yaw);
const wnx = lnx * wCos - lnz * wSin;
const wnz = lnx * wSin + lnz * wCos;
t.x += wnx * pen;
t.z += wnz * pen;
const vn = t.vx * wnx + t.vz * wnz;
if (vn < 0) {
t.vx -= 1.55 * vn * wnx;
t.vz -= 1.55 * vn * wnz;
if (-vn > 8) {
spawnSparks(t.x - wnx * 2.2, t.y + 1.3, t.z - wnz * 2.2, 0xfef08a, 7);
if (t.isPlayer) playCrashSound(-vn * 0.4);
}
}
}
}
// Visual wheel & chassis alignment
t.steerVisual += (steer * 0.42 - t.steerVisual) * Math.min(1, dt * 12);
t.wheelSpin += fwdSpeed * dt * 1.05;
}
// Truck-vs-Truck Momentum-Transfer + Rotational Impulse Collisions
const restitution = 0.72;
const minDist = TRUCK_RADIUS * 2;
for (let i = 0; i < trucks.length; i++) {
for (let j = i + 1; j < trucks.length; j++) {
const a = trucks[i];
const b = trucks[j];
const dx = b.x - a.x;
const dz = b.z - a.z;
const dist = Math.hypot(dx, dz);
if (dist < minDist && dist > 1e-4 && Math.abs(a.y - b.y) < 3.2) {
const nx = dx / dist;
const nz = dz / dist;
const overlap = minDist - dist;
a.x -= nx * overlap * 0.52;
a.z -= nz * overlap * 0.52;
b.x += nx * overlap * 0.52;
b.z += nz * overlap * 0.52;
const rvx = b.vx - a.vx;
const rvz = b.vz - a.vz;
const velAlongNormal = rvx * nx + rvz * nz;
if (velAlongNormal < 0) {
const impactSpeed = -velAlongNormal;
const impulse = -(1 + restitution) * velAlongNormal * 0.5;
a.vx -= impulse * nx;
a.vz -= impulse * nz;
b.vx += impulse * nx;
b.vz += impulse * nz;
// Tangential spin torque based on heading vs collision normal
const aSpin = (Math.sin(a.yaw) * nz - Math.cos(a.yaw) * nx) * impactSpeed * 0.14;
const bSpin = (Math.sin(b.yaw) * (-nz) - Math.cos(b.yaw) * (-nx)) * impactSpeed * 0.14;
a.angVel += aSpin;
b.angVel += bSpin;
if (impactSpeed > 6.5) {
const mx = (a.x + b.x) * 0.5;
const my = Math.max(a.y, b.y) + 1.6;
const mz = (a.z + b.z) * 0.5;
spawnSparks(mx, my, mz, 0xfde047, 12);
playCrashSound(impactSpeed);
if (a.isPlayer || b.isPlayer) {
const rival = a.isPlayer ? b : a;
state.shake = Math.min(1.0, impactSpeed / 26);
if (rival.hitCooldown <= 0) {
rival.hitCooldown = 0.35;
const pts = Math.round(impactSpeed * 28);
state.score += pts;
rival.hp -= impactSpeed * 2.4;
rival.vy = Math.max(rival.vy, Math.min(7.5, impactSpeed * 0.25));
if (rival.hp <= 0 && rival.wreckTimer <= 0) {
rival.wreckTimer = 4.0;
rival.hp = 0;
state.score += 500;
showBanner("WRECKED " + rival.name + " +500!");
spawnSparks(rival.x, rival.y + 2.0, rival.z, 0xf97316, 20);
} else {
showBanner("RAM +" + pts);
}
}
}
}
}
}
}
}
// Knockable Debris Physics
for (let i = 0; i < debris.length; i++) {
const d = debris[i];
if (d.cooldown > 0) d.cooldown -= dt;
for (let j = 0; j < trucks.length; j++) {
const t = trucks[j];
const dx = d.x - t.x;
const dz = d.z - t.z;
const dist = Math.hypot(dx, dz);
const hitR = TRUCK_RADIUS + d.radius;
if (dist < hitR && dist > 1e-4 && Math.abs(d.y - t.y) < 3.0) {
const nx = dx / dist;
const nz = dz / dist;
const tSpd = Math.hypot(t.vx, t.vz);
d.x = t.x + nx * hitR;
d.z = t.z + nz * hitR;
d.vx = t.vx * 1.15 + nx * (8 + tSpd * 0.45);
d.vz = t.vz * 1.15 + nz * (8 + tSpd * 0.45);
d.vy = 6.5 + Math.min(10, tSpd * 0.35);
d.vr = (Math.random() - 0.5) * 14;
if (t.isPlayer && d.cooldown <= 0) {
d.cooldown = 0.8;
state.score += 50;
playCrashSound(5);
}
}
}
d.vy -= 26 * dt;
d.x += d.vx * dt;
d.y += d.vy * dt;
d.z += d.vz * dt;
d.vx *= Math.exp(-1.5 * dt);
d.vz *= Math.exp(-1.5 * dt);
d.rx += d.vr * dt;
d.rz += d.vr * 0.7 * dt;
const floorY = getTerrainHeight(d.x, d.z) + d.halfH;
if (d.y <= floorY) {
d.y = floorY;
if (d.vy < -3) {
d.vy = -d.vy * 0.35;
d.vr *= 0.6;
} else {
d.vy = 0;
d.vr *= Math.exp(-6 * dt);
}
}
const dr = Math.hypot(d.x, d.z);
if (dr > ARENA_RADIUS - d.radius) {
const nx = d.x / dr;
const nz = d.z / dr;
d.x = nx * (ARENA_RADIUS - d.radius);
d.z = nz * (ARENA_RADIUS - d.radius);
d.vx *= -0.5;
d.vz *= -0.5;
}
d.mesh.position.set(d.x, d.y, d.z);
d.mesh.rotation.set(d.rx, 0, d.rz);
}
// Update Truck Meshes & Terrain Tilt
for (let i = 0; i < trucks.length; i++) {
const t = trucks[i];
t.model.root.position.set(t.x, t.y, t.z);
t.model.root.rotation.y = t.yaw;
// Align chassis pitch/roll smoothly with terrain slope
getTerrainNormal(t.x, t.z, tmpNormal);
tmpQuat.setFromUnitVectors(tmpUp, tmpNormal);
// Apply world-normal tilt in truck local yaw frame
const invYaw = new THREE.Quaternion().setFromAxisAngle(tmpUp, -t.yaw);
const localTilt = invYaw.multiply(tmpQuat);
t.model.chassis.quaternion.slerp(localTilt, Math.min(1, dt * 10));
if (t.wreckTimer > 0) {
t.model.chassis.rotation.z += 0.24;
}
t.model.frontPivots.forEach((p) => { p.rotation.y = t.steerVisual; });
t.model.wheels.forEach((w) => { w.rotation.x = t.wheelSpin; });
}
// Update Sparks
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.life -= dt;
if (p.life <= 0) {
scene.remove(p.mesh);
particles.splice(i, 1);
} else {
p.vy -= 26 * dt;
p.mesh.position.x += p.vx * dt;
p.mesh.position.y += p.vy * dt;
p.mesh.position.z += p.vz * dt;
p.mesh.scale.setScalar(Math.max(0.1, p.life * 1.4));
}
}
}
function updateCrowdAndCamera(nowSec) {
// Animate 2,160 spectators cheering in waves
const arr = crowdMesh.instanceMatrix.array;
for (let i = 0; i < crowdCount; i++) {
arr[i * 16 + 13] = fanBaseY[i] + Math.abs(Math.sin(nowSec * 4.5 + fanPhase[i])) * 0.42;
}
crowdMesh.instanceMatrix.needsUpdate = true;
// Smooth Chase Camera behind player Cybertruck
const fx = Math.sin(player.yaw);
const fz = Math.cos(player.yaw);
const spd = Math.hypot(player.vx, player.vz);
const camDist = 15.5 + spd * 0.12;
const camHeight = 7.4 + spd * 0.04;
const targetCamX = player.x - fx * camDist;
const targetCamY = player.y + camHeight;
const targetCamZ = player.z - fz * camDist;
camera.position.x += (targetCamX - camera.position.x) * 0.14;
camera.position.y += (targetCamY - camera.position.y) * 0.14;
camera.position.z += (targetCamZ - camera.position.z) * 0.14;
if (state.shake > 0) {
camera.position.x += (Math.random() - 0.5) * state.shake * 1.1;
camera.position.y += (Math.random() - 0.5) * state.shake * 0.9;
}
camera.lookAt(player.x + fx * 6.0, player.y + 2.2, player.z + fz * 6.0);
}
function tick(now) {
if (state.photoMode) return;
const dt = Math.min(0.05, Math.max(0.001, (now - lastTime) / 1000));
lastTime = now;
if (!state.gameOver) {
stepPhysics(dt);
syncHUD();
}
updateCrowdAndCamera(now * 0.001);
renderer.render(scene, camera);
rafId = requestAnimationFrame(tick);
}
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
if (state.photoMode) renderer.render(scene, camera);
});
syncHUD();
updateCrowdAndCamera(0);
renderer.render(scene, camera);
rafId = requestAnimationFrame(tick);
})();
</script>
</body>
</html>
The notes
- Five trucks: Each of the four AI rivals is assigned a distinct
aiBiasflanking angle around its chosen target, a pairwise inverse-distance separation vector (sepX,sepZ) active whenever two AI trucks come within16.5units of each other, and an individualstuckTimer/reverseTimerrecovery maneuver that reverses with alternating steering whenever speed stays below2.2units/s for over a second. - Demo mode: On initialization,
const state = { score: isDemo ? 5000 : 0, timeLeft: isDemo ? 20 : 90, ... }sets the real simulationscoreandtimeLeftdirectly when the URL ends in#demo; the countdown decrement, collision scoring, HUD readout, and end-of-match trigger all read and mutate those exact fields rather than masking a separate timer or score display. - Photo mode: Pressing
Pstops both the physics step and the render loop by togglingstate.photoMode = trueand immediately callingcancelAnimationFrame(rafId), leaving the frozen WebGL framebuffer behind the overlay untilPis pressed again andrequestAnimationFrame(tick)resumes with a resetlastTime. - Collisions: Truck-to-truck impacts use circle-circle overlap resolution (
minDist = 6.0, splitting penetration0.52per truck) followed by a normal impulse-(1 + 0.72) * (vRel · n) * 0.5along the contact normal, an off-center yaw spin torque proportional to the heading-normal cross product, and relative impact speed (-vRel · n > 6.5) scaled directly into score, rival HP damage, vertical bounce, and a 4-secondwreckTimerdisable state; solid containers and barriers use exact local-space OBB-vs-circle closest-point clamping with1.55normal reflection.
Attachments
google/gemini-4-hydrogen — page