Run Detail
completedclaude-opus-5Recorded for these videos
27:18Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?
Nov 13, 2026 · YouTube
18:40ERNIE 5.5 Flash Preview vs GLM 5.3 Flash: Baidu's new model is very impressive!
Nov 11, 2026 · YouTube
36:22Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash
Nov 11, 2026 · YouTube
14:03Gemini 4 Carbon: Can it handle my challenges? (First look with one-shot coding tests)
Nov 10, 2026 · YouTube
47:51Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)
Nov 6, 2026 · YouTube
10:57"Crouton Alpha": the latest super-efficient coding model by Meta?
Nov 3, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
22:14GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?
Oct 27, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
31:28Is this company reselling GPT Sol 6.1 at a loss (for non-agentic/text-only)?🤔 Is this sustainable?
Oct 20, 2026 · YouTube
17:58Nemotron 3.5 Super VL vs Opus 5.5: Testing NVIDIA’s new coding juggernaut
Oct 15, 2026 · YouTube
16:04Testing a *massive* new open-weights model 🤯: Muse Spark Open (vs. Nemotron, Opus 5.5, and more)
Oct 15, 2026 · YouTube
16:43Gemini 4 Argon: Great 🐈 Animation, but a broken escalator. (Coding challenge vs Opus 5.5, Sol 6.1)
Oct 13, 2026 · YouTube
16:37Meta's new "Muse Wonder" AI is impressive... but can it compete with Anthropic's models?
Oct 12, 2026 · YouTube
11:12WOW... Haiku 5.5 is very impressive. RIP OpenAI?
Oct 7, 2026 · YouTube
22:47Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?
Oct 6, 2026 · YouTube
22:02Is Pareto 26.10 Preview Just Routing to GPT Sol? I Tested It Against Sol 6.1 Pro
Oct 1, 2026 · YouTube
11:22I Tested Sonnet 5.5 Against Opus 5.5. Is It Actually Cheaper?
Sep 28, 2026 · YouTube
30:00Did Elon Musk's team "train the gay away"... and make Grok 4.7 worse?
Sep 26, 2026 · YouTube
10:58So... how much better is Claude Opus 5.5 vs. GPT-6 Sol, really?
Sep 23, 2026 · YouTube
9:38Claude Opus 5.5... the BEST new model for coding!! 🤩
Sep 22, 2026 · YouTube
29:00Grok 4.7: improved, but GLM 5.3 FlashX beat it anyway (benchmark against Gemini, Sol, etc.)
Sep 22, 2026 · YouTube
16:54Stealth Union Alpha: Is this another cheap GPT model? (better than Luna, cheaper than Terra?)
Sep 16, 2026 · YouTube
16:45DeepSeek V4.1 Flash Is Shockingly Good for the Price
Sep 10, 2026 · YouTube
17:14How much better is GPT-6 Astra over Claude Opus 5? Real Website and Coding Tests
Sep 5, 2026 · YouTube
29:13Implementing a multiplayer game with GPT-6 Astra (+ Gemini 3.8, Opus 5, Sol Pro)
Sep 5, 2026 · YouTube
19:42Meta Muse Spark 1.3 Review: A Huge Leap Forward
Sep 2, 2026 · YouTube
17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
19:45Fable 5.1 writes an animated novel using Ren'Py... did it do better than Sol Pro 5.6?
Sep 1, 2026 · YouTube
14:09Testing IBM Granite-4.2-8B! Can it name 100 women?
Aug 31, 2026 · YouTube
17:37Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?
Aug 28, 2026 · YouTube
23:58Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok
Aug 27, 2026 · YouTube
Provider
openrouter
Challenge Version
v1.0
Turns
1
Duration
Batched — not timed
Total Tokens
65,039
Input Tokens
1,039
Output Tokens
64,000
Reasoning Tokens
39,123
Reasoning Effort
default
Est. Cost
$0.8026
Started
8/27/2026, 12:04:56 PM
OR Provider
Anthropic
Finish Reason
length
Generation ID
gen-batch-1787832296-d9ae846d54c1a02a60f9
Turns (1)
Turn #1
1,039 in64,000 out39,123 reasoning65,039 total
user
You are a game developer who ships browser demos that have to work on the first click, in front of an audience, on someone else's laptop.
Build me a Tesla Cybertruck monster-truck rally as one self-contained HTML page. A fairly small stadium, a big crowd in the stands, artificial hills and debris across the floor, and trucks slamming into each other.
Then make it match the spec below exactly. The spec is the challenge; a great-looking rally that ignores it is a miss.
The build
- One file. Everything — HTML, CSS, JS — in a single
.htmlpage. No build step. Saved to disk and double-clicked, it runs. - One external request, maximum. You may load three.js from a CDN, pinned to an exact version. That is the only network request the page is permitted to make. No second library, no font, no stylesheet, no image file, no audio file.
- Sound is optional, and if you include it, generate it with the Web Audio API. No audio assets.
- No storage. No
localStorage,sessionStorage, cookies orindexedDB. It runs in a sandboxed frame where touching them throws.
The spec
- Exactly five trucks. One the player drives, four rivals under AI. Not four, not six — five.
- Name the arena. Invent a name for the venue and show it in the HUD, on screen, during play.
- The HUD shows the arena name, a score, and a clock. Nothing else is required.
- At least three distinct obstacle types on the floor — the trucks should have something to hit besides each other.
- A crowd in the stands that is visibly a crowd, all the way round.
- Drive with the keyboard. Arrow keys or WASD. Say which in the HUD or an overlay.
- Collisions matter. Ramming a rival does something — score, a visible reaction, a wreck state. Your call, but it must be visible.
Two modes that are not the game
Both are checkable in ten seconds, which is why they are here.
#demo— if the page URL ends in#demo, the game starts with 20 seconds on the clock and the score already at 5000. This must run through the real game state, not a cosmetic overlay. Everything else behaves normally.Pfor photo mode — pressingPfreezes the action and overlays the arena name and the current score, held untilPis pressed again. The simulation stops; it does not keep playing behind the card.
Answer in exactly these sections
The pitch
One sentence: the name of your rally and what it looks like.
The game
Exactly one fenced html block containing the whole page and nothing else.
The notes
Exactly four bullets.
- Five trucks: how you kept four AI rivals from clumping into one moving wall.
- Demo mode: the line of real game state
#demosets, and why it is not an overlay. - Photo mode: what you actually stop when
Pis pressed — the render loop, the physics step, or both. - Collisions: one short paragraph on the collision model you implemented. Not what it looks like — what it computes.
assistant
The pitch
VOLTDOME SMASH — a floodlit, sold-out concrete bowl in the Nevada desert where five stainless Cybertrucks on monster tires launch off dirt mounds, flatten junk cars, scatter oil drums and T-bone each other in front of two thousand bobbing fans.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>VOLTDOME SMASH — Cybertruck Monster Rally</title>
<style>
:root{ --cy:#3ff0ff; --rd:#ff3b4e; --am:#ffd447; }
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#05060a;color:#eaf6ff;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
-webkit-font-smoothing:antialiased;user-select:none}
#wrap{position:fixed;inset:0}
canvas{display:block}
.panel{background:rgba(6,10,18,.55);border:1px solid rgba(63,240,255,.32);
border-radius:10px;padding:7px 13px;box-shadow:0 0 18px rgba(0,0,0,.5) inset}
.lbl{font-size:10px;letter-spacing:.22em;color:#7fa7bd}
#hud{position:fixed;inset:0;pointer-events:none;padding:12px;
display:flex;flex-direction:column;justify-content:space-between}
#top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
#arenaName{font-size:22px;font-weight:700;letter-spacing:.14em;color:#fff;
text-shadow:0 0 14px rgba(63,240,255,.8)}
#arenaSub{font-size:10px;letter-spacing:.14em;color:var(--cy);opacity:.85}
#clockP{text-align:center;min-width:132px}
#clock{font-size:34px;font-weight:700;line-height:1;letter-spacing:.06em;
color:#fff;text-shadow:0 0 16px rgba(255,59,78,.65)}
#scoreP{text-align:right;min-width:150px}
#score{font-size:30px;font-weight:700;line-height:1.05;color:var(--am);
text-shadow:0 0 16px rgba(255,212,71,.55)}
#demoChip{display:none;margin-top:4px;font-size:10px;letter-spacing:.2em;
color:#05060a;background:var(--cy);border-radius:4px;padding:1px 5px}
#mid{display:flex;justify-content:center;align-items:center;flex:1}
#toast{font-size:26px;font-weight:700;letter-spacing:.08em;opacity:0;
text-shadow:0 3px 18px rgba(0,0,0,.9);transition:opacity .12s linear;text-align:center}
#bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;flex-wrap:wrap}
#ctrlP{font-size:11px;letter-spacing:.08em;color:#cfe6f3}
#ctrlP b{color:var(--cy)}
#barsP{min-width:186px}
.barrow{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.16em;color:#7fa7bd;margin:2px 0}
.barrow span{width:52px}
.bar{flex:1;height:8px;background:rgba(255,255,255,.1);border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--cy);border-radius:5px}
.bar i.dmg{background:var(--rd)}
.fullcard{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(3,6,12,.55),rgba(2,3,7,.92));z-index:5}
.card{text-align:center;border:1px solid rgba(63,240,255,.45);border-radius:16px;
padding:28px 46px;background:rgba(4,8,14,.72);box-shadow:0 0 60px rgba(0,0,0,.8)}
.ptitle{font-size:40px;font-weight:700;letter-spacing:.2em;color:#fff;text-shadow:0 0 22px rgba(63,240,255,.85)}
.pline{font-size:12px;letter-spacing:.4em;color:var(--cy);margin-top:6px}
.pscore{font-size:22px;letter-spacing:.14em;margin-top:18px;color:var(--am)}
.phint{font-size:11px;letter-spacing:.2em;color:#8fb0c4;margin-top:16px}
#fatal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
text-align:center;padding:30px;font-size:14px;letter-spacing:.1em;color:var(--rd);z-index:9}
</style>
</head>
<body>
<div id="wrap"></div>
<div id="hud">
<div id="top">
<div class="panel">
<div class="lbl">ARENA</div>
<div id="arenaName">THE VOLTDOME</div>
<div id="arenaSub">CYBERTRUCK MONSTER RALLY · 5 TRUCKS</div>
</div>
<div class="panel" id="clockP">
<div class="lbl">CLOCK</div>
<div id="clock">2:00</div>
<div id="demoChip">#DEMO</div>
</div>
<div class="panel" id="scoreP">
<div class="lbl">SCORE</div>
<div id="score">0</div>
</div>
</div>
<div id="mid"><div id="toast"></div></div>
<div id="bottom">
<div class="panel" id="ctrlP">
<b>DRIVE:</b> WASD / ARROW KEYS · <b>SPACE</b> LUDICROUS BOOST ·
<b>P</b> PHOTO MODE · <b>R</b> RESTART · <b>M</b> MUTE
</div>
<div class="panel" id="barsP">
<div class="barrow"><span>BOOST</span><div class="bar"><i id="boostBar"></i></div></div>
<div class="barrow"><span>DAMAGE</span><div class="bar"><i id="dmgBar" class="dmg" style="width:0%"></i></div></div>
</div>
</div>
</div>
<div class="fullcard" id="photocard"><div class="card">
<div class="ptitle" id="pArena">THE VOLTDOME</div>
<div class="pline">PHOTO MODE</div>
<div class="pscore">SCORE <span id="pScore">0</span></div>
<div class="phint">PRESS P TO RESUME</div>
</div></div>
<div class="fullcard" id="overlay"><div class="card">
<div class="ptitle">TIME</div>
<div class="pline" id="oArena">THE VOLTDOME</div>
<div class="pscore">FINAL SCORE <span id="oScore">0</span></div>
<div class="phint">PRESS R FOR ANOTHER RUN</div>
</div></div>
<div id="fatal">THREE.JS FAILED TO LOAD.<br>THIS PAGE NEEDS ITS ONE CDN REQUEST.</div>
<script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>
<script>
"use strict";
(function(){
if(!window.THREE){ document.getElementById('fatal').style.display='flex'; return; }
try{
/* ============================ CONFIG ============================ */
var ARENA_NAME = "THE VOLTDOME";
var R = 56; // arena floor radius
var MATCH_TIME = 120; // seconds
var DEMO = (location.hash || '').toLowerCase() === '#demo';
/* ============================ HELPERS =========================== */
function clamp(v,a,b){ return v<a?a:(v>b?b:v); }
function rnd(a,b){ return a+Math.random()*(b-a); }
function wrapAngle(a){ while(a>Math.PI)a-=6.283185307; while(a<-Math.PI)a+=6.283185307; return a; }
/* ============================ TERRAIN =========================== */
var HILLS = [
{x:0,z:-30,r:14,h:5.0}, {x:0,z:30,r:14,h:5.0},
{x:-32,z:6,r:12,h:4.2}, {x:32,z:-6,r:12,h:4.2},
{x:-16,z:-19,r:9,h:2.9}, {x:16,z:19,r:9,h:2.9},
{x:25,z:27,r:10,h:3.4}, {x:-25,z:-27,r:10,h:3.4},
{x:41,z:16,r:8,h:2.4}, {x:-41,z:-16,r:8,h:2.4}
];
function hAt(x,z){
var h=0;
for(var i=0;i<HILLS.length;i++){
var m=HILLS[i], dx=x-m.x, dz=z-m.z, d=Math.sqrt(dx*dx+dz*dz);
if(d<m.r) h += m.h*0.5*(1+Math.cos(Math.PI*d/m.r));
}
return h;
}
var _n = new THREE.Vector3();
function nAt(x,z){
var e=0.7;
var hx=hAt(x+e,z)-hAt(x-e,z), hz=hAt(x,z+e)-hAt(x,z-e);
return _n.set(-hx, 2*e, -hz).normalize();
}
/* ============================ RENDERER ========================== */
var renderer = new THREE.WebGLRenderer({antialias:true, powerPreference:'high-performance'});
renderer.setPixelRatio(Math.min(window.devicePixelRatio||1, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
if(THREE.sRGBEncoding) renderer.outputEncoding = THREE.sRGBEncoding;
document.getElementById('wrap').appendChild(renderer.domElement);
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x070a12);
scene.fog = new THREE.Fog(0x070a12, 120, 320);
var camera = new THREE.PerspectiveCamera(62, window.innerWidth/window.innerHeight, 0.5, 700);
scene.add(new THREE.HemisphereLight(0x8fb4ff, 0x2a231b, 0.8));
var dl = new THREE.DirectionalLight(0xffffff, 0.8); dl.position.set(45,90,25); scene.add(dl);
var dl2 = new THREE.DirectionalLight(0x66ccff, 0.35); dl2.position.set(-55,45,-35); scene.add(dl2);
window.addEventListener('resize', function(){
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
/* ============================ ARENA ============================= */
function bannerTexture(){
var c=document.createElement('canvas'); c.width=1024; c.height=128;
var x=c.getContext('2d');
x.fillStyle='#0a1120'; x.fillRect(0,0,1024,128);
x.fillStyle='#16294a'; x.fillRect(0,0,1024,12); x.fillRect(0,116,1024,12);
x.textBaseline='middle'; x.font='bold 60px monospace';
x.fillStyle='#3ff0ff'; x.fillText('THE VOLTDOME',26,66);
x.fillStyle='#ff3b4e'; x.fillText('*',452,60);
x.fillStyle='#dfe9f5'; x.fillText('MONSTER RALLY',492,66);
var t=new THREE.CanvasTexture(c);
t.wrapS=THREE.RepeatWrapping; t.repeat.x=-7;
return t;
}
// floor
var tGeo = new THREE.PlaneGeometry(2*R+34, 2*R+34, 108, 108);
tGeo.rotateX(-Math.PI/2);
(function(){
var p=tGeo.attributes.position, cols=[];
for(var i=0;i<p.count;i++){
var x=p.getX(i), z=p.getZ(i), y=hAt(x,z);
var rr=Math.sqrt(x*x+z*z);
if(rr>R) y -= Math.min(2.5,(rr-R)*0.35);
y += (Math.sin(x*1.6)+Math.cos(z*1.8))*0.07;
p.setY(i,y);
var s=0.72+0.30*Math.min(1,y/5)+(Math.random()-0.5)*0.13;
cols.push(0.30*s+0.05, 0.23*s+0.035, 0.16*s+0.025);
}
tGeo.computeVertexNormals();
tGeo.setAttribute('color', new THREE.Float32BufferAttribute(cols,3));
})();
scene.add(new THREE.Mesh(tGeo, new THREE.MeshPhongMaterial({vertexColors:true, shininess:2, flatShading:true})));
// centre paint
var ring = new THREE.Mesh(new THREE.RingGeometry(9.2,10.6,64),
new THREE.MeshBasicMaterial({color:0x2fd8e8, transparent:true, opacity:0.35, side:THREE.DoubleSide}));
ring.rotation.x=-Math.PI/2; ring.position.y=0.07; scene.add(ring);
// barrier wall with banner
var wallH=3.5;
var wall=new THREE.Mesh(new THREE.CylinderGeometry(R,R,wallH,80,1,true),
new THREE.MeshPhongMaterial({map:bannerTexture(), side:THREE.BackSide, shininess:10}));
wall.position.y=wallH/2; scene.add(wall);
var rail=new THREE.Mesh(new THREE.CylinderGeometry(R+0.35,R+0.35,0.4,80,1,true),
new THREE.MeshBasicMaterial({color:0x3ff0ff, side:THREE.DoubleSide}));
rail.position.y=wallH+0.1; scene.add(rail);
// stands
var concrete=new THREE.MeshPhongMaterial({color:0x333b48, shininess:5, flatShading:true, side:THREE.DoubleSide});
var TIERS=7, tierRise=2.35, tierDepth=4.0, r0=R+1.0;
var deckInfo=[];
for(var ti=0; ti<TIERS; ti++){
var rIn=r0+ti*tierDepth, rOut=rIn+tierDepth, yy=wallH-0.6+ti*tierRise;
var deck=new THREE.Mesh(new THREE.RingGeometry(rIn,rOut,80,1), concrete);
deck.rotation.x=-Math.PI/2; deck.position.y=yy; scene.add(deck);
var riser=new THREE.Mesh(new THREE.CylinderGeometry(rIn,rIn,tierRise,80,1,true), concrete);
riser.position.y=yy-tierRise/2; scene.add(riser);
deckInfo.push({r:rIn+1.9, y:yy});
}
var backWall=new THREE.Mesh(new THREE.CylinderGeometry(r0+TIERS*tierDepth+1, r0+TIERS*tierDepth+1, 36, 80, 1, true),
new THREE.MeshPhongMaterial({color:0x101724, side:THREE.DoubleSide, shininess:2, flatShading:true}));
backWall.position.y=16; scene.add(backWall);
// floodlight towers
for(var fi=0; fi<6; fi++){
var a=fi/6*6.2832+0.4, rr2=r0+TIERS*tierDepth-3;
var mast=new THREE.Mesh(new THREE.BoxGeometry(1.1,30,1.1),
new THREE.MeshPhongMaterial({color:0x1c222e, flatShading:true}));
mast.position.set(Math.cos(a)*rr2, 15, Math.sin(a)*rr2); scene.add(mast);
var lamp=new THREE.Mesh(new THREE.BoxGeometry(7,2.4,1.2), new THREE.MeshBasicMaterial({color:0xf2fbff}));
lamp.position.set(Math.cos(a)*(rr2-1), 29, Math.sin(a)*(rr2-1));
lamp.lookAt(0,0,0); scene.add(lamp);
}
/* ============================ CROWD ============================= */
var SHIRTS=[0xff4b5c,0x3ff0ff,0xffd447,0x8affc1,0xb388ff,0xf3f7fb];
var bodyGeo=new THREE.BoxGeometry(0.5,1.0,0.38);
var headGeo=new THREE.SphereGeometry(0.2,6,4);
var people=[], byG=[[],[],[],[],[],[]];
for(var t2=0;t2<deckInfo.length;t2++){
var info=deckInfo[t2], count=250+t2*14;
for(var k=0;k<count;k++){
var ang=Math.random()*6.2832, rad=info.r+rnd(-1.3,1.3);
var px=Math.cos(ang)*rad, pz=Math.sin(ang)*rad;
var pp={x:px, y:info.y+0.52, z:pz, rot:Math.atan2(-px,-pz), ph:Math.random()*6.28,
g:(Math.random()*6)|0};
people.push(pp); byG[pp.g].push(pp);
}
}
var bodyMeshes=[];
for(var g2=0; g2<6; g2++){
var im=new THREE.InstancedMesh(bodyGeo,
new THREE.MeshPhongMaterial({color:SHIRTS[g2], flatShading:true, shininess:6}), byG[g2].length);
im.frustumCulled=false; scene.add(im); bodyMeshes.push(im);
}
var headMesh=new THREE.InstancedMesh(headGeo,
new THREE.MeshPhongMaterial({color:0xd8a97e, flatShading:true}), people.length);
headMesh.frustumCulled=false; scene.add(headMesh);
var dummy=new THREE.Object3D();
var crowdHype=0;
function animateCrowd(time){
var hi=0, amp=0.05+crowdHype*0.55;
for(var g=0; g<byG.length; g++){
var arr=byG[g], m=bodyMeshes[g];
for(var i=0;i<arr.length;i++){
var p=arr[i], b=Math.abs(Math.sin(time*3.4+p.ph))*amp;
dummy.position.set(p.x, p.y+b, p.z);
dummy.rotation.set(0,p.rot,0);
dummy.updateMatrix(); m.setMatrixAt(i, dummy.matrix);
dummy.position.y = p.y+b+0.78;
dummy.updateMatrix(); headMesh.setMatrixAt(hi++, dummy.matrix);
}
m.instanceMatrix.needsUpdate=true;
}
headMesh.instanceMatrix.needsUpdate=true;
}
animateCrowd(0);
/* ============================ PARTICLES ========================= */
var PMAX=900;
var pPos=new Float32Array(PMAX*3), pCol=new Float32Array(PMAX*3), pBase=new Float32Array(PMAX*3);
var pVel=new Float32Array(PMAX*3), pLife=new Float32Array(PMAX), pLM=new Float32Array(PMAX), pG=new Float32Array(PMAX);
for(var pi=0; pi<PMAX; pi++) pPos[pi*3+1]=-1000;
var pGeo=new THREE.BufferGeometry();
pGeo.setAttribute('position', new THREE.BufferAttribute(pPos,3));
pGeo.setAttribute('color', new THREE.BufferAttribute(pCol,3));
var points=new THREE.Points(pGeo, new THREE.PointsMaterial({size:0.62, vertexColors:true,
transparent:true, opacity:0.95, depthWrite:false, sizeAttenuation:true}));
points.frustumCulled=false; scene.add(points);
var pCur=0, tmpC=new THREE.Color();
function spawnP(x,y,z,n,spd,hex,grav,life){
tmpC.setHex(hex);
for(var i=0;i<n;i++){
var j=pCur; pCur=(pCur+1)%PMAX;
pPos[j*3]=x+rnd(-0.4,0.4); pPos[j*3+1]=y+rnd(0,0.6); pPos[j*3+2]=z+rnd(-0.4,0.4);
pVel[j*3]=rnd(-spd,spd); pVel[j*3+1]=rnd(spd*0.3,spd*1.1); pVel[j*3+2]=rnd(-spd,spd);
pBase[j*3]=tmpC.r; pBase[j*3+1]=tmpC.g; pBase[j*3+2]=tmpC.b;
pCol[j*3]=tmpC.r; pCol[j*3+1]=tmpC.g; pCol[j*3+2]=tmpC.b;
pG[j]=grav; pLife[j]=life*rnd(0.6,1.2); pLM[j]=pLife[j];
}
}
function updateP(dt){
for(var i=0;i<PMAX;i++){
if(pLife[i]<=0) continue;
pLife[i]-=dt;
if(pLife[i]<=0){ pPos[i*3+1]=-1000; pCol[i*3]=pCol[i*3+1]=pCol[i*3+2]=0; continue; }
pVel[i*3+1]-=pG[i]*dt;
pPos[i*3]+=pVel[i*3]*dt; pPos[i*3+1]+=pVel[i*3+1]*dt; pPos[i*3+2]+=pVel[i*3+2]*dt;
var f=pLife[i]/pLM[i];
pCol[i*3]=pBase[i*3]*f; pCol[i*3+1]=pBase[i*3+1]*f; pCol[i*3+2]=pBase[i*3+2]*f;
}
pGeo.attributes.position.needsUpdate=true;
pGeo.attributes.color.needsUpdate=true;
}
function resetP(){ for(var i=0;i<PMAX;i++){ pLife[i]=0; pPos[i*3+1]=-1000; pCol[i*3]=pCol[i*3+1]=pCol[i*3+2]=0; } }
/* ============================ AUDIO (optional) ================== */
var AC=null, master=null, engOsc=null, engSub=null, engFilt=null, engGain=null, noiseBuf=null, muted=false;
function audioInit(){
if(AC) return;
try{
var C=window.AudioContext||window.webkitAudioContext; if(!C) return;
AC=new C();
master=AC.createGain(); master.gain.value=muted?0:0.5; master.connect(AC.destination);
noiseBuf=AC.createBuffer(1, Math.floor(AC.sampleRate*0.5), AC.sampleRate);
var ch=noiseBuf.getChannelData(0);
for(var i=0;i<ch.length;i++) ch[i]=Math.random()*2-1;
engOsc=AC.createOscillator(); engOsc.type='sawtooth'; engOsc.frequency.value=60;
engSub=AC.createOscillator(); engSub.type='square'; engSub.frequency.value=30;
engFilt=AC.createBiquadFilter(); engFilt.type='lowpass'; engFilt.frequency.value=420;
engGain=AC.createGain(); engGain.gain.value=0;
engOsc.connect(engFilt); engSub.connect(engFilt); engFilt.connect(engGain); engGain.connect(master);
engOsc.start(); engSub.start();
}catch(e){ AC=null; }
}
function thud(vol,freq){
if(!AC) return;
try{
var s=AC.createBufferSource(); s.buffer=noiseBuf;
var f=AC.createBiquadFilter(); f.type='lowpass'; f.frequency.value=freq||420;
var g=AC.createGain();
g.gain.setValueAtTime(Math.min(0.85,vol), AC.currentTime);
g.gain.exponentialRampToValueAtTime(0.001, AC.currentTime+0.35);
s.connect(f); f.connect(g); g.connect(master);
s.start(); s.stop(AC.currentTime+0.4);
}catch(e){}
}
function engineAudio(sp){
if(!AC) return;
try{
engOsc.frequency.value=55+sp*7.2; engSub.frequency.value=28+sp*3.2;
engFilt.frequency.value=300+sp*48;
engGain.gain.value=(state.photo||state.over)?0:(0.045+Math.min(0.1,sp*0.004));
}catch(e){}
}
/* ============================ TRUCKS ============================ */
function truckMesh(bodyCol){
var g=new THREE.Group(), W=2.5, W2=2.34;
var lo=new THREE.Shape();
lo.moveTo(3.62,0.28); lo.lineTo(3.50,0.95); lo.lineTo(2.55,1.16);
lo.lineTo(-3.50,1.16); lo.lineTo(-3.56,0.28); lo.lineTo(3.62,0.28);
var geoL=new THREE.ExtrudeGeometry(lo,{depth:W,bevelEnabled:false});
geoL.rotateY(-Math.PI/2); geoL.translate(W/2,1.02,0);
var matBody=new THREE.MeshPhongMaterial({color:bodyCol, shininess:80, specular:0x9aa4b0, flatShading:true});
g.add(new THREE.Mesh(geoL, matBody));
var up=new THREE.Shape();
up.moveTo(2.55,1.12); up.lineTo(0.35,2.06); up.lineTo(-3.50,1.34); up.lineTo(-3.50,1.12); up.lineTo(2.55,1.12);
var geoU=new THREE.ExtrudeGeometry(up,{depth:W2,bevelEnabled:false});
geoU.rotateY(-Math.PI/2); geoU.translate(W2/2,1.02,0);
g.add(new THREE.Mesh(geoU, new THREE.MeshPhongMaterial({color:0x0d1218, shininess:130, specular:0x88ccff, flatShading:true})));
var chassis=new THREE.Mesh(new THREE.BoxGeometry(2.0,0.3,5.6),
new THREE.MeshPhongMaterial({color:0x14161b, flatShading:true}));
chassis.position.y=1.05; g.add(chassis);
var tireGeo=new THREE.CylinderGeometry(1.16,1.16,0.92,14); tireGeo.rotateZ(Math.PI/2);
var tireMat=new THREE.MeshPhongMaterial({color:0x191b1f, shininess:14, flatShading:true});
var hubMat=new THREE.MeshPhongMaterial({color:0x8e959d, shininess:70, flatShading:true});
var spots=[[1.42,2.35],[-1.42,2.35],[1.42,-2.35],[-1.42,-2.35]], wheels=[];
for(var i=0;i<4;i++){
var w=new THREE.Group();
w.add(new THREE.Mesh(tireGeo,tireMat));
var hub=new THREE.Mesh(new THREE.CylinderGeometry(0.5,0.5,0.96,10), hubMat);
hub.rotation.z=Math.PI/2; w.add(hub);
w.position.set(spots[i][0],1.16,spots[i][1]); g.add(w); wheels.push(w);
}
var lb=new THREE.Mesh(new THREE.BoxGeometry(2.0,0.16,0.12), new THREE.MeshBasicMaterial({color:0xdff6ff}));
lb.position.set(0,1.62,3.56); g.add(lb);
var rl=new THREE.Mesh(new THREE.BoxGeometry(2.0,0.14,0.1), new THREE.MeshBasicMaterial({color:0xff2233}));
rl.position.set(0,1.78,-3.6); g.add(rl);
return {group:g, wheels:wheels, matBody:matBody};
}
var trucks=[], player=null;
var SPEC=[
{name:'#01 YOU', col:0xc9d0d8, acc:30, max:31, turn:2.1, mass:3.2},
{name:'#07 RED RAGE', col:0xd6303e, acc:28, max:29, turn:2.0, mass:3.1, aggr:0.80, bias:0.75, lane:0},
{name:'#12 BLUE BOLT', col:0x2f7ad6, acc:28, max:30, turn:2.1, mass:3.0, aggr:0.50, bias:0.45, lane:1.5708},
{name:'#23 AMBER ANVIL',col:0xe0a022, acc:27, max:28, turn:1.9, mass:3.4, aggr:0.70, bias:0.35, lane:3.1416},
{name:'#44 GREEN GHOST',col:0x35b56d, acc:29, max:31, turn:2.2, mass:2.9, aggr:0.35, bias:0.30, lane:-1.5708}
];
var shadowMat=new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.35, depthWrite:false});
var shadowGeo=new THREE.CircleGeometry(3.1,20); shadowGeo.rotateX(-Math.PI/2);
for(var si=0; si<5; si++){
var sp=SPEC[si], vis=truckMesh(sp.col);
scene.add(vis.group);
var sh=new THREE.Mesh(shadowGeo, shadowMat); scene.add(sh);
var tr={
name:sp.name, isPlayer:si===0, acc:sp.acc, maxSpeed:sp.max, turn:sp.turn, mass:sp.mass,
r:3.0, pos:new THREE.Vector3(), vel:new THREE.Vector3(), vy:0, yaw:0, yawRate:0,
throttle:0, steer:0, boosting:false, boost:100, damage:0, flash:0, wrecked:false, wreckT:0,
smokeT:0, airT:0, grounded:true, lastGy:0, lastHitBy:null, spin:0,
mesh:vis.group, wheels:vis.wheels, matBody:vis.matBody, baseCol:new THREE.Color(sp.col),
shadow:sh,
ai:{mode:'roam', t:rnd(0.2,2.5), victim:null, wp:null, stuck:0,
aggr:sp.aggr||0, bias:sp.bias||0, baseLane:sp.lane||0, lane:sp.lane||0}
};
trucks.push(tr);
}
player=trucks[0];
var darkCol=new THREE.Color(0x3a3d42);
function placeTruck(t,i){
var a=i/5*6.2832+0.35, rad=15;
t.pos.set(Math.cos(a)*rad, 0, Math.sin(a)*rad);
t.pos.y=hAt(t.pos.x,t.pos.z);
t.lastGy=t.pos.y;
t.yaw=Math.atan2(-t.pos.x,-t.pos.z);
t.vel.set(0,0,0); t.vy=0; t.yawRate=0; t.damage=0; t.wrecked=false; t.wreckT=0;
t.boost=100; t.flash=0; t.airT=0; t.lastHitBy=null;
}
function respawn(t){
var bx=0,bz=0,best=-1;
for(var k=0;k<14;k++){
var a=rnd(0,6.2832), rad=rnd(12,44), x=Math.cos(a)*rad, z=Math.sin(a)*rad, m=1e9;
for(var i=0;i<trucks.length;i++){
if(trucks[i]===t) continue;
var d=Math.hypot(trucks[i].pos.x-x, trucks[i].pos.z-z); if(d<m) m=d;
}
if(m>best){ best=m; bx=x; bz=z; }
}
t.pos.set(bx, hAt(bx,bz), bz); t.lastGy=t.pos.y;
t.vel.set(0,0,0); t.vy=0; t.yawRate=0; t.damage=0; t.wrecked=false; t.wreckT=0; t.flash=0.6;
t.yaw=Math.atan2(-bx,-bz); t.lastHitBy=null;
spawnP(bx, t.pos.y+1.5, bz, 18, 5, 0x3ff0ff, 6, 0.6);
}
/* ============================ DEBRIS ============================ */
var debris=[];
function makeCar(c){
var g=new THREE.Group();
var m=new THREE.MeshPhongMaterial({color:c, shininess:35, flatShading:true});
var b=new THREE.Mesh(new THREE.BoxGeometry(4.2,0.9,1.9), m); b.position.y=0.75; g.add(b);
var cab=new THREE.Mesh(new THREE.BoxGeometry(2.1,0.8,1.72),
new THREE.MeshPhongMaterial({color:0x22262d, shininess:60, flatShading:true}));
cab.position.set(-0.25,1.5,0); g.add(cab);
var wm=new THREE.MeshPhongMaterial({color:0x15161a, flatShading:true});
var ws=[[1.4,0.98],[1.4,-0.98],[-1.4,0.98],[-1.4,-0.98]];
for(var i=0;i<4;i++){
var w=new THREE.Mesh(new THREE.CylinderGeometry(0.45,0.45,0.3,10), wm);
w.rotation.x=Math.PI/2; w.position.set(ws[i][0],0.45,ws[i][1]); g.add(w);
}
return g;
}
function makeDrum(){
var g=new THREE.Group();
var b=new THREE.Mesh(new THREE.CylinderGeometry(0.62,0.62,1.5,12),
new THREE.MeshPhongMaterial({color:0xdd6b1f, shininess:40, flatShading:true}));
b.position.y=0.75; g.add(b);
for(var i=0;i<2;i++){
var rg=new THREE.Mesh(new THREE.CylinderGeometry(0.66,0.66,0.12,12),
new THREE.MeshPhongMaterial({color:0xd9dee5, shininess:60, flatShading:true}));
rg.position.y=0.45+i*0.6; g.add(rg);
}
return g;
}
function makePylon(){
var g=new THREE.Group();
var b=new THREE.Mesh(new THREE.CylinderGeometry(2.0,2.2,3.2,16),
new THREE.MeshPhongMaterial({color:0x9aa0a8, shininess:6, flatShading:true}));
b.position.y=1.6; g.add(b);
var band=new THREE.Mesh(new THREE.CylinderGeometry(2.12,2.12,0.5,16),
new THREE.MeshPhongMaterial({color:0xffd447, shininess:20, flatShading:true}));
band.position.y=2.5; g.add(band);
var top=new THREE.Mesh(new THREE.CylinderGeometry(2.05,2.05,0.25,16),
new THREE.MeshPhongMaterial({color:0x5a606a, flatShading:true}));
top.position.y=3.3; g.add(top);
return g;
}
function addDebris(type,x,z,yaw){
var mesh, r, mass, isStatic=false;
if(type==='car'){ mesh=makeCar([0x8892a0,0x6f7d8d,0x9c6d55,0x5f7a6a][(Math.random()*4)|0]); r=2.4; mass=1.0; }
else if(type==='drum'){ mesh=makeDrum(); r=0.85; mass=0.14; }
else { mesh=makePylon(); r=2.2; mass=999; isStatic=true; }
scene.add(mesh);
var d={type:type, mesh:mesh, r:r, mass:mass, static:isStatic, crushed:false,
pos:new THREE.Vector3(x,hAt(x,z),z), vel:new THREE.Vector3(), vy:0, yaw:yaw||0, yawRate:0,
home:new THREE.Vector3(x,hAt(x,z),z), homeYaw:yaw||0};
debris.push(d);
}
(function buildDebris(){
var cars=[[-22,-8],[22,8],[-10,34],[12,-34],[36,20],[-36,-20],[7,15],[-7,-15]];
for(var i=0;i<cars.length;i++) addDebris('car',cars[i][0],cars[i][1],rnd(0,6.28));
for(var j=0;j<18;j++){ var a=rnd(0,6.2832), rr=rnd(13,48); addDebris('drum',Math.cos(a)*rr,Math.sin(a)*rr,0); }
for(var k=0;k<8;k++){ var a2=k/8*6.2832+0.3, rr2=(k%2)?26:41; addDebris('pylon',Math.cos(a2)*rr2,Math.sin(a2)*rr2,0); }
})();
function resetDebris(d){
d.pos.copy(d.home); d.vel.set(0,0,0); d.vy=0; d.yaw=d.homeYaw; d.yawRate=0; d.crushed=false;
d.mesh.scale.set(1,1,1);
}
/* ============================ STATE / HUD ======================= */
var state={ score:0, time:MATCH_TIME, photo:false, over:false, toastT:0 };
var elScore=document.getElementById('score'), elClock=document.getElementById('clock');
var elToast=document.getElementById('toast'), elBoost=document.getElementById('boostBar');
var elDmg=document.getElementById('dmgBar'), elPhoto=document.getElementById('photocard');
var elOverlay=document.getElementById('overlay'), elPScore=document.getElementById('pScore');
var elOScore=document.getElementById('oScore');
document.getElementById('arenaName').textContent=ARENA_NAME;
document.getElementById('pArena').textContent=ARENA_NAME;
document.getElementById('oArena').textContent=ARENA_NAME;
if(DEMO) document.getElementById('demoChip').style.display='inline-block';
function toast(msg,color){
elToast.textContent=msg; elToast.style.color=color||'#ffd447';
elToast.style.opacity=1; state.toastT=1.5;
}
function award(n,msg){
state.score+=n;
if(msg) toast(msg+' +'+n, '#ffd447');
}
function hudUpdate(){
elScore.textContent=state.score;
var t=Math.max(0,state.time);
elClock.textContent=Math.floor(t/60)+':'+('0'+Math.floor(t%60)).slice(-2);
elBoost.style.width=clamp(player.boost,0,100)+'%';
elDmg.style.width=clamp(player.damage,0,100)+'%';
elPScore.textContent=state.score;
}
function reset(){
state.score = DEMO ? 5000 : 0;
state.time = DEMO ? 20 : MATCH_TIME;
state.over=false; state.photo=false; state.toastT=0;
elToast.style.opacity=0; elOverlay.style.display='none'; elPhoto.style.display='none';
for(var i=0;i<trucks.length;i++) placeTruck(trucks[i],i);
for(var j=0;j<debris.length;j++) resetDebris(j>=0?debris[j]:null);
resetP(); crowdHype=0;
camPos.set(player.pos.x, player.pos.y+9, player.pos.z-16);
camLook.copy(player.pos);
hudUpdate();
}
function endMatch(){
state.over=true; state.time=0; crowdHype=1;
elOScore.textContent=state.score;
elOverlay.style.display='flex';
}
/* ============================ INPUT ============================= */
var keys={};
window.addEventListener('keydown', function(e){
var k=(e.key||'').toLowerCase();
if(['arrowup','arrowdown','arrowleft','arrowright',' '].indexOf(k)>=0) e.preventDefault();
audioInit();
if(k==='p'){
state.photo=!state.photo;
elPhoto.style.display=state.photo?'flex':'none';
if(AC && engGain) try{ engGain.gain.value=0; }catch(err){}
return;
}
if(k==='r'){ reset(); return; }
if(k==='m'){ muted=!muted; if(master) try{ master.gain.value=muted?0:0.5; }catch(err){} return; }
keys[k]=true;
});
window.addEventListener('keyup', function(e){ keys[(e.key||'').toLowerCase()]=false; });
window.addEventListener('blur', function(){ keys={}; });
/* ============================ CONTROL =========================== */
function playerControl(dt){
var t=player;
if(t.wrecked){ t.throttle=0; t.steer=0; t.boosting=false; return; }
var th=0, st=0;
if(keys['arrowup']||keys['w']) th+=1;
if(keys['arrowdown']||keys['s']) th-=1;
if(keys['arrowleft']||keys['a']) st-=1;
if(keys['arrowright']||keys['d']) st+=1;
t.throttle=th; t.steer=st;
var wantBoost=!!keys[' '] && th>0 && t.boost>1;
t.boosting=wantBoost;
t.boost=clamp(t.boost + (wantBoost?-42*dt:14*dt), 0, 100);
}
function randomWP(){
if(Math.random()<0.55){
var h=HILLS[(Math.random()*HILLS.length)|0];
return new THREE.Vector3(h.x+rnd(-3,3),0,h.z+rnd(-3,3));
}
var a=rnd(0,6.2832), r=rnd(8,44);
return new THREE.Vector3(Math.cos(a)*r,0,Math.sin(a)*r);
}
function pickMode(t){
var ai=t.ai;
ai.t=rnd(2.6,5.6);
ai.lane=ai.baseLane+rnd(-0.45,0.45);
var r=Math.random();
if(r<ai.aggr){
ai.mode='hunt';
if(Math.random()<ai.bias) ai.victim=player;
else { var c=trucks[1+((Math.random()*4)|0)]; ai.victim=(c===t)?player:c; }
} else if(r<ai.aggr+0.3){ ai.mode='smash'; }
else { ai.mode='roam'; ai.wp=randomWP(); }
}
function aiControl(t,dt){
var ai=t.ai;
if(t.wrecked){ t.throttle=0; t.steer=0; t.boosting=false; return; }
ai.t-=dt;
if(ai.t<=0) pickMode(t);
var tx=0,tz=0,i;
if(ai.mode==='hunt'){
var v=ai.victim;
if(!v || v.wrecked){ v=player; ai.victim=v; }
var vdx=v.pos.x-t.pos.x, vdz=v.pos.z-t.pos.z, vd=Math.hypot(vdx,vdz);
if(vd<12){ tx=v.pos.x+v.vel.x*0.3; tz=v.pos.z+v.vel.z*0.3; }
else{
var off=Math.min(14, vd*0.45), lead=Math.min(1,vd/25);
tx=v.pos.x+v.vel.x*lead*0.6+Math.sin(v.yaw+ai.lane)*off;
tz=v.pos.z+v.vel.z*lead*0.6+Math.cos(v.yaw+ai.lane)*off;
}
} else if(ai.mode==='smash'){
var best=null,bd=1e9;
for(i=0;i<debris.length;i++){
var dd=debris[i]; if(dd.static||dd.crushed) continue;
var q=(dd.pos.x-t.pos.x)*(dd.pos.x-t.pos.x)+(dd.pos.z-t.pos.z)*(dd.pos.z-t.pos.z);
if(q<bd){ bd=q; best=dd; }
}
if(best){ tx=best.pos.x; tz=best.pos.z; }
else { ai.mode='roam'; ai.wp=randomWP(); tx=ai.wp.x; tz=ai.wp.z; }
} else {
if(!ai.wp) ai.wp=randomWP();
if(Math.hypot(ai.wp.x-t.pos.x, ai.wp.z-t.pos.z)<8) ai.wp=randomWP();
tx=ai.wp.x; tz=ai.wp.z;
}
var dx=tx-t.pos.x, dz=tz-t.pos.z;
// separation from other trucks (never from the truck it is hunting)
for(i=0;i<trucks.length;i++){
var o=trucks[i]; if(o===t || o===ai.victim) continue;
var ox=t.pos.x-o.pos.x, oz=t.pos.z-o.pos.z, od=Math.hypot(ox,oz);
if(od<14 && od>0.01){ var w=(14-od)*1.9; dx+=ox/od*w; dz+=oz/od*w; }
}
// avoid concrete pylons
for(i=0;i<debris.length;i++){
var p=debris[i]; if(!p.static) continue;
var px=t.pos.x-p.pos.x, pz=t.pos.z-p.pos.z, pd=Math.hypot(px,pz);
if(pd<11 && pd>0.01){ var w2=(11-pd)*2.4; dx+=px/pd*w2; dz+=pz/pd*w2; }
}
var rr=Math.hypot(t.pos.x,t.pos.z);
if(rr>R-16){ var w3=(rr-(R-16))*2.8; dx-=t.pos.x/rr*w3; dz-=t.pos.z/rr*w3; }
var ang=Math.atan2(dx,dz), diff=wrapAngle(ang-t.yaw);
t.steer=clamp(diff*2.4,-1,1);
t.throttle=Math.abs(diff)<1.15?1:0.55;
var spd=Math.hypot(t.vel.x,t.vel.z);
if(spd<1.3) ai.stuck+=dt; else ai.stuck=Math.max(0,ai.stuck-dt*2);
if(ai.stuck>0.9){ t.throttle=-1; t.steer=(ai.lane>=0?1:-1); if(ai.stuck>2.4) ai.stuck=0; }
t.boosting = (ai.mode==='hunt' && Math.abs(diff)<0.4);
}
/* ============================ PHYSICS =========================== */
var FWD=new THREE.Vector3(), LAT=new THREE.Vector3();
function stepTruck(t,dt){
FWD.set(Math.sin(t.yaw),0,Math.cos(t.yaw));
LAT.set(FWD.z,0,-FWD.x);
var gy=hAt(t.pos.x,t.pos.z);
// ---- vertical: gravity + terrain launch
t.vy-=26*dt;
t.pos.y+=t.vy*dt;
if(t.pos.y<gy){
var impact=-t.vy;
t.pos.y=gy;
var climb=(gy-t.lastGy)/dt;
t.vy=climb>0?Math.min(climb,17):0;
if(!t.grounded){
spawnP(t.pos.x,gy+0.3,t.pos.z,8,3,0x6b5540,10,0.5);
if(t.airT>0.85){
if(t.isPlayer){ award(Math.round(150+t.airT*170),'BIG AIR!'); crowdHype=Math.min(1,crowdHype+0.5); }
thud(0.25,180);
}
if(impact>19){ t.damage+=(impact-19)*1.3; t.flash=1; }
}
t.grounded=true; t.airT=0;
} else { t.grounded=false; t.airT+=dt; }
t.lastGy=gy;
// ---- planar dynamics
if(t.grounded){
if(!t.wrecked && t.throttle!==0){
var a=t.throttle>0 ? t.acc*(t.boosting?1.65:1) : -t.acc*0.7;
t.vel.x+=FWD.x*a*dt; t.vel.z+=FWD.z*a*dt;
}
var vf=t.vel.x*FWD.x+t.vel.z*FWD.z;
var vl=t.vel.x*LAT.x+t.vel.z*LAT.z;
if(!t.wrecked){
var grip=clamp(Math.abs(vf)/6,0,1)*(vf>=0?1:-1);
t.yaw+=t.steer*t.turn*grip*dt;
}
vl*=Math.pow(0.02,dt);
vf*=Math.pow(t.throttle===0||t.wrecked?0.28:0.62,dt);
t.vel.set(FWD.x*vf+LAT.x*vl, 0, FWD.z*vf+LAT.z*vl);
var n=nAt(t.pos.x,t.pos.z);
t.vel.x+=n.x*21*dt; t.vel.z+=n.z*21*dt;
var mx=t.maxSpeed*(t.boosting?1.35:1), s=t.vel.length();
if(s>mx) t.vel.multiplyScalar(mx/s);
} else {
t.vel.multiplyScalar(Math.pow(0.88,dt));
if(!t.wrecked) t.yaw+=t.steer*0.7*dt;
}
t.yaw+=t.yawRate*dt;
t.yawRate*=Math.pow(0.08,dt);
t.pos.x+=t.vel.x*dt; t.pos.z+=t.vel.z*dt;
// ---- wall
var d=Math.hypot(t.pos.x,t.pos.z), lim=R-3.2;
if(d>lim){
var nx=t.pos.x/d, nz=t.pos.z/d;
t.pos.x=nx*lim; t.pos.z=nz*lim;
var vn=t.vel.x*nx+t.vel.z*nz;
if(vn>0){
t.vel.x-=nx*vn*1.45; t.vel.z-=nz*vn*1.45;
if(vn>9){ t.damage+=vn*0.55; t.flash=1;
spawnP(t.pos.x,t.pos.y+1.5,t.pos.z,10,4,0xffcf6b,12,0.4); thud(vn*0.02,300); }
}
}
// ---- wreck state
if(!t.wrecked && t.damage>=100){
t.wrecked=true; t.wreckT=3.6; t.smokeT=0;
spawnP(t.pos.x,t.pos.y+1.8,t.pos.z,42,8,0xff7a2a,9,0.9);
thud(0.7,170);
crowdHype=1;
if(!t.isPlayer && t.lastHitBy===player) award(1000,'WRECKED '+t.name+'!');
if(t.isPlayer) toast('YOU ARE WRECKED — RESETTING','#ff3b4e');
}
if(t.wrecked){
t.wreckT-=dt; t.smokeT-=dt;
if(t.smokeT<=0){ t.smokeT=0.09; spawnP(t.pos.x,t.pos.y+2.0,t.pos.z,3,1.4,0x555a63,-2,1.5); }
t.vel.multiplyScalar(Math.pow(0.05,dt));
if(t.wreckT<=0) respawn(t);
}
t.damage=clamp(t.damage,0,100);
if(t.flash>0) t.flash=Math.max(0,t.flash-dt*3.2);
}
function truckTruck(){
for(var i=0;i<trucks.length;i++){
for(var j=i+1;j<trucks.length;j++){
var a=trucks[i], b=trucks[j];
var dx=b.pos.x-a.pos.x, dz=b.pos.z-a.pos.z, md=a.r+b.r;
var d2=dx*dx+dz*dz;
if(d2>md*md || d2<1e-6) continue;
if(Math.abs(a.pos.y-b.pos.y)>2.7) continue; // one is flying over the other
var d=Math.sqrt(d2), nx=dx/d, nz=dz/d, ov=md-d;
var ima=1/a.mass, imb=1/b.mass, ims=ima+imb;
a.pos.x-=nx*ov*(ima/ims); a.pos.z-=nz*ov*(ima/ims);
b.pos.x+=nx*ov*(imb/ims); b.pos.z+=nz*ov*(imb/ims);
var vn=(a.vel.x-b.vel.x)*nx+(a.vel.z-b.vel.z)*nz;
if(vn<=0) continue;
var jimp=(1+0.35)*vn/ims;
a.vel.x-=nx*jimp*ima; a.vel.z-=nz*jimp*ima;
b.vel.x+=nx*jimp*imb; b.vel.z+=nz*jimp*imb;
var afx=Math.sin(a.yaw), afz=Math.cos(a.yaw), bfx=Math.sin(b.yaw), bfz=Math.cos(b.yaw);
var aAl=afx*nx+afz*nz, bAl=-(bfx*nx+bfz*nz);
a.yawRate+=vn*0.055*(nx*afz-nz*afx);
b.yawRate-=vn*0.055*(nx*bfz-nz*bfx);
var base=vn*1.15;
var dmgB=base*(0.55+0.9*Math.max(0,aAl));
var dmgA=base*(0.55+0.9*Math.max(0,bAl));
a.damage+=dmgA; b.damage+=dmgB; a.flash=1; b.flash=1;
if(dmgB>=dmgA) b.lastHitBy=a; else a.lastHitBy=b;
var mx2=(a.pos.x+b.pos.x)/2, my2=(a.pos.y+b.pos.y)/2+1.4, mz2=(a.pos.z+b.pos.z)/2;
spawnP(mx2,my2,mz2, Math.min(26,4+vn*1.4), 3+vn*0.25, 0xffe08a, 12, 0.5);
thud(Math.min(0.6,vn*0.05),260);
crowdHype=Math.min(1,crowdHype+vn*0.035);
if(vn>4){
if(a===player && aAl>0.3) award(Math.round(vn*45), (aAl>0.8?'T-BONE ':'RAM ')+b.name);
else if(b===player && bAl>0.3) award(Math.round(vn*45), (bAl>0.8?'T-BONE ':'RAM ')+a.name);
}
}
}
}
function truckDebris(){
for(var i=0;i<trucks.length;i++){
var t=trucks[i];
for(var j=0;j<debris.length;j++){
var d=debris[j];
var dx=d.pos.x-t.pos.x, dz=d.pos.z-t.pos.z, md=t.r*0.85+d.r;
var q=dx*dx+dz*dz;
if(q>md*md || q<1e-6) continue;
var dist=Math.sqrt(q), nx=dx/dist, nz=dz/dist;
var vn=t.vel.x*nx+t.vel.z*nz;
if(d.static){
if(t.pos.y > d.pos.y+3.4) continue;
t.pos.x=d.pos.x-nx*md; t.pos.z=d.pos.z-nz*md;
if(vn>0){
t.vel.x-=nx*vn*1.5; t.vel.z-=nz*vn*1.5;
t.yawRate+=vn*0.04*(nx*Math.cos(t.yaw)-nz*Math.sin(t.yaw));
if(vn>5){
t.damage+=vn*1.05; t.flash=1;
spawnP(d.pos.x-nx*1.5, t.pos.y+1.4, d.pos.z-nz*1.5, 12, 4, 0xcfd4da, 13, 0.5);
thud(Math.min(0.5,vn*0.04),220);
if(t===player && vn>9) toast('CONCRETE! WATCH IT','#ff3b4e');
}
}
continue;
}
if(t.pos.y > d.pos.y+2.4) continue;
var push=Math.max(vn,0);
d.vel.x+=nx*(push*1.9+7); d.vel.z+=nz*(push*1.9+7);
d.vy+=3.2+push*0.45;
d.yawRate+=rnd(-7,7);
d.pos.x=t.pos.x+nx*md; d.pos.z=t.pos.z+nz*md;
t.vel.multiplyScalar(1-Math.min(0.22, d.mass*0.16));
if(d.type==='car'){
spawnP(d.pos.x,d.pos.y+1.2,d.pos.z, 12, 4, 0xbfc7d1, 13, 0.5);
if(push>7 && !d.crushed){
d.crushed=true; d.mesh.scale.set(1,0.32,1);
spawnP(d.pos.x,d.pos.y+1,d.pos.z, 24, 6, 0xffb347, 11, 0.7);
thud(0.45,200); crowdHype=Math.min(1,crowdHype+0.35);
if(t===player) award(150,'CAR CRUSHED');
}
} else {
spawnP(d.pos.x,d.pos.y+0.8,d.pos.z, 6, 3, 0xdd6b1f, 12, 0.4);
if(t===player && push>3) award(25,'DRUM');
thud(0.14,420);
}
}
}
}
function stepDebris(dt){
for(var i=0;i<debris.length;i++){
var d=debris[i]; if(d.static) continue;
d.vy-=26*dt;
d.pos.y+=d.vy*dt;
d.pos.x+=d.vel.x*dt; d.pos.z+=d.vel.z*dt;
var gy=hAt(d.pos.x,d.pos.z);
if(d.pos.y<gy){
d.pos.y=gy;
if(d.vy<-3) d.vy=-d.vy*0.32; else d.vy=0;
d.vel.multiplyScalar(Math.pow(0.16,dt));
d.yawRate*=Math.pow(0.2,dt);
var n=nAt(d.pos.x,d.pos.z);
d.vel.x+=n.x*15*dt; d.vel.z+=n.z*15*dt;
}
d.yaw+=d.yawRate*dt;
var rr=Math.hypot(d.pos.x,d.pos.z), lim=R-1.6;
if(rr>lim){
var nx=d.pos.x/rr, nz=d.pos.z/rr;
d.pos.x=nx*lim; d.pos.z=nz*lim;
var vn=d.vel.x*nx+d.vel.z*nz;
if(vn>0){ d.vel.x-=nx*vn*1.6; d.vel.z-=nz*vn*1.6; }
}
}
}
/* ============================ VISUAL SYNC ======================= */
var UP=new THREE.Vector3(0,1,0), qUp=new THREE.Quaternion(), qYaw=new THREE.Quaternion(),
qRoll=new THREE.Quaternion(), upSmooth=[];
for(var ui=0; ui<5; ui++) upSmooth.push(new THREE.Vector3(0,1,0));
function syncTruck(t,idx,dt){
var target = t.grounded ? nAt(t.pos.x,t.pos.z) : UP;
upSmooth[idx].lerp(target, t.grounded?0.25:0.08).normalize();
qUp.setFromUnitVectors(UP, upSmooth[idx]);
qYaw.setFromAxisAngle(UP, t.yaw);
t.mesh.quaternion.copy(qUp).multiply(qYaw);
if(t.wrecked){
qRoll.setFromAxisAngle(new THREE.Vector3(0,0,1), 0.42);
t.mesh.quaternion.multiply(qRoll);
}
t.mesh.position.copy(t.pos);
var vf=t.vel.x*Math.sin(t.yaw)+t.vel.z*Math.cos(t.yaw);
t.spin+=vf*dt/1.16;
for(var i=0;i<4;i++){
var w=t.wheels[i];
w.rotation.set(0,0,0);
if(i<2) w.rotation.y=-t.steer*0.42;
w.rotation.x=t.spin;
}
var col=t.matBody.color;
col.copy(t.baseCol).lerp(darkCol, t.damage/140);
if(t.flash>0) col.lerp(new THREE.Color(0xffffff), t.flash*0.75);
var gy=hAt(t.pos.x,t.pos.z);
t.shadow.position.set(t.pos.x, gy+0.09, t.pos.z);
var air=clamp(1-(t.pos.y-gy)/9,0.3,1);
t.shadow.scale.set(air,1,air);
t.shadow.material.opacity=0.34*air;
}
function syncDebris(d){
d.mesh.position.copy(d.pos);
d.mesh.rotation.y=d.yaw;
}
/* ============================ CAMERA ============================ */
var camPos=new THREE.Vector3(0,12,-24), camLook=new THREE.Vector3();
function updateCamera(dt){
var fx=Math.sin(player.yaw), fz=Math.cos(player.yaw);
var sp=player.vel.length(), k=clamp(sp/26,0,1);
var dxp=player.pos.x-fx*(13.5+k*3.5);
var dzp=player.pos.z-fz*(13.5+k*3.5);
var dyp=player.pos.y+7.2+player.pos.y*0.18;
var lp=1-Math.pow(0.0016,dt);
camPos.x+=(dxp-camPos.x)*lp; camPos.y+=(dyp-camPos.y)*lp; camPos.z+=(dzp-camPos.z)*lp;
var floor=hAt(camPos.x,camPos.z)+2.2;
if(camPos.y<floor) camPos.y=floor;
camera.position.copy(camPos);
var lx=player.pos.x+fx*6, ly=player.pos.y+2.3, lz=player.pos.z+fz*6;
var ll=1-Math.pow(0.0008,dt);
camLook.x+=(lx-camLook.x)*ll; camLook.y+=(ly-camLook.y)*ll; camLook.z+=(lz-camLook.z)*ll;
camera.lookAt(camLook);
}
/* ============================ SIM STEP ========================== */
function step(dt){
state.time-=dt;
if(state.time<=0){ endMatch(); return; }
crowdHype=Math.max(0, crowdHype-dt*0.85);
if(state.toastT>0){
state.toastT-=dt;
if(state.toastT<=0) elToast.style.opacity=0;
}
playerControl(dt);
for(var i=1;i<5;i++) aiControl(trucks[i],dt);
for(i=0;i<5;i++) stepTruck(trucks[i],dt);
truckTruck();
truckDebris();
stepDebris(dt);
updateP(dt);
for(i=0;i<5;i++) syncTruck(trucks[i],i,dt);
for(i=0;i<debris.length;i++) syncDebris(debris[i]);
}
/* ============================ LOOP ============================== */
reset();
var last=performance.now(), acc=0, frame=0, broken=false;
function loop(now){
requestAnimationFrame(loop);
var rdt=Math.min(0.05,(now-last)/1000); last=now;
if(broken){ renderer.render(scene,camera); return; }
try{
if(!state.photo && !state.over){
acc+=rdt; var guard=0;
while(acc>=1/60 && guard<4){ step(1/60); acc-=1/60; guard++; }
if(guard>=4) acc=0;
}
if(!state.photo){
frame++;
if(frame%2===0) animateCrowd(now/1000);
updateCamera(rdt);
}
renderer.render(scene,camera);
hudUpdate();
engineAudio(state.photo||state.over?0:player.vel.length());
}catch(err){
broken=true;
document.getElementById('fatal').textContent='RUNTIME ERROR: '+err.message;
document.getElementById('fatal').style.display='flex';
}
}
requestAnimationFrame(loop);
}catch(e){
var f=document.getElementById('fatal');
f.textContent='SETUP ERROR: '+e.message;
f.style.display='flex';
}
})();
</script>
</body>
</html>
The notes
- Five trucks: Index 0 is the player; indices 1–4 are AI with different aggression/top speed and a fixed bearing lane (0°, 90°, 180°, −90°) so hunters aim at a point offset around the victim's own heading instead of all converging on its centre. On top of that, each rival runs a boids-style separation force that pushes it away from any other truck inside 14 m (excluding its current victim), staggered re-decision timers (2.6–5.6 s, randomised at start), and pylon/wall avoidance — so they spread, flank, and cross paths instead of forming one moving wall.
- Demo mode:
state.score = DEMO ? 5000 : 0; state.time = DEMO ? 20 : MATCH_TIME;insidereset(). These are the same two fields the countdown decrements (state.time -= dt), thatendMatch()reads, thataward()adds to and that the HUD renders — there is no separate cosmetic path, so a#demorun genuinely ends after 20 seconds with 5000 banked and every ram adding on top of it. - Photo mode:
Psetsstate.photo, which skips the fixed-timestep accumulator entirely — clock, AI, driving, collisions, debris, particles and crowd animation all stop — plus the camera smoothing. Onlyrenderer.renderkeeps running, redrawing the identical frozen frame so the card can't be lost to a buffer clear. Engine audio gain is forced to 0 while frozen. - Collisions: Everything on the floor is a vertical cylinder. For truck–truck it computes the XZ centre distance against the summed radii, rejects pairs separated by more than 2.7 m vertically (so a truck in mid-air flies over), positionally de-penetrates along the contact normal weighted by inverse mass, then computes closing speed
vn = (vA − vB)·nand applies an impulsej = (1+0.35)·vn / (1/mA + 1/mB). Damage on each truck isvn·1.15·(0.55 + 0.9·max(0, align))wherealignis the other truck's forward vector dotted with the normal, so a nose-first hit hurts the victim far more than the aggressor; the tangential cross product feeds a yaw-rate kick, and damage ≥ 100 flips the wreck flag (smoke, tilt, 3.6 s downtime, +1000 to whoever last dealt the bigger blow). Debris uses the same normal/closing-speed pair but one-sided: junk cars and drums receive an impulse plus vertical kick and spin, cars latch to a crushed state above 7 m/s of closing speed
Attachments
anthropic/claude-opus-5 — page