Run Detail

completedmuse-wonder

95excellent

Every model's answer from this round

Recorded for these videos

27:18

Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?

Nov 13, 2026 · YouTube

18:40

ERNIE 5.5 Flash Preview vs GLM 5.3 Flash: Baidu's new model is very impressive!

Nov 11, 2026 · YouTube

36:22

Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash

Nov 11, 2026 · YouTube

14:03

Gemini 4 Carbon: Can it handle my challenges? (First look with one-shot coding tests)

Nov 10, 2026 · YouTube

47:51

Ranking 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:58

Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency

Oct 28, 2026 · YouTube

22:14

GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?

Oct 27, 2026 · YouTube

29:55

Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.

Oct 26, 2026 · YouTube

31:28

Is this company reselling GPT Sol 6.1 at a loss (for non-agentic/text-only)?🤔 Is this sustainable?

Oct 20, 2026 · YouTube

17:58

Nemotron 3.5 Super VL vs Opus 5.5: Testing NVIDIA’s new coding juggernaut

Oct 15, 2026 · YouTube

16:04

Testing a *massive* new open-weights model 🤯: Muse Spark Open (vs. Nemotron, Opus 5.5, and more)

Oct 15, 2026 · YouTube

16:43

Gemini 4 Argon: Great 🐈 Animation, but a broken escalator. (Coding challenge vs Opus 5.5, Sol 6.1)

Oct 13, 2026 · YouTube

16:37

Meta's new "Muse Wonder" AI is impressive... but can it compete with Anthropic's models?

Oct 12, 2026 · YouTube

11:12

WOW... Haiku 5.5 is very impressive. RIP OpenAI?

Oct 7, 2026 · YouTube

22:47

Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?

Oct 6, 2026 · YouTube

22:02

Is Pareto 26.10 Preview Just Routing to GPT Sol? I Tested It Against Sol 6.1 Pro

Oct 1, 2026 · YouTube

11:22

I Tested Sonnet 5.5 Against Opus 5.5. Is It Actually Cheaper?

Sep 28, 2026 · YouTube

30:00

Did Elon Musk's team "train the gay away"... and make Grok 4.7 worse?

Sep 26, 2026 · YouTube

10:58

So... how much better is Claude Opus 5.5 vs. GPT-6 Sol, really?

Sep 23, 2026 · YouTube

9:38

Claude Opus 5.5... the BEST new model for coding!! 🤩

Sep 22, 2026 · YouTube

29:00

Grok 4.7: improved, but GLM 5.3 FlashX beat it anyway (benchmark against Gemini, Sol, etc.)

Sep 22, 2026 · YouTube

16:54

Stealth Union Alpha: Is this another cheap GPT model? (better than Luna, cheaper than Terra?)

Sep 16, 2026 · YouTube

16:45

DeepSeek V4.1 Flash Is Shockingly Good for the Price

Sep 10, 2026 · YouTube

17:14

How much better is GPT-6 Astra over Claude Opus 5? Real Website and Coding Tests

Sep 5, 2026 · YouTube

29:13

Implementing a multiplayer game with GPT-6 Astra (+ Gemini 3.8, Opus 5, Sol Pro)

Sep 5, 2026 · YouTube

19:42

Meta Muse Spark 1.3 Review: A Huge Leap Forward

Sep 2, 2026 · YouTube

17:31

Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)

Sep 2, 2026 · YouTube

19:45

Fable 5.1 writes an animated novel using Ren'Py... did it do better than Sol Pro 5.6?

Sep 1, 2026 · YouTube

14:09

Testing IBM Granite-4.2-8B! Can it name 100 women?

Aug 31, 2026 · YouTube

17:37

Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?

Aug 28, 2026 · YouTube

23:58

Qwen 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

Duration

63.2s

Total Tokens

8,789

Input Tokens

710

Output Tokens

8,079

Reasoning Tokens

1,659

Reasoning Effort

default

Est. Cost

$0.1644

Started

10/12/2026, 5:45:58 PM

OR Provider

Turns (1)

Turn #1

710 in8,079 out1,659 reasoning8,789 total63.2s

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 .html page. 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 or indexedDB. 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.
P for photo mode — pressing P freezes the action and overlays the arena name and the current score, held until P is 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 #demo sets, and why it is not an overlay.
Photo mode: what you actually stop when P is 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

The Volt Vault Arena hosts a neon-lit Cybertruck monster-truck rally where five angular steel trucks leap dirt hills, smash debris, and ram each other beneath a roaring all-around crowd.

The game

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Volt Vault Arena — Cybertruck Monster Rally</title>
<style>
  html,body{margin:0;padding:0;overflow:hidden;background:#070812;font-family:Arial,Helvetica,sans-serif;color:#fff}
  #c{position:fixed;inset:0;display:block}
  #hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:14px 18px;pointer-events:none;z-index:5;text-shadow:0 2px 8px #000}
  .panel{background:rgba(5,10,25,.68);border:1px solid rgba(0,255,255,.55);border-radius:12px;padding:10px 16px;box-shadow:0 0 22px rgba(0,200,255,.25)}
  #arena{font-size:24px;font-weight:900;letter-spacing:2px;color:#8ff7ff}
  #sub{font-size:12px;letter-spacing:3px;color:#ffd94d}
  #scoreBox{text-align:center;min-width:150px}
  #score{font-size:30px;font-weight:900;color:#ffe94a}
  #time{font-size:30px;font-weight:900;color:#ff6bff}
  .label{font-size:11px;letter-spacing:3px;opacity:.85}
  #help{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.35);padding:9px 16px;border-radius:999px;font-size:14px;white-space:nowrap;text-shadow:0 1px 4px #000}
  #msg{position:fixed;left:50%;top:22%;transform:translate(-50%,-50%);z-index:6;font-size:42px;font-weight:900;color:#ffe94a;text-shadow:0 0 18px #f0f,0 3px 5px #000;opacity:0;transition:opacity .15s;pointer-events:none;text-align:center}
  #photo,#over{position:fixed;inset:0;display:none;z-index:20;align-items:center;justify-content:center;text-align:center}
  #photo{background:rgba(0,0,0,.38)}
  #photo .card,#over .card{background:rgba(4,8,20,.88);border:3px solid #6ff7ff;border-radius:20px;padding:34px 54px;box-shadow:0 0 50px rgba(0,255,255,.5)}
  #photo h1,#over h1{margin:0 0 10px;font-size:42px;letter-spacing:3px;color:#8ff7ff}
  #photoScore,#overScore{font-size:30px;color:#ffe94a;font-weight:900}
  #over{background:rgba(0,0,0,.55)}
  kbd{background:#222;border:1px solid #888;border-bottom-width:3px;border-radius:5px;padding:1px 6px}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hud">
  <div class="panel"><div id="arena">⚡ VOLT VAULT ARENA ⚡</div><div id="sub">TESLA CYBERTRUCK MONSTER-TRUCK RALLY</div></div>
  <div class="panel" id="scoreBox"><div class="label">SCORE</div><div id="score">0</div></div>
  <div class="panel"><div class="label">CLOCK</div><div id="time">90.0</div></div>
</div>
<div id="help">Drive: <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> or Arrow Keys &nbsp;•&nbsp; <kbd>P</kbd> Photo Mode &nbsp;•&nbsp; Ram rivals, barrels &amp; debris!</div>
<div id="msg"></div>
<div id="photo"><div class="card"><div style="font-size:14px;letter-spacing:4px">📸 PHOTO MODE</div><h1>VOLT VAULT ARENA</h1><div id="photoScore">SCORE 0</div><p>Press P again to resume</p></div></div>
<div id="over"><div class="card"><h1>TIME UP!</h1><div id="overScore">SCORE 0</div><p>Press Enter to race again</p></div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js"></script>
<script>
(function(){
"use strict";
const ARENA_NAME="VOLT VAULT ARENA";
let score=0, timeLeft=90, photo=false, over=false, hitCooldown=0;
// Real game-state demo mode: mutates the actual score and clock used by HUD, scoring and game-over logic.
if(window.location.hash==="#demo"){ score=5000; timeLeft=20; }
const scoreEl=document.getElementById('score'), timeEl=document.getElementById('time'), msgEl=document.getElementById('msg');
const photoEl=document.getElementById('photo'), photoScoreEl=document.getElementById('photoScore');
const overEl=document.getElementById('over'), overScoreEl=document.getElementById('overScore');
function showMsg(t){ msgEl.textContent=t; msgEl.style.opacity=1; setTimeout(()=>msgEl.style.opacity=0,750); }
let audio=null;
function beep(f,d,type,g){ try{ if(!audio) audio=new (window.AudioContext||window.webkitAudioContext)(); const o=audio.createOscillator(),v=audio.createGain(); o.type=type||'square'; o.frequency.value=f; v.gain.value=g||.06; o.connect(v); v.connect(audio.destination); o.start(); v.gain.exponentialRampToValueAtTime(.001,audio.currentTime+(d||.12)); o.stop(audio.currentTime+(d||.12)); }catch(e){} }
const scene=new THREE.Scene(); scene.background=new THREE.Color(0x080a22); scene.fog=new THREE.Fog(0x080a22,80,190);
const camera=new THREE.PerspectiveCamera(62,innerWidth/innerHeight,.1,400);
const renderer=new THREE.WebGLRenderer({canvas:document.getElementById('c'),antialias:true}); renderer.setSize(innerWidth,innerHeight); renderer.setPixelRatio(Math.min(devicePixelRatio,2)); renderer.shadowMap.enabled=true;
scene.add(new THREE.AmbientLight(0x8899ff,.75));
const sun=new THREE.DirectionalLight(0xffffff,1.6); sun.position.set(35,55,20); sun.castShadow=true; scene.add(sun);
[0x00e5ff,0xff00cc,0xffe600,0x00ff88].forEach((c,i)=>{ const p=new THREE.PointLight(c,1.2,90); p.position.set(Math.cos(i*1.57)*38,22,Math.sin(i*1.57)*38); scene.add(p); });
// Floor and stadium
const floor=new THREE.Mesh(new THREE.CircleGeometry(58,64),new THREE.MeshStandardMaterial({color:0x4a3421,roughness:1})); floor.rotation.x=-Math.PI/2; floor.receiveShadow=true; scene.add(floor);
const ring=new THREE.Mesh(new THREE.RingGeometry(18,57,64),new THREE.MeshStandardMaterial({color:0x5d4328,roughness:1,side:THREE.DoubleSide})); ring.rotation.x=-Math.PI/2; ring.position.y=.02; scene.add(ring);
for(let i=0;i<48;i++){ const a=i/48*Math.PI*2, m=new THREE.Mesh(new THREE.PlaneGeometry(7,.35),new THREE.MeshBasicMaterial({color:i%2?0xffffff:0x00d5ff,transparent:true,opacity:.35,side:THREE.DoubleSide})); m.position.set(Math.cos(a)*28,.06,Math.sin(a)*28); m.rotation.x=-Math.PI/2; m.rotation.z=-a; scene.add(m); }
const wall=new THREE.Mesh(new THREE.CylinderGeometry(58,58,5,64,1,true),new THREE.MeshStandardMaterial({color:0x18264d,side:THREE.BackSide,roughness:.6,metalness:.4})); wall.position.y=2.5; scene.add(wall);
// Stands: stepped tiers all the way round
for(let tier=0;tier<5;tier++){ const r=62+tier*3.2, geo=new THREE.CylinderGeometry(r,r,2.2,64,1,true), mat=new THREE.MeshStandardMaterial({color:tier%2?0x263b78:0x1a2a58,side:THREE.DoubleSide}); const s=new THREE.Mesh(geo,mat); s.position.y=4+tier*2.1; scene.add(s); }
// Crowd: instanced coloured people all the way round every tier
const crowdGeo=new THREE.BoxGeometry(.65,1.05,.45), crowdMat=new THREE.MeshBasicMaterial({vertexColors:false});
const crowd=new THREE.InstancedMesh(crowdGeo,new THREE.MeshLambertMaterial({color:0xffffff}),1800); const dummy=new THREE.Object3D(), col=new THREE.Color(); let ci=0;
for(let i=0;i<1800;i++){ const tier=i%5, a=Math.random()*Math.PI*2, r=62.5+tier*3.2+(Math.random()-.5)*1.4; dummy.position.set(Math.cos(a)*r,5.2+tier*2.1,Math.sin(a)*r); dummy.rotation.y=-a; dummy.updateMatrix(); crowd.setMatrixAt(ci,dummy.matrix); crowd.setColorAt(ci,col.setHSL(Math.random(),.9,.55)); ci++; }
scene.add(crowd);
// Banner
const bannerMat=new THREE.MeshBasicMaterial({color:0x00e5ff});
// Obstacles: 1) dirt hills, 2) explosive barrels, 3) crush cars, 4) tire stacks
const obstacles=[], hills=[];
function addHill(x,z){ const h=new THREE.Mesh(new THREE.ConeGeometry(7,3.2,24),new THREE.MeshStandardMaterial({color:0x7a542e,roughness:1})); h.position.set(x,1.1,z); h.castShadow=true; scene.add(h); hills.push({x,z,r:7,h:2.6}); obstacles.push({x,z,r:5.2,type:'hill',mesh:h}); }
function addBarrel(x,z){ const b=new THREE.Mesh(new THREE.CylinderGeometry(.85,.85,1.9,14),new THREE.MeshStandardMaterial({color:0xff4422,roughness:.5,metalness:.3})); b.position.set(x,.95,z); b.castShadow=true; scene.add(b); obstacles.push({x,z,r:1.25,type:'barrel',mesh:b,hit:false,spin:0}); }
function addCrushCar(x,z,rot,c){ const g=new THREE.Group(), body=new THREE.Mesh(new THREE.BoxGeometry(3.6,1,1.8),new THREE.MeshStandardMaterial({color:c,roughness:.4,metalness:.5})); body.position.y=.7; body.castShadow=true; g.add(body); const top=new THREE.Mesh(new THREE.BoxGeometry(1.8,.7,1.6),new THREE.MeshStandardMaterial({color:0x222233})); top.position.y=1.45; g.add(top); g.position.set(x,0,z); g.rotation.y=rot; scene.add(g); obstacles.push({x,z,r:2.3,type:'car',mesh:g}); }
function addTires(x,z){ const g=new THREE.Group(); for(let i=0;i<3;i++){ const t=new THREE.Mesh(new THREE.TorusGeometry(.85,.32,10,20),new THREE.MeshStandardMaterial({color:0x111111,roughness:.9})); t.rotation.x=Math.PI/2; t.position.y=.35+i*.62; t.castShadow=true; g.add(t);} g.position.set(x,0,z); scene.add(g); obstacles.push({x,z,r:1.5,type:'tires',mesh:g}); }
addHill(-22,-16); addHill(24,18); addHill(0,30);
addBarrel(-12,8); addBarrel(14,-10); addBarrel(30,-24); addBarrel(-32,22); addBarrel(8,14);
addCrushCar(-28,2,.5,0x3366ff); addCrushCar(20,-28,-.4,0xffcc00); addCrushCar(34,6,.9,0x22cc66);
addTires(-6,-26); addTires(16,28); addTires(-36,-24); addTires(40,26);
// Cybertruck builder: angular wedge body + huge monster wheels
function makeTruck(color,isPlayer){
  const g=new THREE.Group();
  const shape=new THREE.Shape(); shape.moveTo(-2.4,.55); shape.lineTo(-2.1,1.25); shape.lineTo(-.3,2.05); shape.lineTo(1.3,1.25); shape.lineTo(2.4,.55); shape.lineTo(2.4,.25); shape.lineTo(-2.4,.25); shape.closePath();
  const bodyGeo=new THREE.ExtrudeGeometry(shape,{depth:1.9,bevelEnabled:false}); bodyGeo.translate(0,0,-.95);
  const body=new THREE.Mesh(bodyGeo,new THREE.MeshStandardMaterial({color:0xc9d2dc,roughness:.25,metalness:.9})); body.castShadow=true; g.add(body);
  const stripe=new THREE.Mesh(new THREE.BoxGeometry(4.5,.28,2.02),new THREE.MeshStandardMaterial({color:color,emissive:color,emissiveIntensity:.7})); stripe.position.set(0,.72,0); g.add(stripe);
  const glass=new THREE.Mesh(new THREE.BoxGeometry(1.7,.18,1.7),new THREE.MeshStandardMaterial({color:0x06121f,roughness:.1,metalness:.8})); glass.position.set(.15,1.72,0); glass.rotation.z=-.45; g.add(glass);
  const wheelGeo=new THREE.CylinderGeometry(.78,.78,.55,18), wheelMat=new THREE.MeshStandardMaterial({color:0x090909,roughness:.95});
  [[-1.55,-1.05],[1.55,-1.05],[-1.55,1.05],[1.55,1.05]].forEach(p=>{ const w=new THREE.Mesh(wheelGeo,wheelMat); w.rotation.x=Math.PI/2; w.position.set(p[0],.78,p[1]); w.castShadow=true; w.name='wheel'; g.add(w); });
  const light=new THREE.Mesh(new THREE.BoxGeometry(.12,.16,1.7),new THREE.MeshBasicMaterial({color:isPlayer?0x00ffff:0xff3344})); light.position.set(2.42,.85,0); g.add(light);
  scene.add(g); return g;
}
const trucks=[];
const starts=[{x:0,z:-38,a:0,c:0x00e5ff},{x:-14,z:-38,a:.2,c:0xff3355},{x:14,z:-38,a:-.2,c:0xffaa00},{x:-26,z:-30,a:.5,c:0x44ff66},{x:26,z:-30,a:-.5,c:0xbb66ff}];
for(let i=0;i<5;i++){ const s=starts[i], mesh=makeTruck(s.c,i===0); mesh.position.set(s.x,0,s.z);
  trucks.push({mesh:mesh,vel:new THREE.Vector3(),angle:s.a,speed:0,steer:0,health:100,wreck:0,ai:i!==0,wp:new THREE.Vector3((Math.random()-.5)*70,0,(Math.random()-.5)*70),wpTimer:Math.random()*3,personality:.82+Math.random()*.4,aggro:Math.random(),id:i,flash:0});
}
// Exactly five trucks: 1 player (index 0) + 4 AI rivals (indices 1-4).
const keys={};
addEventListener('keydown',e=>{ if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight',' '].includes(e.key)) e.preventDefault(); keys[e.key.toLowerCase()]=true;
  if(e.key.toLowerCase()==='p'){ photo=!photo; photoEl.style.display=photo?'flex':'none'; if(photo) photoScoreEl.textContent='SCORE '+Math.floor(score)+'  •  '+ARENA_NAME; if(!photo) last=performance.now(); }
  if(e.key==='Enter'&&over) reset();
});
addEventListener('keyup',e=>keys[e.key.toLowerCase()]=false);
function reset(){ score=(window.location.hash==="#demo")?5000:0; timeLeft=(window.location.hash==="#demo")?20:90; over=false; overEl.style.display='none'; trucks.forEach((t,i)=>{ t.mesh.position.set(starts[i].x,0,starts[i].z); t.vel.set(0,0,0); t.speed=0; t.health=100; t.wreck=0; t.mesh.rotation.set(0,t.angle,0); }); }
function groundY(x,z){ let y=0; for(const h of hills){ const d=Math.hypot(x-h.x,z-h.z); if(d<h.r) y=Math.max(y,h.h*Math.cos(d/h.r*Math.PI/2)); } return y; }
function damageTruck(t,amt,byPlayer){ if(t.wreck>0) return; t.health-=amt; t.flash=.25; if(t.health<=0){ t.wreck=3.5; t.health=100; showMsg(t.ai?'RIVAL WRECKED! +500':'YOU WERE WRECKED!'); if(t.ai&&byPlayer){ score+=500; beep(90,.35,'sawtooth',.09);} t.mesh.rotation.z=.55; } }
function updateTruck(t,dt){
  if(t.wreck>0){ t.wreck-=dt; t.speed*=.9; if(t.wreck<=0) t.mesh.rotation.z=0; }
  else if(!t.ai){
    const fwd=(keys['w']||keys['arrowup'])?1:0, back=(keys['s']||keys['arrowdown'])?1:0;
    if(fwd) t.speed+=22*dt; if(back) t.speed-=14*dt; t.speed*=(1-1.15*dt); t.speed=Math.max(-12,Math.min(30,t.speed));
    const turn=((keys['a']||keys['arrowleft'])?1:0)-((keys['d']||keys['arrowright'])?1:0);
    t.angle+=turn*1.9*dt*Math.sign(t.speed||1)*Math.min(1,Math.abs(t.speed)/8);
    if(fwd) beep(0,0);
  } else {
    // AI: seek its own waypoint + separation from every other truck + obstacle avoidance + individual personality.
    t.wpTimer-=dt; const toWp=new THREE.Vector3().subVectors(t.wp,t.mesh.position); toWp.y=0;
    if(toWp.length()<6||t.wpTimer<0){ const quad=t.id%4, qx=(quad%2?1:-1), qz=(quad<2?1:-1); t.wp.set(qx*(12+Math.random()*34),0,qz*(10+Math.random()*34)); t.wpTimer=4+Math.random()*4; }
    let desired=toWp.normalize().multiplyScalar(17*t.personality);
    for(const o of trucks){ if(o===t) continue; const d=new THREE.Vector3().subVectors(t.mesh.position,o.mesh.position); d.y=0; const dist=d.length(); if(dist<11&&dist>0.01) desired.add(d.normalize().multiplyScalar((11-dist)*2.4)); }
    for(const o of obstacles){ if(o.type==='hill') continue; const d=new THREE.Vector3(t.mesh.position.x-o.x,0,t.mesh.position.z-o.z); const dist=d.length(); if(dist<7&&dist>0.01) desired.add(d.normalize().multiplyScalar((7-dist)*3)); }
    const targetAngle=Math.atan2(desired.x,desired.z)-Math.PI/2; let diff=((targetAngle-t.angle+Math.PI*3)%(Math.PI*2))-Math.PI;
    t.angle+=Math.max(-1.7*dt,Math.min(1.7*dt,diff)); const targetSpeed=Math.max(7,desired.length())*(Math.abs(diff)>1.2?.45:1);
    t.speed+=Math.max(-18*dt,Math.min(16*dt,targetSpeed-t.speed));
  }
  const vx=Math.cos(t.angle)*t.speed, vz=-Math.sin(t.angle)*t.speed; t.vel.x=vx; t.vel.z=vz;
  t.mesh.position.x+=vx*dt; t.mesh.position.z+=vz*dt;
  const rr=Math.hypot(t.mesh.position.x,t.mesh.position.z); if(rr>54){ const n=new THREE.Vector3(t.mesh.position.x,0,t.mesh.position.z).normalize(); t.mesh.position.x=n.x*54; t.mesh.position.z=n.z*54; t.speed*=-.45; if(!t.ai){ score=Math.max(0,score-10); } }
  t.mesh.position.y=groundY(t.mesh.position.x,t.mesh.position.z);
  t.mesh.rotation.y=t.angle; t.mesh.rotation.x=-t.mesh.position.y*.04*Math.sign(t.speed);
  t.mesh.children.forEach(ch=>{ if(ch.name==='wheel') ch.rotation.z-=t.speed*dt*1.4; });
  if(t.flash>0){ t.flash-=dt; t.mesh.children[0].material.emissive=new THREE.Color(t.flash>0?0xff2200:0x000000); }
}
function collisions(dt){
  // Truck vs truck: circle colliders, positional separation, impulse along normal, damage + spin from relative speed.
  for(let i=0;i<trucks.length;i++) for(let j=i+1;j<trucks.length;j++){ const a=trucks[i],b=trucks[j], dx=b.mesh.position.x-a.mesh.position.x, dz=b.mesh.position.z-a.mesh.position.z, d=Math.hypot(dx,dz);
    if(d<3.4&&d>0.01){ const nx=dx/d,nz=dz/d,push=(3.4-d)/2; a.mesh.position.x-=nx*push; a.mesh.position.z-=nz*push; b.mesh.position.x+=nx*push; b.mesh.position.z+=nz*push;
      const rel=(b.vel.x-a.vel.x)*nx+(b.vel.z-a.vel.z)*nz; if(rel<0){ const imp=-rel*1.25; a.speed-=imp*.55*Math.sign(a.speed||1); b.speed+=imp*.35; const impact=Math.abs(rel);
        if(impact>4&&hitCooldown<=0){ hitCooldown=.25; const playerInvolved=(!a.ai||!b.ai); damageTruck(a,impact*2.2,playerInvolved&&b.ai); damageTruck(b,impact*2.2,playerInvolved&&a.ai);
          if(playerInvolved){ const pts=Math.round(impact*22); score+=pts; showMsg('RAM! +'+pts); beep(140,.18,'square',.08); } else beep(110,.12,'square',.04);
          a.angle+=(Math.random()-.5)*.5; b.angle+=(Math.random()-.5)*.5; }
      } } }
  // Truck vs obstacles
  for(const t of trucks) for(const o of obstacles){ if(o.type==='hill') continue; const dx=t.mesh.position.x-o.x,dz=t.mesh.position.z-o.z,d=Math.hypot(dx,dz);
    if(d<o.r+1.5&&d>0.01){ const nx=dx/d,nz=dz/d; t.mesh.position.x=o.x+nx*(o.r+1.5); t.mesh.position.z=o.z+nz*(o.r+1.5);
      if(o.type==='barrel'&&!o.hit){ o.hit=true; o.mesh.rotation.z=1.35; o.mesh.position.y=.45; if(!t.ai){ score+=75; showMsg('BARREL SMASH! +75'); } damageTruck(t,4,false); beep(220,.15,'triangle',.07); setTimeout(()=>{o.hit=false;o.mesh.rotation.z=0;o.mesh.position.y=.95;},5000); }
      else if(Math.abs(t.speed)>5){ if(!t.ai){ score+=o.type==='car'?40:25; showMsg(o.type==='car'?'CRUSH CAR! +40':'TIRE HIT! +25'); } damageTruck(t,5,false); beep(80,.2,'sawtooth',.06); }
      t.speed*=-.38; } }
}
let last=performance.now(), crowdT=0;
function animate(now){ requestAnimationFrame(animate); if(photo){ return; } // Photo mode: physics, AI, collisions and clock are all skipped; only the frozen frame + card remain.
  let dt=Math.min(.033,(now-last)/1000); last=now; if(over){ renderer.render(scene,camera); return; }
  timeLeft-=dt; hitCooldown-=dt; if(timeLeft<=0){ timeLeft=0; over=true; overScoreEl.textContent='FINAL SCORE '+Math.floor(score)+'  •  '+ARENA_NAME; overEl.style.display='flex'; }
  trucks.forEach(t=>updateTruck(t,dt)); collisions(dt);
  crowdT+=dt; crowd.position.y=Math.sin(crowdT*3)*.12;
  const p=trucks[0].mesh.position, back=new THREE.Vector3(Math.cos(trucks[0].angle)*-13,7.5,-Math.sin(trucks[0].angle)*-13);
  // Camera chases behind player truck
  const target=new THREE.Vector3(p.x-Math.cos(trucks[0].angle)*13,7,p.z+Math.sin(trucks[0].angle)*13);
  camera.position.lerp(target,.08); camera.lookAt(p.x,1.5,p.z);
  scoreEl.textContent=Math.floor(score); timeEl.textContent=timeLeft.toFixed(1); timeEl.style.color=timeLeft<10?'#ff4444':'#ff6bff';
  renderer.render(scene,camera);
}
scoreEl.textContent=Math.floor(score); timeEl.textContent=timeLeft.toFixed(1);
requestAnimationFrame(animate);
addEventListener('resize',()=>{ camera.aspect=innerWidth/innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth,innerHeight); });
})();
</script>
</body>
</html>

The notes

Five trucks: Each AI rival seeks a waypoint biased to a different quadrant of the arena, resets that waypoint on its own timer, and receives a separation steering force away from every other truck plus obstacle-avoidance steering, with individual speed and aggression personalities, so they spread out instead of forming one moving wall.
Demo mode: The line if(window.location.hash==="#demo"){ score=5000; timeLeft=20; } sets the real score and timeLeft state variables, and because the HUD, scoring, countdown, and game-over logic all read those same variables, it is genuine game state rather than a cosmetic overlay.
Photo mode: Pressing P sets photo=true, shows the arena-name/score card, and makes the animation loop return before the physics step, AI, collisions, and clock are updated — so the physics/simulation step is stopped (the frozen scene is not simulated behind the card) until P resumes it.
Collisions: The model computes circle-collider overlaps for truck–truck and truck–obstacle pairs, resolves interpenetration by pushing bodies apart along the contact normal, applies an impulse derived from relative velocity along that normal, converts impact speed into health damage, spin, bounce, score for the player, and a timed wreck state when health reaches zero, while hills instead compute a heightfield lift from radial distance.

Attachments

meta/muse-wonder — page