Run Detail
completedgemini-4-argonRecorded 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
105.3s
Total Tokens
18,164
Input Tokens
758
Output Tokens
17,406
Reasoning Effort
default
Est. Cost
$0.1756
Started
10/13/2026, 4:28:17 PM
OR Provider
Google
Finish Reason
stop
Generation ID
gen-1791908895-260FfBSMUwMGpANbxY2q
Turns (1)
Turn #1
758 in17,406 out18,164 total105.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
Welcome to the GIGACRUSH COLISEUM, a floodlit dirt-bowl stadium surrounded by thousands of bouncing fans where five stainless-steel polygon monster trucks launch off dirt mounds, smash through crushable cars and concrete jersey barriers, and send sparks flying in high-impact collisions.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GIGACRUSH COLISEUM - Cybertruck Monster Rally</title>
<style>
* { box-sizing: border-box; user-select: none; margin: 0; padding: 0; }
body { overflow: hidden; background: #0a0b10; font-family: 'Segoe UI', Impact, sans-serif; color: #fff; }
canvas { display: block; width: 100vw; height: 100vh; }
/* HUD */
#hud {
position: fixed; top: 0; left: 0; width: 100%; padding: 18px 28px;
display: flex; justify-content: space-between; align-items: flex-start;
pointer-events: none; z-index: 10;
background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
}
.hud-block { display: flex; flex-direction: column; }
.hud-label { font-size: 11px; letter-spacing: 3px; color: #00f0ff; text-transform: uppercase; font-weight: 700; }
#arena-name {
font-size: 28px; font-weight: 900; letter-spacing: 2px; color: #ffffff;
text-shadow: 0 0 12px #00f0ff, 2px 2px 0px #ff0055;
font-style: italic;
}
#controls-hint {
margin-top: 6px; font-size: 13px; letter-spacing: 1px; color: #cbd5e1;
background: rgba(15, 23, 42, 0.75); padding: 5px 10px; border-left: 3px solid #00f0ff;
font-family: monospace;
}
.hud-right { display: flex; gap: 36px; text-align: right; }
.stat-val {
font-size: 38px; font-weight: 900; font-family: monospace; line-height: 1;
text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}
#score-val { color: #facc15; }
#clock-val { color: #ffffff; }
/* Photo Mode Card */
#photo-overlay {
position: fixed; inset: 0; z-index: 25;
display: none; flex-direction: column; justify-content: space-between;
padding: 48px; pointer-events: none;
border: 14px solid rgba(255, 255, 255, 0.9);
background: radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%);
}
#photo-overlay.active { display: flex; }
.photo-badge {
align-self: flex-start; background: #ff0055; color: #fff;
padding: 6px 14px; font-size: 14px; font-weight: 900; letter-spacing: 3px;
text-transform: uppercase; box-shadow: 0 4px 15px rgba(255,0,85,0.5);
}
.photo-card-bottom {
background: rgba(10, 12, 18, 0.88); border-left: 6px solid #00f0ff;
padding: 24px 36px; align-self: flex-start; backdrop-filter: blur(4px);
box-shadow: 0 15px 35px rgba(0,0,0,0.8);
}
.photo-arena {
font-size: 46px; font-weight: 900; font-style: italic; letter-spacing: 3px;
color: #fff; text-shadow: 3px 3px 0 #ff0055; line-height: 1.05;
}
.photo-score {
font-size: 32px; font-weight: 800; color: #facc15; font-family: monospace;
margin-top: 8px; letter-spacing: 1px;
}
.photo-resume {
margin-top: 10px; font-size: 12px; letter-spacing: 2px; color: #94a3b8; text-transform: uppercase;
}
/* End of Round Banner */
#gameover-overlay {
position: fixed; inset: 0; z-index: 20;
display: none; flex-direction: column; align-items: center; justify-content: center;
background: rgba(5, 7, 12, 0.82); backdrop-filter: blur(4px);
}
#gameover-overlay.active { display: flex; }
.go-title { font-size: 64px; font-weight: 900; font-style: italic; color: #ff0055; letter-spacing: 4px; text-shadow: 0 0 20px rgba(255,0,85,0.6); }
.go-sub { font-size: 28px; color: #facc15; font-family: monospace; margin: 12px 0 28px; }
#restart-btn {
pointer-events: auto; cursor: pointer; background: #00f0ff; color: #05070c;
border: none; padding: 14px 34px; font-size: 18px; font-weight: 900;
letter-spacing: 2px; text-transform: uppercase; transform: skewX(-10deg);
transition: transform 0.15s, background 0.15s;
}
#restart-btn:hover { background: #fff; transform: skewX(-10deg) scale(1.06); }
/* Floating hit popup */
#hit-popup {
position: fixed; top: 28%; left: 50%; transform: translate(-50%, -50%);
font-size: 32px; font-weight: 900; font-style: italic; color: #00f0ff;
text-shadow: 2px 2px 0 #000, 0 0 15px #00f0ff;
pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 15;
}
</style>
</head>
<body>
<div id="hud">
<div class="hud-block">
<span class="hud-label">Monster Truck Rally Venue</span>
<div id="arena-name">GIGACRUSH COLISEUM</div>
<div id="controls-hint">DRIVE: [WASD] or [ARROW KEYS] | [SPACE] BOOST | [P] PHOTO MODE</div>
</div>
<div class="hud-right">
<div class="hud-block">
<span class="hud-label">SCORE</span>
<div id="score-val" class="stat-val">0</div>
</div>
<div class="hud-block">
<span class="hud-label">CLOCK</span>
<div id="clock-val" class="stat-val">01:30</div>
</div>
</div>
</div>
<div id="hit-popup">SMASH! +250</div>
<div id="photo-overlay">
<div class="photo-badge">PHOTO MODE // SIMULATION PAUSED</div>
<div class="photo-card-bottom">
<div class="photo-arena">GIGACRUSH COLISEUM</div>
<div class="photo-score">SCORE: <span id="photo-score-val">0</span></div>
<div class="photo-resume">Press [P] to resume rally</div>
</div>
</div>
<div id="gameover-overlay">
<div class="go-title">TIME EXPIRED!</div>
<div class="go-sub" id="final-score-text">FINAL SCORE: 0</div>
<button id="restart-btn">RUN IT BACK [R]</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(() => {
'use strict';
const ARENA_NAME = "GIGACRUSH COLISEUM";
const ARENA_RADIUS = 88;
// --- REAL GAME STATE ---
const isDemo = window.location.hash === '#demo';
const gameState = {
arenaName: ARENA_NAME,
score: isDemo ? 5000 : 0,
timeRemaining: isDemo ? 20 : 90,
photoMode: false,
gameOver: false
};
// --- DOM ELEMENTS ---
const scoreEl = document.getElementById('score-val');
const clockEl = document.getElementById('clock-val');
const photoOverlay = document.getElementById('photo-overlay');
const photoScoreEl = document.getElementById('photo-score-val');
const gameoverOverlay = document.getElementById('gameover-overlay');
const finalScoreText = document.getElementById('final-score-text');
const restartBtn = document.getElementById('restart-btn');
const hitPopup = document.getElementById('hit-popup');
let popupTimer = null;
function showPopup(text, color = '#00f0ff') {
hitPopup.textContent = text;
hitPopup.style.color = color;
hitPopup.style.opacity = '1';
if (popupTimer) clearTimeout(popupTimer);
popupTimer = setTimeout(() => { hitPopup.style.opacity = '0'; }, 750);
}
function formatClock(sec) {
const s = Math.max(0, Math.ceil(sec));
const m = Math.floor(s / 60);
const rem = s % 60;
return `${String(m).padStart(2, '0')}:${String(rem).padStart(2, '0')}`;
}
function updateHUD() {
scoreEl.textContent = Math.floor(gameState.score);
clockEl.textContent = formatClock(gameState.timeRemaining);
clockEl.style.color = gameState.timeRemaining <= 10 ? '#ff0055' : '#ffffff';
}
updateHUD();
// --- WEB AUDIO SYNTHESIZER (No external audio assets) ---
class RallyAudio {
constructor() {
this.ctx = null;
}
init() {
if (this.ctx) return;
const AudioCtx = window.AudioContext || window.webkitAudioContext;
if (AudioCtx) this.ctx = new AudioCtx();
}
crash(intensity = 1) {
if (!this.ctx) return;
const now = this.ctx.currentTime;
const dur = Math.min(0.45, 0.15 + intensity * 0.18);
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) * Math.exp(-i / (this.ctx.sampleRate * 0.12));
}
const noise = this.ctx.createBufferSource();
noise.buffer = buffer;
const filter = this.ctx.createBiquadFilter();
filter.type = 'lowpass';
filter.frequency.setValueAtTime(320 + intensity * 250, now);
const gain = this.ctx.createGain();
gain.gain.setValueAtTime(Math.min(0.4, 0.12 + intensity * 0.2), now);
gain.gain.exponentialRampToValueAtTime(0.01, now + dur);
noise.connect(filter);
filter.connect(gain);
gain.connect(this.ctx.destination);
noise.start(now);
}
}
const sound = new RallyAudio();
// --- THREE.JS SCENE SETUP ---
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x090b12);
scene.fog = new THREE.FogExp2(0x090b12, 0.0038);
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.5, 450);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
if (gameState.photoMode) renderer.render(scene, camera);
});
// --- LIGHTING ---
const hemiLight = new THREE.HemisphereLight(0x99bbff, 0x3d2817, 0.65);
scene.add(hemiLight);
const dirLight = new THREE.DirectionalLight(0xfff6e5, 1.15);
dirLight.position.set(45, 95, 35);
dirLight.castShadow = true;
dirLight.shadow.mapSize.width = 2048;
dirLight.shadow.mapSize.height = 2048;
dirLight.shadow.camera.near = 10;
dirLight.shadow.camera.far = 240;
const d = 105;
dirLight.shadow.camera.left = -d;
dirLight.shadow.camera.right = d;
dirLight.shadow.camera.top = d;
dirLight.shadow.camera.bottom = -d;
scene.add(dirLight);
// --- PROCEDURAL DIRT FLOOR ---
function createDirtTexture() {
const c = document.createElement('canvas');
c.width = 512; c.height = 512;
const ctx = c.getContext('2d');
ctx.fillStyle = '#4a3525';
ctx.fillRect(0, 0, 512, 512);
for (let i = 0; i < 18000; i++) {
ctx.fillStyle = Math.random() > 0.5 ? 'rgba(30,18,10,0.22)' : 'rgba(110,80,55,0.18)';
const s = 2 + Math.random() * 5;
ctx.fillRect(Math.random() * 512, Math.random() * 512, s, s);
}
const tex = new THREE.CanvasTexture(c);
tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
tex.repeat.set(16, 16);
return tex;
}
const floorGeo = new THREE.CircleGeometry(ARENA_RADIUS + 4, 64);
floorGeo.rotateX(-Math.PI / 2);
const floorMat = new THREE.MeshStandardMaterial({
map: createDirtTexture(),
roughness: 0.92,
metalness: 0.05
});
const floorMesh = new THREE.Mesh(floorGeo, floorMat);
floorMesh.receiveShadow = true;
scene.add(floorMesh);
// Paint a center logo ring on the dirt
const ringGeo = new THREE.RingGeometry(14, 16, 48);
ringGeo.rotateX(-Math.PI / 2);
const ringMat = new THREE.MeshBasicMaterial({ color: 0x00f0ff, side: THREE.DoubleSide, transparent: true, opacity: 0.35 });
const ringMesh = new THREE.Mesh(ringGeo, ringMat);
ringMesh.position.y = 0.05;
scene.add(ringMesh);
// --- STADIUM WALLS, TIERS & 360-DEGREE CROWD ---
const wallMat = new THREE.MeshStandardMaterial({ color: 0x1e2430, roughness: 0.7 });
const barrierWall = new THREE.Mesh(
new THREE.CylinderGeometry(ARENA_RADIUS + 2, ARENA_RADIUS, 5.5, 64, 1, true),
wallMat
);
barrierWall.position.y = 2.75;
scene.add(barrierWall);
// Hazard stripe along the inside wall
const trimRing = new THREE.Mesh(
new THREE.CylinderGeometry(ARENA_RADIUS + 0.2, ARENA_RADIUS + 0.2, 0.8, 64, 1, true),
new THREE.MeshBasicMaterial({ color: 0xff0055, side: THREE.DoubleSide })
);
trimRing.position.y = 4.5;
scene.add(trimRing);
// Tiered concrete bleachers all around
const tierMat = new THREE.MeshStandardMaterial({ color: 0x283040, roughness: 0.85 });
const numTiers = 6;
for (let t = 0; t < numTiers; t++) {
const rInner = ARENA_RADIUS + 5 + t * 5.2;
const yHeight = 5.5 + t * 3.4;
const step = new THREE.Mesh(
new THREE.CylinderGeometry(rInner + 5.2, rInner, 3.6, 64, 1, true),
tierMat
);
step.position.y = yHeight;
scene.add(step);
}
// Stadium floodlight towers
for (let i = 0; i < 8; i++) {
const ang = (i / 8) * Math.PI * 2;
const r = ARENA_RADIUS + 39;
const pole = new THREE.Mesh(
new THREE.CylinderGeometry(0.8, 1.2, 48, 8),
new THREE.MeshStandardMaterial({ color: 0x475569 })
);
pole.position.set(Math.cos(ang) * r, 38, Math.sin(ang) * r);
scene.add(pole);
const rig = new THREE.Mesh(
new THREE.BoxGeometry(8, 3.5, 1.5),
new THREE.MeshBasicMaterial({ color: 0xffffff })
);
rig.position.set(Math.cos(ang) * (r - 1.5), 60, Math.sin(ang) * (r - 1.5));
rig.lookAt(0, 0, 0);
scene.add(rig);
}
// Instanced Crowd in the stands all the way round
const CROWD_COUNT = 2600;
const fanGeo = new THREE.BoxGeometry(0.95, 1.85, 0.95);
const fanMat = new THREE.MeshLambertMaterial({ color: 0xffffff });
const crowdInst = new THREE.InstancedMesh(fanGeo, fanMat, CROWD_COUNT);
crowdInst.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
scene.add(crowdInst);
const fanData = [];
const palette = [0xff0055, 0x00f0ff, 0xfacc15, 0x22c55e, 0xa855f7, 0xf97316, 0xffffff, 0x3b82f6];
const tempColor = new THREE.Color();
const dummy = new THREE.Object3D();
let fanIdx = 0;
for (let t = 0; t < numTiers; t++) {
const r = ARENA_RADIUS + 7.2 + t * 5.2;
const baseY = 7.4 + t * 3.4;
const fansInRow = Math.floor((2 * Math.PI * r) / 1.85);
for (let j = 0; j < fansInRow && fanIdx < CROWD_COUNT; j++) {
const angle = (j / fansInRow) * Math.PI * 2 + (Math.random() * 0.02);
const x = Math.cos(angle) * r;
const z = Math.sin(angle) * r;
const phase = Math.random() * Math.PI * 2;
const speed = 5 + Math.random() * 6;
fanData.push({ x, baseY, z, angle, phase, speed });
dummy.position.set(x, baseY, z);
dummy.rotation.set(0, -angle - Math.PI / 2, 0);
dummy.updateMatrix();
crowdInst.setMatrixAt(fanIdx, dummy.matrix);
tempColor.setHex(palette[fanIdx % palette.length]);
crowdInst.setColorAt(fanIdx, tempColor);
fanIdx++;
}
}
crowdInst.instanceMatrix.needsUpdate = true;
if (crowdInst.instanceColor) crowdInst.instanceColor.needsUpdate = true;
function animateCrowd(time) {
for (let i = 0; i < fanData.length; i++) {
const f = fanData[i];
const hop = Math.abs(Math.sin(time * f.speed + f.phase)) * 0.65;
dummy.position.set(f.x, f.baseY + hop, f.z);
dummy.rotation.set(0, -f.angle - Math.PI / 2, 0);
dummy.updateMatrix();
crowdInst.setMatrixAt(i, dummy.matrix);
}
crowdInst.instanceMatrix.needsUpdate = true;
}
// --- OBSTACLES: 3 DISTINCT TYPES ON THE FLOOR ---
// Type 1: Artificial Dirt Hills / Jumps (elevates trucks & launches them)
// Type 2: Crushable Junk Cars (deform/flatten when run over or rammed, award score)
// Type 3: Heavy Concrete Jersey Barriers & Boulders (knockable physics props on the floor)
const hills = [];
const obstacles = []; // Types 2 & 3
// 1) Artificial Dirt Hills
const hillConfigs = [
{ x: 0, z: 0, r: 14, h: 3.6 },
{ x: -34, z: -28, r: 12, h: 3.1 },
{ x: 34, z: -28, r: 12, h: 3.1 },
{ x: -34, z: 28, r: 12, h: 3.1 },
{ x: 34, z: 28, r: 12, h: 3.1 },
{ x: 0, z: -52, r: 11, h: 2.8 },
{ x: 0, z: 52, r: 11, h: 2.8 }
];
const moundMat = new THREE.MeshStandardMaterial({
color: 0x5c4028,
roughness: 0.95
});
hillConfigs.forEach(cfg => {
const geo = new THREE.ConeGeometry(cfg.r, cfg.h, 24);
// Flatten top vertices slightly for a tabletop monster-truck ramp feel
const pos = geo.attributes.position;
for (let i = 0; i < pos.count; i++) {
if (pos.getY(i) > 0) {
pos.setX(i, pos.getX(i) + (Math.random() - 0.5) * 0.4);
}
}
geo.computeVertexNormals();
const mesh = new THREE.Mesh(geo, moundMat);
mesh.position.set(cfg.x, cfg.h * 0.45, cfg.z);
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
hills.push(cfg);
});
function getGroundHeightAndNormal(x, z) {
let maxH = 0;
let nx = 0, ny = 1, nz = 0;
for (let i = 0; i < hills.length; i++) {
const h = hills[i];
const dx = x - h.x;
const dz = z - h.z;
const dist = Math.hypot(dx, dz);
if (dist < h.r) {
const t = 1 - dist / h.r;
// Smooth cosine bell profile
const elev = h.h * 0.9 * (0.5 - 0.5 * Math.cos(t * Math.PI));
if (elev > maxH) {
maxH = elev;
const slope = (h.h * 0.9 * 0.5 * Math.PI / h.r) * Math.sin(t * Math.PI);
if (dist > 0.001) {
nx = (dx / dist) * slope;
nz = (dz / dist) * slope;
const len = Math.hypot(nx, 1, nz);
nx /= len; ny = 1 / len; nz /= len;
}
}
}
}
return { y: maxH, nx, ny, nz };
}
// 2) Crushable Junk Cars
function createCrushCar(x, z, rotY, colorHex) {
const group = new THREE.Group();
const bodyMat = new THREE.MeshStandardMaterial({ color: colorHex, roughness: 0.5, metalness: 0.3 });
const cabinMat = new THREE.MeshStandardMaterial({ color: 0x1e293b, roughness: 0.3 });
const lower = new THREE.Mesh(new THREE.BoxGeometry(4.4, 1.0, 2.1), bodyMat);
lower.position.y = 0.6;
lower.castShadow = true; lower.receiveShadow = true;
group.add(lower);
const upper = new THREE.Mesh(new THREE.BoxGeometry(2.3, 0.85, 1.85), cabinMat);
upper.position.set(-0.2, 1.4, 0);
upper.castShadow = true;
group.add(upper);
const baseH = getGroundHeightAndNormal(x, z).y;
group.position.set(x, baseH, z);
group.rotation.y = rotY;
scene.add(group);
obstacles.push({
type: 'crushcar',
mesh: group,
x, z,
vx: 0, vz: 0,
radius: 2.3,
crushed: false,
crushScale: 1.0
});
}
const carColors = [0xdc2626, 0x2563eb, 0x16a34a, 0xd97706, 0x9333ea, 0x0891b2];
const carSpots = [
[-18, 0, 0.3], [-18, 3.2, 0.3], [-18, -3.2, 0.3],
[18, 0, -0.3], [18, 3.2, -0.3], [18, -3.2, -0.3],
[0, -24, Math.PI / 2], [3.2, -24, Math.PI / 2], [-3.2, -24, Math.PI / 2],
[0, 24, -Math.PI / 2], [3.2, 24, -Math.PI / 2], [-3.2, 24, -Math.PI / 2]
];
carSpots.forEach((s, idx) => {
createCrushCar(s[0], s[1], s[2], carColors[idx % carColors.length]);
});
// 3) Heavy Jersey Barriers & Debris Boulders (knockable physical obstacles)
const barrierMat = new THREE.MeshStandardMaterial({ color: 0x94a3b8, roughness: 0.85 });
const stripeMat = new THREE.MeshBasicMaterial({ color: 0xf97316 });
function createJerseyBarrier(x, z, rotY) {
const group = new THREE.Group();
const block = new THREE.Mesh(new THREE.BoxGeometry(3.8, 1.35, 1.2), barrierMat);
block.position.y = 0.68;
block.castShadow = true; block.receiveShadow = true;
group.add(block);
const stripe = new THREE.Mesh(new THREE.BoxGeometry(3.85, 0.3, 1.25), stripeMat);
stripe.position.y = 0.95;
group.add(stripe);
const baseH = getGroundHeightAndNormal(x, z).y;
group.position.set(x, baseH, z);
group.rotation.y = rotY;
scene.add(group);
obstacles.push({
type: 'barrier',
mesh: group,
x, z,
vx: 0, vz: 0,
radius: 2.0,
hitCooldown: 0
});
}
// 4) Boulders / Scrap Debris Cubes (4th distinct visual prop for extra floor mayhem)
const boulderMat = new THREE.MeshStandardMaterial({ color: 0x64748b, roughness: 0.9, flatShading: true });
function createScrapBoulder(x, z) {
const mesh = new THREE.Mesh(new THREE.DodecahedronGeometry(1.55, 0), boulderMat);
const baseH = getGroundHeightAndNormal(x, z).y;
mesh.position.set(x, baseH + 1.2, z);
mesh.castShadow = true; mesh.receiveShadow = true;
scene.add(mesh);
obstacles.push({
type: 'boulder',
mesh,
x, z,
vx: 0, vz: 0,
radius: 1.65,
hitCooldown: 0
});
}
for (let i = 0; i < 10; i++) {
const ang = (i / 10) * Math.PI * 2 + 0.2;
const rad = 46;
createJerseyBarrier(Math.cos(ang) * rad, Math.sin(ang) * rad, -ang);
}
for (let i = 0; i < 8; i++) {
const ang = (i / 8) * Math.PI * 2 + 0.5;
const rad = 64;
createScrapBoulder(Math.cos(ang) * rad, Math.sin(ang) * rad);
}
// --- CYBERTRUCK MONSTER TRUCK BUILDER ---
function createCybertruckMesh(accentHex, isPlayer) {
const root = new THREE.Group();
const bodyGroup = new THREE.Group();
root.add(bodyGroup);
// Custom Angular Stainless Steel Wedge Geometry
const wedgeGeo = new THREE.BufferGeometry();
// Dimensions: Length 6.2 (z from -3.1 to +3.1), Width 3.0 (x from -1.5 to 1.5)
const v = [
// Front bumper bottom & nose
-1.45, 0.0, 3.1, 1.45, 0.0, 3.1,
-1.48, 0.75, 3.2, 1.48, 0.75, 3.2,
// Roof apex
-1.30, 1.95, 0.35, 1.30, 1.95, 0.35,
// Tailgate top & rear bottom
-1.45, 1.15, -3.1, 1.45, 1.15, -3.1,
-1.45, 0.0, -3.1, 1.45, 0.0, -3.1
];
const indices = [
0,1,3, 0,3,2, // Lower front valence
2,3,5, 2,5,4, // Sloped windshield / hood
4,5,7, 4,7,6, // Tonneau fastback roof
6,7,9, 6,9,8, // Rear tailgate
0,8,9, 0,9,1, // Bottom plate
// Left side (-X)
0,2,4, 0,4,6, 0,6,8,
// Right side (+X)
1,5,3, 1,7,5, 1,9,7
];
wedgeGeo.setAttribute('position', new THREE.Float32BufferAttribute(v, 3));
wedgeGeo.setIndex(indices);
wedgeGeo.computeVertexNormals();
const steelMat = new THREE.MeshStandardMaterial({
color: isPlayer ? 0xd8dee9 : 0xb8c2cc,
metalness: 0.82,
roughness: 0.25,
flatShading: true
});
const chassisMesh = new THREE.Mesh(wedgeGeo, steelMat);
chassisMesh.position.y = 1.65;
chassisMesh.castShadow = true;
chassisMesh.receiveShadow = true;
bodyGroup.add(chassisMesh);
// Tinted Armor Glass Canopy Inset
const glassGeo = new THREE.BufferGeometry();
const gv = [
-1.32, 0.82, 2.75, 1.32, 0.82, 2.75,
-1.22, 1.98, 0.35, 1.22, 1.98, 0.35,
-1.30, 1.32, -2.2, 1.30, 1.32, -2.2
];
glassGeo.setAttribute('position', new THREE.Float32BufferAttribute(gv, 3));
glassGeo.setIndex([0,1,3, 0,3,2, 2,3,5, 2,5,4]);
glassGeo.computeVertexNormals();
const glassMesh = new THREE.Mesh(
glassGeo,
new THREE.MeshStandardMaterial({ color: 0x0f172a, roughness: 0.1, metalness: 0.9, flatShading: true })
);
glassMesh.position.y = 1.66;
bodyGroup.add(glassMesh);
// Front Cyber Lightbar
const frontBar = new THREE.Mesh(
new THREE.BoxGeometry(2.98, 0.14, 0.15),
new THREE.MeshBasicMaterial({ color: 0x00f0ff })
);
frontBar.position.set(0, 2.40, 3.16);
bodyGroup.add(frontBar);
// Rear Red Lightbar
const rearBar = new THREE.Mesh(
new THREE.BoxGeometry(2.92, 0.14, 0.15),
new THREE.MeshBasicMaterial({ color: 0xff0044 })
);
rearBar.position.set(0, 2.72, -3.08);
bodyGroup.add(rearBar);
// Heavy Monster Suspension Frame & Neon Underglow Accent
const underFrame = new THREE.Mesh(
new THREE.BoxGeometry(2.2, 0.75, 4.6),
new THREE.MeshStandardMaterial({ color: accentHex, roughness: 0.4, metalness: 0.5 })
);
underFrame.position.y = 1.35;
bodyGroup.add(underFrame);
// Roof Identifier Fin / Lightbar so Player & AI Rivals are distinct
const roofBeacon = new THREE.Mesh(
new THREE.BoxGeometry(1.7, 0.18, 0.45),
new THREE.MeshBasicMaterial({ color: accentHex })
);
roofBeacon.position.set(0, 3.68, 0.25);
bodyGroup.add(roofBeacon);
// Oversized Monster Truck Tires (4)
const wheelGeo = new THREE.CylinderGeometry(1.32, 1.32, 1.25, 18);
wheelGeo.rotateZ(Math.PI / 2);
const tireMat = new THREE.MeshStandardMaterial({ color: 0x141619, roughness: 0.9, flatShading: true });
const rimGeo = new THREE.CylinderGeometry(0.68, 0.68, 1.30, 10);
rimGeo.rotateZ(Math.PI / 2);
const rimMat = new THREE.MeshStandardMaterial({ color: accentHex, metalness: 0.6, roughness: 0.3 });
const wheels = [];
const wheelOffsets = [
[-1.95, 1.32, 2.15],
[ 1.95, 1.32, 2.15],
[-1.95, 1.32, -2.15],
[ 1.95, 1.32, -2.15]
];
wheelOffsets.forEach(off => {
const wGroup = new THREE.Group();
const tire = new THREE.Mesh(wheelGeo, tireMat);
tire.castShadow = true;
const rim = new THREE.Mesh(rimGeo, rimMat);
wGroup.add(tire, rim);
wGroup.position.set(off[0], off[1], off[2]);
root.add(wGroup);
wheels.push(wGroup);
});
scene.add(root);
return { root, bodyGroup, chassisMesh, steelMat, wheels };
}
// --- EXACTLY FIVE TRUCKS (1 Player + 4 AI Rivals) ---
const trucks = [];
const rivalConfigs = [
{ isPlayer: true, name: 'CYBER-ONE', color: 0x00f0ff, x: 0, z: 38, angle: Math.PI, laneBias: 0, aggressiveness: 1.0 },
{ isPlayer: false, name: 'VOLT-REX', color: 0xff0055, x: -38, z: 0, angle: Math.PI / 2, laneBias: -0.55, aggressiveness: 1.05 },
{ isPlayer: false, name: 'GIGA-BEAST', color: 0xfacc15, x: 38, z: 0, angle: -Math.PI / 2, laneBias: 0.55, aggressiveness: 0.95 },
{ isPlayer: false, name: 'TESLA-CRUSH', color: 0x22c55e, x: -24, z: -38, angle: 0, laneBias: -0.95, aggressiveness: 0.90 },
{ isPlayer: false, name: 'STAR-SMASH', color: 0xa855f7, x: 24, z: -38, angle: 0, laneBias: 0.95, aggressiveness: 1.0 }
];
rivalConfigs.forEach((cfg, index) => {
const visuals = createCybertruckMesh(cfg.color, cfg.isPlayer);
trucks.push({
id: index,
name: cfg.name,
isPlayer: cfg.isPlayer,
color: cfg.color,
mesh: visuals.root,
bodyGroup: visuals.bodyGroup,
steelMat: visuals.steelMat,
wheels: visuals.wheels,
x: cfg.x,
y: 0,
z: cfg.z,
vx: 0,
vy: 0,
vz: 0,
angle: cfg.angle,
angVel: 0,
radius: 3.35,
mass: cfg.isPlayer ? 1.15 : 1.0,
wreckTimer: 0,
flashTimer: 0,
grounded: true,
// AI anti-clumping state
laneBias: cfg.laneBias,
aggressiveness: cfg.aggressiveness,
aiMode: index % 2 === 0 ? 'hunt' : 'roam',
aiTimer: 2 + index * 1.3,
waypointX: (Math.random() - 0.5) * 80,
waypointZ: (Math.random() - 0.5) * 80,
targetTruckId: 0
});
});
const playerTruck = trucks[0];
// --- SPARK & DEBRIS PARTICLE SYSTEM ---
const particles = [];
const sparkGeo = new THREE.BoxGeometry(0.42, 0.42, 0.42);
function spawnCollisionSparks(x, y, z, colorHex, count = 18) {
for (let i = 0; i < count; i++) {
const mat = new THREE.MeshBasicMaterial({
color: i % 2 === 0 ? 0xfacc15 : colorHex
});
const m = new THREE.Mesh(sparkGeo, mat);
m.position.set(x, y + 1.5, z);
const ang = Math.random() * Math.PI * 2;
const spd = 8 + Math.random() * 24;
scene.add(m);
particles.push({
mesh: m,
vx: Math.cos(ang) * spd,
vy: 6 + Math.random() * 18,
vz: Math.sin(ang) * spd,
life: 0.45 + Math.random() * 0.35
});
}
}
function updateParticles(dt) {
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.life -= dt;
if (p.life <= 0) {
scene.remove(p.mesh);
p.mesh.material.dispose();
particles.splice(i, 1);
continue;
}
p.vy -= 36 * dt;
p.mesh.position.x += p.vx * dt;
p.mesh.position.y += p.vy * dt;
p.mesh.position.z += p.vz * dt;
p.mesh.rotation.x += 10 * dt;
p.mesh.rotation.y += 12 * dt;
if (p.mesh.position.y < 0.2) {
p.mesh.position.y = 0.2;
p.vy *= -0.45;
}
}
}
// --- KEYBOARD INPUT & PHOTO MODE / RESTART ---
const keys = {};
function togglePhotoMode() {
if (gameState.gameOver) return;
gameState.photoMode = !gameState.photoMode;
if (gameState.photoMode) {
photoScoreEl.textContent = Math.floor(gameState.score);
photoOverlay.classList.add('active');
} else {
photoOverlay.classList.remove('active');
lastFrameTime = performance.now();
}
}
function resetGame() {
const demoNow = window.location.hash === '#demo';
gameState.score = demoNow ? 5000 : 0;
gameState.timeRemaining = demoNow ? 20 : 90;
gameState.gameOver = false;
gameState.photoMode = false;
photoOverlay.classList.remove('active');
gameoverOverlay.classList.remove('active');
trucks.forEach((t, i) => {
const cfg = rivalConfigs[i];
t.x = cfg.x; t.z = cfg.z; t.y = 0;
t.vx = 0; t.vy = 0; t.vz = 0;
t.angle = cfg.angle;
t.wreckTimer = 0;
t.bodyGroup.rotation.set(0, 0, 0);
});
obstacles.forEach(o => {
if (o.type === 'crushcar') {
o.crushed = false;
o.crushScale = 1.0;
o.mesh.scale.set(1, 1, 1);
}
});
updateHUD();
lastFrameTime = performance.now();
}
restartBtn.addEventListener('click', resetGame);
window.addEventListener('keydown', (e) => {
sound.init();
const code = e.code;
keys[code] = true;
if (code === 'KeyP') {
e.preventDefault();
togglePhotoMode();
} else if (code === 'KeyR' && gameState.gameOver) {
resetGame();
}
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space'].includes(code)) {
e.preventDefault();
}
});
window.addEventListener('keyup', (e) => {
keys[e.code] = false;
});
// React to URL hash changes dynamically if someone appends #demo
window.addEventListener('hashchange', () => {
resetGame();
});
// --- SIMULATION & PHYSICS STEP ---
let screenShake = 0;
function updatePhysics(dt) {
if (gameState.gameOver) return;
// 1. Update game clock
gameState.timeRemaining -= dt;
if (gameState.timeRemaining <= 0) {
gameState.timeRemaining = 0;
gameState.gameOver = true;
finalScoreText.textContent = `FINAL SCORE: ${Math.floor(gameState.score)}`;
gameoverOverlay.classList.add('active');
updateHUD();
return;
}
// 2. Update each of the 5 trucks
for (let i = 0; i < trucks.length; i++) {
const t = trucks[i];
const prevGround = getGroundHeightAndNormal(t.x, t.z);
const forwardX = Math.sin(t.angle);
const forwardZ = Math.cos(t.angle);
let throttle = 0;
let steer = 0;
let boost = 1.0;
if (t.wreckTimer > 0) {
t.wreckTimer -= dt;
// Visually spin/roll the truck body while in wreck state
t.bodyGroup.rotation.z = Math.sin(t.wreckTimer * 18) * 0.55;
t.bodyGroup.rotation.x = Math.cos(t.wreckTimer * 14) * 0.35;
} else {
t.bodyGroup.rotation.z *= 0.85;
t.bodyGroup.rotation.x *= 0.85;
if (t.isPlayer) {
if (keys['KeyW'] || keys['ArrowUp']) throttle += 1;
if (keys['KeyS'] || keys['ArrowDown']) throttle -= 0.75;
if (keys['KeyA'] || keys['ArrowLeft']) steer += 1;
if (keys['KeyD'] || keys['ArrowRight']) steer -= 1;
if (keys['Space']) boost = 1.38;
} else {
// AI RIVAL LOGIC WITH SEPARATION & ROLE CYCLING
t.aiTimer -= dt;
if (t.aiTimer <= 0) {
t.aiTimer = 2.5 + Math.random() * 3.0;
// Alternate between hunting a truck and charging across arena hills/cars
if (Math.random() < 0.62) {
t.aiMode = 'hunt';
// Pick either player or another rival so all 4 don't dogpile one spot
t.targetTruckId = (Math.random() < 0.55) ? 0 : ((t.id + 1 + Math.floor(Math.random() * 3)) % trucks.length);
} else {
t.aiMode = 'roam';
const ang = Math.random() * Math.PI * 2;
const rad = 15 + Math.random() * (ARENA_RADIUS - 28);
t.waypointX = Math.cos(ang) * rad;
t.waypointZ = Math.sin(ang) * rad;
}
}
let goalX = t.waypointX;
let goalZ = t.waypointZ;
if (t.aiMode === 'hunt') {
const target = trucks[t.targetTruckId];
// Offset target approach vector by AI's unique laneBias to flank rather than clump
const perpX = -Math.cos(target.angle) * t.laneBias * 12;
const perpZ = Math.sin(target.angle) * t.laneBias * 12;
goalX = target.x + target.vx * 0.35 + perpX;
goalZ = target.z + target.vz * 0.35 + perpZ;
}
// Boid-style short-range separation from other AI rivals to prevent clumping into a wall
let sepX = 0, sepZ = 0;
for (let j = 1; j < trucks.length; j++) {
if (j === i) continue;
const other = trucks[j];
const dx = t.x - other.x;
const dz = t.z - other.z;
const dSq = dx * dx + dz * dz;
if (dSq < 320 && dSq > 0.01) { // within ~18 units
const d = Math.sqrt(dSq);
const push = (18 - d) / 18;
sepX += (dx / d) * push * 26;
sepZ += (dz / d) * push * 26;
}
}
// Keep away from outer stadium wall
const distFromCenter = Math.hypot(t.x, t.z);
if (distFromCenter > ARENA_RADIUS - 18) {
sepX -= (t.x / distFromCenter) * 35;
sepZ -= (t.z / distFromCenter) * 35;
}
const desiredX = (goalX - t.x) + sepX;
const desiredZ = (goalZ - t.z) + sepZ;
const desiredAngle = Math.atan2(desiredX, desiredZ);
let diff = desiredAngle - t.angle;
while (diff > Math.PI) diff -= Math.PI * 2;
while (diff < -Math.PI) diff += Math.PI * 2;
steer = Math.max(-1, Math.min(1, diff * 2.2));
throttle = Math.abs(diff) > 2.1 ? -0.6 : 0.95 * t.aggressiveness;
}
}
// Flash decay on hit
if (t.flashTimer > 0) {
t.flashTimer -= dt;
t.steelMat.emissive.setHex(t.flashTimer > 0 ? 0xff0055 : 0x000000);
}
// Apply Acceleration & Steering
const accel = 58 * throttle * boost;
t.vx += forwardX * accel * dt;
t.vz += forwardZ * accel * dt;
const horizSpeed = Math.hypot(t.vx, t.vz);
const forwardDot = t.vx * forwardX + t.vz * forwardZ;
const dirSign = forwardDot >= -0.5 ? 1 : -1;
const steerFactor = Math.min(1, horizSpeed / 6 + 0.35);
t.angle += steer * 2.75 * steerFactor * dirSign * dt;
// Lateral tire grip + rolling drag
const rightX = Math.cos(t.angle);
const rightZ = -Math.sin(t.angle);
const lateralVel = t.vx * rightX + t.vz * rightZ;
t.vx -= rightX * lateralVel * Math.min(1, 5.5 * dt);
t.vz -= rightZ * lateralVel * Math.min(1, 5.5 * dt);
const drag = Math.pow(0.28, dt);
t.vx *= drag;
t.vz *= drag;
// Integrate Horizontal Position
t.x += t.vx * dt;
t.z += t.vz * dt;
// Ground height / Ramp Launch Physics
const nextGround = getGroundHeightAndNormal(t.x, t.z);
const slopeRise = (nextGround.y - prevGround.y) / Math.max(0.001, dt);
if (t.y <= nextGround.y + 0.08) {
t.y = nextGround.y;
// Launch off hills when cresting fast
if (slopeRise > 1.5 && horizSpeed > 18) {
t.vy = Math.min(22, slopeRise * 0.95);
t.grounded = false;
} else {
t.vy = Math.max(0, t.vy);
t.grounded = true;
}
} else {
t.vy -= 34 * dt; // Gravity
t.grounded = false;
}
t.y += t.vy * dt;
if (t.y < nextGround.y) {
t.y = nextGround.y;
t.vy = 0;
t.grounded = true;
}
// Stadium Perimeter Wall Collision
const distCenter = Math.hypot(t.x, t.z);
const maxR = ARENA_RADIUS - t.radius - 0.5;
if (distCenter > maxR) {
const nx = t.x / distCenter;
const nz = t.z / distCenter;
t.x = nx * maxR;
t.z = nz * maxR;
const vn = t.vx * nx + t.vz * nz;
if (vn > 0) {
t.vx -= 1.65 * vn * nx;
t.vz -= 1.65 * vn * nz;
if (vn > 16) {
spawnCollisionSparks(t.x + nx * 2.5, t.y, t.z + nz * 2.5, t.color, 8);
}
}
}
// Spin monster wheels & align pitch/roll to terrain
const wheelSpin = forwardDot * dt * 0.85;
for (let w = 0; w < t.wheels.length; w++) {
t.wheels[w].rotation.x += wheelSpin;
}
t.mesh.position.set(t.x, t.y, t.z);
t.mesh.rotation.y = t.angle;
if (t.wreckTimer <= 0) {
const targetPitch = -nextGround.nx * forwardX - nextGround.nz * forwardZ + (t.vy * -0.018);
t.bodyGroup.rotation.x += (targetPitch - t.bodyGroup.rotation.x) * 0.25;
}
}
// 3. TRUCK-VS-TRUCK COLLISIONS (Elastic impulse + Wreck state + Score)
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);
const minDist = a.radius + b.radius;
if (dist < minDist && dist > 0.0001) {
const nx = dx / dist;
const nz = dz / dist;
// Positional depenetration
const overlap = (minDist - dist) * 0.52;
a.x -= nx * overlap;
a.z -= nz * overlap;
b.x += nx * overlap;
b.z += nz * overlap;
// Relative velocity along collision normal
const rvx = b.vx - a.vx;
const rvz = b.vz - a.vz;
const relNormalVel = rvx * nx + rvz * nz;
if (relNormalVel < 0) {
const restitution = 0.85;
const impulse = -(1 + restitution) * relNormalVel / (1 / a.mass + 1 / b.mass);
const ix = impulse * nx;
const iz = impulse * nz;
a.vx -= ix / a.mass;
a.vz -= iz / a.mass;
b.vx += ix / b.mass;
b.vz += iz / b.mass;
const impactSpeed = Math.abs(relNormalVel);
if (impactSpeed > 7) {
const midX = (a.x + b.x) * 0.5;
const midZ = (a.z + b.z) * 0.5;
const midY = (a.y + b.y) * 0.5;
spawnCollisionSparks(midX, midY, midZ, 0x00f0ff, 20);
sound.crash(impactSpeed / 30);
// Check if player was involved
if (a.isPlayer || b.isPlayer) {
const rival = a.isPlayer ? b : a;
const playerSpeed = Math.hypot(playerTruck.vx, playerTruck.vz);
const pts = impactSpeed > 22 ? 500 : 250;
gameState.score += pts;
// Visible reaction & wreck state on rival
rival.vy = Math.min(16, 6 + impactSpeed * 0.32);
rival.wreckTimer = impactSpeed > 20 ? 1.35 : 0.75;
rival.flashTimer = 0.45;
screenShake = Math.min(1.2, impactSpeed * 0.04);
showPopup(
impactSpeed > 22 ? `MEGA WRECK ON ${rival.name}! +${pts}` : `RAMMED ${rival.name}! +${pts}`,
impactSpeed > 22 ? '#facc15' : '#00f0ff'
);
} else {
// Two AI rivals slamming each other
a.flashTimer = 0.3;
b.flashTimer = 0.3;
if (impactSpeed > 22) {
b.vy = 9;
b.wreckTimer = 0.8;
}
}
}
}
}
}
}
// 4. TRUCK-VS-OBSTACLE COLLISIONS (Crush Cars, Barriers, Boulders)
for (let i = 0; i < obstacles.length; i++) {
const obs = obstacles[i];
if (obs.hitCooldown > 0) obs.hitCooldown -= dt;
// Update movable obstacle momentum
if (Math.abs(obs.vx) > 0.05 || Math.abs(obs.vz) > 0.05) {
obs.x += obs.vx * dt;
obs.z += obs.vz * dt;
obs.vx *= Math.pow(0.12, dt);
obs.vz *= Math.pow(0.12, dt);
const dCenter = Math.hypot(obs.x, obs.z);
if (dCenter > ARENA_RADIUS - obs.radius - 1) {
obs.x *= (ARENA_RADIUS - obs.radius - 1) / dCenter;
obs.z *= (ARENA_RADIUS - obs.radius - 1) / dCenter;
obs.vx *= -0.5;
obs.vz *= -0.5;
}
const gh = getGroundHeightAndNormal(obs.x, obs.z).y;
obs.mesh.position.set(obs.x, gh + (obs.type === 'boulder' ? 1.2 : 0), obs.z);
if (obs.type === 'boulder') {
obs.mesh.rotation.x += obs.vz * dt * 0.5;
obs.mesh.rotation.z -= obs.vx * dt * 0.5;
}
}
for (let j = 0; j < trucks.length; j++) {
const t = trucks[j];
const dx = obs.x - t.x;
const dz = obs.z - t.z;
const dist = Math.hypot(dx, dz);
const minDist = t.radius + obs.radius;
if (dist < minDist && dist > 0.001) {
const nx = dx / dist;
const nz = dz / dist;
if (obs.type === 'crushcar') {
// Monster trucks drive over and flatten crush cars!
if (t.y < obs.mesh.position.y + 1.4) {
t.vy = Math.max(t.vy, 6.5);
t.y += 0.25;
}
if (!obs.crushed) {
obs.crushed = true;
obs.crushScale = 0.38;
obs.mesh.scale.set(1.12, 0.38, 1.15);
spawnCollisionSparks(obs.x, obs.mesh.position.y + 0.5, obs.z, 0xfacc15, 14);
sound.crash(0.6);
if (t.isPlayer) {
gameState.score += 150;
showPopup('CAR CRUSHED! +150', '#22c55e');
}
}
} else {
// Jersey Barrier or Boulder: knock it across the dirt floor!
const overlap = minDist - dist;
obs.x += nx * overlap * 0.7;
obs.z += nz * overlap * 0.7;
t.x -= nx * overlap * 0.3;
t.z -= nz * overlap * 0.3;
const tSpeed = Math.hypot(t.vx, t.vz);
obs.vx = t.vx * 1.15 + nx * 8;
obs.vz = t.vz * 1.15 + nz * 8;
t.vx *= 0.82;
t.vz *= 0.82;
if (tSpeed > 10 && (!obs.hitCooldown || obs.hitCooldown <= 0)) {
obs.hitCooldown = 0.6;
spawnCollisionSparks(obs.x, obs.mesh.position.y + 0.8, obs.z, 0xf97316, 10);
sound.crash(0.45);
if (t.isPlayer) {
gameState.score += 100;
showPopup('DEBRIS SMASH! +100', '#f97316');
}
}
}
}
}
}
updateParticles(dt);
updateHUD();
}
// --- CAMERA FOLLOW ---
const camPos = new THREE.Vector3(0, 18, 65);
const camLook = new THREE.Vector3(0, 3, 0);
function updateCamera(dt) {
const backX = -Math.sin(playerTruck.angle) * 21;
const backZ = -Math.cos(playerTruck.angle) * 21;
const desiredX = playerTruck.x + backX;
const desiredY = playerTruck.y + 10.5;
const desiredZ = playerTruck.z + backZ;
camPos.x += (desiredX - camPos.x) * Math.min(1, dt * 6.5);
camPos.y += (desiredY - camPos.y) * Math.min(1, dt * 5.0);
camPos.z += (desiredZ - camPos.z) * Math.min(1, dt * 6.5);
if (screenShake > 0) {
screenShake = Math.max(0, screenShake - dt * 3.2);
camera.position.set(
camPos.x + (Math.random() - 0.5) * screenShake * 1.8,
camPos.y + (Math.random() - 0.5) * screenShake * 1.8,
camPos.z + (Math.random() - 0.5) * screenShake * 1.8
);
} else {
camera.position.copy(camPos);
}
const lookTargetX = playerTruck.x + Math.sin(playerTruck.angle) * 8;
const lookTargetY = playerTruck.y + 2.8;
const lookTargetZ = playerTruck.z + Math.cos(playerTruck.angle) * 8;
camLook.x += (lookTargetX - camLook.x) * Math.min(1, dt * 10);
camLook.y += (lookTargetY - camLook.y) * Math.min(1, dt * 10);
camLook.z += (lookTargetZ - camLook.z) * Math.min(1, dt * 10);
camera.lookAt(camLook);
}
// --- MAIN LOOP ---
let lastFrameTime = performance.now();
let simTime = 0;
function animate(now) {
requestAnimationFrame(animate);
const rawDt = (now - lastFrameTime) / 1000;
lastFrameTime = now;
// When Photo Mode ('P') is active, both the physics simulation and scene render update are frozen
if (gameState.photoMode) {
return;
}
const dt = Math.min(0.05, Math.max(0.001, rawDt));
simTime += dt;
updatePhysics(dt);
animateCrowd(simTime);
updateCamera(dt);
renderer.render(scene, camera);
}
requestAnimationFrame(animate);
})();
</script>
</body>
</html>
The notes
- Five trucks: Each of the four AI rivals (
VOLT-REX,GIGA-BEAST,TESLA-CRUSH, andSTAR-SMASH) runs a boid-inspired short-range separation vector that pushes it away from any rival within 18 meters, applies a unique laterallaneBiasoffset so rivals flank targets from different angles instead of following a single line, and periodically cyclesaiModebetween hunting different trucks and charging toward random arena waypoints. - Demo mode: Checking
const isDemo = window.location.hash === '#demo'initializesgameState.score = isDemo ? 5000 : 0andgameState.timeRemaining = isDemo ? 20 : 90directly insidegameState; every subsequent collision point addition and frame-by-framegameState.timeRemaining -= dtcountdown mutates those exact variables beforeupdateHUD()reads them. - Photo mode: Pressing
PtogglesgameState.photoMode, and the mainanimateloop hits an earlyif (gameState.photoMode) return;before advancingsimTime, callingupdatePhysics(dt), animating the crowd, or callingrenderer.render(scene, camera), freezing both the physics step and the render loop simultaneously. - Collisions: Truck-to-truck and truck-to-obstacle collisions use 2D bounding-circle intersection tests on the XZ plane (
Math.hypot(dx, dz) < a.radius + b.radius) paired with positional depenetration along the collision normal so trucks never overlap. When two trucks collide with a closing normal velocity (relNormalVel < 0), the engine computes a mass-weighted 1D elastic impulse-(1 + restitution) * relNormalVel / (1 / a.mass + 1 / b.mass)withrestitution = 0.85, applies the resulting velocity change to both trucks'vx/vzcomponents, imparts upward vertical velocityvyand a timedwreckTimerroll oscillation on high-speed impacts (impactSpeed > 7), and incrementsgameState.score.
Attachments
google/gemini-4-argon — page