Run Detail
completedqwen3.8-2.4t-a95bRecorded 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
723.8s
Total Tokens
21,950
Input Tokens
767
Output Tokens
21,183
Reasoning Tokens
13,851
Reasoning Effort
medium
Est. Cost
$0.0000
Started
8/27/2026, 3:17:33 PM
OR Provider
Alibaba
Finish Reason
error
Generation ID
gen-1787843853-RAj5kMEDORhEhncozu05
Turns (1)
Turn #1
767 in21,183 out13,851 reasoning21,950 total723.8s
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
MEGA-VOLT MAYHEM at The Scrapdome — five angular steel Cybertrucks tearing up a floodlit dirt bowl ringed by a roaring, waving crowd, launching off ramps, crunching through junk heaps, and trading paint for points.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>MEGA-VOLT MAYHEM · The Scrapdome</title>
<style>
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#04060d;
font-family:Impact,'Arial Black','Franklin Gothic Bold',sans-serif;color:#e8ecf4;
-webkit-user-select:none;user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hud{position:fixed;top:14px;z-index:6;pointer-events:none;text-shadow:0 2px 0 #000,0 0 16px rgba(0,0,0,.9)}
#hL{left:18px}
#hR{right:18px;text-align:right}
#arena{font-size:21px;letter-spacing:3px;color:#ffd23f}
#score{font-size:34px;color:#fff;margin-top:2px}
.lbl{font-size:11px;letter-spacing:4px;color:#8b96ab}
#clock{font-size:34px;color:#fff;margin-top:2px}
#clock.low{color:#ff4d4d;animation:bl .5s steps(2) infinite}
@keyframes bl{50%{opacity:.25}}
#hint{position:fixed;left:18px;bottom:14px;z-index:6;font-size:13px;letter-spacing:1.5px;
color:#9aa7bd;text-shadow:0 1px 0 #000;pointer-events:none}
#flash{position:fixed;left:50%;top:16%;transform:translateX(-50%);z-index:6;font-size:28px;
letter-spacing:3px;color:#ffd23f;text-shadow:0 2px 0 #000,0 0 22px rgba(255,150,40,.55);
opacity:0;transition:opacity .12s;pointer-events:none;white-space:nowrap}
#photo{position:fixed;inset:0;z-index:8;display:none;align-items:center;justify-content:center;
background:rgba(3,6,14,.55);backdrop-filter:blur(2px)}
#photo.on{display:flex}
.card{background:#0b0f1c;border:2px solid #ffd23f;padding:34px 58px;text-align:center;
box-shadow:0 0 70px rgba(255,210,63,.25)}
.card h1{margin:0;font-size:46px;letter-spacing:5px;color:#ffd23f}
.card .sub{margin:8px 0 16px;font-size:13px;letter-spacing:6px;color:#8b96ab}
.card .big{font-size:60px;color:#fff}
.card .tip{margin-top:16px;font-size:12px;letter-spacing:3px;color:#7d89a0}
#over{position:fixed;inset:0;z-index:7;display:none;align-items:center;justify-content:center;
background:rgba(3,6,14,.62)}
#over.on{display:flex}
#over .card{border-color:#ff5c39}
#over h1{color:#ff5c39;font-size:40px}
#fT{margin-top:10px;font-size:15px;letter-spacing:2px;color:#c7d0e0}
#rTip{margin-top:14px;font-size:13px;letter-spacing:3px;color:#ffd23f}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div class="hud" id="hL"><div id="arena">THE SCRAPDOME</div><div class="lbl">SCORE</div><div id="score">0</div></div>
<div class="hud" id="hR"><div class="lbl">TIME</div><div id="clock">90</div></div>
<div id="hint">WASD / ARROWS — DRIVE · P — PHOTO MODE</div>
<div id="flash"></div>
<div id="photo"><div class="card"><h1>THE SCRAPDOME</h1><div class="sub">MEGA-VOLT MAYHEM</div>
<div class="lbl">SCORE</div><div class="big" id="pScore">0</div>
<div class="tip">PRESS P TO RESUME</div></div></div>
<div id="over"><div class="card"><h1>TIME’S UP</h1><div class="lbl">FINAL SCORE</div>
<div class="big" id="fS">0</div><div id="fT"></div><div id="rTip">PRESS R TO RUN IT BACK</div></div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js"></script>
<script>
(()=>{'use strict';
/* ---------- constants ---------- */
const ARENA='THE SCRAPDOME', TMAX=90, R=26, R2=R*R;
const TRUCKS=[
{name:'YOU', col:0xd7dde6, em:0x7fd2ff, isP:true },
{name:'VOLT', col:0x3a4656, em:0xff4630, ai:true},
{name:'RUSTBKT', col:0x8a5a33, em:0xffb020, ai:true},
{name:'GIGAWREK',col:0x46584a, em:0x59ff9c, ai:true},
{name:'OHMAGE', col:0x503a5e, em:0xd06bff, ai:true}];
const PAL=[0xe04545,0x3f7fd9,0xf0b429,0x49b96b,0xb06fd9,0xe07f3f,0xd9d9e2,0x4fd0e0];
/* ---------- game state ---------- */
const G={score:0,time:TMAX,over:false,photo:false,demo:false,shake:0};
if(location.hash==='#demo'){G.time=20;G.score=5000;G.demo=true;} // real state, not a veil
/* ---------- renderer / scene ---------- */
const cv=document.getElementById('c');
const renderer=new THREE.WebGLRenderer({canvas:cv,antialias:true});
renderer.setPixelRatio(Math.min(devicePixelRatio||1,2));
renderer.setSize(innerWidth,innerHeight);
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=THREE.PCFSoftShadowMap;
renderer.toneMapping=THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure=1.12;
const scene=new THREE.Scene();
scene.background=new THREE.Color(0x060a16);
scene.fog=new THREE.Fog(0x060a16,80,190);
const camera=new THREE.PerspectiveCamera(58,innerWidth/innerHeight,.1,400);
addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight);});
scene.add(new THREE.HemisphereLight(0x8fb0ff,0x33241a,.85));
const sun=new THREE.DirectionalLight(0xfff1d8,1.5);
sun.position.set(38,60,22);sun.castShadow=true;
sun.shadow.mapSize.set(2048,2048);
sun.shadow.camera.left=-48;sun.shadow.camera.right=48;
sun.shadow.camera.top=48;sun.shadow.camera.bottom=-48;
sun.shadow.camera.near=5;sun.shadow.camera.far=160;sun.shadow.bias=-0.0006;
scene.add(sun);
const fill=new THREE.DirectionalLight(0x6f8fff,.45);fill.position.set(-30,24,-34);scene.add(fill);
/* ---------- ground ---------- */
{const g=document.createElement('canvas');g.width=g.height=512;const x=g.getContext('2d');
x.fillStyle='#7c5f40';x.fillRect(0,0,512,512);
for(let i=0;i<3200;i++){x.fillStyle='rgba('+(60+Math.random()*60|0)+','+(45+Math.random()*40|0)+','+(25+Math.random()*25|0)+','+(0.08+Math.random()*0.22)+')';
x.fillRect(Math.random()*512,Math.random()*512,1+Math.random()*3,1+Math.random()*3);}
x.strokeStyle='rgba(255,255,255,.16)';x.lineWidth=7;x.beginPath();x.arc(256,256,150,0,7);x.stroke();
x.beginPath();x.arc(256,256,70,0,7);x.stroke();
x.strokeStyle='rgba(40,25,12,.35)';x.lineWidth=3;
for(let i=0;i<26;i++){x.beginPath();const a=Math.random()*7,r0=30+Math.random()*200;
x.arc(256+Math.cos(a)*r0*.3,256+Math.sin(a)*r0*.3,8+Math.random()*30,Math.random()*7,Math.random()*3);x.stroke();}
const t=new THREE.CanvasTexture(g);t.colorSpace=THREE.SRGBColorSpace;
const m=new THREE.Mesh(new THREE.CircleGeometry(32,64),new THREE.MeshStandardMaterial({map:t,roughness:1}));
m.rotation.x=-Math.PI/2;m.receiveShadow=true;scene.add(m);}
/* ---------- crowd texture ---------- */
function crowdTex(){const c=document.createElement('canvas');c.width=1024;c.height=128;const x=c.getContext('2d');
x.fillStyle='#141a28';x.fillRect(0,0,1024,128);
for(let r=0;r<4;r++){const y=16+r*30;
for(let i=0;i<110;i++){const px=4+i*9.3+Math.random()*3;
x.fillStyle='rgba(0,0,0,.35)';x.fillRect(px-3,y+3,7,10);
const cl=PAL[(Math.random()*PAL.length)|0];
x.fillStyle='#'+cl.toString(16).padStart(6,'0');
x.fillRect(px-2,y-2,5,11);
x.fillStyle='#e8c39a';x.fillRect(px-1.5,y-6,4,4);}}
const t=new THREE.CanvasTexture(c);t.colorSpace=THREE.SRGBColorSpace;
t.wrapS=THREE.RepeatWrapping;t.repeat.set(9,1);return t;}
const crowdMat=new THREE.MeshBasicMaterial({map:crowdTex()});
/* ---------- stadium ---------- */
{const wall=new THREE.Mesh(new THREE.CylinderGeometry(28.6,28.6,2.2,64,1,true),
new THREE.MeshStandardMaterial({color:0x2b3242,side:THREE.DoubleSide,roughness:.9}));
wall.position.y=1.1;scene.add(wall);
const stripe=new THREE.Mesh(new THREE.CylinderGeometry(28.55,28.55,.3,64,1,true),
new THREE.MeshBasicMaterial({color:0xffb020,side:THREE.DoubleSide}));
stripe.position.y=1.9;scene.add(stripe);
const tier=new THREE.Mesh(new THREE.CylinderGeometry(40,29,7,64,1,true),
new THREE.MeshStandardMaterial({color:0x1b2233,side:THREE.DoubleSide,roughness:1}));
tier.position.y=3.5;scene.add(tier);
const crowd=new THREE.Mesh(new THREE.CylinderGeometry(39.6,29.4,6.4,64,1,true),crowdMat);
crowd.position.y=3.6;scene.add(crowd);
const rim=new THREE.Mesh(new THREE.CylinderGeometry(41.5,40,1.2,64,1,true),
new THREE.MeshStandardMaterial({color:0x141a26,side:THREE.DoubleSide}));
rim.position.y=7.6;scene.add(rim);
const back=new THREE.Mesh(new THREE.CylinderGeometry(44,41.5,9,64,1,true),
new THREE.MeshStandardMaterial({color:0x10141f,side:THREE.DoubleSide}));
back.position.y=12;scene.add(back);}
/* truss + floodlights */
{const tm=new THREE.MeshStandardMaterial({color:0x232a38,roughness:.8});
const ring=new THREE.Mesh(new THREE.TorusGeometry(24,.35,8,48),tm);
ring.rotation.x=Math.PI/2;ring.position.y=17;scene.add(ring);
const glowM=new THREE.MeshBasicMaterial({color:0xfff3cf});
for(let i=0;i<6;i++){const a=i*Math.PI/3;
const post=new THREE.Mesh(new THREE.CylinderGeometry(.22,.3,17,8),tm);
post.position.set(Math.cos(a)*41,8.5,Math.sin(a)*41);scene.add(post);
const box=new THREE.Mesh(new THREE.BoxGeometry(2.6,1.4,.8),tm);
box.position.set(Math.cos(a)*40.4,17.4,Math.sin(a)*40.4);box.lookAt(0,17.4,0);scene.add(box);
const gl=new THREE.Mesh(new THREE.PlaneGeometry(2.3,1.1),glowM);
gl.position.set(Math.cos(a)*40.1,17.4,Math.sin(a)*40.1);gl.lookAt(0,17.4,0);scene.add(gl);}}
/* ---------- obstacles ---------- */
const hills=[],ramps=[],debris=[],barriers=[],obstacles=[];
const dirtM=new THREE.MeshStandardMaterial({color:0x6e5637,roughness:1});
const junkM=new THREE.MeshStandardMaterial({color:0x6b6f78,roughness:.85,metalness:.4});
const barM=new THREE.MeshStandardMaterial({color:0xc8ccd4,roughness:.6});
const barM2=new THREE.MeshStandardMaterial({color:0xd94040,roughness:.6});
const rampM=new THREE.MeshStandardMaterial({color:0x8a6a3f,roughness:1});
const crateM=new THREE.MeshStandardMaterial({color:0x9a7740,roughness:.9});
const tireM=new THREE.MeshStandardMaterial({color:0x15161a,roughness:1});
const coneM=new THREE.MeshStandardMaterial({color:0xff7a1a,roughness:.7});
const barrelM=new THREE.MeshStandardMaterial({color:0x3f7fd9,roughness:.6,metalness:.3});
const barrelM2=new THREE.MeshStandardMaterial({color:0xd94040,roughness:.6,metalness:.3});
const crateGeo=new THREE.BoxGeometry(1.5,1.5,1.5);
const tireGeo=new THREE.CylinderGeometry(.8,.8,.5,10);
const coneGeo=new THREE.CylinderGeometry(.14,.55,1.1,8);
const barrelGeo=new THREE.CylinderGeometry(.62,.62,1.3,10);
const sparkGeo=new THREE.ConeGeometry(.06,1.5,5);
const sparkMat=new THREE.MeshBasicMaterial({color:0xffd27a,transparent:true,opacity:.95,blending:THREE.AdditiveBlending,depthWrite:false});
function addHill(x,z,r,h){const m=new THREE.Mesh(new THREE.SphereGeometry(1,14,10),dirtM);
m.scale.set(r,h,r);m.position.set(x,h*.32,z);m.castShadow=m.receiveShadow=true;scene.add(m);
hills.push({x,z,r,h});}
function addRamp(x,z,len,wid,h,ang){const g=new THREE.Group();
const m=new THREE.Mesh(new THREE.BoxGeometry(len,1,wid),rampM);m.position.y=.5;m.castShadow=m.receiveShadow=true;g.add(m);
const edge=new THREE.Mesh(new THREE.BoxGeometry(.35,1.04,wid),new THREE.MeshBasicMaterial({color:0xffb020}));
edge.position.x=len/2-.18;g.add(edge);
g.position.set(x,h/2,z);g.rotation.y=ang;scene.add(g);
const c=Math.cos(ang),s=Math.sin(ang);
ramps.push({x,z,len,wid,h,ang,c,s});}
function addDebris(x,z){const m=new THREE.Mesh(new THREE.IcosahedronGeometry(.85,0),junkM);
m.scale.set(1.15,.7,1);m.position.set(x,.55,z);
m.rotation.set(Math.random()*3,Math.random()*3,Math.random()*3);
m.castShadow=true;scene.add(m);debris.push({x,z,m});}
function addBarrier(x,z,ang){const g=new THREE.Group();
const b=new THREE.Mesh(new THREE.BoxGeometry(2.6,.9,.5),barM);b.position.y=.45;b.castShadow=true;g.add(b);
const s=new THREE.Mesh(new THREE.BoxGeometry(2.62,.28,.52),barM2);s.position.y=.62;g.add(s);
g.position.set(x,0,z);g.rotation.y=ang;scene.add(g);barriers.push({x,z});}
function addProp(x,z,kind){let m;
if(kind===0){m=new THREE.Mesh(crateGeo,crateM);m.position.y=.75;m.rotation.y=Math.random()*3;}
else if(kind===1){m=new THREE.Mesh(tireGeo,tireM);m.position.y=.25;}
else{m=new THREE.Mesh(coneGeo,coneM);m.position.y=.55;}
m.position.x=x;m.position.z=z;m.castShadow=true;scene.add(m);}
function addBarrel(x,z){const m=new THREE.Mesh(barrelGeo,Math.random()<.5?barrelM:barrelM2);
m.position.set(x,.65,z);m.castShadow=true;scene.add(m);
obstacles.push({x,z,r:.75,mesh:m,knock:0});}
addHill(0,0,5.5,2.4);addHill(-14,9,4,1.9);addHill(15,-10,4.5,2.1);addHill(9,16,3.4,1.6);addHill(-11,-15,3.8,1.8);
addRamp(-20,-4,8,4,2.1,0.35);addRamp(18,12,7,4,1.9,Math.PI+0.5);addRamp(2,-21,7,4,1.9,Math.PI/2-0.4);
addDebris(-6,12);addDebris(12,4);addDebris(-16,-8);addDebris(4,-14);addDebris(-2,20);addDebris(20,-16);addDebris(-21,14);
addBarrier(7,7,.7);addBarrier(-8,-6,2.1);addBarrier(14,18,-.4);addBarrier(-18,2,.9);addBarrier(0,-18,1.6);
addProp(-4,-9,0);addProp(10,-4,1);addProp(-13,4,2);addProp(6,14,0);addProp(-19,-14,1);addProp(16,2,2);
addBarrel(-10,18);addBarrel(21,6);addBarrel(-22,-2);addBarrel(8,-19);addBarrel(-3,-22);addBarrel(13,11);
/* ---------- trucks ---------- */
const steelM=new THREE.MeshStandardMaterial({color:0x9aa3b0,metalness:.85,roughness:.32});
const glassM=new THREE.MeshStandardMaterial({color:0x0d1219,metalness:.6,roughness:.15});
const wheelM=new THREE.MeshStandardMaterial({color:0x141519,roughness:.95});
const hubM=new THREE.MeshBasicMaterial({color:0x3a3f47});
const bodyGeo=new THREE.BoxGeometry(2.2,.8,4.4);
const bedGeo=new THREE.BoxGeometry(2.05,.42,1.5);
const cabGeo=new THREE.BoxGeometry(1.95,.62,2.1);
const barGeo=new THREE.BoxGeometry(2.1,.16,.16);
const wheelGeo=new THREE.CylinderGeometry(.62,.62,.5,12);
const hubGeo=new THREE.CylinderGeometry(.26,.26,.52,8);
const smokeGeo=new THREE.SphereGeometry(.5,6,5);
const smokeMats=[],smokes=[];
for(let i=0;i<3;i++){const m=new THREE.MeshBasicMaterial({color:0x565c66,transparent:true,opacity:0,depthWrite:false});
smokeMats.push(m);const s=new THREE.Mesh(smokeGeo,m);s.visible=false;scene.add(s);smokes.push(s);}
function makeTruck(cfg){
const g=new THREE.Group();
const paint=new THREE.MeshStandardMaterial({color:cfg.col,metalness:.8,roughness:.35});
const body=new THREE.Mesh(bodyGeo,paint);body.position.y=1.05;body.castShadow=true;g.add(body);
const bed=new THREE.Mesh(bedGeo,paint);bed.position.set(0,1.62,1.3);bed.castShadow=true;g.add(bed);
const cab=new THREE.Mesh(cabGeo,glassM);cab.position.set(0,1.68,-.35);cab.rotation.x=-.16;cab.castShadow=true;g.add(cab);
const lb=new THREE.Mesh(barGeo,steelM);lb.position.set(0,1.5,-2.25);lb.rotation.x=-.5;g.add(lb);
const light=new THREE.Mesh(new THREE.BoxGeometry(2.0,.09,.06),
new THREE.MeshBasicMaterial({color:0xeaf6ff}));light.position.set(0,1.28,-2.22);g.add(light);
const tail=new THREE.Mesh(new THREE.BoxGeometry(2.0,.09,.06),
new THREE.MeshBasicMaterial({color:0xff3b2f}));tail.position.set(0,1.3,2.22);g.add(tail);
const glow=new THREE.Mesh(new THREE.BoxGeometry(2.2,.06,.06),
new THREE.MeshBasicMaterial({color:cfg.em}));glow.position.set(0,1.5,2.26);g.add(glow);
const wheels=[];
[[-1.15,-1.5],[1.15,-1.5],[-1.15,1.5],[1.15,1.5]].forEach(p=>{
const wg=new THREE.Group();wg.position.set(p[0],.62,p[1]);
const w=new THREE.Mesh(wheelGeo,wheelM);w.rotation.z=Math.PI/2;w.castShadow=true;wg.add(w);
const h=new THREE.Mesh(hubGeo,hubM);h.rotation.z=Math.PI/2;wg.add(h);
g.add(wg);wheels.push(wg);});
const banner=new THREE.Sprite(new THREE.SpriteMaterial({map:nameTag(cfg.name,cfg.isP),depthTest:false}));
banner.position.y=3.3;banner.scale.set(2.6,.65,1);g.add(banner);
scene.add(g);
const a=Math.random()*7;
return{cfg,g,wheels,x:Math.cos(a)*19,z:Math.sin(a)*19,y:0,h:a,speed:0,vy:0,
air:false,spin:0,spinT:0,cd:new Float32Array(5),cdT:new Float32Array(5),
hitT:0,flashT:0,wreck:false,smokeT:0,steerVis:0,
tgt:0,tgtT:1+Math.random()*2,mode:'hunt',modeT:2+Math.random()*3,avoidT:0,avx:0,avz:1};}
function nameTag(txt,you){const c=document.createElement('canvas');c.width=256;c.height=64;
const x=c.getContext('2d');x.font='bold 34px Impact,sans-serif';x.textAlign='center';
x.lineWidth=7;x.strokeStyle='#000';x.strokeText(txt,128,42);
x.fillStyle=you?'#ffd23f':'#dfe6f2';x.fillText(txt,128,42);
const t=new THREE.CanvasTexture(c);t.colorSpace=THREE.SRGBColorSpace;return t;}
const trucks=TRUCKS.map(makeTruck), player=trucks[0];
/* ---------- audio (Web Audio only) ---------- */
let AC=null,mBuf=null;
function ensureAudio(){if(AC)return;try{AC=new (window.AudioContext||window.webkitAudioContext)();}catch(e){}}
function noiseBuf(){if(mBuf)return mBuf;const b=AC.createBuffer(1,AC.sampleRate*.4|0,AC.sampleRate);
const d=b.getChannelData(0);for(let i=0;i<d.length;i++)d[i]=Math.random()*2-1;return mBuf=b;}
function thud(v){if(!AC)return;const t=AC.currentTime,o=AC.createOscillator(),g=AC.createGain();
o.type='sine';o.frequency.setValueAtTime(120,t);o.frequency.exponentialRampToValueAtTime(38,t+.16);
g.gain.setValueAtTime(Math.min(.5,v*.06),t);g.gain.exponentialRampToValueAtTime(.001,t+.22);
o.connect(g).connect(AC.destination);o.start(t);o.stop(t+.25);}
function clank(v){if(!AC)return;const t=AC.currentTime,s=AC.createBufferSource();s.buffer=noiseBuf();
const f=AC.createBiquadFilter();f.type='bandpass';f.frequency.value=1400+Math.random()*800;f.Q.value=6;
const g=AC.createGain();g.gain.setValueAtTime(Math.min(.3,v*.03),t);g.gain.exponentialRampToValueAtTime(.001,t+.12);
s.connect(f).connect(g).connect(AC.destination);s.start(t);s.stop(t+.15);}
function cheer(){if(!AC)return;const t=AC.currentTime,s=AC.createBufferSource();s.buffer=noiseBuf();s.loop=true;
const f=AC.createBiquadFilter();f.type='bandpass';f.frequency.value=950;f.Q.value=.7;
const g=AC.createGain();g.gain.setValueAtTime(.0001,t);g.gain.linearRampToValueAtTime(.22,t+.08);
g.gain.exponentialRampToValueAtTime(.001,t+.9);
s.connect(f).connect(g).connect(AC.destination);s.start(t);s.stop(t+1);}
addEventListener('pointerdown',ensureAudio);
/* ---------- input ---------- */
const keys=new Set();
addEventListener('keydown',e=>{const k=e.key.toLowerCase();
if(['arrowup','arrowdown','arrowleft','arrowright',' '].includes(k))e.preventDefault();
if(e.repeat)return;
ensureAudio();if(AC&&AC.state==='suspended')AC.resume();
if(k==='p'){togglePhoto();return;}
if(k==='r'&&G.over){reset();return;}
keys.add(k);});
addEventListener('keyup',e=>keys.delete(e.key.toLowerCase()));
addEventListener('blur',()=>keys.clear());
/* ---------- HUD ---------- */
const $=id=>document.getElementById(id);
const elS=$('score'),elC=$('clock'),elF=$('flash'),elP=$('photo'),elO=$('over');
let lastS=-1,lastT=-1,flashT=0;
function flash(txt){elF.textContent=txt;elF.style.opacity=1;flashT=1.1;}
function hud(){if(G.score!==lastS){elS.textContent=G.score;lastS=G.score;}
const t=Math.max(0,Math.ceil(G.time));
if(t!==lastT){elC.textContent=t;lastT=t;elC.classList.toggle('low',t<=5&&!G.over);}}
/* ---------- photo / over / reset ---------- */
function togglePhoto(){G.photo=!G.photo;elP.classList.toggle('on',G.photo);
if(G.photo)$('pScore').textContent=G.score;}
function showOver(){elO.classList.add('on');$('fS').textContent=G.score;
$('fT').textContent=G.demo?'DEMO RUN — FULL MATCH IS 90 SECONDS':
(G.score>=4000?'THE SCRAPDOME SALUTES YOU.':G.score>=1500?'RESPECTABLE WRECKAGE.':'THE TRUCKS WON THIS ROUND.');}
function reset(){G.score=0;G.time=TMAX;G.over=false;G.demo=false;
history.replaceState(null,'',location.pathname);
elO.classList.remove('on');elC.classList.remove('low');
trucks.forEach((t,i)=>{const a=i/5*Math.PI*2+.6;
t.x=Math.cos(a)*19;t.z=Math.sin(a)*19;t.y=0;t.h=a;t.speed=0;t.vy=0;
t.air=false;t.spin=0;t.spinT=0;t.hitT=0;t.flashT=0;t.wreck=false;t.smokeT=0;
t.cd.fill(0);t.g.rotation.set(0,a,0);t.g.position.set(t.x,0,t.z);
smokes.forEach(s=>s.visible=false);});
lastS=lastT=-1;hud();}
/* ---------- physics helpers ---------- */
function groundY(x,z){let y=0;
for(const h of hills){const dx=x-h.x,dz=z-h.z,d2=dx*dx+dz*dz;
if(d2<h.r*h.r)y=Math.max(y,h.h*(1-d2/(h.r*h.r)));}
for(const r of ramps){const lx=(x-r.x)*r.c+(z-r.z)*r.s,lz=-(x-r.x)*r.s+(z-r.z)*r.c;
if(Math.abs(lx)<r.len/2&&Math.abs(lz)<r.wid/2)
y=Math.max(y,(lx+r.len/2)/r.len*r.h);}
return y;}
function groundSlope(x,z){const e=.35;
return[(groundY(x+e,z)-groundY(x-e,z))/(2*e),(groundY(x,z+e)-groundY(x,z-e))/(2*e)];}
function crowdSurge(x,z){let m=0;
for(const h of hills){const d=Math.hypot(x-h.x,z-h.z);if(d<h.r*1.15)m=Math.max(m,.9);}
for(const r of ramps){const lx=(x-r.x)*r.c+(z-r.z)*r.s,lz=-(x-r.x)*r.s+(z-r.z)*r.c;
if(Math.abs(lx)<r.len*.7&&Math.abs(lz)<r.wid*.8)m=Math.max(m,1);}
return m;}
/* ---------- AI ---------- */
function aiThink(t,dt){
t.tgtT-=dt;t.modeT-=dt;t.avoidT-=dt;
if(t.modeT<=0){const r=Math.random();
t.mode=r<.5?'hunt':r<.8?'roam':'flee';t.modeT=2.5+Math.random()*3;}
let tx,tz;
if(t.mode==='hunt'){const v=t.nearest;tx=v.x+v.speed*Math.sin(v.h)*.5;tz=v.z+v.speed*Math.cos(v.h)*.5;}
else if(t.mode==='roam'){if(t.tgtT<=0){const a=Math.random()*7,rr=5+Math.random()*17;
tx=Math.cos(a)*rr;tz=Math.sin(a)*rr;t.tgtT=2.5+Math.random()*2;t.tx=tx;t.tz=tz;}
tx=t.tx;tz=t.tz;}
else{const v=t.nearest;tx=t.x*2-v.x;tz=t.z*2-v.z;}
let dx=tx-t.x,dz=tz-t.z;const dl=Math.hypot(dx,dz)||1;dx/=dl;dz/=dl;
if(t.avoidT>0){dx=dx*.3+t.avx*.7;dz=dz*.3+t.avz*.7;}
const want=Math.atan2(dx,dz);let dh=want-t.h;
while(dh>Math.PI)dh-=Math.PI*2;while(dh<-Math.PI)dh+=Math.PI*2;
t.steer=Math.max(-1,Math.min(1,dh*2.2));
const fwd=Math.cos(dh)>0;
t.thr=(fwd&&dh<1.15&&dl>3)?1:(fwd?0.25:-0.5);}
/* ---------- step ---------- */
function step(dt){
if(!G.over){G.time-=dt;if(G.time<=0){G.time=0;G.over=true;showOver();}}
const driving=!G.over;
for(const t of trucks){
t.cdT-=dt;t.hitT=Math.max(0,t.hitT-dt);t.flashT=Math.max(0,t.flashT-dt);
for(let i=0;i<5;i++)if(t.cd[i]>0)t.cd[i]-=dt;
if(t.wreck){t.speed*=Math.max(0,1-2.5*dt);t.x+=Math.sin(t.h)*t.speed*dt;t.z+=Math.cos(t.h)*t.speed*dt;
t.y=groundY(t.x,t.z);t.smokeT-=dt;continue;}
let thr=0,steer=0;
if(t.cfg.isP){if(driving){
thr=(keys.has('w')||keys.has('arrowup')?1:0)-(keys.has('s')||keys.has('arrowdown')?1:0);
steer=(keys.has('d')||keys.has('arrowright')?1:0)-(keys.has('a')||keys.has('arrowleft')?1:0);}}
else{t.nearest=nearestOther(t);aiThink(t,dt);thr=driving?t.thr:0;steer=t.steer;}
if(t.spinT>0){t.spinT-=dt;t.h+=t.spin*dt;t.speed*=Math.max(0,1-1.2*dt);}
else t.h+=steer*t.speed*.055*dt*(t.air?.3:1);
t.steerVis+=(steer-t.steerVis)*Math.min(1,dt*8);
t.speed+=thr*16*dt;
t.speed*=Math.max(0,1-(t.air?.15:1.1)*dt);
t.speed=Math.max(-9,Math.min(22,t.speed));
t.x+=Math.sin(t.h)*t.speed*dt;t.z+=Math.cos(t.h)*t.speed*dt;
const gy=groundY(t.x,t.z);
if(t.y>gy+.04){t.air=true;t.vy-=30*dt;t.y+=t.vy*dt;
if(t.y<=gy){t.y=gy;t.air=false;
if(t.vy<-8.5){G.shake=Math.min(1,G.shake+.25);thud(-t.vy*.4);}
t.vy=0;}}
else{t.y=gy;t.air=false;t.vy=0;
const sg=groundSlope(t.x,t.z),fwd=Math.sin(t.h)*sg[0]+Math.cos(t.h)*sg[1];
t.speed-=fwd*10*dt;}
const dC=Math.hypot(t.x,t.z);
if(dC>R){const nx=t.x/dC,nz=t.z/dC;t.x=nx*R;t.z=nz*R;
const vn=t.speed*(Math.sin(t.h)*nx+Math.cos(t.h)*nz);
if(vn>0){t.speed-=1.6*vn;G.shake=Math.min(1,G.shake+.1);thud(vn);}
if(Math.abs(vn)>6){G.score+=5;flash('WALL! +5');}}
for(const d of debris){const dx=t.x-d.x,dz=t.z-d.z,dd=Math.hypot(dx,dz);
if(dd<1.7&&t.cdT<=0){t.cdT=.6;const sp=Math.abs(t.speed);
if(sp>4){G.score+=15;flash('DEBRIS CLEARED +15');
d.x+=(dx/dd)*(2+sp*.15);d.z+=(dz/dd)*(2+sp*.15);
const dc=Math.hypot(d.x,d.z);if(dc>24){d.x*=24/dc;d.z*=24/dc;}
d.m.position.set(d.x,.55,d.z);thud(sp*.5);G.shake=Math.min(1,G.shake+.12);}
else t.speed*=.6;}}
for(const o of obstacles){const dx=t.x-o.x,dz=t.z-o.z,dd=Math.hypot(dx,dz)||.001;
const md=1.4+o.r;
if(dd<md){const nx=dx/dd,nz=dz/dd;
t.x=o.x+nx*md;t.z=o.z+nz*md;
const vn=t.speed*(Math.sin(t.h)*nx+Math.cos(t.h)*nz);
if(vn<0){t.speed-=1.5*vn;if(-vn>5&&t.cd[4]<=0){t.cd[4]=.8;G.score+=10;flash('BARREL! +10');}
thud(Math.abs(vn));o.knock=Math.min(1,o.knock+Math.abs(vn)*.06);}}}
for(const b of barriers){const dx=t.x-b.x,dz=t.z-b.z;
if(Math.abs(dx)<2&&Math.abs(dz)<2){const dd=Math.hypot(dx,dz)||.001;
t.x=b.x+dx/dd*2;t.z=b.z+dz/dd*2;t.speed*=.55;thud(Math.abs(t.speed));}}
if(t.flashT>0){t.g.rotation.z=(Math.random()-.5)*.16;t.g.rotation.x=(Math.random()-.5)*.12;}
else t.g.rotation.z=t.g.rotation.x=0;
if(t.wreck)t.g.rotation.z=.5;
if(t.smokeT>0)t.smokeT-=dt;
}
/* truck vs truck */
for(let i=0;i<5;i++)for(let j=i+1;j<5;j++){
const A=trucks[i],B=trucks[j];
const dx=B.x-A.x,dz=B.z-A.z,d=Math.hypot(dx,dz);
if(d<2.7&&d>0){const nx=dx/d,nz=dz/d,ov=(2.7-d)/2;
A.x-=nx*ov;A.z-=nz*ov;B.x+=nx*ov;B.z+=nz*ov;
const vA=A.speed*Math.sin(A.h),wA=A.speed*Math.cos(A.h);
const vB=B.speed*Math.sin(B.h),wB=B.speed*Math.cos(B.h);
const rel=Math.abs((vB-vA)*nx+(wB-wA)*nz);
if(rel>3.5){
const pInv=i=>trucks[i].wreck?0:(trucks[i].spinT>0?.4:1);
A.speed-=rel*.4*pInv(i);B.speed+=rel*.4*pInv(j);
if(i===0||j===0){const pl=i===0?A:B,rv=i===0?B:A;
const closing=(vA-vB)*nx+(wA-wB)*nz;
if(closing>0&&pl.cd[j]<=0){pl.cd[j]=1;
const pts=Math.round(Math.min(600,100+rel*30)/10)*10;
G.score+=pts;flash('RAM! +'+pts);
rv.hitT=.5;rv.flashT=.4;rv.smokeT=1;
G.shake=Math.min(1,G.shake+.15+rel*.02);
thud(rel);clank(rel);
if(rel>9&&!rv.wreck){rv.wreck=true;rv.spinT=1.3;rv.spin=(Math.random()<.5?-1:1)*7;
G.score+=500;flash('WRECKED! +500');cheer();}}}
else{A.hitT=B.hitT=.4;A.flashT=B.flashT=.3;thud(rel*.6);
if(Math.random()<.25){const v=Math.random()<.5?A:B;v.spinT=.6;v.spin=(Math.random()<.5?-1:1)*5;}}
}}
}
/* visuals */
for(const t of trucks){
t.g.position.set(t.x,t.y,t.z);t.g.rotation.y=t.h;
for(let w=0;w<4;w++){t.wheels[w].rotation.x+=t.speed*dt/.62;
t.wheels[w].rotation.z=(w%2?1:-1)*Math.PI/2+t.steerVis*.35*(w<2?1:0);}
for(let s=0;s<3;s++){const sm=smokes[s];
if(t.wreck||t.smokeT>0){sm.visible=true;
sm.position.set(t.x+(Math.random()-.5)*.8,t.y+2+s*.55+Math.random()*.3,t.z+(Math.random()-.5)*.8);
const k=.8+s*.5;sm.scale.set(k,k,k);smokeMats[s].opacity=.4-s*.1;}
else sm.visible=false;}
}
for(const o of obstacles){if(o.knock>0){o.knock=Math.max(0,o.knock-dt*2);
o.mesh.rotation.z=Math.sin(performance.now()*.03)*o.knock*.5;}}
if(G.shake>0)G.shake=Math.max(0,G.shake-dt*1.6);
if(flashT>0){flashT-=dt;if(flashT<=0)elF.style.opacity=0;}
hud();}
function nearestOther(t){let best=null,bd=1e9;
for(const o of trucks){if(o===t||o.wreck)continue;
const d=(o.x-t.x)*(o.x-t.x)+(o.z-t.z)*(o.z-t.z);
if(d<bd){bd=d;best=o;}}
return best||trucks[0];}
/* ---------- presentation ---------- */
const camPos=new THREE.Vector3(0,26,44);
let introT=0,crowdPhase=0;
function present(dt){
if(introT<4&&!G.demo){introT+=dt;
const a=introT*.35+Math.PI*.25;
camPos.set(Math.cos(a)*46,20-introT*2,Math.sin(a)*46);}
else{const tx=player.x-Math.sin(player.h)*13,tz=player.z-Math.cos(player.h)*13;
camPos.x+=(tx-camPos.x)*Math.min(1,dt*3.5);
camPos.z+=(tz-camPos.z)*Math.min(1,dt*3.5);
camPos.y+=(7.5-camPos.y)*Math.min(1,dt*3.5);}
camera.position.copy(camPos);
if(G.shake>0){camera.position.x+=(Math.random()-.5)*G.shake*.7;
camera.position.y+=(Math.random()-.5)*G.shake*.5;}
camera.lookAt(player.x,player.y+1.2,player.z);
crowdPhase+=dt*(2+Math.min(2,G.score*.0004));
crowdMat.map.offset.y=Math.sin(crowdPhase)*.015;}
/* ---------- loop ---------- */
let last=performance.now();
function loop(now){requestAnimationFrame(loop);
const dt=Math.min(.05,(now-last)/1000);last=now;
if(!G.photo)step(dt);
present(dt);
renderer.render(scene,camera);}
hud();
requestAnimationFrame(loop);
})();
</script>
</body>
</html>
The notes
- Five trucks: each rival runs a state machine (
hunt/roam/flee) on independent randomized timers, picks its own roaming waypoints, targets the predicted position of its individually computed nearest non-wrecked truck, and steers away from walls and obstacles — four different desire vectors means they spread across the bowl instead of conga-lining into one wall of steel. - Demo mode:
if(location.hash==='#demo'){G.time=20;G.score=5000;G.demo=true;}— it writes straight into the sameGobject the clock decrements, the HUD reads, and photo mode displays, so the 20-second run expires through the genuine game-over path; there is no separate demo layer to peel off. - Photo mode:
Pgates only thestep(dt)call — the physics and game-state update stop dead — while the render loop keeps running so the frozen frame stays on screen with the camera, crowd sway, and overlay card alive; nothing simulates behind the card, and unpausing resumes from the exact same state. - Collisions: every truck is a circle of radius 1.35; each pair is tested each frame, and on overlap the positions are pushed apart along the center-line normal
Attachments
qwen/qwen3.8-2.4t-a95b — page