Run Detail
completedunion-alphaRecorded 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
294.4s
Total Tokens
14,934
Input Tokens
728
Output Tokens
14,206
Reasoning Effort
default
Est. Cost
$0.0000
Started
9/16/2026, 8:20:04 PM
OR Provider
Stealth
Finish Reason
stop
Generation ID
gen-1789590004-DYyci4LaxREqktK2bqge
Turns (1)
Turn #1
728 in14,206 out14,934 total294.4s
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
Ion Pit: Cyber Rumble packs five angular Tesla Cybertruck monster trucks into a floodlit, crowd-ringed bowl of dirt jumps, crushed crates, flying tires, and metal-on-metal impacts.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ion Pit — Cyber Rumble</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='8' fill='%230c1724'/%3E%3Cpath d='M5 26L14 13H25L35 26Z' fill='%2379fff0'/%3E%3C/svg%3E">
<style>
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080e19;color:#fff;font-family:Arial,Helvetica,sans-serif}
canvas{display:block;width:100%;height:100%}
#hud{position:absolute;inset:0;pointer-events:none;padding:25px;display:flex;flex-direction:column;justify-content:space-between}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.brand{padding:14px 20px;background:linear-gradient(110deg,#081421ef,#08142188);border-left:4px solid #7affdf}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;color:#a1bcce}
h1{font-size:clamp(21px,3.1vw,37px);line-height:1;margin:9px 0 7px;letter-spacing:-1px;font-style:italic}
.subtitle{font-size:10px;letter-spacing:2px;color:#72ffe1}
.metrics{display:flex;gap:2px}
.metric{background:#081421dd;padding:14px 21px;min-width:122px;border-top:2px solid #526273}
.label{display:block;font-size:10px;letter-spacing:2px;color:#9eb2c2;margin-bottom:6px}
.value{font-size:32px;font-weight:800;font-variant-numeric:tabular-nums}
#clock{color:#7affdf}
#clock.urgent{color:#ff795f}
.bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.controls{background:#081421d9;padding:13px 17px;line-height:1.9;font-size:11px;letter-spacing:.5px;color:#c7d6df}
.key{color:white;font-weight:bold}
.tag{font-size:10px;letter-spacing:2px;color:#b6c6d0;text-align:right;text-shadow:0 2px 4px #000}
.tag b{display:block;color:#7affdf;font-size:14px;margin-bottom:6px}
#toast{position:absolute;top:125px;left:50%;transform:translateX(-50%);text-align:center;font-size:18px;letter-spacing:2px;font-weight:800;color:#a3ffe5;text-shadow:0 3px 6px #000;opacity:0;pointer-events:none}
#photo,#finish{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;padding:55px 20px;pointer-events:none}
#photo{border:12px solid #eef4e833;background:linear-gradient(transparent 55%,#03101ad9)}
.card{text-align:center;background:#061421eb;border-top:3px solid #7affdf;padding:25px 45px;box-shadow:0 15px 60px #0008}
.card small{color:#7affdf;letter-spacing:4px;font-size:10px}
.card h2{font-size:35px;letter-spacing:-1px;margin:10px 0}
.card p{color:#adbfce;font-size:12px;letter-spacing:1px;margin-bottom:0}
.card strong{font-size:40px;font-variant-numeric:tabular-nums}
#finish{align-items:center;background:#04101b66}
#loading{position:absolute;inset:0;display:grid;place-items:center;padding:35px;background:#080e19;z-index:10;text-align:center;line-height:1.7;color:#9ffff0}
@media(max-width:650px){
#hud{padding:12px}.brand{padding:12px}.eyebrow{font-size:8px;letter-spacing:1px}
.subtitle{font-size:8px;letter-spacing:1px}.metric{padding:12px;min-width:78px}
.value{font-size:24px}.tag{display:none}.controls{font-size:10px}
.card{padding:20px 25px}.card h2{font-size:28px}
}
</style>
</head>
<body>
<div id="loading">POWERING UP ION PIT<br>Building trucks, stands, and questionable decisions…</div>
<div id="hud">
<div class="top">
<div class="brand">
<div class="eyebrow">TESLA CYBERTRUCK MONSTER RALLY</div>
<h1>ION PIT ARENA</h1>
<div class="subtitle">CYBER RUMBLE / FIVE TRUCKS. NO QUIET LAPS.</div>
</div>
<div class="metrics">
<div class="metric"><span class="label">SCORE</span><span class="value" id="score">0</span></div>
<div class="metric"><span class="label">TIME LEFT</span><span class="value" id="clock">01:30</span></div>
</div>
</div>
<div class="bottom">
<div class="controls">
<span class="key">WASD / ARROWS</span> drive & reverse <span class="key">SPACE</span> brake<br>
<span class="key">P</span> freeze / photo <span class="key">R</span> restart
</div>
<div class="tag"><b>YOU DRIVE THE MINT-LIT TRUCK</b>RAM RIVALS · SMASH CRATES · SEND IT</div>
</div>
</div>
<div id="toast"></div>
<div id="finish">
<div class="card">
<small>HEAT COMPLETE</small><h2>ION PIT ARENA</h2>
<strong id="finalScore">0</strong><p>POINTS · PRESS R FOR ANOTHER ROUND</p>
</div>
</div>
<div id="photo">
<div class="card">
<small>PHOTO MODE / SIMULATION FROZEN</small><h2>ION PIT ARENA</h2>
<strong id="photoScore">0</strong><p>POINTS · PRESS P TO RESUME</p>
</div>
</div>
<!-- The page's only external request. No other assets or libraries are loaded. -->
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script>
(() => {
'use strict';
const $ = id => document.getElementById(id);
if (!window.THREE) {
$('loading').innerHTML = 'The pinned three.js library could not load.<br>Connect to the internet, allow jsDelivr, then reload this file.';
return;
}
let renderer;
try {
renderer = new THREE.WebGLRenderer({antialias:true, powerPreference:'high-performance'});
} catch (_) {
$('loading').innerHTML = 'This browser could not start WebGL.<br>Enable hardware acceleration or open the file in a WebGL-capable browser.';
return;
}
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio || 1, 1.5));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.3;
document.body.prepend(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x101c30);
scene.fog = new THREE.FogExp2(0x101c30, .006);
const camera = new THREE.PerspectiveCamera(59, innerWidth/innerHeight, .1, 190);
const sun = new THREE.DirectionalLight(0xddeaff, 3.1);
sun.position.set(-24, 48, 15);
sun.castShadow = true;
sun.shadow.mapSize.set(2048,2048);
Object.assign(sun.shadow.camera, {left:-48,right:48,top:48,bottom:-48,near:1,far:120});
sun.shadow.bias = -.0006;
sun.shadow.normalBias = .035;
scene.add(sun);
scene.add(new THREE.HemisphereLight(0xa1c6ff, 0x61412c, 2.2));
const fill = new THREE.DirectionalLight(0xff9b69, 1.2);
fill.position.set(35, 16, -30);
scene.add(fill);
const TAU = Math.PI*2;
const clamp = (x,a,b) => Math.max(a,Math.min(b,x));
const wrap = a => Math.atan2(Math.sin(a),Math.cos(a));
const lerp = (a,b,t) => a+(b-a)*t;
let seed = 743891;
function rand() {
seed = (Math.imul(seed,1664525)+1013904223) >>> 0;
return seed/4294967296;
}
const random = (a,b) => a+(b-a)*rand();
function material(color, roughness=.8, metalness=0) {
return new THREE.MeshStandardMaterial({color,roughness,metalness});
}
const mat = {
dirt:material(0x92704b), concrete:material(0x566473),
stand:material(0x263b50), black:material(0x111821),
rubber:material(0x161a20), rim:material(0xb6c1cc,.3,.75),
glass:material(0x0a2738,.18,.6), wood:material(0xba7642),
stripe:material(0xf0bf60), dark:material(0x263039)
};
function mesh(geo, m, x=0,y=0,z=0, parent=scene) {
const obj = new THREE.Mesh(geo,m);
obj.position.set(x,y,z);
parent.add(obj);
return obj;
}
function box(w,h,d,m,x,y,z,parent=scene) {
return mesh(new THREE.BoxGeometry(w,h,d),m,x,y,z,parent);
}
function ring(inner,outer,y,m) {
const o = mesh(new THREE.RingGeometry(inner,outer,128),m,0,y,0);
o.rotation.x = -Math.PI/2;
o.receiveShadow = true;
return o;
}
function glow(color) {
return new THREE.MeshStandardMaterial({color,emissive:color,emissiveIntensity:2});
}
const mintGlow = glow(0x65ffdf), orangeGlow = glow(0xff9b55);
// A generated dirt texture: no images and no asset requests.
const dirtCanvas = document.createElement('canvas');
dirtCanvas.width = dirtCanvas.height = 512;
const dc = dirtCanvas.getContext('2d');
dc.fillStyle = '#8e704e'; dc.fillRect(0,0,512,512);
for(let i=0;i<21000;i++) {
dc.fillStyle = rand()<.5 ? 'rgba(35,24,13,.11)' : 'rgba(255,225,172,.09)';
dc.fillRect(rand()*512,rand()*512,random(1,4),random(1,3));
}
for(let i=0;i<16;i++) {
dc.strokeStyle = 'rgba(48,32,22,.16)'; dc.lineWidth = random(1,3);
dc.beginPath();
dc.ellipse(256+random(-60,60),256+random(-60,60),random(90,240),random(70,180),rand()*3,0,TAU);
dc.stroke();
}
const dirtTexture = new THREE.CanvasTexture(dirtCanvas);
dirtTexture.colorSpace = THREE.SRGBColorSpace;
mat.dirt.map = dirtTexture;
const floor = mesh(new THREE.CircleGeometry(41,128),mat.dirt);
floor.rotation.x = -Math.PI/2;
floor.receiveShadow = true;
ring(40,42,.03,mat.black);
// Compact continuous stadium with five occupied tiers.
for(let row=0;row<5;row++) {
const radius = 43+row*2.15, y = 1.4+row*1.42;
ring(radius-1.25,radius+1.05,y, row%2 ? mat.stand : mat.concrete);
mesh(new THREE.CylinderGeometry(radius+1.05,radius+1.05,1.1,128,true),
mat.stand,0,y-.56,0);
}
mesh(new THREE.CylinderGeometry(54,54,3,128,true),mat.black,0,7.7,0);
ring(52.8,54.1,9.2,mat.concrete);
// Each spectator has a colored torso and a separately positioned head.
const crowdCount = 5*228;
const bodies = new THREE.InstancedMesh(new THREE.BoxGeometry(.48,.65,.38),material(0xffffff),crowdCount);
const heads = new THREE.InstancedMesh(new THREE.SphereGeometry(.215,6,5),material(0xffffff),crowdCount);
const dummy = new THREE.Object3D(), color = new THREE.Color();
const shirts = [0x44b6bc,0xe77c4f,0xdbd8c6,0x7799dc,0xe9bd54,0x637282,0xd55269,0x86b57f];
const skins = [0xe5b990,0xba865f,0x85533e,0xf4cba7,0x5a392d];
let ci=0;
for(let row=0;row<5;row++) for(let j=0;j<228;j++) {
const a = (j+(row%2)*.5)/228*TAU;
const r = 43+row*2.15+random(-.22,.22);
const y = 1.4+row*1.42, height = random(.85,1.2);
dummy.position.set(Math.sin(a)*r,y+.35*height,Math.cos(a)*r);
dummy.rotation.set(0,a,random(-.12,.12));
dummy.scale.set(1,height,1); dummy.updateMatrix();
bodies.setMatrixAt(ci,dummy.matrix);
bodies.setColorAt(ci,color.setHex(shirts[Math.floor(rand()*shirts.length)]));
dummy.position.y = y+.75*height;
dummy.scale.setScalar(1); dummy.updateMatrix();
heads.setMatrixAt(ci,dummy.matrix);
heads.setColorAt(ci,color.setHex(skins[Math.floor(rand()*skins.length)]));
ci++;
}
scene.add(bodies,heads);
// Impact wall and illuminated track edging.
mesh(new THREE.CylinderGeometry(40.7,40.7,1.25,128,true),mat.concrete,0,.625,0);
ring(40.25,41.05,1.26,mat.black);
for(let i=0;i<64;i++) {
const a=i/64*TAU;
const b=box(2.35,.13,.16,i%4<2?mintGlow:orangeGlow,
Math.sin(a)*40.5,1.34,Math.cos(a)*40.5);
b.rotation.y=a;
}
for(let i=0;i<8;i++) {
const a=i/8*TAU, x=Math.sin(a)*52,z=Math.cos(a)*52;
box(.32,15,.32,mat.dark,x,15,z);
const bank=box(4.6,.8,.65,mat.black,x,22.3,z);
bank.rotation.y=a;
for(let j=-1;j<=1;j++) {
const lamp=box(1.05,.46,.12,glow(0xd7eaff),
x+Math.cos(a)*j*1.35,22.3,z-Math.sin(a)*j*1.35);
lamp.rotation.y=a;
}
}
// Generated arena signage.
const signCanvas=document.createElement('canvas');
signCanvas.width=1024; signCanvas.height=128;
const sc=signCanvas.getContext('2d');
sc.fillStyle='#101f2e';sc.fillRect(0,0,1024,128);
sc.fillStyle='#7affe1';sc.font='italic bold 70px Arial';sc.textAlign='center';
sc.fillText('ION PIT / CYBER RUMBLE',512,86);
const signTexture=new THREE.CanvasTexture(signCanvas);
signTexture.colorSpace=THREE.SRGBColorSpace;
const signMat=new THREE.MeshBasicMaterial({map:signTexture,side:THREE.DoubleSide});
for(let i=0;i<4;i++) {
const a=i*Math.PI/2;
const sign=mesh(new THREE.PlaneGeometry(17,2.125),signMat,
Math.sin(a)*51,10.8,Math.cos(a)*51);
sign.rotation.y=a+Math.PI;
}
// Cosine-shaped dirt hills: the visible mesh and vehicle ground sampler agree.
const hills=[
{x:-11,z:-7,rx:7,rz:10,h:3.8},
{x:13,z:7,rx:6,rz:8,h:3.1},
{x:2,z:-24,rx:8,rz:5,h:2.7},
{x:-24,z:13,rx:5,rz:7,h:2.3}
];
function groundHeight(x,z) {
let h=0;
for(const hill of hills) {
const r=Math.hypot((x-hill.x)/hill.rx,(z-hill.z)/hill.rz);
if(r<1) h=Math.max(h,hill.h*(1+Math.cos(Math.PI*r))*.5);
}
return h;
}
for(const h of hills) {
const pos=[],uv=[],indices=[],rings=14,segments=40;
for(let r=0;r<=rings;r++) for(let a=0;a<=segments;a++) {
const u=r/rings,t=a/segments*TAU;
const x=h.x+Math.cos(t)*u*h.rx,z=h.z+Math.sin(t)*u*h.rz;
pos.push(x,h.h*(1+Math.cos(Math.PI*u))*.5+.015,z);
uv.push((x+41)/82,(41-z)/82);
if(r<rings&&a<segments) {
const k=r*(segments+1)+a,n=k+segments+1;
indices.push(k,n,k+1,k+1,n,n+1);
}
}
const g=new THREE.BufferGeometry();
g.setAttribute('position',new THREE.Float32BufferAttribute(pos,3));
g.setAttribute('uv',new THREE.Float32BufferAttribute(uv,2));
g.setIndex(indices);g.computeVertexNormals();
const hillMesh=mesh(g,mat.dirt);hillMesh.receiveShadow=true;
}
// Floor obstacles: breakable wooden crates, movable tire stacks, fixed concrete.
const obstacles=[];
const tireGeo=new THREE.TorusGeometry(.78,.32,8,14);
function obstacle(type,x,z,angle=0) {
const group=new THREE.Group();scene.add(group);
const o={type,x,z,ox:x,oz:z,angle,group,vx:0,vz:0,alive:true,coolUntil:0,
radius:1.12,hw:1,hd:1,height:1.6};
group.rotation.y=angle;
if(type==='crate') {
o.hw=o.hd=.92;o.radius=1.31;o.height=1.84;
const b=box(1.84,1.84,1.84,mat.wood,0,.92,0,group);b.castShadow=true;
for(const y of [.2,1.6]) box(1.91,.14,1.91,mat.dark,0,y,0,group);
for(const zSide of [-.935,.935]) {
const brace=box(.15,2.08,.055,mat.stripe,0,.92,zSide,group);
brace.rotation.z=.72;
}
} else if(type==='tire') {
o.height=1.5;
for(let j=0;j<3;j++) {
const t=mesh(tireGeo,mat.rubber,0,.3+j*.45,0,group);
t.rotation.x=Math.PI/2;t.castShadow=true;
}
const band=mesh(new THREE.TorusGeometry(.79,.08,6,14),mat.stripe,0,1.2,0,group);
band.rotation.x=Math.PI/2;
} else {
o.hw=2;o.hd=.65;o.radius=2.11;o.height=1.45;
const b=box(4,1.45,1.3,mat.concrete,0,.725,0,group);b.castShadow=true;
for(let j=-1;j<=1;j++) {
const stripe=box(.42,1.1,1.33,mat.stripe,j*1.2,.75,0,group);
stripe.rotation.z=-.3;
}
}
group.position.set(x,groundHeight(x,z),z);
obstacles.push(o);
}
[
[-5,7],[-3,7],[-5,9],[21,-3],[23,-3],[23,-5],
[-22,-20],[-20,-20],[5,21],[7,21],[7,23],[17,-25]
].forEach(p=>obstacle('crate',...p,random(-.15,.15)));
[[-29,0],[-17,26],[27,19],[29,-12],[-3,-15],[3,11],[15,25]]
.forEach(p=>obstacle('tire',...p));
[[-8,-29,.35],[30,3,.4],[-29,-11,-.6],[0,30,0],[12,-11,.9]]
.forEach(p=>obstacle('concrete',...p));
// Angular, stainless, enormous-wheeled Cybertrucks. Exactly five are created.
function polygon(points,m,parent) {
const g=new THREE.BufferGeometry(),p=[],idx=[];
for(const v of points)p.push(...v);
for(let i=1;i<points.length-1;i++)idx.push(0,i,i+1);
g.setAttribute('position',new THREE.Float32BufferAttribute(p,3));
g.setIndex(idx);g.computeVertexNormals();
return mesh(g,m,0,0,0,parent);
}
const glassMat=mat.glass.clone();glassMat.side=THREE.DoubleSide;
const wheelRubber=new THREE.CylinderGeometry(.77,.77,.63,16);
wheelRubber.rotateZ(Math.PI/2);
const wheelRim=new THREE.CylinderGeometry(.4,.4,.66,8);
wheelRim.rotateZ(Math.PI/2);
const treadGeo=new THREE.BoxGeometry(.68,.13,.25);
const accents=[0x72ffdb,0xff755a,0xb093ff,0xffd160,0x66bbff];
const trucks=[];
function buildTruck(index) {
const root=new THREE.Group(),tilt=new THREE.Group();
root.add(tilt);scene.add(root);
const steel=material(index===0?0xc7d4d7:0x9caab5,.32,.72);
const accent=glow(accents[index]);
const profile=new THREE.Shape();
profile.moveTo(-2.15,.79);
profile.lineTo(-2.15,1.15);
profile.lineTo(-.5,1.95);
profile.lineTo(.45,1.87);
profile.lineTo(2.17,1.12);
profile.lineTo(2.17,.79);
profile.closePath();
const shellGeo=new THREE.ExtrudeGeometry(profile,{depth:2.12,bevelEnabled:false});
shellGeo.rotateY(-Math.PI/2);
const shell=mesh(shellGeo,steel,1.06,0,0,tilt);shell.castShadow=true;
box(1.85,.28,3.75,mat.dark,0,.68,0,tilt);
// Broad sloping windscreen and dark side-window wedges.
polygon([[-.91,1.883,.46],[.91,1.883,.46],[.91,1.36,1.65],[-.91,1.36,1.65]],glassMat,tilt);
for(const side of [-1,1]) {
const x=side*1.067;
polygon([[x,1.85,-.48],[x,1.79,.43],[x,1.35,1.42],[x,1.35,-1.35]],glassMat,tilt);
box(.025,.44,.045,steel,x,1.56,-.18,tilt);
box(.035,.035,.33,mat.dark,x,1.22,.6,tilt);
}
box(2.03,.085,.07,accent,0,1.12,2.2,tilt);
box(2.01,.06,.07,glow(0xff3e38),0,1.14,-2.18,tilt);
box(2.25,.22,.16,mat.black,0,.76,2.18,tilt);
box(1.55,.025,.75,mat.dark,0,1.4,-1.45,tilt);
box(1.95,.06,.11,accent,0,.55,0,tilt);
const wheels=[];
for(const x of [-1.27,1.27]) for(const z of [-1.3,1.3]) {
const pivot=new THREE.Group();pivot.position.set(x,.77,z);tilt.add(pivot);
const rolling=new THREE.Group();pivot.add(rolling);
const tire=mesh(wheelRubber,mat.rubber,0,0,0,rolling);tire.castShadow=true;
mesh(wheelRim,mat.rim,0,0,0,rolling);
const tread=new THREE.InstancedMesh(treadGeo,mat.rubber,10);
for(let k=0;k<10;k++) {
const a=k/10*TAU;
dummy.position.set(0,Math.cos(a)*.76,Math.sin(a)*.76);
dummy.rotation.set(a,0,0);dummy.scale.setScalar(1);dummy.updateMatrix();
tread.setMatrixAt(k,dummy.matrix);
}
rolling.add(tread);
wheels.push({pivot,rolling,front:z>0});
}
const t={index,root,tilt,steel,wheels,x:0,z:0,y:0,vx:0,vz:0,vy:0,
yaw:0,steer:0,grounded:true,base:0,hit:0,pitch:0,roll:0,
stuck:0,reverse:0,wheelAngle:0};
trucks.push(t);
}
for(let i=0;i<5;i++)buildTruck(i);
// Recycled, purely procedural impact particles.
const particleCount=320, particles=[];
const particlePositions=new Float32Array(particleCount*3);
const particleColors=new Float32Array(particleCount*3);
for(let i=0;i<particleCount;i++) {
particles.push({life:0,x:0,y:-100,z:0,vx:0,vy:0,vz:0});
particlePositions[i*3+1]=-100;
}
const particleGeo=new THREE.BufferGeometry();
particleGeo.setAttribute('position',new THREE.BufferAttribute(particlePositions,3).setUsage(THREE.DynamicDrawUsage));
particleGeo.setAttribute('color',new THREE.BufferAttribute(particleColors,3).setUsage(THREE.DynamicDrawUsage));
const sparks=new THREE.Points(particleGeo,new THREE.PointsMaterial({
size:.22,vertexColors:true,transparent:true,opacity:.9,depthWrite:false
}));
sparks.frustumCulled=false;scene.add(sparks);
let particleCursor=0;
function burst(x,y,z,count,kind='spark') {
for(let k=0;k<count;k++) {
const i=particleCursor++%particleCount,p=particles[i];
const a=rand()*TAU,s=random(2,8);
Object.assign(p,{x,y,z,vx:Math.sin(a)*s,vy:random(2,8),vz:Math.cos(a)*s,life:random(.3,.85)});
color.setHex(kind==='wood'?0xe6aa62:kind==='dust'?0xb99870:(rand()<.5?0xffdc81:0xc9fff2));
color.toArray(particleColors,i*3);
}
particleGeo.attributes.color.needsUpdate=true;
}
const demo = location.hash.toLowerCase() === '#demo';
const state = {score: demo ? 5000 : 0, time: demo ? 20 : 90, elapsed:0, photo:false, ended:false};
const keys=new Set();
const pairCooldown=new Map();
let toastLife=0,accumulator=0;
function announce(message) {
$('toast').textContent=message;toastLife=1.7;
}
function award(points,message) {
state.score+=points;
announce('+'+points+' / '+message);
}
function updateHUD() {
$('score').textContent=state.score.toLocaleString('en-US');
const seconds=Math.ceil(Math.max(0,state.time));
$('clock').textContent=String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0');
$('clock').classList.toggle('urgent',seconds<=10);
$('toast').style.opacity=clamp(toastLife,0,1);
}
const spawn=[
[0,24,Math.PI],[-22,-8,1.2],[19,-16,-.8],[-14,16,2.2],[24,13,-2]
];
const cameraTarget=new THREE.Vector3(), cameraDesired=new THREE.Vector3();
function reset() {
Object.assign(state,{score:demo?5000:0,time:demo?20:90,elapsed:0,photo:false,ended:false});
pairCooldown.clear();keys.clear();accumulator=0;toastLife=0;
$('photo').style.display='none';$('finish').style.display='none';
for(const t of trucks) {
const p=spawn[t.index];
Object.assign(t,{x:p[0],z:p[1],yaw:p[2],y:groundHeight(p[0],p[1]),vx:0,vz:0,vy:0,
base:groundHeight(p[0],p[1]),grounded:true,hit:0,steer:0,pitch:0,roll:0,stuck:0,reverse:0,wheelAngle:0});
}
for(const o of obstacles) {
Object.assign(o,{x:o.ox,z:o.oz,vx:0,vz:0,alive:true,coolUntil:0});
o.group.visible=true;o.group.position.set(o.x,groundHeight(o.x,o.z),o.z);
}
for(const p of particles){p.life=0;p.y=-100;}
updateParticles(0);
camera.position.set(0,23,49);
cameraTarget.set(0,1,13);camera.lookAt(cameraTarget);
updateVisuals(0);updateHUD();
}
function togglePhoto() {
state.photo=!state.photo;
accumulator=0;
$('photoScore').textContent=state.score.toLocaleString('en-US');
$('photo').style.display=state.photo?'flex':'none';
$('finish').style.display=state.ended&&!state.photo?'flex':'none';
}
window.addEventListener('keydown',e=>{
if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Space','KeyW','KeyA','KeyS','KeyD','KeyP','KeyR'].includes(e.code))e.preventDefault();
if(e.code==='KeyP'&&!e.repeat)togglePhoto();
if(e.code==='KeyR'&&!e.repeat&&!state.photo)reset();
keys.add(e.code);
});
window.addEventListener('keyup',e=>keys.delete(e.code));
window.addEventListener('blur',()=>keys.clear());
document.addEventListener('visibilitychange',()=>{keys.clear();accumulator=0;});
function control(t,dt) {
if(t.index===0) {
return {
throttle:(keys.has('KeyW')||keys.has('ArrowUp')?1:0)-(keys.has('KeyS')||keys.has('ArrowDown')?1:0),
turn:(keys.has('KeyA')||keys.has('ArrowLeft')?1:0)-(keys.has('KeyD')||keys.has('ArrowRight')?1:0),
brake:keys.has('Space')
};
}
const i=t.index;
// Individual orbit lanes, phase offsets, speeds and staggered attack windows.
const a=state.elapsed*(.17+i*.012)+i*1.61;
const radius=18+(i%2)*10;
let gx=Math.sin(a)*radius,gz=Math.cos(a)*radius;
const attacking=Math.floor((state.elapsed+i*3.4)/6)%3===0;
const target=i%2?trucks[0]:trucks[(i+1)%5];
if(attacking) {
gx=target.x+target.vx*.4;
gz=target.z+target.vz*.4;
}
let dx=gx-t.x,dz=gz-t.z;
const len=Math.hypot(dx,dz)||1;
dx/=len;dz/=len;
// Soft separation is steering, not an invisible collision barrier.
for(const other of trucks) {
if(other===t || (attacking&&other===target))continue;
const sx=t.x-other.x,sz=t.z-other.z,d=Math.hypot(sx,sz);
if(d>0&&d<8) {
const strength=(8-d)/8*1.35;
dx+=sx/d*strength;dz+=sz/d*strength;
}
}
const distance=Math.hypot(t.x,t.z);
if(distance>33) {dx-=t.x/distance*(distance-33)*.3;dz-=t.z/distance*(distance-33)*.3;}
const error=wrap(Math.atan2(dx,dz)-t.yaw);
const speed=Math.hypot(t.vx,t.vz);
t.stuck=speed<1.4?t.stuck+dt:0;
if(t.stuck>1.4){t.reverse=1.1;t.stuck=0;}
if(t.reverse>0) {
t.reverse-=dt;
return {throttle:-.8,turn:i%2?1:-1,brake:false};
}
return {
throttle:Math.abs(error)>1.3&&speed>7?.05:.66+i*.065,
turn:clamp(error*1.5,-1,1),
brake:Math.abs(error)>2&&speed>11
};
}
function drive(t,dt) {
const input=control(t,dt);
const fx=Math.sin(t.yaw),fz=Math.cos(t.yaw);
const forward=t.vx*fx+t.vz*fz;
t.steer=lerp(t.steer,input.turn,1-Math.exp(-9*dt));
const grip=t.grounded?1:.18;
t.yaw+=t.steer*1.75*clamp(Math.abs(forward)/5,0,1)*Math.sign(forward||1)*grip*dt;
let accel=input.throttle*23;
if(input.throttle*forward<0)accel*=1.65;
t.vx+=fx*accel*grip*dt;t.vz+=fz*accel*grip*dt;
const rightX=fz,rightZ=-fx,lateral=t.vx*rightX+t.vz*rightZ;
const friction=1-Math.exp(-(input.brake?3:4.2)*grip*dt);
t.vx-=rightX*lateral*friction;t.vz-=rightZ*lateral*friction;
const drag=Math.exp(-(input.brake?3.6:.52)*dt);
t.vx*=drag;t.vz*=drag;
const speed=Math.hypot(t.vx,t.vz),limit=forward<0?10:24;
if(speed>limit){t.vx*=limit/speed;t.vz*=limit/speed;}
if(t.grounded) {
const sx=(groundHeight(t.x+.4,t.z)-groundHeight(t.x-.4,t.z))/.8;
const sz=(groundHeight(t.x,t.z+.4)-groundHeight(t.x,t.z-.4))/.8;
t.vx-=sx*7*dt;t.vz-=sz*7*dt;
}
t.x+=t.vx*dt;t.z+=t.vz*dt;
const ground=groundHeight(t.x,t.z);
if(t.grounded)t.vy=clamp((ground-t.base)/dt,-12,12);
t.y+=t.vy*dt;t.vy-=24*dt;
if(t.y<=ground+.025) {
const hardLanding=!t.grounded&&t.vy<-7;
t.y=ground;t.vy=Math.max(0,t.vy);t.grounded=true;
if(hardLanding)burst(t.x,t.y+.3,t.z,10,'dust');
} else t.grounded=false;
t.base=ground;
t.hit=Math.max(0,t.hit-dt);
t.wheelAngle+=forward*dt/.77;
// Circular stadium containment.
const d=Math.hypot(t.x,t.z),wallLimit=37.8;
if(d>wallLimit) {
const nx=t.x/d,nz=t.z/d;
t.x=nx*wallLimit;t.z=nz*wallLimit;
const outward=t.vx*nx+t.vz*nz;
if(outward>0) {
t.vx-=nx*outward*1.45;t.vz-=nz*outward*1.45;
if(outward>4) {
t.hit=.32;burst(t.x+nx*1.8,t.y+1,t.z+nz*1.8,12);
if(t.index===0)announce('WALL HIT / KEEP IT IN THE PIT');
}
}
}
}
function collideTrucks() {
const diameter=4.25;
for(let i=0;i<5;i++)for(let j=i+1;j<5;j++) {
const a=trucks[i],b=trucks[j];
if(Math.abs(a.y-b.y)>2)continue;
let dx=b.x-a.x,dz=b.z-a.z,d=Math.hypot(dx,dz);
if(d>=diameter)continue;
if(d<.001){dx=1;dz=0;d=1;}
const nx=dx/d,nz=dz/d,penetration=diameter-d;
a.x-=nx*penetration*.5;a.z-=nz*penetration*.5;
b.x+=nx*penetration*.5;b.z+=nz*penetration*.5;
const closing=(a.vx-b.vx)*nx+(a.vz-b.vz)*nz;
if(closing<=0)continue;
// Equal masses; restitution 0.48; equal/opposite normal impulses.
const impulse=(1+.48)*closing/2;
a.vx-=nx*impulse;a.vz-=nz*impulse;
b.vx+=nx*impulse;b.vz+=nz*impulse;
const key=i+':'+j;
if(closing>2.2&&state.elapsed>(pairCooldown.get(key)||-1)) {
pairCooldown.set(key,state.elapsed+.65);
a.hit=b.hit=.5;
burst((a.x+b.x)/2,(a.y+b.y)/2+1.2,(a.z+b.z)/2,26);
// A small yaw kick makes off-axis impacts affect subsequent handling.
a.yaw-=clamp((a.vx*nz-a.vz*nx)*.009,-.13,.13);
b.yaw+=clamp((b.vx*nz-b.vz*nx)*.009,-.13,.13);
if(i===0||j===0)award(Math.round(closing*40),'METAL ON METAL');
}
}
}
// Circle-to-circle tires; circle-to-oriented-box crates and barriers.
function obstacleContact(t,o) {
const r=1.9,dx=t.x-o.x,dz=t.z-o.z;
if(Math.hypot(dx,dz)>r+o.radius)return null;
if(o.type==='tire') {
const d=Math.hypot(dx,dz);
if(d>=r+o.radius)return null;
return d>.001?{nx:dx/d,nz:dz/d,depth:r+o.radius-d}:{nx:1,nz:0,depth:r+o.radius};
}
const c=Math.cos(o.angle),s=Math.sin(o.angle);
const x=c*dx-s*dz,z=s*dx+c*dz;
let nx=x-clamp(x,-o.hw,o.hw),nz=z-clamp(z,-o.hd,o.hd);
const d=Math.hypot(nx,nz);
let depth;
if(d>r)return null;
if(d>.0001){nx/=d;nz/=d;depth=r-d;}
else {
const ex=o.hw-Math.abs(x),ez=o.hd-Math.abs(z);
if(ex<ez){nx=x<0?-1:1;nz=0;depth=r+ex;}
else{nx=0;nz=z<0?-1:1;depth=r+ez;}
}
return {nx:c*nx+s*nz,nz:-s*nx+c*nz,depth};
}
function collideObstacles(t) {
for(const o of obstacles) {
if(!o.alive||t.y>groundHeight(o.x,o.z)+o.height+.15)continue;
const hit=obstacleContact(t,o);if(!hit)continue;
const {nx,nz,depth}=hit;
const closing=-((t.vx-o.vx)*nx+(t.vz-o.vz)*nz);
if(o.type==='crate'&&closing>5) {
o.alive=false;o.group.visible=false;
t.vx*=.87;t.vz*=.87;t.hit=.2;
burst(o.x,groundHeight(o.x,o.z)+1,o.z,22,'wood');
if(t.index===0)award(100,'CRATE CRUNCH');
continue;
}
const movable=o.type==='tire';
t.x+=nx*depth*(movable?.35:1);
t.z+=nz*depth*(movable?.35:1);
if(movable){o.x-=nx*depth*.65;o.z-=nz*depth*.65;}
if(closing>0) {
// Tires have 0.3 truck mass; concrete and unbroken crates are static.
const impulse=(1+.35)*closing/(movable?1+1/.3:1);
t.vx+=nx*impulse;t.vz+=nz*impulse;
if(movable){o.vx-=nx*impulse/.3;o.vz-=nz*impulse/.3;}
if(closing>3&&state.elapsed>o.coolUntil) {
o.coolUntil=state.elapsed+.8;t.hit=.25;
burst(t.x-nx*1.8,t.y+.8,t.z-nz*1.8,12,movable?'dust':'spark');
if(t.index===0&&movable)award(25,'TIRE TOSS');
}
}
}
}
function updateParticles(dt) {
for(let i=0;i<particleCount;i++) {
const p=particles[i];
if(p.life>0) {
p.life-=dt;p.vy-=19*dt;
p.x+=p.vx*dt;p.y+=p.vy*dt;p.z+=p.vz*dt;
if(p.y<groundHeight(p.x,p.z)+.08)p.life=0;
}
particlePositions[i*3]=p.x;
particlePositions[i*3+1]=p.life>0?p.y:-100;
particlePositions[i*3+2]=p.z;
}
particleGeo.attributes.position.needsUpdate=true;
}
function simulate(dt) {
state.elapsed+=dt;
state.time=Math.max(0,state.time-dt);
toastLife=Math.max(0,toastLife-dt);
for(const t of trucks)drive(t,dt);
for(const o of obstacles)if(o.alive&&o.type==='tire') {
o.x+=o.vx*dt;o.z+=o.vz*dt;
const damping=Math.exp(-2.2*dt);o.vx*=damping;o.vz*=damping;
const d=Math.hypot(o.x,o.z);
if(d>38.6) {
const nx=o.x/d,nz=o.z/d;
o.x=nx*38.6;o.z=nz*38.6;
const v=o.vx*nx+o.vz*nz;
if(v>0){o.vx-=nx*v*1.4;o.vz-=nz*v*1.4;}
}
}
collideTrucks();
for(const t of trucks)collideObstacles(t);
updateParticles(dt);
if(state.time<=0) {
state.ended=true;
$('finalScore').textContent=state.score.toLocaleString('en-US');
$('finish').style.display='flex';
}
}
function updateVisuals(dt) {
for(const t of trucks) {
t.root.position.set(t.x,t.y+.025,t.z);
t.root.rotation.y=t.yaw;
const fx=Math.sin(t.yaw),fz=Math.cos(t.yaw);
const pitch=t.grounded?-Math.atan2(
groundHeight(t.x+fx*1.4,t.z+fz*1.4)-groundHeight(t.x-fx*1.4,t.z-fz*1.4),2.8
):clamp(-t.vy*.026,-.3,.3);
const roll=t.grounded?Math.atan2(
groundHeight(t.x+fz,t.z-fx)-groundHeight(t.x-fz,t.z+fx),2
):0;
const smoothing=1-Math.exp(-10*dt);
t.pitch=lerp(t.pitch,pitch,smoothing);
t.roll=lerp(t.roll,roll-t.steer*Math.hypot(t.vx,t.vz)*.003,smoothing);
t.tilt.rotation.set(t.pitch,0,t.roll);
t.steel.emissive.setRGB(t.hit*1.3,t.hit*.18,t.hit*.06);
for(const wheel of t.wheels) {
wheel.pivot.rotation.y=wheel.front?t.steer*.32:0;
wheel.rolling.rotation.x=t.wheelAngle;
}
}
for(const o of obstacles)if(o.alive)o.group.position.set(o.x,groundHeight(o.x,o.z),o.z);
const p=trucks[0],fx=Math.sin(p.yaw),fz=Math.cos(p.yaw);
cameraDesired.set(p.x-fx*23,21+p.y*.5,p.z-fz*23);
// Keep the spectator camera above the stands rather than inside them.
const cr=Math.hypot(cameraDesired.x,cameraDesired.z);
if(cr>48){cameraDesired.x*=48/cr;cameraDesired.z*=48/cr;}
camera.position.lerp(cameraDesired,1-Math.exp(-2.8*dt));
cameraTarget.lerp(new THREE.Vector3(p.x+fx*5,p.y+1,p.z+fz*5),1-Math.exp(-5*dt));
camera.lookAt(cameraTarget);
}
window.addEventListener('resize',()=>{
renderer.setSize(innerWidth,innerHeight);
camera.aspect=innerWidth/innerHeight;
camera.updateProjectionMatrix();
});
reset();
renderer.render(scene,camera);
$('loading').style.display='none';
let previous=performance.now();
const fixedStep=1/120;
function frame(now) {
requestAnimationFrame(frame);
const dt=Math.min((now-previous)/1000,.1);
previous=now;
if(!state.photo&&!state.ended) {
accumulator+=dt;
let advanced=0;
while(accumulator>=fixedStep&&!state.ended) {
simulate(fixedStep);
accumulator-=fixedStep;
advanced+=fixedStep;
}
updateVisuals(advanced);
updateHUD();
} else {
// No physics, AI, timer, particles, camera easing or catch-up while frozen.
accumulator=0;
}
// Rendering remains alive so resizing and the frozen photo remain reliable.
renderer.render(scene,camera);
}
requestAnimationFrame(frame);
})();
</script>
</body>
</html>
The notes
- Five trucks: One player and four AI trucks are created by
for(let i=0;i<5;i++)buildTruck(i). Rivals use different orbit phases, alternating lane radii, individual speeds, staggered attack windows, separation steering, and a reverse recovery maneuver. - Demo mode:
const state = {score: demo ? 5000 : 0, time: demo ? 20 : 90, elapsed:0, photo:false, ended:false};initializes the actual scoring and countdown state. Collisions modify that score, and the countdown ends the heat; neither value is a cosmetic overlay. - Photo mode:
Pstops simulation steps, including physics, AI, countdown, particles, and camera movement. Rendering continues to display the frozen scene. The accumulator is cleared, so resuming does not fast-forward; restarting is disabled while the photo is held. - Collisions: Trucks use planar collision circles with a vertical-overlap check, equal penetration correction, and equal-and-opposite normal impulses with restitution
0.48. Obstacles use circle-to-circle tests for tires and circle-to-oriented-box tests for crates and concrete. Tires have0.3truck mass; solid barriers are static. Crates break above a closing-speed threshold of5. Qualified player impacts award points with cooldowns, while hills provide sampled ground height and vertical launch-and-landing motion.
Attachments
stealth/union-alpha — page