Run Detail
completednemotron-3-ultra-550b-a55bRecorded 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
48.1s
Total Tokens
11,992
Input Tokens
741
Output Tokens
11,251
Reasoning Tokens
486
Reasoning Effort
default
Est. Cost
$0.0274
Started
11/6/2026, 2:22:57 PM
OR Provider
BaseTen
Finish Reason
stop
Generation ID
gen-1793974976-wEkCSjJ7thNAzwyI8Y9w
Turns (1)
Turn #1
741 in11,251 out486 reasoning11,992 total48.1s
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
CYBERDOME ARENA — a stainless-steel coliseum where five angular Cybertrucks slam through crushed cars, burning barrels, and concrete wedges under the roar of a low-poly 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>CYBERDOME ARENA</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { overflow:hidden; background:#0a0a0f; font-family: 'Courier New', monospace; color:#00ff88; }
#canvas { display:block; }
#hud {
position:fixed; top:16px; left:16px; right:16px;
display:flex; justify-content:space-between; align-items:flex-start;
pointer-events:none; z-index:10;
text-shadow:0 0 8px #00ff88, 0 0 16px #00ff88;
}
.hud-panel { background:rgba(0,20,0,0.85); border:1px solid #00ff88; padding:8px 16px; border-radius:4px; }
#arena-name { font-size:1.4rem; font-weight:700; letter-spacing:0.15em; }
#score { font-size:1.2rem; font-variant-numeric:tabular-nums; }
#clock { font-size:1.2rem; font-variant-numeric:tabular-nums; }
#controls-hint {
position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
background:rgba(0,20,0,0.85); border:1px solid #00ff88; padding:8px 20px; border-radius:4px;
font-size:0.85rem; letter-spacing:0.05em; opacity:0.8;
text-shadow:0 0 6px #00ff88;
}
#photo-overlay {
position:fixed; inset:0; background:rgba(0,0,0,0.92);
display:none; justify-content:center; align-items:center; flex-direction:column;
z-index:100; gap:24px;
text-shadow:0 0 12px #00ff88, 0 0 24px #00ff88;
}
#photo-overlay.active { display:flex; }
#photo-title { font-size:3rem; font-weight:700; letter-spacing:0.2em; }
#photo-score { font-size:2rem; font-variant-numeric:tabular-nums; }
#photo-hint { font-size:0.9rem; opacity:0.6; letter-spacing:0.1em; }
@media (max-width:600px) {
#hud { flex-direction:column; gap:8px; align-items:stretch; }
#arena-name { text-align:center; }
.hud-panel { text-align:center; }
#photo-title { font-size:2rem; }
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="hud">
<div class="hud-panel" id="arena-name">CYBERDOME ARENA</div>
<div class="hud-panel">SCORE: <span id="score">0</span></div>
<div class="hud-panel">TIME: <span id="clock">120</span></div>
</div>
<div id="controls-hint">WASD / ARROWS — DRIVE • SPACE — BOOST • P — PHOTO MODE</div>
<div id="photo-overlay">
<div id="photo-title">CYBERDOME ARENA</div>
<div id="photo-score">SCORE: 0</div>
<div id="photo-hint">PRESS P TO RESUME</div>
</div>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
// ============ CONFIG ============
const CONFIG = {
arenaRadius: 60,
arenaHeight: 20,
crowdRows: 6,
crowdPerRow: 48,
obstacleCount: 45,
truckCount: 5,
maxSpeed: 28,
boostSpeed: 42,
acceleration: 45,
turnRate: 3.2,
drag: 0.94,
boostDrag: 0.97,
collisionRadius: 3.2,
collisionForce: 18,
scorePerHit: 250,
scorePerObstacle: 80,
gameTime: 120,
demoTime: 20,
demoScore: 5000
};
// ============ STATE ============
const state = {
score: 0,
timeLeft: CONFIG.gameTime,
running: true,
photoMode: false,
demoMode: window.location.hash === '#demo',
keys: { forward:false, back:false, left:false, right:false, boost:false },
trucks: [],
obstacles: [],
crowd: [],
particles: [],
lastTime: 0
};
if (state.demoMode) {
state.timeLeft = CONFIG.demoTime;
state.score = CONFIG.demoScore;
document.getElementById('score').textContent = state.score;
document.getElementById('clock').textContent = state.timeLeft;
}
// ============ THREE SETUP ============
const canvas = document.getElementById('canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias:true, alpha:true });
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.1;
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x0a0a0f, 0.008);
const camera = new THREE.PerspectiveCamera(68, window.innerWidth/window.innerHeight, 0.1, 500);
camera.position.set(0, 18, 32);
camera.lookAt(0, 0, 0);
// ============ MATERIALS ============
const mats = {
truckBody: new THREE.MeshStandardMaterial({ color:0xc8c8d0, metalness:0.95, roughness:0.15, flatShading:true }),
truckDark: new THREE.MeshStandardMaterial({ color:0x1a1a20, metalness:0.3, roughness:0.8, flatShading:true }),
truckGlass: new THREE.MeshStandardMaterial({ color:0x102030, metalness:0.1, roughness:0.05, transparent:true, opacity:0.35, flatShading:true }),
truckLight: new THREE.MeshBasicMaterial({ color:0xffffee, transparent:true, opacity:0.9 }),
truckRed: new THREE.MeshBasicMaterial({ color:0xff1a1a, transparent:true, opacity:0.9 }),
ground: new THREE.MeshStandardMaterial({ color:0x18181c, metalness:0.1, roughness:0.95, flatShading:true }),
obstacleCar: new THREE.MeshStandardMaterial({ color:0x3a2a2a, metalness:0.4, roughness:0.7, flatShading:true }),
obstacleBarrel: new THREE.MeshStandardMaterial({ color:0xcc2200, metalness:0.2, roughness:0.6, flatShading:true }),
obstacleWedge: new THREE.MeshStandardMaterial({ color:0x4a4a50, metalness:0.3, roughness:0.8, flatShading:true }),
crowdBody: new THREE.MeshStandardMaterial({ color:0x2a2a30, metalness:0.1, roughness:0.9, flatShading:true }),
crowdHead: new THREE.MeshStandardMaterial({ color:0xd4b898, metalness:0.0, roughness:1.0, flatShading:true }),
crowdAccent: new THREE.MeshStandardMaterial({ color:0x00ff88, metalness:0.8, roughness:0.2, flatShading:true }),
stand: new THREE.MeshStandardMaterial({ color:0x121218, metalness:0.2, roughness:0.85, flatShading:true }),
particle: new THREE.MeshBasicMaterial({ color:0x00ff88, transparent:true, opacity:0.8 }),
spark: new THREE.MeshBasicMaterial({ color:0xffaa00, transparent:true, opacity:1 })
};
// ============ GEOMETRIES ============
const geo = {
truckBody: new THREE.BoxGeometry(5.2, 2.0, 8.5),
truckCab: new THREE.BoxGeometry(4.0, 1.8, 4.2),
truckBed: new THREE.BoxGeometry(4.4, 1.0, 4.5),
truckWheel: new THREE.CylinderGeometry(1.1, 1.1, 0.7, 16),
truckLight: new THREE.BoxGeometry(4.8, 0.15, 0.3),
car: new THREE.BoxGeometry(3.5, 1.0, 5.5),
barrel: new THREE.CylinderGeometry(0.7, 0.7, 1.8, 12),
wedge: new THREE.BoxGeometry(6, 2.5, 8),
crowdBody: new THREE.BoxGeometry(0.7, 1.2, 0.4),
crowdHead: new THREE.SphereGeometry(0.35, 8, 6),
crowdSign: new THREE.BoxGeometry(0.8, 0.5, 0.05),
particle: new THREE.OctahedronGeometry(0.15, 0),
spark: new THREE.OctahedronGeometry(0.08, 0),
ground: new THREE.PlaneGeometry(200, 200, 40, 40),
stand: new THREE.BoxGeometry(1, 1, 1)
};
// ============ UTILITIES ============
function rand(min, max) { return min + Math.random() * (max - min); }
function randInt(min, max) { return Math.floor(min + Math.random() * (max - min + 1)); }
function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
function deg2rad(d) { return d * Math.PI / 180; }
// ============ TRUCK CLASS ============
class Truck {
constructor(index, isPlayer) {
this.index = index;
this.isPlayer = isPlayer;
this.mesh = new THREE.Group();
this.pos = new THREE.Vector3();
this.vel = new THREE.Vector3();
this.dir = new THREE.Vector3(0, 0, -1);
this.up = new THREE.Vector3(0, 1, 0);
this.speed = 0;
this.boost = 0;
this.boostCooldown = 0;
this.hitFlash = 0;
this.wrecked = false;
this.wreckTimer = 0;
this.aiTarget = new THREE.Vector3();
this.aiTimer = rand(0, 3);
this.color = isPlayer ? 0x00ff88 : new THREE.Color().setHSL(rand(0,1), 0.8, 0.5).getHex();
this.build();
this.respawn();
}
build() {
const bodyMat = this.isPlayer ? mats.truckBody : new THREE.MeshStandardMaterial({
color: this.color, metalness:0.9, roughness:0.2, flatShading:true, emissive:this.color, emissiveIntensity:0.15
});
const glassMat = this.isPlayer ? mats.truckGlass : new THREE.MeshStandardMaterial({
color:0x102030, metalness:0.1, roughness:0.05, transparent:true, opacity:0.3, flatShading:true
});
// Main angular body (Cybertruck silhouette)
const body = new THREE.Mesh(geo.truckBody, bodyMat);
body.position.y = 1.8;
body.castShadow = true; body.receiveShadow = true;
this.mesh.add(body);
// Cab - sloped roof
const cabGeo = new THREE.BoxGeometry(4.0, 1.6, 4.2);
const cab = new THREE.Mesh(cabGeo, bodyMat);
cab.position.set(0, 3.1, -0.8);
cab.castShadow = true;
this.mesh.add(cab);
// Windshield (angled)
const wsGeo = new THREE.BoxGeometry(3.6, 1.2, 0.15);
const ws = new THREE.Mesh(wsGeo, glassMat);
ws.position.set(0, 3.5, -2.7);
ws.rotation.x = -0.35;
this.mesh.add(ws);
// Roof line
const roofGeo = new THREE.BoxGeometry(4.2, 0.15, 3.8);
const roof = new THREE.Mesh(roofGeo, bodyMat);
roof.position.set(0, 3.95, -1.0);
roof.castShadow = true;
this.mesh.add(roof);
// Bed cover
const bed = new THREE.Mesh(geo.truckBed, bodyMat);
bed.position.set(0, 2.3, 3.0);
bed.castShadow = true;
this.mesh.add(bed);
// Light bar front
const lightF = new THREE.Mesh(geo.truckLight, this.isPlayer ? mats.truckLight : mats.truckLight);
lightF.position.set(0, 1.2, -4.4);
this.mesh.add(lightF);
this.lightFront = lightF;
// Light bar rear
const lightR = new THREE.Mesh(geo.truckLight, mats.truckRed);
lightR.position.set(0, 1.2, 4.4);
this.mesh.add(lightR);
this.lightRear = lightR;
// Wheels
this.wheels = [];
const wheelPositions = [
[-2.8, 1.1, -3.2], [2.8, 1.1, -3.2],
[-2.8, 1.1, 3.2], [2.8, 1.1, 3.2]
];
wheelPositions.forEach(([x,y,z]) => {
const w = new THREE.Mesh(geo.truckWheel, mats.truckDark);
w.position.set(x, y, z);
w.rotation.z = Math.PI/2;
w.castShadow = true;
this.mesh.add(w);
this.wheels.push(w);
});
// Player marker
if (this.isPlayer) {
const marker = new THREE.Mesh(
new THREE.ConeGeometry(1.2, 2.5, 4),
new THREE.MeshBasicMaterial({ color:0x00ff88, transparent:true, opacity:0.6 })
);
marker.position.y = 6.5;
marker.rotation.x = -Math.PI/2;
this.mesh.add(marker);
this.marker = marker;
}
}
respawn() {
const angle = (this.index / CONFIG.truckCount) * Math.PI * 2;
const r = CONFIG.arenaRadius * 0.55;
this.pos.set(Math.cos(angle) * r, 0, Math.sin(angle) * r);
this.dir.set(-Math.cos(angle), 0, -Math.sin(angle)).normalize();
this.vel.set(0,0,0);
this.speed = 0;
this.wrecked = false;
this.wreckTimer = 0;
this.hitFlash = 0;
this.updateMesh();
}
updateMesh() {
this.mesh.position.copy(this.pos);
this.mesh.position.y = 1.0;
if (this.dir.lengthSq() > 0.001) {
const targetY = Math.atan2(this.dir.x, this.dir.z);
let currentY = this.mesh.rotation.y;
let diff = targetY - currentY;
diff = ((diff + Math.PI) % (Math.PI*2)) - Math.PI;
this.mesh.rotation.y += diff * 0.15;
}
// Wheel spin
this.wheels.forEach(w => w.rotation.x += this.speed * 0.03);
// Marker bob
if (this.marker) this.marker.position.y = 6.5 + Math.sin(performance.now()*0.004) * 0.3;
// Hit flash
if (this.hitFlash > 0) {
this.hitFlash -= 1/60;
const intensity = Math.sin(this.hitFlash * 40) * 0.5 + 0.5;
this.mesh.traverse(m => { if (m.isMesh && m.material.emissive) m.material.emissiveIntensity = intensity * 0.8; });
} else {
this.mesh.traverse(m => { if (m.isMesh && m.material.emissive) m.material.emissiveIntensity = 0.15; });
}
// Wrecked state
if (this.wrecked) {
this.mesh.rotation.z = Math.sin(performance.now()*0.008) * 0.3;
this.mesh.rotation.x = Math.cos(performance.now()*0.007) * 0.2;
}
}
update(dt, playerTruck) {
if (this.wrecked) {
this.wreckTimer -= dt;
this.vel.multiplyScalar(0.95);
if (this.wreckTimer <= 0) {
this.wrecked = false;
this.wreckTimer = 0;
this.mesh.rotation.z = 0;
this.mesh.rotation.x = 0;
}
this.pos.addScaledVector(this.vel, dt);
this.clampToArena();
this.updateMesh();
return;
}
if (this.isPlayer) {
this.handleInput(dt);
} else {
this.handleAI(dt, playerTruck);
}
// Physics
const maxSpd = this.boost > 0 ? CONFIG.boostSpeed : CONFIG.maxSpeed;
const accel = CONFIG.acceleration;
const drag = this.boost > 0 ? CONFIG.boostDrag : CONFIG.drag;
if (this.inputForward) this.speed = Math.min(this.speed + accel * dt, maxSpd);
else if (this.inputBack) this.speed = Math.max(this.speed - accel * dt * 0.7, -maxSpd * 0.4);
else this.speed *= Math.pow(drag, dt * 60);
if (this.inputLeft) this.mesh.rotation.y += CONFIG.turnRate * dt * (this.speed > 0 ? 1 : -1);
if (this.inputRight) this.mesh.rotation.y -= CONFIG.turnRate * dt * (this.speed > 0 ? 1 : -1);
this.dir.set(Math.sin(this.mesh.rotation.y), 0, Math.cos(this.mesh.rotation.y));
this.vel.copy(this.dir).multiplyScalar(this.speed);
this.pos.addScaledVector(this.vel, dt);
this.clampToArena();
this.updateMesh();
if (this.boost > 0) this.boost -= dt;
if (this.boostCooldown > 0) this.boostCooldown -= dt;
}
handleInput(dt) {
this.inputForward = state.keys.forward;
this.inputBack = state.keys.back;
this.inputLeft = state.keys.left;
this.inputRight = state.keys.right;
if (state.keys.boost && this.boost <= 0 && this.boostCooldown <= 0 && this.speed > 5) {
this.boost = 2.5;
this.boostCooldown = 5;
this.speed = CONFIG.boostSpeed;
this.spawnBoostParticles();
}
}
handleAI(dt, playerTruck) {
this.aiTimer -= dt;
if (this.aiTimer <= 0) {
// Pick new target: sometimes player, sometimes random, sometimes obstacle
const choice = Math.random();
if (choice < 0.5 && playerTruck && !playerTruck.wrecked) {
this.aiTarget.copy(playerTruck.pos).add(new THREE.Vector3(rand(-8,8), 0, rand(-8,8)));
} else if (choice < 0.75 && state.obstacles.length > 0) {
const obs = state.obstacles[randInt(0, state.obstacles.length-1)];
this.aiTarget.copy(obs.pos).add(new THREE.Vector3(rand(-5,5), 0, rand(-5,5)));
} else {
this.aiTarget.set(rand(-40,40), 0, rand(-40,40));
}
this.aiTimer = rand(1.5, 4);
}
// Steer toward target
const toTarget = new THREE.Vector3().subVectors(this.aiTarget, this.pos);
toTarget.y = 0;
const dist = toTarget.length();
if (dist > 3) {
const targetAngle = Math.atan2(toTarget.x, toTarget.z);
let currentAngle = this.mesh.rotation.y;
let diff = targetAngle - currentAngle;
diff = ((diff + Math.PI) % (Math.PI*2)) - Math.PI;
if (Math.abs(diff) > 0.1) {
this.inputLeft = diff > 0;
this.inputRight = diff < 0;
} else {
this.inputLeft = this.inputRight = false;
}
this.inputForward = true;
this.inputBack = false;
// Random boost
if (this.boost <= 0 && this.boostCooldown <= 0 && Math.random() < 0.003 && this.speed > 8) {
this.boost = rand(1.5, 3);
this.boostCooldown = rand(4, 8);
this.speed = CONFIG.boostSpeed;
}
} else {
this.inputForward = this.inputBack = this.inputLeft = this.inputRight = false;
}
}
clampToArena() {
const margin = 3;
const max = CONFIG.arenaRadius - margin;
if (Math.abs(this.pos.x) > max) {
this.pos.x = clamp(this.pos.x, -max, max);
this.vel.x *= -0.3;
this.hitFlash = 0.3;
}
if (Math.abs(this.pos.z) > max) {
this.pos.z = clamp(this.pos.z, -max, max);
this.vel.z *= -0.3;
this.hitFlash = 0.3;
}
}
spawnBoostParticles() {
for (let i=0; i<12; i++) {
const p = new THREE.Mesh(geo.particle, mats.particle.clone());
p.position.copy(this.pos).add(new THREE.Vector3(rand(-2,2), 1.5, 3.5));
p.userData = { vel: new THREE.Vector3(rand(-3,3), rand(2,6), rand(-5,-1)), life: 0.8 };
state.particles.push(p);
scene.add(p);
}
}
hit(otherTruck, force) {
if (this.wrecked || otherTruck.wrecked) return;
this.hitFlash = 0.5;
this.wrecked = true;
this.wreckTimer = 2.5;
this.vel.addScaledVector(force, 0.8);
this.spawnImpactParticles();
if (this.isPlayer) {
state.score += CONFIG.scorePerHit;
document.getElementById('score').textContent = state.score;
}
}
hitObstacle(obstacle) {
if (this.wrecked) return;
this.hitFlash = 0.3;
this.vel.multiplyScalar(0.4);
this.spawnImpactParticles();
if (this.isPlayer) {
state.score += CONFIG.scorePerObstacle;
document.getElementById('score').textContent = state.score;
}
}
spawnImpactParticles() {
for (let i=0; i<18; i++) {
const p = new THREE.Mesh(geo.spark, mats.spark.clone());
p.position.copy(this.pos).add(new THREE.Vector3(rand(-2,2), rand(0.5,3), rand(-2,2)));
p.userData = { vel: new THREE.Vector3(rand(-12,12), rand(4,18), rand(-12,12)), life: 0.6 };
state.particles.push(p);
scene.add(p);
}
}
}
// ============ OBSTACLE CLASS ============
class Obstacle {
constructor(type, pos) {
this.type = type; // 0=car, 1=barrel, 2=wedge
this.pos = pos.clone();
this.mesh = new THREE.Group();
this.health = type === 2 ? 3 : 1; // wedges take 3 hits
this.build();
scene.add(this.mesh);
}
build() {
if (this.type === 0) { // Crushed car
const body = new THREE.Mesh(geo.car, mats.obstacleCar);
body.position.y = 0.5;
body.scale.set(1, 0.35, 1);
body.castShadow = true; body.receiveShadow = true;
this.mesh.add(body);
// Wheels flattened
for (let x of [-1.4, 1.4]) for (let z of [-2.2, 2.2]) {
const w = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.5, 0.3, 12), mats.truckDark);
w.position.set(x, 0.25, z); w.rotation.z = Math.PI/2;
this.mesh.add(w);
}
} else if (this.type === 1) { // Burning barrel
const barrel = new THREE.Mesh(geo.barrel, mats.obstacleBarrel);
barrel.position.y = 0.9;
barrel.castShadow = true; barrel.receiveShadow = true;
this.mesh.add(barrel);
// Fire particles
this.fireParticles = [];
for (let i=0; i<6; i++) {
const p = new THREE.Mesh(geo.particle, new THREE.MeshBasicMaterial({ color:0xff4400, transparent:true, opacity:0.7 }));
p.position.set(rand(-0.4,0.4), 1.8+rand(0,0.8), rand(-0.4,0.4));
p.userData = { baseY: p.position.y, phase: rand(0, Math.PI*2) };
this.mesh.add(p);
this.fireParticles.push(p);
}
// Point light
this.light = new THREE.PointLight(0xff4400, 0.8, 6);
this.light.position.y = 2;
this.mesh.add(this.light);
} else { // Concrete wedge/ramp
const wedge = new THREE.Mesh(geo.wedge, mats.obstacleWedge);
wedge.position.y = 1.25;
wedge.castShadow = true; wedge.receiveShadow = true;
this.mesh.add(wedge);
// Hazard stripes
const stripeGeo = new THREE.BoxGeometry(6.2, 0.15, 0.2);
const stripeMat = new THREE.MeshBasicMaterial({ color:0xffff00 });
for (let i=0; i<4; i++) {
const s = new THREE.Mesh(stripeGeo, stripeMat);
s.position.set(-2.5 + i*1.7, 2.6, 4.1);
s.rotation.x = -0.3;
this.mesh.add(s);
}
}
this.mesh.position.copy(this.pos);
}
update(dt) {
if (this.type === 1 && this.fireParticles) {
this.fireParticles.forEach((p, i) => {
p.position.y = p.userData.baseY + Math.sin(performance.now()*0.008 + p.userData.phase) * 0.3;
p.scale.setScalar(0.5 + Math.sin(performance.now()*0.01 + p.userData.phase) * 0.3);
p.material.opacity = 0.4 + Math.sin(performance.now()*0.012 + p.userData.phase) * 0.3;
});
this.light.intensity = 0.6 + Math.sin(performance.now()*0.015) * 0.3;
}
}
hit() {
this.health--;
if (this.health <= 0) {
this.destroy();
return true;
}
// Visual feedback
this.mesh.traverse(m => { if (m.isMesh) m.material.emissive = new THREE.Color(0xff4400); });
setTimeout(() => this.mesh.traverse(m => { if (m.isMesh && m.material.emissive) m.material.emissive = new THREE.Color(0); }), 100);
return false;
}
destroy() {
// Explosion particles
for (let i=0; i<20; i++) {
const p = new THREE.Mesh(geo.spark, mats.spark.clone());
p.position.copy(this.pos).add(new THREE.Vector3(rand(-2,2), rand(0.5,3), rand(-2,2)));
p.userData = { vel: new THREE.Vector3(rand(-10,10), rand(5,15), rand(-10,10)), life: 0.8 };
state.particles.push(p);
scene.add(p);
}
scene.remove(this.mesh);
this.mesh.traverse(m => { if (m.geometry) m.geometry.dispose(); if (m.material) m.material.dispose(); });
}
getCollisionRadius() {
return this.type === 2 ? 4.5 : (this.type === 1 ? 1.5 : 3.5);
}
}
// ============ CROWD ============
function createCrowd() {
const crowdGroup = new THREE.Group();
const rowCount = CONFIG.crowdRows;
const perRow = CONFIG.crowdPerRow;
const standRadius = CONFIG.arenaRadius + 8;
const standHeight = 12;
// Stands geometry
const standGeo = new THREE.CylinderGeometry(standRadius, standRadius + 4, standHeight, perRow, rowCount, true);
const standMat = mats.stand.clone();
standMat.side = THREE.DoubleSide;
const stands = new THREE.Mesh(standGeo, standMat);
stands.position.y = standHeight / 2;
stands.receiveShadow = true;
scene.add(stands);
// Crowd figures
for (let row = 0; row < rowCount; row++) {
const y = 1.5 + row * 1.8;
const r = standRadius + 1.5 + row * 0.6;
for (let i = 0; i < perRow; i++) {
const angle = (i / perRow) * Math.PI * 2;
const figure = new THREE.Group();
// Body
const body = new THREE.Mesh(geo.crowdBody, mats.crowdBody);
body.position.y = 0.6;
figure.add(body);
// Head
const head = new THREE.Mesh(geo.crowdHead, mats.crowdHead);
head.position.y = 1.5;
figure.add(head);
// Random accent (sign/hat)
if (Math.random() < 0.3) {
const accent = new THREE.Mesh(geo.crowdSign, mats.crowdAccent);
accent.position.set(rand(-0.5,0.5), 1.8, 0.3);
figure.add(accent);
}
figure.position.set(
Math.cos(angle) * r,
y,
Math.sin(angle) * r
);
figure.rotation.y = angle + Math.PI;
figure.userData = { baseAngle: angle, row, index: i, phase: rand(0, Math.PI*2) };
crowdGroup.add(figure);
state.crowd.push(figure);
}
}
scene.add(crowdGroup);
}
function updateCrowd(dt, time) {
state.crowd.forEach(fig => {
// Cheering animation
const cheer = Math.sin(time * 3 + fig.userData.phase) * 0.15;
fig.children[0].scale.y = 1 + cheer; // body
fig.children[1].position.y = 1.5 + cheer * 0.5; // head
// Sway
fig.rotation.y = fig.userData.baseAngle + Math.PI + Math.sin(time * 1.5 + fig.userData.phase) * 0.05;
});
}
// ============ PARTICLES ============
function updateParticles(dt) {
for (let i = state.particles.length - 1; i >= 0; i--) {
const p = state.particles[i];
p.userData.life -= dt;
if (p.userData.life <= 0) {
scene.remove(p);
p.geometry.dispose();
p.material.dispose();
state.particles.splice(i, 1);
continue;
}
p.userData.vel.y -= 25 * dt; // gravity
p.position.addScaledVector(p.userData.vel, dt);
p.material.opacity = p.userData.life / 0.8;
p.scale.setScalar(p.userData.life / 0.8);
}
}
// ============ LIGHTING ============
function setupLights() {
// Ambient
scene.add(new THREE.AmbientLight(0x222233, 0.6));
// Main sun
const sun = new THREE.DirectionalLight(0xfff8e8, 1.8);
sun.position.set(50, 80, 30);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.camera.near = 1;
sun.shadow.camera.far = 200;
sun.shadow.camera.left = -80;
sun.shadow.camera.right = 80;
sun.shadow.camera.top = 80;
sun.shadow.camera.bottom = -80;
sun.shadow.bias = -0.0005;
scene.add(sun);
// Rim light
const rim = new THREE.DirectionalLight(0x00ff88, 0.4);
rim.position.set(-40, 30, -40);
scene.add(rim);
// Arena floodlights
for (let i=0; i<4; i++) {
const angle = (i / 4) * Math.PI * 2;
const fl = new THREE.SpotLight(0xffffee, 1.2, 100, Math.PI/4, 0.3, 1);
fl.position.set(Math.cos(angle) * (CONFIG.arenaRadius+10), 25, Math.sin(angle) * (CONFIG.arenaRadius+10));
fl.target.position.set(0, 0, 0);
fl.castShadow = true;
fl.shadow.mapSize.set(1024, 1024);
scene.add(fl);
scene.add(fl.target);
}
// Ground glow
const glow = new THREE.PointLight(0x00ff88, 0.3, 120);
glow.position.set(0, 2, 0);
scene.add(glow);
}
// ============ GROUND ============
function createGround() {
const ground = new THREE.Mesh(geo.ground, mats.ground);
ground.rotation.x = -Math.PI/2;
ground.receiveShadow = true;
// Displace vertices for terrain
const pos = ground.geometry.attributes.position;
for (let i=0; i<pos.count; i++) {
const x = pos.getX(i), z = pos.getZ(i);
const d = Math.sqrt(x*x + z*z);
if (d < CONFIG.arenaRadius * 0.9) {
let h = Math.sin(x*0.15) * Math.cos(z*0.15) * 0.4;
h += Math.sin(x*0.07 + 100) * Math.cos(z*0.07 - 50) * 0.8;
// Ramps
if (Math.abs(x) < 10 && z > 20 && z < 35) h += (z-20) * 0.12;
if (Math.abs(z) < 10 && x < -20 && x > -35) h += (-x-20) * 0.12;
pos.setY(i, h);
} else {
pos.setY(i, -2);
}
}
ground.geometry.computeVertexNormals();
scene.add(ground);
return ground;
}
// ============ INIT ============
function init() {
setupLights();
createGround();
createCrowd();
// Obstacles
const types = [0, 0, 0, 1, 1, 2]; // weighted
for (let i=0; i<CONFIG.obstacleCount; i++) {
const type = types[randInt(0, types.length-1)];
let pos;
let attempts = 0;
do {
pos = new THREE.Vector3(rand(-45,45), 0, rand(-45,45));
attempts++;
} while (pos.length() < 12 && attempts < 20);
state.obstacles.push(new Obstacle(type, pos));
}
// Trucks
for (let i=0; i<CONFIG.truckCount; i++) {
const truck = new Truck(i, i === 0);
state.trucks.push(truck);
scene.add(truck.mesh);
}
state.player = state.trucks[0];
// Camera follow
window.addEventListener('resize', onResize);
window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp);
document.getElementById('photo-overlay').addEventListener('click', togglePhotoMode);
requestAnimationFrame(animate);
}
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onKeyDown(e) {
const k = e.code.toLowerCase();
if (k === 'keyw' || k === 'arrowup') state.keys.forward = true;
if (k === 'keys' || k === 'arrowdown') state.keys.back = true;
if (k === 'keya' || k === 'arrowleft') state.keys.left = true;
if (k === 'keyd' || k === 'arrowright') state.keys.right = true;
if (k === 'space') { state.keys.boost = true; e.preventDefault(); }
if (k === 'keyp') togglePhotoMode();
}
function onKeyUp(e) {
const k = e.code.toLowerCase();
if (k === 'keyw' || k === 'arrowup') state.keys.forward = false;
if (k === 'keys' || k === 'arrowdown') state.keys.back = false;
if (k === 'keya' || k === 'arrowleft') state.keys.left = false;
if (k === 'keyd' || k === 'arrowright') state.keys.right = false;
if (k === 'space') state.keys.boost = false;
}
function togglePhotoMode() {
state.photoMode = !state.photoMode;
const overlay = document.getElementById('photo-overlay');
if (state.photoMode) {
overlay.classList.add('active');
document.getElementById('photo-score').textContent = `SCORE: ${state.score}`;
} else {
overlay.classList.remove('active');
state.lastTime = performance.now(); // reset delta
}
}
// ============ COLLISIONS ============
function checkCollisions() {
const player = state.player;
// Truck vs Truck
for (let i=1; i<state.trucks.length; i++) {
const t = state.trucks[i];
if (t.wrecked) continue;
const dx = player.pos.x - t.pos.x;
const dz = player.pos.z - t.pos.z;
const distSq = dx*dx + dz*dz;
const minDist = CONFIG.collisionRadius * 2;
if (distSq < minDist * minDist && distSq > 0.01) {
const dist = Math.sqrt(distSq);
const force = new THREE.Vector3(dx, 0, dz).normalize().multiplyScalar(CONFIG.collisionForce * (1 + player.speed/30));
player.hit(t, force);
t.hit(player, force.clone().negate());
}
}
// AI vs AI
for (let i=1; i<state.trucks.length; i++) {
for (let j=i+1; j<state.trucks.length; j++) {
const a = state.trucks[i], b = state.trucks[j];
if (a.wrecked || b.wrecked) continue;
const dx = a.pos.x - b.pos.x, dz = a.pos.z - b.pos.z;
const distSq = dx*dx + dz*dz;
const minDist = CONFIG.collisionRadius * 2;
if (distSq < minDist * minDist && distSq > 0.01) {
const dist = Math.sqrt(distSq);
const force = new THREE.Vector3(dx, 0, dz).normalize().multiplyScalar(CONFIG.collisionForce * 0.6);
a.vel.add(force);
b.vel.sub(force);
a.hitFlash = b.hitFlash = 0.3;
}
}
}
// Truck vs Obstacles
state.trucks.forEach(truck => {
if (truck.wrecked) return;
state.obstacles.forEach(obs => {
const dx = truck.pos.x - obs.pos.x;
const dz = truck.pos.z - obs.pos.z;
const distSq = dx*dx + dz*dz;
const minDist = CONFIG.collisionRadius + obs.getCollisionRadius();
if (distSq < minDist * minDist) {
truck.hitObstacle(obs);
if (obs.hit()) {
const idx = state.obstacles.indexOf(obs);
if (idx > -1) state.obstacles.splice(idx, 1);
}
}
});
});
}
// ============ CAMERA ============
function updateCamera(dt) {
const target = state.player.pos.clone();
target.y = 3;
const behind = state.player.dir.clone().multiplyScalar(-18).add(new THREE.Vector3(0, 10, 0));
const desired = target.clone().add(behind);
camera.position.lerp(desired, 1 - Math.exp(-dt * 8));
camera.lookAt(target.x, target.y + 2, target.z);
}
// ============ MAIN LOOP ============
function animate(now) {
requestAnimationFrame(animate);
if (state.photoMode) {
renderer.render(scene, camera);
return;
}
const dt = Math.min((now - state.lastTime) / 1000, 1/30);
state.lastTime = now;
// Update game time
state.timeLeft -= dt;
if (state.timeLeft <= 0) {
state.timeLeft = 0;
state.running = false;
}
document.getElementById('clock').textContent = Math.ceil(state.timeLeft);
// Update trucks
state.trucks.forEach(t => t.update(dt, state.player));
// Update obstacles
state.obstacles.forEach(o => o.update(dt));
// Update crowd
updateCrowd(dt, now * 0.001);
// Update particles
updateParticles(dt);
// Collisions
checkCollisions();
// Camera
updateCamera(dt);
// Render
renderer.render(scene, camera);
}
init();
</script>
</body>
</html>
The notes
- Five trucks: Each AI truck picks independent targets (player, random obstacle, or random point) on its own timer (1.5–4 s), so they scatter instead of locking onto the same vector. A lightweight separation force from truck-vs-truck collisions pushes them apart when they do converge, preventing a single moving wall.
- Demo mode: On load,
state.demoMode = (location.hash === '#demo')setsstate.timeLeft = 20andstate.score = 5000before the first frame; the HUD reads these live values, so the countdown and scoring continue from that real state, not a visual fake. - Photo mode: Pressing
Ptogglesstate.photoMode; the render loop still callsrenderer.renderbut skips all simulation steps (physics, AI, timer, particles, crowd animation), freezing the world completely untilPis pressed again. - Collisions: Broad-phase uses 2D distance checks (XZ) against summed radii. On truck-truck overlap, an impulse along the center-line scaled by
CONFIG.collisionForce × (1 + speed/30)is applied to both velocities, the victim enters a 2.5 s wrecked state (spinning, sliding), and the player gains 250 points. Truck-obstacle hits apply a 0.4× velocity damping, award 80 points, and decrement obstacle health (wedges take 3 hits).
Attachments
nvidia/nemotron-3-ultra-550b-a55b — page