Run Detail
completedmuse-spark-1.3Recorded 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
547.7s
Total Tokens
21,688
Input Tokens
710
Output Tokens
20,978
Reasoning Tokens
9,630
Reasoning Effort
max
Est. Cost
$0.0900
Started
9/2/2026, 8:36:55 PM
OR Provider
Meta
Finish Reason
stop
Generation ID
gen-1788381415-VVgMm0illf2eoMQYHDtC
Turns (1)
Turn #1
710 in20,978 out9,630 reasoning21,688 total547.7s
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
CYBER THUNDERDOME is a night-time Cybertruck monster-truck rally in a tiny walled stadium with roaring stands, dirt mounds, tire stacks and flying barrels.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CYBER THUNDERDOME — Cybertruck Monster Rally</title>
<link rel="icon" href="data:,">
<style>
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#070a14;font-family:Arial,Helvetica,sans-serif}
canvas{display:block}
#hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.25) 80%,transparent);color:#fff;pointer-events:none;z-index:10}
#hud .box{background:rgba(10,14,28,.72);border:1px solid rgba(0,255,255,.35);border-radius:10px;padding:8px 14px;box-shadow:0 0 18px rgba(0,255,255,.15)}
#arena{font-weight:900;letter-spacing:2px;font-size:16px;color:#7df9ff;text-shadow:0 0 12px #00e5ff}
#arena small{display:block;font-size:10px;letter-spacing:1px;color:#ffd60a;font-weight:700}
#score{font-weight:900;font-size:20px;color:#ffd60a;min-width:170px;text-align:center}
#clock{font-weight:900;font-size:20px;color:#fff;min-width:110px;text-align:center;font-variant-numeric:tabular-nums}
#help{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.25);padding:7px 14px;border-radius:20px;font-size:12px;letter-spacing:.5px;z-index:10;pointer-events:none;white-space:nowrap}
#toast{position:fixed;top:78px;left:50%;transform:translateX(-50%);font-weight:900;font-size:26px;color:#ffd60a;text-shadow:0 2px 0 #000,0 0 18px #ff6a00;opacity:0;transition:opacity .2s;z-index:11;pointer-events:none;text-align:center}
#over{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,.62);color:#fff;z-index:12;text-align:center}
#over h1{font-size:44px;margin:0;color:#7df9ff;letter-spacing:3px}
#over p{font-size:20px}
#over button{pointer-events:auto;font-size:18px;font-weight:800;padding:12px 26px;border-radius:10px;border:0;background:#ffd60a;cursor:pointer}
#photo{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,rgba(8,12,28,.88),rgba(0,0,0,.96));border:8px solid #ffd60a;box-sizing:border-box;z-index:20;text-align:center;color:#fff}
#photo h1{font-size:52px;margin:0;letter-spacing:4px;color:#7df9ff;text-shadow:0 0 24px #00e5ff}
#photo h2{font-size:22px;margin:10px 0 0;color:#ffd60a;letter-spacing:2px}
#photo p{font-size:15px;opacity:.8}
</style>
</head>
<body>
<div id="hud">
<div class="box" id="arena">CYBER THUNDERDOME<small>MONSTER-TRUCK RALLY</small></div>
<div class="box" id="score">SCORE 0</div>
<div class="box" id="clock">2:00</div>
</div>
<div id="toast"></div>
<div id="help">WASD / ARROWS to drive • P photo • R restart • Ram rivals!</div>
<div id="over"><h1 id="overTitle">TIME UP!</h1><p id="overText">Final score 0</p><button id="againBtn">RESTART (R)</button></div>
<div id="photo"><h1>CYBER THUNDERDOME</h1><h2 id="photoScore">SCORE 0</h2><p>★ PHOTO MODE ★ — press P again to resume</p></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.149.0/three.min.js"></script>
<script>
(function(){
var ARENA_NAME="CYBER THUNDERDOME";
var HALF=42;
var score=0, timeLeft=120, gameOver=false, photoMode=false;
if(location.hash==="#demo"){score=5000;timeLeft=20;}
var scene=new THREE.Scene();
scene.background=new THREE.Color(0x070a16);
scene.fog=new THREE.Fog(0x070a16,90,240);
var camera=new THREE.PerspectiveCamera(68,innerWidth/innerHeight,0.1,600);
camera.position.set(0,18,34);
var renderer;
try{renderer=new THREE.WebGLRenderer({antialias:true});}catch(e){document.body.innerHTML="<p style='color:white'>WebGL required</p>";return;}
renderer.setSize(innerWidth,innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio||1,2));
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=THREE.PCFSoftShadowMap;
if('outputEncoding' in renderer)renderer.outputEncoding=THREE.sRGBEncoding;
document.body.appendChild(renderer.domElement);
addEventListener('resize',function(){camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight);});
scene.add(new THREE.HemisphereLight(0x8fb8ff,0x3a2a18,0.85));
var sun=new THREE.DirectionalLight(0xffffff,1.05);
sun.position.set(30,55,20);sun.castShadow=true;
sun.shadow.mapSize.set(1024,1024);
sun.shadow.camera.left=-70;sun.shadow.camera.right=70;sun.shadow.camera.top=70;sun.shadow.camera.bottom=-70;
scene.add(sun);
var pl1=new THREE.PointLight(0x66eeff,0.7,140);pl1.position.set(0,28,0);scene.add(pl1);
// floor
function dirtTexture(){
var c=document.createElement('canvas');c.width=c.height=256;var g=c.getContext('2d');
g.fillStyle='#7d5c38';g.fillRect(0,0,256,256);
for(var i=0;i<2600;i++){g.fillStyle='rgba('+(40+Math.random()*80|0)+','+(30+Math.random()*50|0)+','+(15+Math.random()*30|0)+',0.35)';var s=1+Math.random()*3;g.fillRect(Math.random()*256,Math.random()*256,s,s);}
var t=new THREE.CanvasTexture(c);t.wrapS=t.wrapT=THREE.RepeatWrapping;t.repeat.set(10,10);return t;
}
var floor=new THREE.Mesh(new THREE.PlaneGeometry(240,240),new THREE.MeshStandardMaterial({map:dirtTexture(),roughness:1}));
floor.rotation.x=-Math.PI/2;floor.receiveShadow=true;scene.add(floor);
var arenaFloor=new THREE.Mesh(new THREE.CircleGeometry(46,48),new THREE.MeshStandardMaterial({color:0x8f6b42,roughness:1}));
arenaFloor.rotation.x=-Math.PI/2;arenaFloor.position.y=0.02;arenaFloor.receiveShadow=true;scene.add(arenaFloor);
var ring=new THREE.Mesh(new THREE.RingGeometry(45.2,46.2,64),new THREE.MeshBasicMaterial({color:0xffffff,side:THREE.DoubleSide}));
ring.rotation.x=-Math.PI/2;ring.position.y=0.05;scene.add(ring);
var centerRing=new THREE.Mesh(new THREE.RingGeometry(7.6,8.4,48),new THREE.MeshBasicMaterial({color:0xffd60a,side:THREE.DoubleSide}));
centerRing.rotation.x=-Math.PI/2;centerRing.position.y=0.05;scene.add(centerRing);
// walls with arena name banner
function bannerTexture(){
var c=document.createElement('canvas');c.width=1024;c.height=128;var g=c.getContext('2d');
g.fillStyle='#0b1022';g.fillRect(0,0,1024,128);
g.fillStyle='#00e5ff';g.fillRect(0,0,1024,8);g.fillRect(0,120,1024,8);
g.fillStyle='#ffffff';g.font='900 56px Arial';g.textAlign='center';g.textBaseline='middle';
g.fillText('CYBER THUNDERDOME ★ MONSTER RALLY ★',512,66);
var t=new THREE.CanvasTexture(c);t.wrapS=THREE.RepeatWrapping;t.repeat.set(1,1);return t;
}
var bannerTex=bannerTexture();
var wallMat=new THREE.MeshStandardMaterial({map:bannerTex,roughness:.7,metalness:.1});
var wallGeoNS=new THREE.BoxGeometry(100,5,2), wallGeoEW=new THREE.BoxGeometry(2,5,100);
var w1=new THREE.Mesh(wallGeoNS,wallMat);w1.position.set(0,2.5,-48);scene.add(w1);
var w2=new THREE.Mesh(wallGeoNS,wallMat);w2.position.set(0,2.5,48);scene.add(w2);
var w3=new THREE.Mesh(wallGeoEW,wallMat);w3.position.set(-48,2.5,0);scene.add(w3);
var w4=new THREE.Mesh(wallGeoEW,wallMat);w4.position.set(48,2.5,0);scene.add(w4);
// stands all way round + crowd
var standMat=new THREE.MeshStandardMaterial({color:0x2a3350,roughness:.9});
for(var side=0;side<4;side++){
for(var step=0;step<8;step++){
var h=1.4, d=3.2, dist=52+step*d;
var len=118+step*6;
var m;
if(side===0){m=new THREE.Mesh(new THREE.BoxGeometry(len,h,d),standMat);m.position.set(0,3+step*h,-dist);}
if(side===1){m=new THREE.Mesh(new THREE.BoxGeometry(len,h,d),standMat);m.position.set(0,3+step*h,dist);}
if(side===2){m=new THREE.Mesh(new THREE.BoxGeometry(d,h,len),standMat);m.position.set(-dist,3+step*h,0);}
if(side===3){m=new THREE.Mesh(new THREE.BoxGeometry(d,h,len),standMat);m.position.set(dist,3+step*h,0);}
scene.add(m);
}
}
// crowd instanced all round
var crowdCount=2200;
var crowdGeo=new THREE.BoxGeometry(0.7,1.05,0.5);
var crowdMat=new THREE.MeshLambertMaterial({color:0xffffff});
var crowd=new THREE.InstancedMesh(crowdGeo,crowdMat,crowdCount);
var dummy=new THREE.Object3D();var col=new THREE.Color();
var ci=0;
var palette=[0xff3b30,0xffcc00,0x34c759,0x007aff,0xff2d92,0xffffff,0x7df9ff,0xff9500,0xaf52de,0x30d158];
while(ci<crowdCount){
var s=ci%4, st=(Math.random()*8)|0, t=Math.random();
var dist2=52+st*3.2, y=3+st*1.4+0.9;
var px=0,pz=0;
if(s===0){px=(t-0.5)*(118+st*6);pz=-dist2+(Math.random()-0.5)*1.6;}
if(s===1){px=(t-0.5)*(118+st*6);pz=dist2+(Math.random()-0.5)*1.6;}
if(s===2){px=-dist2+(Math.random()-0.5)*1.6;pz=(t-0.5)*(118+st*6);}
if(s===3){px=dist2+(Math.random()-0.5)*1.6;pz=(t-0.5)*(118+st*6);}
dummy.position.set(px,y,pz);
dummy.rotation.y=Math.random()*0.6-0.3+(s<2?0:Math.PI/2);
var sc=0.85+Math.random()*0.4;dummy.scale.set(sc,sc,sc);
dummy.updateMatrix();crowd.setMatrixAt(ci,dummy.matrix);
col.setHex(palette[(Math.random()*palette.length)|0]);crowd.setColorAt(ci,col);
ci++;
}
crowd.instanceMatrix.needsUpdate=true;if(crowd.instanceColor)crowd.instanceColor.needsUpdate=true;
scene.add(crowd);
// floodlights
for(var f=0;f<4;f++){
var fx=f<2?-58:58, fz=(f%2===0)?-58:58;
var pole=new THREE.Mesh(new THREE.CylinderGeometry(0.5,0.7,30,8),new THREE.MeshStandardMaterial({color:0x222a44}));
pole.position.set(fx,15,fz);scene.add(pole);
var head=new THREE.Mesh(new THREE.BoxGeometry(6,3,1),new THREE.MeshBasicMaterial({color:0xeaffff}));
head.position.set(fx*0.92,30,fz*0.92);head.lookAt(0,0,0);scene.add(head);
}
// obstacles: 3+ distinct types
var mounds=[{x:0,z:0,r:11,h:2.6},{x:23,z:14,r:7.5,h:2.1},{x:-21,z:13,r:7.5,h:2.1},{x:19,z:-19,r:7.5,h:2.1},{x:-19,z:-18,r:7.5,h:2.1}];
var moundMat=new THREE.MeshStandardMaterial({color:0x6e4f2e,roughness:1});
mounds.forEach(function(m){
var g=new THREE.SphereGeometry(m.r,20,14,0,Math.PI*2,0,Math.PI/2);
var mesh=new THREE.Mesh(g,moundMat);mesh.scale.y=m.h/m.r;mesh.position.set(m.x,0,m.z);mesh.receiveShadow=true;scene.add(mesh);
var rim=new THREE.Mesh(new THREE.TorusGeometry(m.r*0.55,0.25,8,24),new THREE.MeshStandardMaterial({color:0xffd60a,roughness:.6}));
rim.rotation.x=Math.PI/2;rim.position.set(m.x,0.15,m.z);scene.add(rim);
});
function groundH(x,z){
var h=0;for(var i=0;i<mounds.length;i++){var m=mounds[i];var dx=x-m.x,dz=z-m.z;var d=Math.sqrt(dx*dx+dz*dz);if(d<m.r)h+=m.h*Math.cos(d/m.r*Math.PI/2);}return h;
}
var solids=[];
var tireMat=new THREE.MeshStandardMaterial({color:0x111318,roughness:.9});
var tireSpots=[[10,26],[-12,26],[28,-2],[-28,-4],[8,-28],[-10,-28],[30,22]];
tireSpots.forEach(function(p){
var grp=new THREE.Group();
for(var k=0;k<3;k++){var t=new THREE.Mesh(new THREE.TorusGeometry(0.75,0.32,10,22),tireMat);t.rotation.x=Math.PI/2;t.position.y=0.35+k*0.62;t.castShadow=true;grp.add(t);}
var stripe=new THREE.Mesh(new THREE.CylinderGeometry(0.35,0.35,2.1,10),new THREE.MeshStandardMaterial({color:0xff3b30}));stripe.position.y=1;grp.add(stripe);
grp.position.set(p[0],0,p[1]);scene.add(grp);
solids.push({x:p[0],z:p[1],r:1.5,mesh:grp,type:'tire'});
});
var carColors=[0xb33a3a,0x3a7ab3,0x8a8a3a,0x6a3ab3];
var carSpots=[[0,32,0.3],[ -32,0,1.2],[0,-10,0.7],[32,2,-0.5]];
carSpots.forEach(function(p,i){
var g=new THREE.Group();
var body=new THREE.Mesh(new THREE.BoxGeometry(3.4,0.9,1.7),new THREE.MeshStandardMaterial({color:carColors[i%4],roughness:.7,metalness:.3}));
body.position.y=0.65;body.castShadow=true;g.add(body);
var cab=new THREE.Mesh(new THREE.BoxGeometry(1.7,0.7,1.5),new THREE.MeshStandardMaterial({color:0x14161f,roughness:.4,metalness:.5}));
cab.position.set(-0.2,1.35,0);cab.castShadow=true;g.add(cab);
g.position.set(p[0],0,p[1]);g.rotation.y=p[2];scene.add(g);
solids.push({x:p[0],z:p[1],r:2.3,mesh:g,type:'car'});
});
var barrels=[];
var barrelGeo=new THREE.CylinderGeometry(0.6,0.6,1.2,14);
for(var b=0;b<14;b++){
var bx=(Math.random()*64-32),bz=(Math.random()*64-32);
if(Math.hypot(bx,bz)<9){bx+=16;}
var bc=[0xff3b30,0xffcc00,0x007aff][b%3];
var bm=new THREE.Mesh(barrelGeo,new THREE.MeshStandardMaterial({color:bc,roughness:.5,metalness:.3}));
bm.position.set(bx,0.6,bz);bm.castShadow=true;scene.add(bm);
barrels.push({x:bx,z:bz,vx:0,vz:0,mesh:bm,active:true,respawn:0});
}
// debris scatter visual
var debMat=new THREE.MeshStandardMaterial({color:0x3a3a44,roughness:.9});
for(var db=0;db<50;db++){
var dm=new THREE.Mesh(new THREE.BoxGeometry(0.3+Math.random()*0.7,0.2+Math.random()*0.3,0.3+Math.random()*0.7),debMat);
dm.position.set(Math.random()*84-42,0.15,Math.random()*84-42);dm.rotation.y=Math.random()*3;scene.add(dm);
}
// trucks - exactly five
function makeLabel(text,color){
var c=document.createElement('canvas');c.width=256;c.height=64;var g=c.getContext('2d');
g.fillStyle='rgba(0,0,0,0.65)';g.fillRect(0,0,256,64);
g.fillStyle=color;g.font='900 36px Arial';g.textAlign='center';g.textBaseline='middle';g.fillText(text,128,34);
var t=new THREE.CanvasTexture(c);var s=new THREE.Sprite(new THREE.SpriteMaterial({map:t,depthTest:false}));s.scale.set(5,1.25,1);s.position.y=4.2;return s;
}
function buildCybertruck(colorHex,name,isPlayer){
var grp=new THREE.Group();
var bodyMat=new THREE.MeshStandardMaterial({color:colorHex,metalness:0.75,roughness:0.32});
var glassMat=new THREE.MeshStandardMaterial({color:0x0a0f1e,metalness:0.9,roughness:0.15});
var body=new THREE.Mesh(new THREE.BoxGeometry(2.2,0.85,4.4),bodyMat);body.position.y=1.35;body.castShadow=true;grp.add(body);
var wedge=new THREE.Mesh(new THREE.BoxGeometry(2.2,0.55,1.2),bodyMat);wedge.position.set(0,1.05,2.55);wedge.rotation.x=0.18;wedge.castShadow=true;grp.add(wedge);
var cab=new THREE.Mesh(new THREE.BoxGeometry(1.9,0.75,2.1),bodyMat);cab.position.set(0,2.05,-0.4);cab.castShadow=true;grp.add(cab);
var shield=new THREE.Mesh(new THREE.BoxGeometry(1.7,0.6,0.15),glassMat);shield.position.set(0,1.95,0.72);shield.rotation.x=-0.35;grp.add(shield);
var barF=new THREE.Mesh(new THREE.BoxGeometry(2.0,0.18,0.12),new THREE.MeshBasicMaterial({color:0xeaffff}));barF.position.set(0,1.25,3.16);grp.add(barF);
var barR=new THREE.Mesh(new THREE.BoxGeometry(2.0,0.18,0.12),new THREE.MeshBasicMaterial({color:0xff2222}));barR.position.set(0,1.35,-2.22);grp.add(barR);
var tireG=new THREE.CylinderGeometry(0.68,0.68,0.55,18);
var hubG=new THREE.CylinderGeometry(0.3,0.3,0.58,10);
var tireM=new THREE.MeshStandardMaterial({color:0x0c0d12,roughness:.95});
var hubM=new THREE.MeshStandardMaterial({color:0x9aa2b0,metalness:.8,roughness:.3});
var wheels=[];
[[-1.25,1.55],[1.25,1.55],[-1.25,-1.55],[1.25,-1.55]].forEach(function(p){
var w=new THREE.Mesh(tireG,tireM);w.rotation.z=Math.PI/2;w.position.set(p[0],0.68,p[1]);w.castShadow=true;grp.add(w);
var hb=new THREE.Mesh(hubG,hubM);hb.rotation.z=Math.PI/2;hb.position.set(p[0],0.68,p[1]);grp.add(hb);
wheels.push(w);
});
var pole=new THREE.Mesh(new THREE.CylinderGeometry(0.05,0.05,1.6,6),new THREE.MeshStandardMaterial({color:0x888888}));
pole.position.set(-0.9,2.8,-2.0);grp.add(pole);
var flag=new THREE.Mesh(new THREE.PlaneGeometry(0.9,0.55),new THREE.MeshBasicMaterial({color:isPlayer?0xffd60a:0x00e5ff,side:THREE.DoubleSide}));
flag.position.set(-0.42,3.3,-2.0);grp.add(flag);
grp.add(makeLabel(name,isPlayer?'#ffd60a':'#ffffff'));
scene.add(grp);
return {group:grp,bodyMat:bodyMat,wheels:wheels,flag:flag};
}
var truckDefs=[
{color:0xc7ced8,name:'YOU',player:true,x:0,z:20,hd:Math.PI},
{color:0xff3b30,name:'VOLT',player:false,x:-22,z:-8,hd:0.6},
{color:0x007aff,name:'TORQUE',player:false,x:22,z:-8,hd:-0.6},
{color:0xff9500,name:'MAMMOTH',player:false,x:-14,z:-24,hd:0.2},
{color:0x34c759,name:'RAPTOR',player:false,x:14,z:-24,hd:-0.2}
];
var trucks=[];
truckDefs.forEach(function(d,i){
var v=buildCybertruck(d.color,d.name,d.player);
trucks.push({mesh:v.group,bodyMat:v.bodyMat,wheels:v.wheels,flag:v.flag,name:d.name,isPlayer:d.player,
x:d.x,z:d.z,y:groundH(d.x,d.z),vy:0,heading:d.hd,speed:0,knockX:0,knockZ:0,damage:0,wreckTimer:0,flash:0,airTime:0,wasAir:false,
lastHitBy:null,lastHitT:0,aiPhase:Math.random()*6.28,aiOrbit:16+i*3.5,aiAggro:[0,0.95,0.7,0.55,0.8][i],aiMax:20+i*0.7,aiRev:0,aiStuck:0,aiLX:d.x,aiLZ:d.z,spin:0});
});
var player=trucks[0];
// particles
var parts=[];
var partGeo=new THREE.BoxGeometry(0.32,0.32,0.32);
for(var pi=0;pi<220;pi++){
var pm=new THREE.Mesh(partGeo,new THREE.MeshBasicMaterial({color:0xffaa00,transparent:true}));
pm.visible=false;scene.add(pm);
parts.push({m:pm,vx:0,vy:0,vz:0,life:0,max:1,grav:12,grow:0});
}
function burst(x,y,z,color,n,spd,life,grav,grow){
var c=0;for(var i=0;i<parts.length&&c<n;i++){var p=parts[i];if(p.life>0)continue;c++;
p.m.visible=true;p.m.material.color.setHex(color);p.m.material.opacity=1;p.m.position.set(x,y,z);
var a=Math.random()*6.28, s=spd*(0.4+Math.random()*0.8);
p.vx=Math.cos(a)*s;p.vz=Math.sin(a)*s;p.vy=Math.random()*spd*0.9+2;
p.life=p.max=life*(0.6+Math.random()*0.7);p.grav=grav;p.grow=grow||0;
p.m.scale.set(1,1,1);
}}
function updateParts(dt){
for(var i=0;i<parts.length;i++){var p=parts[i];if(p.life<=0)continue;
p.life-=dt;if(p.life<=0){p.m.visible=false;continue;}
p.vy-=p.grav*dt;
p.m.position.x+=p.vx*dt;p.m.position.y+=p.vy*dt;p.m.position.z+=p.vz*dt;
if(p.m.position.y<0.15){p.m.position.y=0.15;p.vy*=-0.3;p.vx*=0.7;p.vz*=0.7;}
if(p.grow)p.m.scale.addScalar(p.grow*dt);
p.m.material.opacity=Math.max(0,p.life/p.max);
}}
// audio (Web Audio only)
var AC=null,engOsc=null,engGain=null;
function initAudio(){
if(AC)return;try{
AC=new (window.AudioContext||window.webkitAudioContext)();
engOsc=AC.createOscillator();engGain=AC.createGain();
engOsc.type='sawtooth';engOsc.frequency.value=55;engGain.gain.value=0.0;
engOsc.connect(engGain);engGain.connect(AC.destination);engOsc.start();
}catch(e){}
}
function crashSnd(k){
if(!AC)return;try{
var dur=0.25+k*0.02;
var buf=AC.createBuffer(1,AC.sampleRate*dur,AC.sampleRate);
var d=buf.getChannelData(0);for(var i=0;i<d.length;i++)d[i]=(Math.random()*2-1)*Math.pow(1-i/d.length,2);
var src=AC.createBufferSource();src.buffer=buf;
var f=AC.createBiquadFilter();f.type='lowpass';f.frequency.value=400+k*120;
var g=AC.createGain();g.gain.value=Math.min(0.6,0.2+k*0.05);
src.connect(f);f.connect(g);g.connect(AC.destination);src.start();
var o=AC.createOscillator();o.type='sine';o.frequency.setValueAtTime(90,AC.currentTime);o.frequency.exponentialRampToValueAtTime(35,AC.currentTime+0.25);
var g2=AC.createGain();g2.gain.setValueAtTime(0.5,AC.currentTime);g2.gain.exponentialRampToValueAtTime(0.01,AC.currentTime+0.3);
o.connect(g2);g2.connect(AC.destination);o.start();o.stop(AC.currentTime+0.32);
}catch(e){}
}
function cheerSnd(){
if(!AC)return;try{
var dur=0.7;var buf=AC.createBuffer(1,AC.sampleRate*dur,AC.sampleRate);var d=buf.getChannelData(0);
for(var i=0;i<d.length;i++)d[i]=(Math.random()*2-1)*0.5*Math.sin(i/d.length*Math.PI);
var s=AC.createBufferSource();s.buffer=buf;var f=AC.createBiquadFilter();f.type='bandpass';f.frequency.value=1200;
var g=AC.createGain();g.gain.value=0.35;s.connect(f);f.connect(g);g.connect(AC.destination);s.start();
}catch(e){}
}
// input
var keys={};
addEventListener('keydown',function(e){
initAudio();
var k=e.key.toLowerCase();
keys[k]=true;
if(['arrowup','arrowdown','arrowleft','arrowright',' '].indexOf(k)>=0)e.preventDefault();
if(k==='p')togglePhoto();
if(k==='r')resetGame();
});
addEventListener('keyup',function(e){keys[e.key.toLowerCase()]=false;});
addEventListener('pointerdown',initAudio);
var scoreEl=document.getElementById('score'),clockEl=document.getElementById('clock'),
toastEl=document.getElementById('toast'),overEl=document.getElementById('over'),
overText=document.getElementById('overText'),photoEl=document.getElementById('photo'),
photoScore=document.getElementById('photoScore');
document.getElementById('againBtn').addEventListener('click',function(){initAudio();resetGame();});
var toastT=null;
function toast(t){
toastEl.textContent=t;toastEl.style.opacity=1;
if(toastT)clearTimeout(toastT);toastT=setTimeout(function(){toastEl.style.opacity=0;},1400);
}
function togglePhoto(){
photoMode=!photoMode;
if(photoMode){photoScore.textContent='SCORE '+Math.floor(score);photoEl.style.display='flex';}
else{photoEl.style.display='none';}
}
function resetGame(){
var demo=(location.hash==="#demo");
score=demo?5000:0;timeLeft=demo?20:120;gameOver=false;photoMode=false;
photoEl.style.display='none';overEl.style.display='none';
var spots=[[0,20],[-22,-8],[22,-8],[-14,-24],[14,-24]];
trucks.forEach(function(t,i){t.x=spots[i][0];t.z=spots[i][1];t.y=groundH(t.x,t.z);t.vy=0;t.speed=0;t.knockX=0;t.knockZ=0;t.heading=i===0?Math.PI:0;t.damage=0;t.wreckTimer=0;t.flash=0;t.lastHitBy=null;});
barrels.forEach(function(b){b.vx=0;b.vz=0;b.active=true;b.mesh.visible=true;});
}
function fmt(t){t=Math.max(0,Math.ceil(t));return Math.floor(t/60)+":"+(t%60<10?"0":"")+t%60;}
var shake=0, crowdT=0;
function angDiff(a,b){var d=a-b;while(d>Math.PI)d-=Math.PI*2;while(d<-Math.PI)d+=Math.PI*2;return d;}
function update(dt){
crowdT+=dt;
// crowd bounce
crowd.position.y=Math.sin(crowdT*6)*0.08;
// engine hum
if(AC&&engOsc){engOsc.frequency.value=50+Math.abs(player.speed)*4;engGain.gain.value=0.03+Math.min(0.05,Math.abs(player.speed)*0.002);}
// update each truck
for(var i=0;i<trucks.length;i++){
var t=trucks[i];
if(t.flash>0)t.flash-=dt*2;
if(t.wreckTimer>0){
t.wreckTimer-=dt;t.speed*=Math.pow(0.1,dt);t.knockX*=Math.pow(0.1,dt);t.knockZ*=Math.pow(0.1,dt);
if(Math.random()<dt*20)burst(t.x,t.y+1.5,t.z,0x555555,1,3,1.2,-2,1.5);
if(Math.random()<dt*8)burst(t.x,t.y+1,t.z,0xff6600,1,4,0.5,5,0);
if(t.wreckTimer<=0){t.damage=0;t.flash=0;if(t.isPlayer)toast('REPAIRED!');}
}else{
if(t.isPlayer){
var up=keys['arrowup']||keys['w'],dn=keys['arrowdown']||keys['s'],lf=keys['arrowleft']||keys['a'],rt=keys['arrowright']||keys['d'];
var thr=(up?1:0)-(dn?1:0), str=(lf?1:0)-(rt?1:0);
var accel=thr*24;
t.speed+=accel*dt;
t.speed-=t.speed*1.1*dt;
if(t.speed>27)t.speed=27;if(t.speed<-11)t.speed=-11;
if(Math.abs(t.speed)>0.5)t.heading+=str*1.9*dt*(t.speed>=0?1:-1)*(1-Math.min(Math.abs(t.speed)/60,0.35));
else t.heading+=str*0.8*dt;
}else{
// AI: distinct orbit + chase + separation (anti-clump)
t.aiPhase+=dt*(0.25+i*0.04);
var tx=Math.cos(t.aiPhase+i*1.7)*t.aiOrbit, tz=Math.sin(t.aiPhase*0.9+i*2.1)*t.aiOrbit;
var dxP=player.x-t.x,dzP=player.z-t.z,distP=Math.hypot(dxP,dzP);
if(distP<20&&t.aiAggro>0.5&&player.wreckTimer<=0){tx=player.x+Math.cos(crowdT*0.7+i)*4;tz=player.z+Math.sin(crowdT*0.7+i)*4;}
var sx=0,sz=0;
for(var j=0;j<trucks.length;j++){if(j===i)continue;var o=trucks[j];var ox=t.x-o.x,oz=t.z-o.z;var od=Math.hypot(ox,oz);if(od<9&&od>0.01){sx+=ox/od*(9-od)*0.6;sz+=oz/od*(9-od)*0.6;}}
tx+=sx*2;tz+=sz*2;
var des=Math.atan2(tx-t.x,tz-t.z);
var da=angDiff(des,t.heading);
var steer=Math.max(-1,Math.min(1,da*1.6));
if(t.aiRev>0){t.aiRev-=dt;t.speed+=(-14-t.speed)*2*dt;t.heading+=-steer*1.6*dt;}
else{t.speed+=(t.aiMax-t.speed)*0.7*dt;t.heading+=steer*1.7*dt;}
t.aiStuck+=dt;
if(t.aiStuck>1.2){
var moved=Math.hypot(t.x-t.aiLX,t.z-t.aiLZ);
if(moved<1.2&&t.wreckTimer<=0)t.aiRev=1.3;
t.aiLX=t.x;t.aiLZ=t.z;t.aiStuck=0;
}
}
}
// integrate + knock decay
var fx=Math.sin(t.heading),fz=Math.cos(t.heading);
t.x+=(fx*t.speed+t.knockX)*dt;
t.z+=(fz*t.speed+t.knockZ)*dt;
t.knockX*=Math.pow(0.05,dt);t.knockZ*=Math.pow(0.05,dt);
// walls
if(t.x>HALF){t.x=HALF;wallHit(t,Math.abs(fx*t.speed+t.knockX));t.knockX*=-0.4;}
if(t.x<-HALF){t.x=-HALF;wallHit(t,Math.abs(fx*t.speed+t.knockX));t.knockX*=-0.4;}
if(t.z>HALF){t.z=HALF;wallHit(t,Math.abs(fz*t.speed+t.knockZ));t.knockZ*=-0.4;}
if(t.z<-HALF){t.z=-HALF;wallHit(t,Math.abs(fz*t.speed+t.knockZ));t.knockZ*=-0.4;}
// solids (tires + cars)
for(var s2=0;s2<solids.length;s2++){var sl=solids[s2];var ddx=t.x-sl.x,ddz=t.z-sl.z;var dd=Math.hypot(ddx,ddz);var min=2.3+sl.r*0.4;
if(dd<min&&dd>0.001){var nx=ddx/dd,nz=ddz/dd;var push=min-dd;t.x+=nx*push;t.z+=nz*push;
var into=-(nx*(fx*t.speed)+nz*(fz*t.speed));if(into>5){t.damage+=6;t.flash=1;burst(t.x,1,t.z,0xffcc00,6,6,0.5,10,0);crashSnd(into);if(t.isPlayer){score+=10;toast('+10 SMASH!');}t.speed*=0.5;t.knockX+=nx*6;t.knockZ+=nz*6;}
else{t.speed*=0.92;t.knockX+=nx*2;t.knockZ+=nz*2;}}}
// barrels
for(var bi=0;bi<barrels.length;bi++){var br=barrels[bi];if(!br.active)continue;
var bdx=t.x-br.x,bdz=t.z-br.z,bd=Math.hypot(bdx,bdz);
if(bd<2.6){var sp=Math.hypot(fx*t.speed,fz*t.speed);
br.vx=fx*sp*0.9+t.knockX*0.5+(Math.random()-0.5)*3;br.vz=fz*sp*0.9+t.knockZ*0.5+(Math.random()-0.5)*3;
br.x+=bdx*0.1;burst(br.x,1,br.z,0xff9500,5,5,0.5,10,0);crashSnd(5);
if(t.isPlayer){score+=25;toast('+25 BARREL!');}
t.speed*=0.96;
}}
// hills / air
var g=groundH(t.x,t.z);
if(t.y>g+0.05||t.vy>0){
t.vy-=22*dt;t.y+=t.vy*dt;t.airTime+=dt;
if(t.y<=g){t.y=g;t.vy=0;
if(t.airTime>0.45){burst(t.x,g+0.5,t.z,0xccaa77,10,6,0.7,10,0);crashSnd(6);
if(t.isPlayer){var pts=Math.min(300,50+Math.floor(t.airTime*120));score+=pts;toast('+'+pts+' BIG AIR!');}}
t.airTime=0;
}
}else{t.y+=(g-t.y)*Math.min(1,12*dt);
if(Math.abs(g-t.y)>0.02&&Math.abs(t.speed)>14){t.vy=2.5;}}
// mesh sync
t.mesh.position.set(t.x,t.y,t.z);
t.mesh.rotation.y=t.heading;
t.mesh.rotation.z=Math.max(-0.25,Math.min(0.25,-t.speed*0.0-(t.knockX*Math.cos(t.heading)-t.knockZ*Math.sin(t.heading))*0.02));
t.mesh.rotation.x=Math.max(-0.3,Math.min(0.3,(groundH(t.x+fz*2,t.z+fz*2)-groundH(t.x-fx*2,t.z-fz*2))*0.15));
for(var w=0;w<t.wheels.length;w++)t.wheels[w].rotation.x+=t.speed*dt*1.4;
if(t.wreckTimer>0){t.bodyMat.emissive.setHex((Math.floor(crowdT*8)%2===0)?0x661111:0x000000);}
else if(t.flash>0){t.bodyMat.emissive.setHex(0x883300);}
else{t.bodyMat.emissive.setHex(0x000000);}
}
// truck vs truck (circle)
for(var a=0;a<trucks.length;a++)for(var b2=a+1;b2<trucks.length;b2++){
var A=trucks[a],B=trucks[b2];
var dx=B.x-A.x,dz=B.z-A.z;var d=Math.hypot(dx,dz);
if(d<4.6&&d>0.001){
var nX=dx/d,nZ=dz/d,overlap=4.6-d;
A.x-=nX*overlap*0.5;A.z-=nZ*overlap*0.5;B.x+=nX*overlap*0.5;B.z+=nZ*overlap*0.5;
var aFx=Math.sin(A.heading),aFz=Math.cos(A.heading),bFx=Math.sin(B.heading),bFz=Math.cos(B.heading);
var aV=aFx*A.speed+A.knockX*nX+A.knockZ*nZ, bV=bFx*B.speed+B.knockX*nX+B.knockZ*nZ;
var impact=Math.abs(aV-bV)+Math.abs(A.speed-B.speed)*0.4;
if(impact>4){
var imp=Math.min(22,impact);
A.knockX-=nX*imp*0.9;A.knockZ-=nZ*imp*0.9;B.knockX+=nX*imp*0.9;B.knockZ+=nZ*imp*0.9;
A.damage+=imp*1.6;B.damage+=imp*1.6;A.flash=1;B.flash=1;
burst((A.x+B.x)/2,1.5,(A.z+B.z)/2,0xffdd44,10,8,0.6,12,0);
burst((A.x+B.x)/2,1.2,(A.z+B.z)/2,0xff4400,8,7,0.5,10,0);
crashSnd(imp);shake=Math.min(0.8,0.25+imp*0.03);
var attacker=null,victim=null;
if(Math.abs(A.speed)>Math.abs(B.speed)+2){attacker=A;victim=B;}else if(Math.abs(B.speed)>Math.abs(A.speed)+2){attacker=B;victim=A;}
if(attacker&&attacker.isPlayer){var pts2=80+Math.floor(imp*12);score+=pts2;toast('+'+pts2+' RAM!');victim.lastHitBy=attacker;}
else if(victim&&victim.isPlayer){victim.lastHitBy=attacker;}
if(!attacker&&A.isPlayer){score+=40;toast('+40 CLASH!');}
if(!attacker&&B.isPlayer){score+=40;toast('+40 CLASH!');}
checkWreck(A);checkWreck(B);
}else{
A.knockX-=nX*1.5;A.knockZ-=nZ*1.5;B.knockX+=nX*1.5;B.knockZ+=nZ*1.5;
}
}
}
function wallHit(t,sp){
if(sp>10&&t.wreckTimer<=0){t.damage+=5;t.flash=1;burst(t.x,1,t.z,0xffffff,5,5,0.4,10,0);crashSnd(6);if(t.isPlayer)shake=Math.max(shake,0.3);t.speed*=0.6;}
else t.speed*=0.85;
}
function checkWreck(t){
if(t.damage>=100&&t.wreckTimer<=0){
t.wreckTimer=4;t.damage=100;
burst(t.x,1.5,t.z,0x888888,16,7,1.2,-1,2);burst(t.x,1,t.z,0xff3300,12,8,0.7,8,0);
cheerSnd();shake=0.7;
if(t.isPlayer){toast('WRECKED! -200');score=Math.max(0,score-200);}
else{toast(t.name+' WRECKED! +1000');if(t.lastHitBy&&t.lastHitBy.isPlayer)score+=1000;else score+=200;}
}
}
// barrels physics
for(var k2=0;k2<barrels.length;k2++){var bb=barrels[k2];if(!bb.active){
bb.respawn-=dt;if(bb.respawn<=0){bb.x=Math.random()*64-32;bb.z=Math.random()*64-32;bb.vx=0;bb.vz=0;bb.active=true;bb.mesh.visible=true;}continue;}
bb.x+=bb.vx*dt;bb.z+=bb.vz*dt;bb.vx*=Math.pow(0.2,dt);bb.vz*=Math.pow(0.2,dt);
if(Math.abs(bb.x)>HALF||Math.abs(bb.z)>HALF||Math.hypot(bb.vx,bb.vz)>0.5&&groundH(bb.x,bb.z)>1.5){}
// barrel vs wall bounce
if(bb.x>HALF){bb.x=HALF;bb.vx*=-0.5;}if(bb.x<-HALF){bb.x=-HALF;bb.vx*=-0.5;}
if(bb.z>HALF){bb.z=HALF;bb.vz*=-0.5;}if(bb.z<-HALF){bb.z=-HALF;bb.vz*=-0.5;}
bb.mesh.position.set(bb.x,0.6+groundH(bb.x,bb.z)*0.3,bb.z);
bb.mesh.rotation.x+=bb.vx*dt*2;bb.mesh.rotation.z+=bb.vz*dt*2;
if(Math.hypot(bb.vx,bb.vz)>12){bb.active=false;bb.mesh.visible=false;bb.respawn=8;burst(bb.x,1,bb.z,0xffcc00,8,7,0.6,10,0);}
}
updateParts(dt);
// camera chase
var px2=player.x-Math.sin(player.heading)*9.5, pz2=player.z-Math.cos(player.heading)*9.5;
var py2=player.y+5.2;
if(shake>0){shake-=dt;px2+=(Math.random()-0.5)*shake*2;py2+=(Math.random()-0.5)*shake*1.5;pz2+=(Math.random()-0.5)*shake*2;}
camera.position.x+=(px2-camera.position.x)*Math.min(1,5*dt);
camera.position.y+=(py2-camera.position.y)*Math.min(1,5*dt);
camera.position.z+=(pz2-camera.position.z)*Math.min(1,5*dt);
camera.lookAt(player.x+Math.sin(player.heading)*5,player.y+1.5,player.z+Math.cos(player.heading)*5);
// clock
if(!gameOver){
timeLeft-=dt;
if(timeLeft<=0){timeLeft=0;gameOver=true;overText.textContent='Final score '+Math.floor(score);overEl.style.display='flex';cheerSnd();}
}else{overEl.style.display='flex';}
scoreEl.textContent='SCORE '+Math.floor(score);
clockEl.textContent=(timeLeft<=10.5?'⏱ ':'')+fmt(timeLeft);
clockEl.style.color=timeLeft<=10?'#ff5555':'#fff';
}
var last=performance.now();
function animate(now){
requestAnimationFrame(animate);
if(photoMode){last=now;return;}
var dt=Math.min((now-last)/1000,0.05);last=now;
update(dt);
renderer.render(scene,camera);
}
scoreEl.textContent='SCORE '+Math.floor(score);
clockEl.textContent=fmt(timeLeft);
requestAnimationFrame(animate);
})();
</script>
</body>
</html>
The notes
- Five trucks: each AI gets its own orbit radius, phase drift and aggression plus a 9-unit separation push and personal stuck-reverse timer, so they orbit different zones and chase the player at different times instead of stacking into one wall.
- Demo mode: the line
if(location.hash==="#demo"){score=5000;timeLeft=20;}seeds the realscoreandtimeLeftstate vars before the loop, so HUD, physics, AI and game-over all run normally and it is not an overlay. - Photo mode: I stop both — on
Pthe rAF loop early-returns without stepping physics/AI/clock/particles and without callingrenderer.render, freezing the last frame behind a DOM card untilPagain. - Collisions: every truck is a 2.3-unit circle with forward speed plus decaying knock velocity; each frame I test truck-truck, truck-wall, truck-tire/car and truck-barrel distances, resolve overlap along the contact normal, inject opposite knock impulses proportional to closing speed, accumulate damage from impact magnitude, and trigger score, flash, particles, sound and a timed wreck state when damage tops 100.
Attachments
meta/muse-spark-1.3 — page