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
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.
.html page. No build step. Saved to disk and double-clicked, it runs.localStorage, sessionStorage, cookies or indexedDB. It runs in a sandboxed frame where touching them throws.Both are checkable in ten seconds, which is why they are here.
#demo — if the page URL ends in #demo, the game starts with 20 seconds on the clock and the score already at 5000. This must run through the real game state, not a cosmetic overlay. Everything else behaves normally.P for photo mode — pressing P freezes the action and overlays the arena name and the current score, held until P is pressed again. The simulation stops; it does not keep playing behind the card.One sentence: the name of your rally and what it looks like.
Exactly one fenced html block containing the whole page and nothing else.
Exactly four bullets.
#demo sets, and why it is not an overlay.P is pressed — the render loop, the physics step, or both.THE RUST BOWL — a floodlit night-time dirt stadium ringed by a bobbing, hyped-up crowd, where five lifted stainless Cybertrucks launch off dirt ramps and slam each other into tire stacks, barrels, concrete barriers and wrecked cars for points.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>THE RUST BOWL — Cybertruck Monster Rally</title>
<style>
:root{
--accent:#ff7a1a;
--panel:rgba(14,10,7,.82);
--line:rgba(255,122,26,.5);
--ink:#f2ead9;
--dim:#9a8f7d;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#07070c}
body{font-family:ui-monospace,"Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace;color:var(--ink);-webkit-font-smoothing:antialiased}
canvas{display:block}
#hud{position:fixed;top:16px;left:0;right:0;display:flex;justify-content:center;gap:12px;z-index:10;pointer-events:none}
.panel{background:var(--panel);border:1px solid var(--line);padding:7px 20px 9px;min-width:170px;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.panel .label{display:block;font-size:10px;letter-spacing:.38em;color:var(--accent);margin-bottom:3px}
.panel .value{display:block;font-size:21px;font-weight:700;letter-spacing:.14em;font-variant-numeric:tabular-nums;white-space:nowrap}
#score.bump{animation:bump .35s ease}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.18);color:var(--accent)}100%{transform:scale(1)}}
#ticker{position:fixed;top:96px;left:0;right:0;text-align:center;z-index:10;pointer-events:none;
font-size:20px;font-weight:700;letter-spacing:.3em;color:var(--accent);
text-shadow:0 2px 12px rgba(0,0,0,.9);opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s}
#ticker.show{opacity:1;transform:translateY(0)}
#controls{position:fixed;bottom:14px;left:0;right:0;text-align:center;z-index:10;pointer-events:none;
font-size:11px;letter-spacing:.28em;color:var(--dim)}
#controls b{color:var(--ink);font-weight:700}
#flash{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:0;
box-shadow:inset 0 0 140px 40px rgba(255,46,28,.55);transition:opacity .5s}
#err{position:fixed;bottom:46px;left:0;right:0;text-align:center;z-index:30;pointer-events:none;
font-size:12px;letter-spacing:.2em;color:#ff6b5a}
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(6,4,3,.62)}
.overlay.hidden{display:none}
.card{background:#0e0a07;border:1px solid var(--line);border-top:4px solid var(--accent);
padding:40px 60px;text-align:center;box-shadow:0 40px 120px rgba(0,0,0,.7);max-width:92vw}
.card .kicker{font-size:11px;letter-spacing:.5em;color:var(--accent);margin-bottom:14px}
.card h1{font-size:clamp(34px,7vw,64px);letter-spacing:.06em;line-height:1.02;font-weight:800}
.card h1 em{font-style:normal;color:var(--accent)}
.card .sub{margin-top:10px;font-size:12px;letter-spacing:.42em;color:var(--dim)}
.card .rules{margin:26px auto 0;display:inline-block;text-align:left;font-size:13px;letter-spacing:.18em;line-height:2.1;color:var(--ink)}
.card .rules b{color:var(--accent);font-weight:700}
.card .press{margin-top:26px;font-size:13px;letter-spacing:.34em;color:var(--ink);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.card .big{font-size:clamp(40px,8vw,72px);font-weight:800;letter-spacing:.08em;color:var(--accent);margin-top:8px;font-variant-numeric:tabular-nums}
</style>
</head>
<body>
<div id="hud">
<div class="panel"><span class="label">ARENA</span><span class="value">THE RUST BOWL</span></div>
<div class="panel"><span class="label">SCORE</span><span class="value" id="score">000000</span></div>
<div class="panel"><span class="label">TIME</span><span class="value" id="clock">1:30</span></div>
</div>
<div id="ticker"></div>
<div id="controls"><b>W A S D</b> / <b>ARROWS</b> — DRIVE · <b>SPACE</b> — BRAKE · <b>P</b> — PHOTO MODE</div>
<div id="flash"></div>
<div id="err"></div>
<div id="startOverlay" class="overlay">
<div class="card">
<div class="kicker">CYBERTRUCK MONSTER RALLY</div>
<h1>THE <em>RUST</em> BOWL</h1>
<div class="sub">FIVE TRUCKS · ONE ARENA · NO MERCY</div>
<div class="rules">
<b>W A S D</b> / ARROW KEYS — DRIVE<br>
<b>SPACE</b> — BRAKE · <b>P</b> — PHOTO MODE<br>
RAM RIVALS FOR POINTS — WRECK THEM FOR MORE
</div>
<div class="press">PRESS ANY KEY TO START</div>
</div>
</div>
<div id="photoOverlay" class="overlay hidden">
<div class="card">
<div class="kicker">PHOTO MODE — ACTION HELD</div>
<h1>THE <em>RUST</em> BOWL</h1>
<div class="sub">CURRENT SCORE</div>
<div class="big" id="photoScore">000000</div>
<div class="press">PRESS P TO RESUME</div>
</div>
</div>
<div id="overOverlay" class="overlay hidden">
<div class="card">
<div class="kicker">FULL TIME — THE RUST BOWL</div>
<div class="sub" style="margin-top:18px">FINAL SCORE</div>
<div class="big" id="finalScore">000000</div>
<div class="press">PRESS ENTER TO RESTART</div>
</div>
</div>
<script>
// Boot guard: if the single CDN import never lands, say so instead of showing a black page.
window.addEventListener('load',function(){
setTimeout(function(){
if(!window.__booted){
var e=document.getElementById('err');
if(e) e.textContent='FAILED TO LOAD THREE.JS FROM CDN — CHECK YOUR CONNECTION';
}
},6000);
});
</script>
<script type="importmap">
{ "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js" } }
</script>
<script type="module">
import * as THREE from 'three';
try{
/* ============================== STATE ============================== */
const DEMO = /#demo$/.test(location.hash); // URL ends in #demo -> demo state
const GAME_TIME = DEMO ? 20 : 90;
const state = {
started: DEMO, // demo mode boots straight into the live game
over:false,
photo:false, // photo mode: simulation fully halted
time: GAME_TIME, // real clock, ticked by the update loop
score: DEMO ? 5000 : 0, // real score, mutated by the scoring system
hype:0, shake:0, invuln:0,
};
if(DEMO) document.getElementById('startOverlay').classList.add('hidden');
const PLAY_R = 35.5, WALL_R = 37.2;
const rand=(a,b)=>a+Math.random()*(b-a);
const clamp=(v,a,b)=>Math.max(a,Math.min(b,v));
const wrap=a=>{while(a>Math.PI)a-=Math.PI*2;while(a<-Math.PI)a+=Math.PI*2;return a;};
/* ============================== RENDERER ============================== */
const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio(Math.min(devicePixelRatio,2));
renderer.setSize(innerWidth,innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.12;
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x06060c);
scene.fog = new THREE.FogExp2(0x06060c, 0.0052);
const camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.1, 600);
camera.position.set(0,10,-30);
/* ============================== LIGHTS / SKY ============================== */
scene.add(new THREE.HemisphereLight(0x9db4d6, 0x2c1d12, 0.55));
const key = new THREE.DirectionalLight(0xfff1da, 1.7);
key.position.set(34,52,18);
key.castShadow = true;
key.shadow.mapSize.set(2048,2048);
key.shadow.camera.left=-48; key.shadow.camera.right=48;
key.shadow.camera.top=48; key.shadow.camera.bottom=-48;
key.shadow.camera.near=5; key.shadow.camera.far=140;
key.shadow.bias=-0.0006; key.shadow.normalBias=0.03;
scene.add(key);
const rim = new THREE.DirectionalLight(0x7f9bff, 0.5);
rim.position.set(-40,28,-30); scene.add(rim);
// stars
{
const n=700, sp=new Float32Array(n*3);
for(let i=0;i<n;i++){
const a=rand(0,Math.PI*2), e=rand(0.12,1.4), r=320;
sp[i*3]=Math.cos(a)*Math.cos(e)*r; sp[i*3+1]=Math.sin(e)*r; sp[i*3+2]=Math.sin(a)*Math.cos(e)*r;
}
const g=new THREE.BufferGeometry();
g.setAttribute('position', new THREE.BufferAttribute(sp,3));
scene.add(new THREE.Points(g, new THREE.PointsMaterial({color:0xcfd8ff,size:1.6,sizeAttenuation:false,transparent:true,opacity:.8,fog:false})));
}
/* ============================== CANVAS TEXTURES ============================== */
function canvasTex(size,draw){
const c=document.createElement('canvas'); c.width=c.height=size;
draw(c.getContext('2d'),size);
const t=new THREE.CanvasTexture(c);
t.colorSpace=THREE.SRGBColorSpace; t.anisotropy=4;
return t;
}
const floorTex = canvasTex(1024,(g,s)=>{
g.fillStyle='#6e4b2f'; g.fillRect(0,0,s,s);
for(let i=0;i<9000;i++){
g.fillStyle='rgba('+(Math.random()<.5?'0,0,0':'255,235,200')+','+rand(.02,.07).toFixed(3)+')';
const r=rand(1,4); g.fillRect(Math.random()*s,Math.random()*s,r,r);
}
g.strokeStyle='rgba(20,12,6,0.25)';
for(let i=0;i<70;i++){
g.lineWidth=rand(2,7); g.beginPath();
const a=Math.random()*s,b=Math.random()*s;
g.moveTo(a,b); g.quadraticCurveTo(a+rand(-120,120),b+rand(-120,120),a+rand(-200,200),b+rand(-200,200)); g.stroke();
}
g.strokeStyle='rgba(240,230,210,0.5)'; g.lineWidth=8;
g.beginPath(); g.arc(s/2,s/2,s*0.30,0,7); g.stroke();
g.lineWidth=3; g.beginPath(); g.arc(s/2,s/2,s*0.18,0,7); g.stroke();
g.strokeStyle='rgba(255,122,26,0.55)'; g.lineWidth=6;
g.beginPath(); g.arc(s/2,s/2,s*0.045,0,7); g.stroke();
g.lineWidth=4;
for(let i=0;i<8;i++){
const a=i*Math.PI/4;
g.strokeStyle='rgba(240,230,210,0.22)';
g.beginPath();
g.moveTo(s/2+Math.cos(a)*s*0.32,s/2+Math.sin(a)*s*0.32);
g.lineTo(s/2+Math.cos(a)*s*0.47,s/2+Math.sin(a)*s*0.47);
g.stroke();
}
const v=g.createRadialGradient(s/2,s/2,s*0.2,s/2,s/2,s*0.52);
v.addColorStop(0,'rgba(0,0,0,0)'); v.addColorStop(1,'rgba(0,0,0,0.4)');
g.fillStyle=v; g.fillRect(0,0,s,s);
});
const bannerTex = canvasTex(1024,(g,s)=>{
g.fillStyle='#17120e'; g.fillRect(0,0,s,s);
g.textAlign='center'; g.textBaseline='middle';
g.fillStyle='#f2ead9'; g.font='bold 64px monospace'; g.fillText('///',90,s/2); g.fillText('///',s-90,s/2);
g.fillStyle='#ff7a1a'; g.font='bold 78px monospace'; g.fillText('THE RUST BOWL',s/2,s/2);
});
bannerTex.wrapS=THREE.RepeatWrapping; bannerTex.repeat.set(-6,1); // mirrored fix for inside view
const glareTex = canvasTex(128,(g,s)=>{
const r=g.createRadialGradient(s/2,s/2,2,s/2,s/2,s/2);
r.addColorStop(0,'rgba(255,244,220,1)'); r.addColorStop(.25,'rgba(255,230,180,.55)'); r.addColorStop(1,'rgba(255,220,160,0)');
g.fillStyle=r; g.fillRect(0,0,s,s);
});
const softTex = canvasTex(64,(g,s)=>{
const r=g.createRadialGradient(32,32,2,32,32,30);
r.addColorStop(0,'rgba(255,255,255,.9)'); r.addColorStop(1,'rgba(255,255,255,0)');
g.fillStyle=r; g.fillRect(0,0,s,s);
});
/* ============================== STADIUM ============================== */
const arena = new THREE.Group(); scene.add(arena);
const ground = new THREE.Mesh(new THREE.CircleGeometry(90,64), new THREE.MeshStandardMaterial({color:0x101014,roughness:1}));
ground.rotation.x=-Math.PI/2; ground.position.y=-0.05; ground.receiveShadow=true; arena.add(ground);
const floor = new THREE.Mesh(new THREE.CircleGeometry(40,96), new THREE.MeshStandardMaterial({map:floorTex,roughness:0.95}));
floor.rotation.x=-Math.PI/2; floor.receiveShadow=true; arena.add(floor);
const wall = new THREE.Mesh(
new THREE.CylinderGeometry(WALL_R,WALL_R,2.4,96,1,true),
new THREE.MeshStandardMaterial({map:bannerTex,side:THREE.BackSide,roughness:.8})
);
wall.position.y=1.2; arena.add(wall);
const wallCap = new THREE.Mesh(new THREE.RingGeometry(WALL_R,WALL_R+0.8,96),
new THREE.MeshStandardMaterial({color:0x241d18,roughness:1,side:THREE.DoubleSide}));
wallCap.rotation.x=-Math.PI/2; wallCap.position.y=2.4; arena.add(wallCap);
// tiered stands (lathe profile), crowd rows aligned to the same numbers
const ROWS=9, R0=41.4, Y0=2.2, DR=1.5, DY=1.05;
{
const pts=[new THREE.Vector2(40.6,0),new THREE.Vector2(40.6,Y0-0.2)];
for(let i=0;i<ROWS;i++){
const r=R0+i*DR, y=Y0+i*DY;
pts.push(new THREE.Vector2(r,y), new THREE.Vector2(r,y+0.9));
}
pts.push(new THREE.Vector2(R0+ROWS*DR+1.2,Y0+(ROWS-1)*DY+0.9), new THREE.Vector2(R0+ROWS*DR+1.2,0));
const stands=new THREE.Mesh(new THREE.LatheGeometry(pts,96),
new THREE.MeshStandardMaterial({color:0x2c2c34,roughness:1,side:THREE.DoubleSide}));
stands.receiveShadow=true; arena.add(stands);
}
/* ============================== CROWD (instanced, 360°, shader wave) ============================== */
const crowdU = { uTime:{value:0}, uHype:{value:0} };
function crowdMat(){
const m = new THREE.MeshStandardMaterial({roughness:.9});
m.onBeforeCompile = sh=>{
Object.assign(sh.uniforms, crowdU);
sh.vertexShader = 'uniform float uTime;\nuniform float uHype;\nattribute float aSeed;\n' +
sh.vertexShader.replace('#include <begin_vertex>',
`#include <begin_vertex>
#ifdef USE_INSTANCING
vec3 ipos = vec3(instanceMatrix[3][0], instanceMatrix[3][1], instanceMatrix[3][2]);
float ang = atan(ipos.z, ipos.x);
float rnd = fract(aSeed*13.73);
float amp = 0.08 + uHype*(0.35+0.5*rnd);
transformed.y += max(0.0, sin(uTime*(2.0+2.5*rnd) + ang*3.0 + aSeed*6.2831))*amp;
#endif`);
};
return m;
}
{
const list=[];
for(let i=0;i<ROWS;i++){
const r=R0+i*DR+0.72, y=Y0+i*DY+0.9;
const n=Math.floor(2*Math.PI*r/0.82);
for(let j=0;j<n;j++){
if(Math.random()<0.07) continue; // empty seats
const a=(j+rand(-.3,.3))/n*Math.PI*2;
list.push({x:Math.cos(a)*(r+rand(-.2,.2)), z:Math.sin(a)*(r+rand(-.2,.2)), y, s:rand(.85,1.15), seed:Math.random()});
}
}
const N=list.length, seeds=new Float32Array(N);
const bodyGeo=new THREE.CapsuleGeometry(0.26,0.55,3,8); bodyGeo.translate(0,0.62,0);
const headGeo=new THREE.SphereGeometry(0.17,6,5); headGeo.translate(0,1.28,0);
for(let i=0;i<N;i++) seeds[i]=list[i].seed;
bodyGeo.setAttribute('aSeed', new THREE.InstancedBufferAttribute(seeds,1));
headGeo.setAttribute('aSeed', new THREE.InstancedBufferAttribute(seeds,1));
const bodies=new THREE.InstancedMesh(bodyGeo, crowdMat(), N);
const heads =new THREE.InstancedMesh(headGeo, crowdMat(), N);
bodies.frustumCulled=false; heads.frustumCulled=false;
const d=new THREE.Object3D(), col=new THREE.Color();
const cloth=['#39404d','#5a4632','#7a2e22','#2e4a3a','#6b6b70','#8a3a2a','#c7c2b8','#444a55','#7d6a4f','#93321f','#ff7a1a','#ff7a1a'];
const skin=['#e8b48c','#c98d5f','#8a5a3a','#6b4226','#f0c8a0'];
for(let i=0;i<N;i++){
const t=list[i];
d.position.set(t.x,t.y,t.z); d.scale.setScalar(t.s); d.rotation.y=rand(0,6.28); d.updateMatrix();
bodies.setMatrixAt(i,d.matrix); heads.setMatrixAt(i,d.matrix);
bodies.setColorAt(i, col.set(cloth[(Math.random()*cloth.length)|0]));
heads.setColorAt(i, col.set(skin[(Math.random()*skin.length)|0]));
}
bodies.instanceMatrix.needsUpdate=true; heads.instanceMatrix.needsUpdate=true;
bodies.instanceColor.needsUpdate=true; heads.instanceColor.needsUpdate=true;
arena.add(bodies,heads);
}
/* ============================== FLOODLIGHT TOWERS ============================== */
for(let k=0;k<4;k++){
const a=k*Math.PI/2+Math.PI/4, x=Math.cos(a)*47, z=Math.sin(a)*47;
const pole=new THREE.Mesh(new THREE.CylinderGeometry(0.28,0.4,17,8),
new THREE.MeshStandardMaterial({color:0x3a3a42,roughness:.7,metalness:.4}));
pole.position.set(x,8.5,z); pole.castShadow=true; arena.add(pole);
const head=new THREE.Mesh(new THREE.BoxGeometry(3.4,1.5,0.7),
new THREE.MeshStandardMaterial({color:0x22222a,roughness:.6,metalness:.5}));
head.position.set(x,17.2,z); head.lookAt(0,4,0); arena.add(head);
const lamp=new THREE.Mesh(new THREE.PlaneGeometry(3.0,1.2), new THREE.MeshBasicMaterial({color:0xfff3d8}));
lamp.position.set(x,17.2,z); lamp.lookAt(0,2,0); lamp.translateZ(0.36); arena.add(lamp);
const glare=new THREE.Sprite(new THREE.SpriteMaterial({map:glareTex,blending:THREE.AdditiveBlending,depthWrite:false,transparent:true,opacity:.9}));
glare.scale.setScalar(7); glare.position.set(x*0.985,17.2,z*0.985); arena.add(glare);
}
/* ============================== SCOREBOARD ============================== */
const sbCanvas=document.createElement('canvas'); sbCanvas.width=512; sbCanvas.height=256;
const sbCtx=sbCanvas.getContext('2d');
const sbTex=new THREE.CanvasTexture(sbCanvas); sbTex.colorSpace=THREE.SRGBColorSpace;
function drawBoard(){
const g=sbCtx;
g.fillStyle='#0c0a08'; g.fillRect(0,0,512,256);
g.strokeStyle='#ff7a1a'; g.lineWidth=6; g.strokeRect(8,8,496,240);
g.textAlign='center';
g.fillStyle='#ff7a1a'; g.font='bold 34px monospace'; g.fillText('THE RUST BOWL',256,56);
g.fillStyle='#f2ead9'; g.font='bold 84px monospace'; g.fillText(fmtScore(state.score),256,150);
g.fillStyle='#9a8f7d'; g.font='bold 40px monospace'; g.fillText('TIME '+fmtClock(state.time),256,212);
sbTex.needsUpdate=true;
}
{
const back=new THREE.Mesh(new THREE.BoxGeometry(13.4,6.9,0.5), new THREE.MeshStandardMaterial({color:0x14100c,roughness:.9}));
back.position.set(0,13,-57.3); scene.add(back);
const board=new THREE.Mesh(new THREE.PlaneGeometry(13,6.5), new THREE.MeshBasicMaterial({map:sbTex}));
board.position.set(0,13,-57); scene.add(board);
for(const sx of [-4.5,4.5]){
const p=new THREE.Mesh(new THREE.CylinderGeometry(0.22,0.3,13,8), new THREE.MeshStandardMaterial({color:0x3a3a42,roughness:.7}));
p.position.set(sx,6.5,-57); scene.add(p);
}
}
/* ============================== TERRAIN: HILLS + RAMPS ============================== */
const dirtMat =new THREE.MeshStandardMaterial({color:0x7a5636,roughness:1});
const dirtMat2=new THREE.MeshStandardMaterial({color:0x8a6540,roughness:1});
const hills=[ {x:-16,z:-12,r:7,h:2.4},{x:16,z:9,r:5.5,h:1.7},{x:7,z:-21,r:4.5,h:1.3},{x:-20,z:16,r:5,h:1.5} ];
hills.forEach(h=>{
const m=new THREE.Mesh(new THREE.SphereGeometry(1,28,18),dirtMat);
m.scale.set(h.r,h.h,h.r); m.position.set(h.x,0,h.z);
m.castShadow=true; m.receiveShadow=true; arena.add(m);
});
const RL=7,RH=2.5,RW=6;
const ramps=[ {x:-4,z:14,a:0.6},{x:22,z:-6,a:2.4},{x:-24,z:-20,a:-0.8},{x:4,z:-2,a:1.2} ];
ramps.forEach(rp=>{
const sh=new THREE.Shape(); sh.moveTo(0,0); sh.lineTo(RL,0); sh.lineTo(RL,RH);
const g=new THREE.ExtrudeGeometry(sh,{depth:RW,bevelEnabled:false}); g.translate(0,0,-RW/2);
const m=new THREE.Mesh(g,dirtMat2);
m.position.set(rp.x,0,rp.z); m.rotation.y=rp.a;
m.castShadow=true; m.receiveShadow=true; arena.add(m);
rp.len=RL; rp.h=RH; rp.w=RW;
});
function terrainH(x,z){
let h=0;
for(const o of hills){
const dx=x-o.x,dz=z-o.z,d2=dx*dx+dz*dz;
if(d2<o.r*o.r){ const v=o.h*Math.sqrt(1-d2/(o.r*o.r)); if(v>h)h=v; }
}
for(const rp of ramps){
const dx=x-rp.x,dz=z-rp.z,ca=Math.cos(rp.a),sa=Math.sin(rp.a);
const lx=dx*ca-dz*sa, lz=dx*sa+dz*ca;
if(lx>=0&&lx<=rp.len&&Math.abs(lz)<=rp.w/2){ const v=rp.h*lx/rp.len; if(v>h)h=v; }
}
return h;
}
/* ============================== OBSTACLES ============================== */
const obstacles=[];
function addTireStack(x,z){
const g=new THREE.Group();
for(let i=0;i<3;i++){
const t=new THREE.Mesh(new THREE.TorusGeometry(0.62,0.3,10,18),
(i===1&&Math.random()<.5)?new THREE.MeshStandardMaterial({color:0xd8d2c4,roughness:.9}):new THREE.MeshStandardMaterial({color:0x141418,roughness:.95}));
t.rotation.x=Math.PI/2+rand(-.08,.08); t.position.y=0.3+i*0.58; t.castShadow=true; g.add(t);
}
g.position.set(x,0,z); arena.add(g);
obstacles.push({kind:'tire',x,z,r:1.0,vx:0,vz:0,mass:1,mesh:g,static:false});
}
function addBarrel(x,z){
const cols=[0xff7a1a,0x3fa7a0,0xd8b93a,0x93321f];
const m=new THREE.Mesh(new THREE.CylinderGeometry(0.45,0.45,1.05,12),
new THREE.MeshStandardMaterial({color:cols[(Math.random()*cols.length)|0],roughness:.7,metalness:.3}));
m.position.set(x,0.525,z); m.castShadow=true; arena.add(m);
obstacles.push({kind:'barrel',x,z,r:0.6,vx:0,vz:0,mass:0.55,mesh:m,static:false});
}
function addBarrier(x,z,a){
const m=new THREE.Mesh(new THREE.BoxGeometry(2.8,0.95,0.7), new THREE.MeshStandardMaterial({color:0x9a978c,roughness:.95}));
m.position.set(x,0.475,z); m.rotation.y=a; m.castShadow=true; m.receiveShadow=true; arena.add(m);
const s=new THREE.Mesh(new THREE.BoxGeometry(2.82,0.18,0.72), new THREE.MeshStandardMaterial({color:0xb3392c,roughness:.9}));
s.position.y=0.4; m.add(s);
const hx=Math.cos(a)*1.4, hz=-Math.sin(a)*1.4;
obstacles.push({kind:'barrier',x,z,r:0.75,vx:0,vz:0,mass:1e9,static:true,mesh:m,
p1:{x:x-hx,z:z-hz},p2:{x:x+hx,z:z+hz}});
}
function addWreck(x,z,a){
const g=new THREE.Group();
const bc=[0x6e4436,0x5a6a72,0x6b6b45,0x743d3d][(Math.random()*4)|0];
const b=new THREE.Mesh(new THREE.BoxGeometry(3.8,0.8,1.8), new THREE.MeshStandardMaterial({color:bc,roughness:.85,metalness:.3}));
b.position.y=0.65; b.castShadow=true; g.add(b);
const cab=new THREE.Mesh(new THREE.BoxGeometry(1.9,0.65,1.6), new THREE.MeshStandardMaterial({color:0x1a1d22,roughness:.5,metalness:.6}));
cab.position.set(-0.2,1.35,0); cab.castShadow=true; g.add(cab);
g.position.set(x,0,z); g.rotation.y=a; arena.add(g);
const hx=Math.cos(a)*1.9, hz=-Math.sin(a)*1.9;
obstacles.push({kind:'wreck',x,z,r:1.15,vx:0,vz:0,mass:1e9,static:true,mesh:g,
p1:{x:x-hx,z:z-hz},p2:{x:x+hx,z:z+hz}});
}
function scatter(count,fn,rMin,rMax,clear){
let placed=0,guard=0;
while(placed<count&&guard++<800){
const a=rand(0,Math.PI*2), r=rand(rMin,rMax);
const x=Math.cos(a)*r, z=Math.sin(a)*r;
if(Math.hypot(x,z)<14) continue;
let ok=true;
for(const o of obstacles){ if(Math.hypot(x-o.x,z-o.z)<clear){ok=false;break;} }
if(ok) for(const h of hills){ if(Math.hypot(x-h.x,z-h.z)<h.r+3){ok=false;break;} }
if(ok) for(const rp of ramps){ if(Math.hypot(x-rp.x,z-rp.z)<6){ok=false;break;} }
if(ok){ fn(x,z); placed++; }
}
}
scatter(9, addTireStack, 15,32,5);
scatter(11,addBarrel, 13,33,4);
scatter(8, (x,z)=>addBarrier(x,z,rand(0,Math.PI)), 16,31,6);
scatter(4, (x,z)=>addWreck(x,z,rand(0,Math.PI*2)), 18,30,7);
/* ============================== TRUCKS ============================== */
const stainless=new THREE.MeshStandardMaterial({color:0xc9ced4,metalness:0.85,roughness:0.32,side:THREE.DoubleSide});
const glass =new THREE.MeshStandardMaterial({color:0x0b0e13,metalness:0.9,roughness:0.18});
const darkMetal=new THREE.MeshStandardMaterial({color:0x23232a,metalness:0.6,roughness:0.5});
const tyreMat =new THREE.MeshStandardMaterial({color:0x101013,roughness:.95});
const hubMat =new THREE.MeshStandardMaterial({color:0x8f9399,metalness:.9,roughness:.3});
const wreckMat =new THREE.MeshStandardMaterial({color:0x1a1a1d,roughness:.95,metalness:.2});
const bodyShape=new THREE.Shape();
bodyShape.moveTo(0.05,0.10); bodyShape.lineTo(4.55,0.10); bodyShape.lineTo(4.55,0.95);
bodyShape.lineTo(2.55,1.85); bodyShape.lineTo(0.05,1.30); bodyShape.closePath();
const bodyGeo=new THREE.ExtrudeGeometry(bodyShape,{depth:2.1,bevelEnabled:false});
bodyGeo.translate(0,0,-1.05);
function buildTruck(teamColor){
const root=new THREE.Group(); root.rotation.order='YZX';
const body=new THREE.Mesh(bodyGeo,stainless); body.position.y=0.95; body.castShadow=true; root.add(body);
body.userData.mat=stainless;
const wShape=new THREE.Shape();
wShape.moveTo(1.35,1.02); wShape.lineTo(3.05,1.02); wShape.lineTo(3.05,1.38); wShape.lineTo(2.45,1.70);
const wGeo=new THREE.ShapeGeometry(wShape);
const w1=new THREE.Mesh(wGeo,glass); w1.position.set(0,0.95,1.06); root.add(w1);
const w2=new THREE.Mesh(wGeo,glass); w2.position.set(0,0.95,-1.06); w2.rotation.y=Math.PI; root.add(w2);
const lb=new THREE.Mesh(new THREE.BoxGeometry(0.1,0.14,1.9),
new THREE.MeshStandardMaterial({color:0x111111,emissive:0xfff1c8,emissiveIntensity:1.6}));
lb.position.set(4.5,1.93,0); root.add(lb);
const bb=new THREE.Mesh(new THREE.BoxGeometry(0.18,0.55,2.0),darkMetal);
bb.position.set(4.62,1.35,0); bb.castShadow=true; root.add(bb);
const teamMeshes=[];
const rp=new THREE.Mesh(new THREE.BoxGeometry(1.5,0.06,1.4),
new THREE.MeshStandardMaterial({color:teamColor,roughness:.5,metalness:.3}));
rp.position.set(1.35,2.57,0); rp.rotation.z=0.2155; rp.castShadow=true;
rp.userData.mat=rp.material; teamMeshes.push(rp); root.add(rp);
const pod=new THREE.Mesh(new THREE.BoxGeometry(1.2,0.1,0.16),darkMetal);
pod.position.set(1.35,2.66,0); pod.rotation.z=0.2155; root.add(pod);
for(let i=0;i<4;i++){
const lamp=new THREE.Mesh(new THREE.SphereGeometry(0.09,8,6),
new THREE.MeshStandardMaterial({color:0x111111,emissive:teamColor,emissiveIntensity:2.2}));
lamp.position.set(-0.45+i*0.3,0.1,0);
lamp.userData.mat=lamp.material; teamMeshes.push(lamp); pod.add(lamp);
}
const pole=new THREE.Mesh(new THREE.CylinderGeometry(0.025,0.025,1.5,6),darkMetal);
pole.position.set(0.35,3.0,0); root.add(pole);
const flag=new THREE.Mesh(new THREE.BoxGeometry(0.55,0.34,0.02),
new THREE.MeshStandardMaterial({color:teamColor,side:THREE.DoubleSide,roughness:.8}));
flag.position.set(0.05,3.6,0); flag.castShadow=true;
flag.userData.mat=flag.material; teamMeshes.push(flag); root.add(flag);
const wGeo=new THREE.CylinderGeometry(0.62,0.62,0.5,16); wGeo.rotateX(Math.PI/2);
const hGeo=new THREE.CylinderGeometry(0.34,0.34,0.52,12); hGeo.rotateX(Math.PI/2);
const wheels=[], frontPivots=[];
[[0.95,-1.18],[0.95,1.18],[3.65,-1.18],[3.65,1.18]].forEach(([wx,wz],i)=>{
const pivot=new THREE.Group(); pivot.position.set(wx,0.62,wz);
const wh=new THREE.Group();
const tire=new THREE.Mesh(wGeo,tyreMat); tire.castShadow=true; wh.add(tire);
wh.add(new THREE.Mesh(hGeo,hubMat));
pivot.add(wh); root.add(pivot);
wheels.push(wh); if(i>=2) frontPivots.push(pivot);
});
scene.add(root);
return {root,body,wheels,frontPivots,teamMeshes,flag};
}
const TEAM=[0xff7a1a,0x2fbfa8,0xe8c53a,0x6fbf4a,0xe04848];
const spawnAngles=[-90,-18,54,126,198].map(d=>d*Math.PI/180);
const trucks=[];
for(let i=0;i<5;i++){
const built=buildTruck(TEAM[i]);
const a=spawnAngles[i], x=Math.cos(a)*12, z=Math.sin(a)*12;
trucks.push({
...built, isPlayer:i===0, team:TEAM[i],
x,z,y:0,prevGy:0,vx:0,vz:0,vy:0,h:Math.atan2(-x,-z),
steer:0,steerVis:0,throttle:0,brake:false,
damage:0,wrecked:false,respawn:0,tiltZ:0,airPitch:0,
grounded:true,climb:0,spin:0,bob:0,bobV:0,smokeT:0,
ai:i===0?null:{aggression:rand(.75,1),target:null,retarget:rand(1,3),stuck:0,revT:0,wPhase:rand(0,6.28),maxV:23+rand(0,2)}
});
}
const player=trucks[0];
/* ============================== PARTICLES ============================== */
class PSys{
constructor(n,tex,blending,opts={}){
this.n=n; this.pos=new Float32Array(n*3); this.vel=new Float32Array(n*3);
this.life=new Float32Array(n); this.max=new Float32Array(n);
this.sz=new Float32Array(n); this.col=new Float32Array(n*3);
this.grav=opts.grav??0; this.drag=opts.drag??0; this.grow=opts.grow??0; this.cur=0;
const g=new THREE.BufferGeometry();
g.setAttribute('position', new THREE.BufferAttribute(this.pos,3));
g.setAttribute('aColor', new THREE.BufferAttribute(this.col,3));
g.setAttribute('aSize', new THREE.BufferAttribute(this.sz,1));
g.setAttribute('aLife', new THREE.BufferAttribute(this.life,1));
const m=new THREE.ShaderMaterial({
uniforms:{uMap:{value:tex}}, transparent:true, depthWrite:false, blending,
vertexShader:`attribute vec3 aColor; attribute float aSize; attribute float aLife;
varying vec3 vC; varying float vL;
void main(){ vC=aColor; vL=aLife;
vec4 mv=modelViewMatrix*vec4(position,1.0);
gl_PointSize=aSize*(220.0/max(1.0,-mv.z));
gl_Position=projectionMatrix*mv; }`,
fragmentShader:`uniform sampler2D uMap; varying vec3 vC; varying float vL;
void main(){ float a=texture2D(uMap,gl_PointCoord).a*clamp(vL,0.0,1.0);
if(a<0.01) discard; gl_FragColor=vec4(vC,a); }`
});
this.pts=new THREE.Points(g,m); this.pts.frustumCulled=false; this.geo=g; scene.add(this.pts);
}
spawn(x,y,z,vx,vy,vz,life,size,r,g,b){
const i=this.cur; this.cur=(this.cur+1)%this.n; const j=i*3;
this.pos[j]=x; this.pos[j+1]=y; this.pos[j+2]=z;
this.vel[j]=vx; this.vel[j+1]=vy; this.vel[j+2]=vz;
this.life[i]=this.max[i]=life; this.sz[i]=size;
this.col[j]=r; this.col[j+1]=g; this.col[j+2]=b;
}
update(dt){
for(let i=0;i<this.n;i++){
if(this.life[i]<=0){ this.life[i]=0; continue; }
this.life[i]=Math.max(0,this.life[i]-dt);
const j=i*3;
this.vel[j+1]-=this.grav*dt;
const dr=Math.max(0,1-this.drag*dt);
this.vel[j]*=dr; this.vel[j+1]*=dr; this.vel[j+2]*=dr;
this.pos[j]+=this.vel[j]*dt; this.pos[j+1]+=this.vel[j+1]*dt; this.pos[j+2]+=this.vel[j+2]*dt;
this.sz[i]+=this.grow*dt;
}
this.geo.attributes.position.needsUpdate=true;
this.geo.attributes.aSize.needsUpdate=true;
this.geo.attributes.aLife.needsUpdate=true;
this.geo.attributes.aColor.needsUpdate=true;
}
}
const sparks=new PSys(500,softTex,THREE.AdditiveBlending,{grav:18,drag:1.5});
const smoke =new PSys(500,softTex,THREE.NormalBlending,{grav:-1.2,drag:1.2,grow:1.6});
function burstSparks(x,y,z,n,pow,cr,cg,cb){
for(let i=0;i<n;i++){
const a=rand(0,6.28), e=rand(-0.2,1), s=rand(3,9)*pow;
sparks.spawn(x,y+0.6,z, Math.cos(a)*Math.cos(e)*s, Math.sin(e)*s+rand(1,4), Math.sin(a)*Math.cos(e)*s,
rand(.25,.6), rand(.15,.35), cr,cg,cb);
}
}
function puffSmoke(x,y,z,dark){
const c=dark?0.16:0.5;
smoke.spawn(x+rand(-.4,.4),y,z+rand(-.4,.4), rand(-.6,.6),rand(1.2,2.4),rand(-.6,.6),
rand(1.2,2.2), rand(.8,1.4), c,c,c*0.95);
}
function dust(x,y,z,n){
for(let i=0;i<n;i++)
smoke.spawn(x+rand(-1,1),y+0.2,z+rand(-1,1), rand(-2,2),rand(.5,2),rand(-2,2),
rand(.5,1.1), rand(.7,1.6), 0.42,0.33,0.24);
}
/* ============================== AUDIO (Web Audio only) ============================== */
let AC=null,master=null,eng=null,crowdG=null,noiseBuf=null;
function initAudio(){
if(AC) return;
try{
AC=new (window.AudioContext||window.webkitAudioContext)();
master=AC.createGain(); master.gain.value=0.85; master.connect(AC.destination);
noiseBuf=AC.createBuffer(1,AC.sampleRate*1.5,AC.sampleRate);
const d=noiseBuf.getChannelData(0); let last=0;
for(let i=0;i<d.length;i++){ const w=Math.random()*2-1; last=(last+0.02*w)/1.02; d[i]=w*0.6+last*3; }
const o1=AC.createOscillator(); o1.type='sawtooth'; o1.frequency.value=70;
const o2=AC.createOscillator(); o2.type='square'; o2.frequency.value=35;
const g2=AC.createGain(); g2.gain.value=0.5;
const f=AC.createBiquadFilter(); f.type='lowpass'; f.frequency.value=500; f.Q.value=2;
const g=AC.createGain(); g.gain.value=0;
o1.connect(f); o2.connect(g2); g2.connect(f); f.connect(g); g.connect(master);
o1.start(); o2.start();
eng={o1,o2,f,g};
const src=AC.createBufferSource(); src.buffer=noiseBuf; src.loop=true;
const bp=AC.createBiquadFilter(); bp.type='bandpass'; bp.frequency.value=500; bp.Q.value=0.6;
crowdG=AC.createGain(); crowdG.gain.value=0.035;
src.connect(bp); bp.connect(crowdG); crowdG.connect(master); src.start();
}catch(e){ AC=null; }
}
function thump(pow){
if(!AC) return; const t=AC.currentTime;
const src=AC.createBufferSource(); src.buffer=noiseBuf;
const f=AC.createBiquadFilter(); f.type='lowpass'; f.frequency.value=150+Math.min(30,pow)*40;
const g=AC.createGain(); const v=Math.min(0.7,0.12+pow*0.045);
g.gain.setValueAtTime(v,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.28);
src.connect(f); f.connect(g); g.connect(master); src.start(t); src.stop(t+0.3);
}
function blip(){
if(!AC) return; const t=AC.currentTime;
const o=AC.createOscillator(); o.type='triangle';
o.frequency.setValueAtTime(660,t); o.frequency.exponentialRampToValueAtTime(1320,t+0.09);
const g=AC.createGain(); g.gain.setValueAtTime(0.12,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.16);
o.connect(g); g.connect(master); o.start(t); o.stop(t+0.18);
}
function boom(){
if(!AC) return; const t=AC.currentTime;
const src=AC.createBufferSource(); src.buffer=noiseBuf;
const f=AC.createBiquadFilter(); f.type='lowpass';
f.frequency.setValueAtTime(900,t); f.frequency.exponentialRampToValueAtTime(80,t+0.7);
const g=AC.createGain(); g.gain.setValueAtTime(0.8,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.8);
src.connect(f); f.connect(g); g.connect(master); src.start(t); src.stop(t+0.85);
}
function audioFrame(){
if(!AC||!eng) return;
const sp=Math.hypot(player.vx,player.vz), rev=player.throttle>0?25:0;
eng.o1.frequency.setTargetAtTime(55+sp*7+rev,AC.currentTime,0.08);
eng.o2.frequency.setTargetAtTime((55+sp*7+rev)/2,AC.currentTime,0.08);
eng.f.frequency.setTargetAtTime(280+sp*45,AC.currentTime,0.1);
const on=state.started&&!state.over&&!state.photo&&!player.wrecked;
eng.g.gain.setTargetAtTime(on?0.045+sp*0.0022:0,AC.currentTime,0.12);
crowdG.gain.setTargetAtTime(0.03+state.hype*0.07,AC.currentTime,0.3);
}
/* ============================== HUD ============================== */
const elScore=document.getElementById('score'), elClock=document.getElementById('clock'),
elTicker=document.getElementById('ticker');
let shownScore='-', shownClock='-', tickTO=null;
function fmtScore(v){ return String(Math.max(0,Math.round(v))).padStart(6,'0'); }
function fmtClock(t){ const s=Math.max(0,Math.ceil(t)); return Math.floor(s/60)+':'+String(s%60).padStart(2,'0'); }
function addScore(pts,msg){ state.score=Math.max(0,state.score+pts); if(msg) ticker(msg); }
function ticker(msg){
elTicker.textContent=msg; elTicker.classList.add('show');
clearTimeout(tickTO); tickTO=setTimeout(()=>elTicker.classList.remove('show'),1500);
}
function flash(){
const f=document.getElementById('flash');
f.style.transition='none'; f.style.opacity=1;
requestAnimationFrame(()=>{ f.style.transition='opacity .6s'; f.style.opacity=0; });
}
function hudFrame(){
const s=fmtScore(state.score);
if(s!==shownScore){
shownScore=s; elScore.textContent=s; drawBoard();
elScore.classList.remove('bump'); void elScore.offsetWidth; elScore.classList.add('bump');
}
const c=fmtClock(state.time);
if(c!==shownClock){ shownClock=c; elClock.textContent=c; drawBoard(); }
}
/* ============================== PHYSICS ============================== */
function closestOnSeg(px,pz,a,b){
const abx=b.x-a.x, abz=b.z-a.z, l2=abx*abx+abz*abz||1;
const u=clamp(((px-a.x)*abx+(pz-a.z)*abz)/l2,0,1);
return {x:a.x+abx*u, z:a.z+abz*u};
}
function resolve(a,b,ra,rb,ma,mb,e){
let dx=b.x-a.x, dz=b.z-a.z, d=Math.hypot(dx,dz);
const R=ra+rb;
if(d>=R) return 0;
if(d<1e-4){ dx=1; dz=0; d=1; }
const nx=dx/d, nz=dz/d, overlap=R-d;
const invA=1/ma, invB=1/mb, invT=invA+invB;
a.x-=nx*overlap*(invA/invT); a.z-=nz*overlap*(invA/invT);
b.x+=nx*overlap*(invB/invT); b.z+=nz*overlap*(invB/invT);
const rvn=(b.vx-a.vx)*nx+(b.vz-a.vz)*nz;
if(rvn<0){
const j=-(1+e)*rvn/invT;
a.vx-=j*nx*invA; a.vz-=j*nz*invA;
b.vx+=j*nx*invB; b.vz+=j*nz*invB;
return -rvn;
}
return 0.01;
}
function playerInput(){
const up=keys['ArrowUp']||keys['KeyW'], dn=keys['ArrowDown']||keys['KeyS'];
const lf=keys['ArrowLeft']||keys['KeyA'], rt=keys['ArrowRight']||keys['KeyD'];
player.throttle=up?1:(dn?-1:0);
player.steer=(lf?1:0)-(rt?1:0);
player.brake=!!keys['Space'];
}
function aiThink(t,dt){
const ai=t.ai;
ai.retarget-=dt;
if(ai.retarget<=0||!ai.target||(ai.target.wrecked&&ai.target.respawn>2)){
ai.retarget=rand(1.5,3.5);
const cands=[];
if(!player.wrecked) cands.push({t:player,w:3});
for(const o of trucks){ if(o!==t&&!o.isPlayer&&!o.wrecked) cands.push({t:o,w:1}); }
cands.forEach(c=>{ const d=Math.hypot(c.t.x-t.x,c.t.z-t.z); c.w+=Math.max(0,6-d)*0.4; });
if(cands.length){
let sum=0; for(const c of cands) sum+=c.w;
let r=Math.random()*sum, pick=cands[0];
for(const c of cands){ r-=c.w; if(r<=0){pick=c;break;} }
ai.target=pick.t;
} else ai.target=player;
}
const tg=ai.target||player;
const dx=tg.x-t.x, dz=t.z-t.z ? tg.z-t.z : 0.001;
const dist=Math.hypot(tg.x-t.x,tg.z-t.z)||1;
let desired=Math.atan2(tg.x-t.x,tg.z-t.z);
desired+=Math.sin(simT*1.7+ai.wPhase)*0.25*(1-ai.aggression*0.5);
const rr=Math.hypot(t.x,t.z);
if(rr>30){
const home=Math.atan2(-t.x,-t.z);
desired+=wrap(home-desired)*clamp((rr-30)/6,0,1);
}
const fx=Math.sin(t.h), fz=Math.cos(t.h);
const px=t.x+fx*6, pz=t.z+fz*6;
for(const o of obstacles){
const d=Math.hypot(px-o.x,pz-o.z);
if(d<o.r+2.4){
const crossY=fz*(o.x-t.x)-fx*(o.z-t.z);
desired+=(crossY>0?-1:1)*clamp((o.r+2.4-d)/(o.r+2.4),0,1)*1.4;
}
}
for(const o of trucks){
if(o===t||o===tg) continue;
const d=Math.hypot(o.x-t.x,o.z-t.z);
if(d<6){
const crossY=fz*(o.x-t.x)-fx*(o.z-t.z);
desired+=(crossY>0?-1:1)*0.5*(1-d/6);
}
}
const diff=wrap(desired-t.h);
t.steer=clamp(diff*2.2,-1,1);
t.throttle=Math.abs(diff)>1.4?0.25:1;
if(dist<5&&Math.abs(diff)>1.0) t.throttle=-1;
const sp=Math.hypot(t.vx,t.vz);
if(sp<0.8) ai.stuck+=dt; else ai.stuck=0;
if(ai.stuck>1.1){ ai.revT=1.0; ai.stuck=0; }
if(ai.revT>0){ ai.revT-=dt; t.throttle=-1; t.steer=-t.steer; }
}
function integrateTruck(t,dt){
const f={x:Math.sin(t.h),z:Math.cos(t.h)};
const maxV=t.isPlayer?27:t.ai.maxV;
const fs0=t.vx*f.x+t.vz*f.z;
const steerRate=2.7*clamp(Math.abs(fs0)/6,0,1)/(1+Math.abs(fs0)*0.028);
t.h+=t.steer*steerRate*(fs0<-0.5?-1:1)*dt;
if(t.grounded){
if(t.throttle>0){ t.vx+=f.x*26*t.throttle*dt; t.vz+=f.z*26*t.throttle*dt; }
else if(t.throttle<0){
if(fs0>2){ t.vx-=f.x*30*dt; t.vz-=f.z*30*dt; }
else { t.vx-=f.x*15*dt; t.vz-=f.z*15*dt; }
}
if(t.brake){ const k=Math.min(1,3.5*dt); t.vx-=t.vx*k; t.vz-=t.vz*k; }
else if(t.throttle===0){ const k=Math.min(1,1.6*dt); t.vx-=t.vx*k; t.vz-=t.vz*k; }
const fs=t.vx*f.x+t.vz*f.z, lat=t.vx*(-f.z)+t.vz*f.x;
const lat2=lat*Math.max(0,1-(t.brake?2.2:7.5)*dt);
const fs2=fs*Math.max(0,1-0.25*dt);
t.vx=f.x*fs2-f.z*lat2; t.vz=f.z*fs2+f.x*lat2;
}
const sp=Math.hypot(t.vx,t.vz);
if(sp>maxV){ const k=maxV/sp; t.vx*=k; t.vz*=k; }
if(!t.grounded){ t.vx-=t.vx*0.1*dt; t.vz-=t.vz*0.1*dt; }
const fs1=t.vx*f.x+t.vz*f.z;
if(fs1<-9){ t.vx-=f.x*(fs1+9); t.vz-=f.z*(fs1+9); }
const px=t.x, pz=t.z;
t.x+=t.vx*dt; t.z+=t.vz*dt;
const gy=terrainH(t.x,t.z);
if(t.grounded){
if(gy<t.y-0.15&&sp>7){
t.grounded=false; t.vy=clamp(t.climb,0,7); t.airPitch=t.root.rotation.z;
} else if(gy-t.y>1.1){
t.x=px; t.z=pz; t.vx*=-0.35; t.vz*=-0.35;
const imp=Math.min(14,sp*0.5);
if(imp>3){
burstSparks(t.x,t.y,t.z,8,0.5,1,0.7,0.3); thump(imp*0.6);
if(t.isPlayer) state.shake=Math.min(1,state.shake+0.25);
}
} else {
t.climb=clamp((gy-t.prevGy)/Math.max(dt,1e-4),0,12);
t.y=gy; t.prevGy=gy;
}
}
if(!t.grounded){
t.vy-=24*dt; t.y+=t.vy*dt; t.airPitch-=dt*0.3;
if(t.y<=gy){
const imp=-t.vy;
t.y=gy; t.grounded=true; t.prevGy=gy; t.vy=0;
t.bobV-=Math.min(5,imp*0.5);
if(imp>5){
dust(t.x,t.y,t.z,10); thump(imp*0.7);
if(t.isPlayer) state.shake=Math.min(1,state.shake+imp*0.03);
}
}
}
const rr=Math.hypot(t.x,t.z);
if(rr>PLAY_R){
const nx=t.x/rr, nz=t.z/rr;
t.x=nx*PLAY_R; t.z=nz*PLAY_R;
const vn=t.vx*nx+t.vz*nz;
if(vn>0){
t.vx-=1.5*vn*nx; t.vz-=1.5*vn*nz;
if(vn>4){
burstSparks(t.x,t.y,t.z,6,0.5,1,0.75,0.35); thump(vn*0.7);
if(t.isPlayer) state.shake=Math.min(1,state.shake+0.2);
}
}
}
t.bobV+=(-t.bob*70-t.bobV*9)*dt; t.bob+=t.bobV*dt;
t.spin-=fs1*dt/0.62;
t.steerVis+=(t.steer*0.42-t.steerVis)*Math.min(1,dt*10);
if(t.grounded&&sp>9&&Math.random()<0.6) dust(t.x-f.x*1.9,t.y,t.z-f.z*1.9,1);
}
function collideTrucks(){
for(let i=0;i<trucks.length;i++) for(let j=i+1;j<trucks.length;j++){
const a=trucks[i], b=trucks[j];
const imp=resolve(a,b,1.7,1.7, a.wrecked?40:1, b.wrecked?40:1, 0.55);
if(imp>2.5){
const mx=(a.x+b.x)/2, mz=(a.z+b.z)/2, my=(a.y+b.y)/2+1;
burstSparks(mx,my,mz,((Math.min(30,imp*1.5))|0)+6,Math.min(1.4,imp*0.08),1,0.72,0.28);
thump(imp);
state.hype=Math.min(1,state.hype+imp*0.03);
a.h+=rand(-1,1)*imp*0.01; b.h+=rand(-1,1)*imp*0.01;
a.bobV-=imp*0.05; b.bobV-=imp*0.05;
if(a.isPlayer||b.isPlayer||Math.hypot(mx-player.x,mz-player.z)<28)
state.shake=Math.min(1,state.shake+imp*0.025);
const d=Math.hypot(b.x-a.x,b.z-a.z)||1;
const nx=(b.x-a.x)/d, nz=(b.z-a.z)/d;
const aInto=a.vx*nx+a.vz*nz, bInto=-(b.vx*nx+b.vz*nz);
const attacker=aInto>=bInto?a:b, victim=attacker===a?b:a;
if(!victim.wrecked){
victim.damage+=imp*1.15;
attacker.damage+=imp*0.3;
if(attacker.isPlayer){
const pts=Math.max(40,Math.round(imp*9));
addScore(pts, imp>16?('BIG HIT +'+pts):('RAM +'+pts));
blip();
} else if(victim.isPlayer&&state.invuln<=0) flash();
if(victim.damage>=100) wreckTruck(victim,attacker);
else if(attacker.damage>=100) wreckTruck(attacker,victim);
}
}
}
}
function collideObstacles(){
for(const t of trucks){
const tm=t.wrecked?40:1;
for(const o of obstacles){
if(o.static){
const cp=closestOnSeg(t.x,t.z,o.p1,o.p2);
let dx=t.x-cp.x, dz=t.z-cp.z, d=Math.hypot(dx,dz);
const R=o.r+1.6;
if(d<R){
if(d<1e-4){ dx=t.x-o.x; dz=t.z-o.z; d=Math.hypot(dx,dz)||1; }
const nx=dx/d, nz=dz/d;
t.x=cp.x+nx*R; t.z=cp.z+nz*R;
const vn=t.vx*nx+t.vz*nz;
if(vn<0){
t.vx-=1.5*vn*nx; t.vz-=1.5*vn*nz;
const imp=-vn;
if(imp>4){
burstSparks(cp.x,0.8,cp.z,8,0.5,0.9,0.85,0.7);
thump(imp*0.8);
if(t.isPlayer) state.shake=Math.min(1,state.shake+imp*0.02);
if(!t.wrecked){ t.damage+=imp*0.3; if(t.damage>=100) wreckTruck(t,null); }
}
}
}
} else {
const imp=resolve(t,o,1.6,o.r,tm,o.mass,0.5);
if(imp>3){
thump(imp*0.5);
if(imp>6) burstSparks(o.x,0.8,o.z,5,0.4,0.9,0.8,0.6);
}
}
}
}
}
function updateMovables(dt){
for(const o of obstacles){
if(o.static) continue;
o.x+=o.vx*dt; o.z+=o.vz*dt;
const fr=Math.max(0,1-2.2*dt); o.vx*=fr; o.vz*=fr;
const rr=Math.hypot(o.x,o.z);
if(rr>PLAY_R+0.6){
const nx=o.x/rr, nz=o.z/rr;
o.x=nx*(PLAY_R+0.6); o.z=nz*(PLAY_R+0.6);
const vn=o.vx*nx+o.vz*nz;
if(vn>0){ o.vx-=1.6*vn*nx; o.vz-=1.6*vn*nz; }
}
for(const s of obstacles){
if(!s.static) continue;
const cp=closestOnSeg(o.x,o.z,s.p1,s.p2);
const dx=o.x-cp.x, dz=o.z-cp.z, d=Math.hypot(dx,dz), R=s.r+o.r;
if(d<R&&d>1e-4){
const nx=dx/d, nz=dz/d;
o.x=cp.x+nx*R; o.z=cp.z+nz*R;
const vn=o.vx*nx+o.vz*nz;
if(vn<0){ o.vx-=1.5*vn*nx; o.vz-=1.5*vn*nz; }
}
}
const gy=terrainH(o.x,o.z);
o.mesh.position.set(o.x, gy+(o.kind==='barrel'?0.525:0), o.z);
if(o.kind==='tire') o.mesh.rotation.y+=Math.hypot(o.vx,o.vz)*dt*0.5;
else if(o.kind==='barrel') o.mesh.rotation.z=Math.hypot(o.vx,o.vz)*0.06;
}
const mov=obstacles.filter(o=>!o.static);
for(let i=0;i<mov.length;i++) for(let j=i+1;j<mov.length;j++){
const a=mov[i], b=mov[j];
const dx=b.x-a.x, dz=b.z-a.z, d=Math.hypot(dx,dz), R=a.r+b.r;
if(d<R&&d>1e-4){
const nx=dx/d, nz=dz/d, ov=(R-d)/2;
a.x-=nx*ov; a.z-=nz*ov; b.x+=nx*ov; b.z+=nz*ov;
}
}
}
function wreckTruck(t,by){
if(t.wrecked) return;
t.wrecked=true; t.damage=100; t.vx=t.vz=0; t.throttle=0; t.brake=false;
t.tiltZ=rand(-0.06,0.06);
t.body.material=wreckMat;
t.teamMeshes.forEach(m=>m.material=wreckMat);
burstSparks(t.x,t.y+1,t.z,40,1.2,1,0.6,0.2);
const c=new THREE.Color(t.team);
burstSparks(t.x,t.y+1.5,t.z,30,0.9,c.r,c.g,c.b);
puffSmoke(t.x,t.y+1.5,t.z,true); puffSmoke(t.x,t.y+1,t.z,true);
boom();
state.hype=1;
if(t.isPlayer){ t.respawn=3.5; addScore(-250,'YOU GOT WRECKED \u2212250'); state.shake=1; }
else{
t.respawn=8;
if(by&&by.isPlayer) addScore(500,'RIVAL WRECKED +500');
else ticker('WRECK IN THE BOWL');
}
}
function respawnTruck(t){
let x=0,z=0,ok=false,guard=0;
while(!ok&&guard++<40){
const a=rand(0,6.28), r=t.isPlayer?10:rand(16,28);
x=Math.cos(a)*r; z=Math.sin(a)*r; ok=true;
for(const o of trucks){ if(o!==t&&Math.hypot(o.x-x,o.z-z)<9){ok=false;break;} }
if(ok) for(const o of obstacles){ if(Math.hypot(o.x-x,o.z-z)<4){ok=false;break;} }
}
t.x=x; t.z=z; t.y=terrainH(x,z); t.prevGy=t.y;
t.vx=t.vz=0; t.vy=0; t.grounded=true; t.h=Math.atan2(-x,-z);
t.damage=0; t.wrecked=false; t.respawn=0; t.tiltZ=0;
t.body.material=stainless;
t.teamMeshes.forEach(m=>m.material=m.userData.mat);
dust(x,t.y,z,14);
if(t.isPlayer){ state.invuln=2.5; ticker('BACK IN THE FIGHT'); }
}
function syncTruck(t){
t.root.position.set(t.x,t.y,t.z);
t.root.rotation.y=t.h-Math.PI/2;
const f={x:Math.sin(t.h),z:Math.cos(t.h)};
const hF=terrainH(t.x+f.x*1.7,t.z+f.z*1.7), hB=terrainH(t.x-f.x*1.7,t.z-f.z*1.7);
const hL=terrainH(t.x+f.z*1.2,t.z-f.x*1.2), hR=terrainH(t.x-f.z*1.2,t.z+f.x*1.2);
const pitch=t.grounded?Math.atan2(hF-hB,3.4):t.airPitch;
const roll =t.grounded?Math.atan2(hL-hR,2.4):0;
t.root.rotation.z=pitch+t.tiltZ;
t.root.rotation.x=roll;
t.wheels.forEach(w=>w.rotation.z=t.spin);
t.frontPivots.forEach(p=>p.rotation.y=t.steerVis);
t.body.position.y=0.95+t.bob;
if(t.flag) t.flag.rotation.y=Math.sin(simT*8+t.x*0.7)*0.22;
if(t.isPlayer) t.root.visible=state.invuln<=0||Math.floor(simT*12)%2===0;
}
/* ============================== GAME FLOW ============================== */
function startGame(){
state.started=true;
document.getElementById('startOverlay').classList.add('hidden');
initAudio();
if(AC&&AC.state==='suspended') AC.resume();
}
function togglePhoto(){
state.photo=!state.photo;
document.getElementById('photoOverlay').classList.toggle('hidden',!state.photo);
if(state.photo) document.getElementById('photoScore').textContent=fmtScore(state.score);
if(master) master.gain.value=state.photo?0:0.85;
}
function endGame(){
if(state.photo) togglePhoto();
state.over=true;
document.getElementById('finalScore').textContent=fmtScore(state.score);
document.getElementById('overOverlay').classList.remove('hidden');
blip(); setTimeout(blip,160);
}
function resetGame(){
state.over=false; state.time=GAME_TIME; state.score=0; state.hype=0; state.shake=0; state.invuln=0;
if(state.photo) togglePhoto();
document.getElementById('overOverlay').classList.add('hidden');
trucks.forEach((t,i)=>{
const a=spawnAngles[i], x=Math.cos(a)*12, z=Math.sin(a)*12;
t.x=x; t.z=z; t.y=0; t.prevGy=0; t.vx=t.vz=0; t.vy=0; t.h=Math.atan2(-x,-z);
t.damage=0; t.wrecked=false; t.respawn=0; t.grounded=true; t.spin=0;
t.tiltZ=0; t.bob=0; t.bobV=0; t.steerVis=0; t.brake=false;
t.body.material=stainless;
t.teamMeshes.forEach(m=>m.material=m.userData.mat);
});
for(const o of obstacles){
if(o.static) continue;
o.vx=o.vz=0;
const a=rand(0,6.28), r=rand(15,32);
o.x=Math.cos(a)*r; o.z=Math.sin(a)*r;
o.mesh.position.set(o.x,0,o.z);
}
drawBoard();
ticker('ROUND START');
}
/* ============================== INPUT ============================== */
const keys={};
addEventListener('keydown',e=>{
if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight',' '].includes(e.key)) e.preventDefault();
keys[e.code]=true;
if(e.repeat) return;
if(!state.started){ startGame(); return; }
if(state.over){ if(e.code==='Enter') resetGame(); return; }
if(e.code==='KeyP') togglePhoto();
});
addEventListener('keyup',e=>{ keys[e.code]=false; });
addEventListener('pointerdown',()=>{ if(!state.started) startGame(); });
addEventListener('resize',()=>{
camera.aspect=innerWidth/innerHeight; camera.updateProjectionMatrix();
renderer.setSize(innerWidth,innerHeight);
});
document.addEventListener('visibilitychange',()=>{
if(!AC) return;
if(document.hidden) AC.suspend(); else if(state.started) AC.resume();
});
/* ============================== CAMERA ============================== */
function updateCamera(dt){
if(state.photo) return;
if(!state.started){
const t=performance.now()*0.00012;
camera.position.set(Math.cos(t)*34, 9+Math.sin(t*0.7)*2, Math.sin(t)*34);
camera.lookAt(0,2,0);
return;
}
const f={x:Math.sin(player.h),z:Math.cos(player.h)};
const sp=Math.hypot(player.vx,player.vz);
const back=9.5+sp*0.12;
const gx=player.x-f.x*back, gz=player.z-f.z*back, gy=player.y+4.6+sp*0.06;
const k=1-Math.pow(0.0001,dt);
camera.position.x+=(gx-camera.position.x)*k;
camera.position.y+=(gy-camera.position.y)*k;
camera.position.z+=(gz-camera.position.z)*k;
if(state.shake>0){
camera.position.x+=rand(-1,1)*state.shake*0.5;
camera.position.y+=rand(-1,1)*state.shake*0.35;
camera.position.z+=rand(-1,1)*state.shake*0.5;
state.shake=Math.max(0,state.shake-dt*2.2);
}
const cr=Math.hypot(camera.position.x,camera.position.z);
if(cr>39.8){ camera.position.x*=39.8/cr; camera.position.z*=39.8/cr; }
camera.lookAt(player.x+f.x*5, player.y+1.8, player.z+f.z*5);
const fovT=58+Math.min(16,sp*0.5);
if(Math.abs(camera.fov-fovT)>0.05){
camera.fov+=(fovT-camera.fov)*Math.min(1,dt*3);
camera.updateProjectionMatrix();
}
}
/* ============================== MAIN LOOP ============================== */
let last=performance.now(), simT=0;
function update(dt){
simT+=dt;
playerInput();
for(const t of trucks){
if(t.wrecked){
t.respawn-=dt;
if(t.respawn<=0) respawnTruck(t);
t.smokeT-=dt;
if(t.smokeT<=0){
const fx=Math.sin(t.h), fz=Math.cos(t.h);
puffSmoke(t.x+fx*1.5,t.y+1.6,t.z+fz*1.5,true);
t.smokeT=0.16;
}
continue;
}
if(!t.isPlayer) aiThink(t,dt);
integrateTruck(t,dt);
}
trucks.forEach(syncTruck);
collideTrucks();
collideObstacles();
updateMovables(dt);
if(state.invuln>0) state.invuln=Math.max(0,state.invuln-dt);
state.time-=dt;
if(state.time<=0){ state.time=0; endGame(); }
}
function frame(now){
requestAnimationFrame(frame);
let dt=Math.min(0.045,(now-last)/1000);
last=now;
if(!(dt>0)) dt=0.016;
if(state.started&&!state.photo&&!state.over) update(dt);
if(!state.photo){
sparks.update(dt); smoke.update(dt);
crowdU.uTime.value=now/1000;
crowdU.uHype.value=state.hype;
state.hype=Math.max(0,state.hype-dt*0.25);
}
updateCamera(dt);
audioFrame();
hudFrame();
renderer.render(scene,camera);
}
/* ============================== BOOT ============================== */
trucks.forEach(syncTruck);
drawBoard();
hudFrame();
requestAnimationFrame(frame);
window.__booted=true;
}catch(err){
const e=document.getElementById('err');
if(e) e.textContent='INIT ERROR: '+err.message;
console.error(err);
}
</script>
</body>
</html>
#demo, boot sets state.time = 20; state.score = 5000; state.started = true — the exact same variables the update loop decrements and the scoring system mutates every frame. The clock genuinely ticks down from 0:20 in the HUD; nothing is faked with a cosmetic overlay.P sets state.photo, and the main loop then skips update(dt) entirely — truck integration, AI, collisions, the match clock and even the particle systems and crowd-wave clock are frozen; only the render call and the static photo card (arena name + current score) continue until P resumes.(x, z, vx, vz, mass); each frame, overlapping circles are separated positionally and their closing velocity along the contact normal is converted into an equal-and-opposite impulse with restitution, while static barriers/wrecks act as infinite-mass capsule segments that reflect the truck. Impact speed drives everything visible: spark bursts, thump audio, camera shake, crowd hype, a score award for the attacker, damage accumulation to 100, and a charred, smoking wreck state with timed respawn.