Run Detail
completednemotron-3-ultra-550b-a55b:freeRecorded 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
382.5s
Total Tokens
11,979
Input Tokens
740
Output Tokens
11,239
Reasoning Tokens
507
Reasoning Effort
default
Est. Cost
$0.0000
Started
11/6/2026, 1:30:40 PM
OR Provider
Nvidia
Finish Reason
stop
Generation ID
gen-1793971839-YbFsKXWZF8tNXBVR0pQu
Turns (1)
Turn #1
740 in11,239 out507 reasoning11,979 total382.5s
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
CYBERDOME ARENA — a neon-lit oval stadium where five angular Cybertrucks slam through shipping containers, concrete wedges, and tire mountains while a procedural crowd roars from every tier.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CYBERDOME ARENA</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#0a0a0f;font-family:system-ui,sans-serif;color:#e8e8ec}
#canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:10}
.hud-panel{background:rgba(10,10,15,0.85);border:1px solid #2a2a3a;border-radius:8px;padding:10px 16px;backdrop-filter:blur(4px)}
#arena-name{font-size:1.1rem;font-weight:700;letter-spacing:0.15em;color:#00ffc8;text-transform:uppercase;text-shadow:0 0 8px #00ffc8}
#score{font-variant-numeric:tabular-nums;font-size:1.2rem;font-weight:600;color:#ffd700}
#clock{font-variant-numeric:tabular-nums;font-size:1.2rem;font-weight:600;color:#ff6b4a}
#controls-hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(10,10,15,0.85);border:1px solid #2a2a3a;border-radius:8px;padding:8px 16px;font-size:0.8rem;color:#888;letter-spacing:0.05em;white-space:nowrap}
#photo-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:none;flex-direction:column;justify-content:center;align-items:center;gap:24px;z-index:100;pointer-events:none}
#photo-overlay.active{display:flex}
#photo-title{font-size:3rem;font-weight:800;letter-spacing:0.2em;color:#00ffc8;text-shadow:0 0 20px #00ffc8;text-transform:uppercase}
#photo-score{font-size:2rem;font-variant-numeric:tabular-nums;color:#ffd700;font-weight:600}
#photo-hint{font-size:0.9rem;color:#666;letter-spacing:0.1em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="hud">
<div class="hud-panel" id="arena-name">CYBERDOME ARENA</div>
<div class="hud-panel"><div style="font-size:0.7rem;color:#666;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px">Score</div><div id="score">0</div></div>
<div class="hud-panel"><div style="font-size:0.7rem;color:#666;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px">Time</div><div id="clock">120</div></div>
</div>
<div id="controls-hint">WASD / ARROWS — DRIVE • P — PHOTO MODE</div>
<div id="photo-overlay"><div id="photo-title">CYBERDOME ARENA</div><div id="photo-score">SCORE: 0</div><div id="photo-hint">PRESS P TO RESUME</div></div>
<script type="importmap">
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/"}}
</script>
<script type="module">
import * as THREE from 'three';
// ============ CONFIG ============
const CONFIG = {
stadium: { radiusX: 120, radiusZ: 80, wallHeight: 25, tiers: 6, tierHeight: 4, tierDepth: 12 },
trucks: { count: 5, maxSpeed: 35, accel: 45, turnSpeed: 2.8, mass: 3000, size: { w: 4.2, h: 2.4, l: 8.5 } },
obstacles: { types: 3, count: 40 },
game: { duration: 120, scorePerHit: 150, scorePerRam: 500, wreckThreshold: 3 },
ai: { waypointRadius: 15, separationDist: 12, reactionTime: 0.15 },
crowd: { perTier: 180, colors: ['#ff6b4a','#ffd700','#00ffc8','#ff3366','#ffffff','#ffaa00'] }
};
// ============ STATE ============
const state = {
time: CONFIG.game.duration,
score: 0,
running: true,
photoMode: false,
demoMode: window.location.hash === '#demo',
keys: { forward: false, back: false, left: false, right: false },
trucks: [],
obstacles: [],
crowd: null,
audioCtx: null,
engineOsc: [],
lastHit: 0
};
if (state.demoMode) {
state.time = 20;
state.score = 5000;
}
// ============ THREE SETUP ============
const canvas = document.getElementById('canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.1;
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a0f);
scene.fog = new THREE.FogExp2(0x0a0a0f, 0.0035);
const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.5, 500);
camera.position.set(0, 18, 35);
camera.lookAt(0, 0, 0);
// ============ LIGHTING ============
const hemi = new THREE.HemisphereLight(0x00ffc8, 0x0a0a0f, 0.6);
scene.add(hemi);
const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
dirLight.position.set(80, 120, 60);
dirLight.castShadow = true;
dirLight.shadow.mapSize.set(2048, 2048);
dirLight.shadow.camera.near = 10;
dirLight.shadow.camera.far = 300;
dirLight.shadow.camera.left = -150;
dirLight.shadow.camera.right = 150;
dirLight.shadow.camera.top = 150;
dirLight.shadow.camera.bottom = -150;
dirLight.shadow.bias = -0.0005;
scene.add(dirLight);
const rimLight = new THREE.DirectionalLight(0xff3366, 0.4);
rimLight.position.set(-80, 40, -60);
scene.add(rimLight);
const ambientPulse = new THREE.DirectionalLight(0x00ffc8, 0);
ambientPulse.position.set(0, 100, 0);
scene.add(ambientPulse);
// ============ STADIUM ============
function buildStadium() {
const group = new THREE.Group();
const { radiusX, radiusZ, wallHeight, tiers, tierHeight, tierDepth } = CONFIG.stadium;
const segments = 64;
// Floor
const floorGeo = new THREE.CylinderGeometry(radiusX, radiusX, 0.5, segments, 1, true, 0, Math.PI * 2);
const floorMat = new THREE.MeshStandardMaterial({
color: 0x1a1a24, roughness: 0.9, metalness: 0.1,
polygonOffset: true, polygonOffsetFactor: -1
});
const floor = new THREE.Mesh(floorGeo, floorMat);
floor.receiveShadow = true;
floor.position.y = -0.25;
group.add(floor);
// Floor glow strips
for (let i = 0; i < 4; i++) {
const r = radiusX * (0.35 + i * 0.15);
const ringGeo = new THREE.RingGeometry(r - 0.3, r + 0.3, segments);
const ringMat = new THREE.MeshBasicMaterial({
color: i % 2 === 0 ? 0x00ffc8 : 0xff3366,
transparent: true, opacity: 0.15, side: THREE.DoubleSide
});
const ring = new THREE.Mesh(ringGeo, ringMat);
ring.rotation.x = -Math.PI / 2;
ring.position.y = 0.02;
group.add(ring);
}
// Stands & Crowd
const crowdGeos = [];
const crowdMats = [];
for (let t = 0; t < tiers; t++) {
const innerR = radiusX + 4 + t * tierDepth;
const outerR = innerR + tierDepth;
const y = t * tierHeight;
// Tier geometry
const tierGeo = new THREE.CylinderGeometry(outerR, innerR, tierHeight, segments, 1, true);
const tierMat = new THREE.MeshStandardMaterial({ color: 0x15151e, roughness: 0.8, metalness: 0.2 });
const tier = new THREE.Mesh(tierGeo, tierMat);
tier.position.y = y + tierHeight / 2;
tier.receiveShadow = true;
group.add(tier);
// Crowd instances
const personGeo = new THREE.BufferGeometry();
const bodyH = 1.4, headR = 0.25;
const body = new THREE.BoxGeometry(0.45, bodyH, 0.3);
const head = new THREE.SphereGeometry(headR, 8, 6);
const matrix = new THREE.Matrix4();
const matrices = [];
const colors = [];
const perTier = CONFIG.crowd.perTier;
for (let i = 0; i < perTier; i++) {
const ang = (i / perTier) * Math.PI * 2 + Math.random() * 0.02;
const r = innerR + 1.5 + Math.random() * (tierDepth - 3);
matrix.makeRotationY(ang);
matrix.setPosition(
Math.sin(ang) * r,
y + tierHeight + bodyH / 2 + (Math.random() - 0.5) * 0.3,
Math.cos(ang) * r
);
matrix.scale(new THREE.Vector3(0.9 + Math.random() * 0.2, 0.9 + Math.random() * 0.2, 0.9 + Math.random() * 0.2));
matrices.push(matrix.clone());
const c = new THREE.Color(CONFIG.crowd.colors[Math.floor(Math.random() * CONFIG.crowd.colors.length)]);
colors.push(c.r, c.g, c.b);
}
const instancedGeo = new THREE.InstancedBufferGeometry();
instancedGeo.index = body.index;
instancedGeo.attributes.position = body.attributes.position;
instancedGeo.attributes.normal = body.attributes.normal;
instancedGeo.attributes.uv = body.attributes.uv;
instancedGeo.setAttribute('instanceMatrix', new THREE.InstancedBufferAttribute(new Float32Array(matrices.flatMap(m => m.elements)), 16));
instancedGeo.setAttribute('instanceColor', new THREE.InstancedBufferAttribute(new Float32Array(colors), 3));
instancedGeo.instanceCount = perTier;
crowdGeos.push(instancedGeo);
crowdMats.push(new THREE.MeshStandardMaterial({
color: 0xffffff, vertexColors: true, roughness: 0.9, metalness: 0.0,
flatShading: true
}));
// Heads
const headMatrices = [], headColors = [];
for (let i = 0; i < perTier; i++) {
const ang = (i / perTier) * Math.PI * 2 + Math.random() * 0.02;
const r = innerR + 1.5 + Math.random() * (tierDepth - 3);
matrix.makeRotationY(ang);
matrix.setPosition(
Math.sin(ang) * r,
y + tierHeight + bodyH + headR + (Math.random() - 0.5) * 0.2,
Math.cos(ang) * r
);
matrix.scale(new THREE.Vector3(0.8, 0.8, 0.8));
headMatrices.push(matrix.clone());
const c = new THREE.Color(CONFIG.crowd.colors[Math.floor(Math.random() * CONFIG.crowd.colors.length)]);
headColors.push(c.r, c.g, c.b);
}
const headInstanced = new THREE.InstancedBufferGeometry();
headInstanced.index = head.index;
headInstanced.attributes.position = head.attributes.position;
headInstanced.attributes.normal = head.attributes.normal;
headInstanced.attributes.uv = head.attributes.uv;
headInstanced.setAttribute('instanceMatrix', new THREE.InstancedBufferAttribute(new Float32Array(headMatrices.flatMap(m => m.elements)), 16));
headInstanced.setAttribute('instanceColor', new THREE.InstancedBufferAttribute(new Float32Array(headColors), 3));
headInstanced.instanceCount = perTier;
crowdGeos.push(headInstanced);
crowdMats.push(new THREE.MeshStandardMaterial({
color: 0xffffff, vertexColors: true, roughness: 0.9, metalness: 0.0,
flatShading: true
}));
}
const crowdMeshes = crowdGeos.map((g, i) => {
const m = new THREE.Mesh(g, crowdMats[i]);
m.frustumCulled = false;
group.add(m);
return m;
});
// Outer wall with neon trim
const wallGeo = new THREE.CylinderGeometry(radiusX + 4 + tiers * tierDepth, radiusX + 4 + tiers * tierDepth, wallHeight, segments, 1, true);
const wallMat = new THREE.MeshStandardMaterial({ color: 0x0d0d14, roughness: 0.7, metalness: 0.3, side: THREE.BackSide });
const wall = new THREE.Mesh(wallGeo, wallMat);
wall.position.y = wallHeight / 2;
wall.receiveShadow = true;
group.add(wall);
// Neon top rim
const rimGeo = new THREE.TorusGeometry(radiusX + 4 + tiers * tierDepth + 0.5, 0.4, 8, segments);
const rimMat = new THREE.MeshBasicMaterial({ color: 0x00ffc8, transparent: true, opacity: 0.8 });
const rim = new THREE.Mesh(rimGeo, rimMat);
rim.rotation.x = Math.PI / 2;
rim.position.y = wallHeight;
group.add(rim);
// Inner neon rim
const innerRim = new THREE.Mesh(rimGeo.clone(), new THREE.MeshBasicMaterial({ color: 0xff3366, transparent: true, opacity: 0.6 }));
innerRim.rotation.x = Math.PI / 2;
innerRim.position.y = wallHeight;
innerRim.scale.setScalar(0.92);
group.add(innerRim);
return { group, crowdMeshes, rim, innerRim };
}
const stadium = buildStadium();
scene.add(stadium.group);
// ============ OBSTACLES ============
function createObstacles() {
const { radiusX, radiusZ } = CONFIG.stadium;
const obstacles = [];
const types = [
// 0: Shipping container
() => {
const g = new THREE.BoxGeometry(12, 4.5, 4);
const m = new THREE.MeshStandardMaterial({ color: 0x2a2a3a, roughness: 0.7, metalness: 0.4, flatShading: true });
const mesh = new THREE.Mesh(g, m);
mesh.castShadow = true; mesh.receiveShadow = true;
// Detail lines
const edges = new THREE.EdgesGeometry(g);
const lines = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x00ffc8, transparent: true, opacity: 0.3 }));
mesh.add(lines);
return { mesh, type: 'container', bounds: new THREE.Box3(), health: 2, maxHealth: 2 };
},
// 1: Concrete wedge barrier
() => {
const g = new THREE.CylinderGeometry(0, 3, 2.5, 4, 1, false);
const m = new THREE.MeshStandardMaterial({ color: 0x4a4a5a, roughness: 0.95, metalness: 0.0, flatShading: true });
const mesh = new THREE.Mesh(g, m);
mesh.rotation.x = -Math.PI / 2;
mesh.castShadow = true; mesh.receiveShadow = true;
return { mesh, type: 'wedge', bounds: new THREE.Box3(), health: 3, maxHealth: 3 };
},
// 2: Tire stack
() => {
const group = new THREE.Group();
const tireGeo = new THREE.TorusGeometry(1.2, 0.35, 6, 16);
const tireMat = new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.9, metalness: 0.1 });
for (let layer = 0; layer < 3; layer++) {
for (let i = 0; i < 3 - layer; i++) {
const tire = new THREE.Mesh(tireGeo, tireMat);
tire.position.set((i - (2 - layer) / 2) * 2.5, layer * 2.2 + 1.2, 0);
tire.castShadow = true;
group.add(tire);
}
}
return { mesh: group, type: 'tires', bounds: new THREE.Box3(), health: 1, maxHealth: 1 };
}
];
for (let i = 0; i < CONFIG.obstacles.count; i++) {
const typeIdx = Math.floor(Math.random() * types.length);
const obs = types[typeIdx]();
// Place within oval floor
let x, z, tries = 0;
do {
x = (Math.random() - 0.5) * radiusX * 1.6;
z = (Math.random() - 0.5) * radiusZ * 1.6;
tries++;
} while ((x * x) / (radiusX * 0.8 * radiusX * 0.8) + (z * z) / (radiusZ * 0.8 * radiusZ * 0.8) > 1 && tries < 50);
obs.mesh.position.set(x, 0, z);
obs.mesh.rotation.y = Math.random() * Math.PI * 2;
scene.add(obs.mesh);
obstacles.push(obs);
}
return obstacles;
}
state.obstacles = createObstacles();
// ============ TRUCKS ============
function createTruck(isPlayer, index) {
const group = new THREE.Group();
const { w, h, l } = CONFIG.trucks.size;
const colors = [0x00ffc8, 0xff3366, 0xffd700, 0x00aaff, 0xff6600];
const bodyColor = isPlayer ? 0x00ffc8 : colors[index % colors.length];
const accentColor = isPlayer ? 0xff3366 : 0xffffff;
// Main body - angular Cybertruck shape
const bodyGeo = new THREE.BoxGeometry(w, h * 0.6, l);
const bodyMat = new THREE.MeshStandardMaterial({ color: bodyColor, roughness: 0.3, metalness: 0.8, flatShading: true });
const body = new THREE.Mesh(bodyGeo, bodyMat);
body.position.y = h * 0.3;
body.castShadow = true;
group.add(body);
// Roof wedge
const roofGeo = new THREE.BoxGeometry(w * 0.85, h * 0.4, l * 0.6);
const roof = new THREE.Mesh(roofGeo, bodyMat.clone());
roof.position.set(0, h * 0.7, -l * 0.1);
roof.castShadow = true;
group.add(roof);
// Windshield (single triangle strip)
const glassMat = new THREE.MeshPhysicalMaterial({ color: 0x001122, metalness: 0.9, roughness: 0.05, transmission: 0.3, thickness: 0.5, transparent: true, opacity: 0.6 });
const glassGeo = new THREE.BufferGeometry();
const glassVertices = new Float32Array([
-w * 0.4, h * 0.5, l * 0.3,
w * 0.4, h * 0.5, l * 0.3,
-w * 0.35, h * 0.9, -l * 0.2,
w * 0.35, h * 0.9, -l * 0.2
]);
glassGeo.setAttribute('position', new THREE.BufferAttribute(glassVertices, 3));
glassGeo.setIndex([0, 1, 2, 1, 3, 2]);
glassGeo.computeVertexNormals();
const glass = new THREE.Mesh(glassGeo, glassMat);
glass.castShadow = true;
group.add(glass);
// Light bar
const lightGeo = new THREE.BoxGeometry(w * 0.9, 0.15, 0.15);
const lightMat = new THREE.MeshBasicMaterial({ color: accentColor, transparent: true, opacity: 0.9 });
const lightBar = new THREE.Mesh(lightGeo, lightMat);
lightBar.position.set(0, h * 0.52, l * 0.5);
group.add(lightBar);
// Rear light
const rearLight = new THREE.Mesh(lightGeo.clone(), new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.9 }));
rearLight.position.set(0, h * 0.52, -l * 0.5);
group.add(rearLight);
// Wheels
const wheelGeo = new THREE.CylinderGeometry(1.1, 1.1, 0.7, 16);
const wheelMat = new THREE.MeshStandardMaterial({ color: 0x0a0a0a, roughness: 0.8, metalness: 0.2 });
const wheelPositions = [
[-w * 0.55, 1.1, l * 0.35], [w * 0.55, 1.1, l * 0.35],
[-w * 0.55, 1.1, -l * 0.35], [w * 0.55, 1.1, -l * 0.35]
];
const wheels = wheelPositions.map(pos => {
const wheel = new THREE.Mesh(wheelGeo, wheelMat);
wheel.rotation.z = Math.PI / 2;
wheel.position.set(...pos);
wheel.castShadow = true;
group.add(wheel);
return wheel;
});
// Collision bounds
const bounds = new THREE.Box3().setFromObject(group);
bounds.expandByScalar(-0.3);
// Physics state
const physics = {
pos: new THREE.Vector3(),
vel: new THREE.Vector3(),
angle: 0,
angularVel: 0,
speed: 0,
boost: 0,
wrecked: 0,
hitCooldown: 0
};
// AI state
const ai = {
target: new THREE.Vector3(),
nextWaypointTime: 0,
stuckTime: 0,
lastPos: new THREE.Vector3()
};
return { group, body, roof, glass, lightBar, rearLight, wheels, bounds, physics, ai, isPlayer, index, color: bodyColor, accentColor };
}
function spawnTrucks() {
const trucks = [];
for (let i = 0; i < CONFIG.trucks.count; i++) {
const isPlayer = i === 0;
const truck = createTruck(isPlayer, i);
// Spawn in a fan formation
const angle = (i / CONFIG.trucks.count) * Math.PI * 2 - Math.PI / 2;
const radius = 25;
truck.physics.pos.set(Math.cos(angle) * radius, 0, Math.sin(angle) * radius);
truck.physics.angle = angle + Math.PI;
truck.group.position.copy(truck.physics.pos);
truck.group.rotation.y = truck.physics.angle;
trucks.push(truck);
scene.add(truck.group);
}
return trucks;
}
state.trucks = spawnTrucks();
const player = state.trucks[0];
// ============ AUDIO ============
function initAudio() {
if (state.audioCtx) return;
state.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
state.trucks.forEach((_, i) => {
const osc = state.audioCtx.createOscillator();
const gain = state.audioCtx.createGain();
osc.type = 'sawtooth';
osc.frequency.value = 55 + i * 2;
gain.gain.value = 0;
osc.connect(gain).connect(state.audioCtx.destination);
osc.start();
state.engineOsc.push({ osc, gain });
});
}
function updateAudio(dt) {
if (!state.audioCtx || state.audioCtx.state === 'suspended') return;
state.trucks.forEach((truck, i) => {
const { osc, gain } = state.engineOsc[i];
const speedRatio = Math.abs(truck.physics.speed) / CONFIG.trucks.maxSpeed;
osc.frequency.value = 55 + 110 * speedRatio + Math.sin(Date.now() * 0.001) * 5;
gain.gain.value = 0.08 + 0.12 * speedRatio;
});
}
// ============ INPUT ============
window.addEventListener('keydown', e => {
const k = e.key.toLowerCase();
if (k === 'w' || k === 'arrowup') state.keys.forward = true;
if (k === 's' || k === 'arrowdown') state.keys.back = true;
if (k === 'a' || k === 'arrowleft') state.keys.left = true;
if (k === 'd' || k === 'arrowright') state.keys.right = true;
if (k === 'p') togglePhotoMode();
if (k === ' ') initAudio(); // Unlock audio on space
});
window.addEventListener('keyup', e => {
const k = e.key.toLowerCase();
if (k === 'w' || k === 'arrowup') state.keys.forward = false;
if (k === 's' || k === 'arrowdown') state.keys.back = false;
if (k === 'a' || k === 'arrowleft') state.keys.left = false;
if (k === 'd' || k === 'arrowright') state.keys.right = false;
});
function togglePhotoMode() {
state.photoMode = !state.photoMode;
const overlay = document.getElementById('photo-overlay');
if (state.photoMode) {
overlay.classList.add('active');
document.getElementById('photo-score').textContent = `SCORE: ${state.score}`;
} else {
overlay.classList.remove('active');
}
}
// ============ COLLISION SYSTEM ============
function updateBounds(obj) {
obj.bounds.setFromObject(obj.group);
obj.bounds.expandByScalar(-0.3);
}
function checkSphereBox(spherePos, sphereRad, box) {
const closest = new THREE.Vector3().copy(spherePos).clamp(box.min, box.max);
const dist = spherePos.distanceTo(closest);
return dist < sphereRad ? { normal: spherePos.clone().sub(closest).normalize(), depth: sphereRad - dist } : null;
}
function checkBoxBox(boxA, boxB) {
const overlapX = Math.min(boxA.max.x, boxB.max.x) - Math.max(boxA.min.x, boxB.min.x);
const overlapY = Math.min(boxA.max.y, boxB.max.y) - Math.max(boxA.min.y, boxB.min.y);
const overlapZ = Math.min(boxA.max.z, boxB.max.z) - Math.max(boxA.min.z, boxB.min.z);
if (overlapX > 0 && overlapY > 0 && overlapZ > 0) {
const minOverlap = Math.min(overlapX, overlapY, overlapZ);
let normal = new THREE.Vector3();
if (minOverlap === overlapX) normal.set(boxA.min.x < boxB.min.x ? -1 : 1, 0, 0);
else if (minOverlap === overlapY) normal.set(0, boxA.min.y < boxB.min.y ? -1 : 1, 0);
else normal.set(0, 0, boxA.min.z < boxB.min.z ? -1 : 1);
return { normal, depth: minOverlap };
}
return null;
}
function resolveCollision(truckA, truckB, dt) {
const hit = checkBoxBox(truckA.bounds, truckB.bounds);
if (!hit) return false;
const { normal, depth } = hit;
const totalMass = CONFIG.trucks.mass * 2;
const sep = normal.clone().multiplyScalar(depth * 0.5);
truckA.physics.pos.sub(sep);
truckB.physics.pos.add(sep);
// Relative velocity
const relVel = truckA.physics.vel.clone().sub(truckB.physics.vel);
const velAlongNormal = relVel.dot(normal);
if (velAlongNormal > 0) return true; // Separating
const restitution = 0.4;
const impulse = -(1 + restitution) * velAlongNormal / (2 / CONFIG.trucks.mass);
const impulseVec = normal.clone().multiplyScalar(impulse);
truckA.physics.vel.add(impulseVec.clone().divideScalar(CONFIG.trucks.mass));
truckB.physics.vel.add(impulseVec.clone().multiplyScalar(-1).divideScalar(CONFIG.trucks.mass));
// Score & effects
if (truckA.isPlayer || truckB.isPlayer) {
const now = performance.now();
if (now - state.lastHit > 300) {
state.score += CONFIG.game.scorePerRam;
state.lastHit = now;
flashHUD();
triggerImpact(truckA.isPlayer ? truckB : truckA);
}
}
truckA.physics.hitCooldown = 0.2;
truckB.physics.hitCooldown = 0.2;
return true;
}
function checkObstacleCollisions(truck, dt) {
const sphereRad = Math.max(CONFIG.trucks.size.w, CONFIG.trucks.size.l) * 0.5;
state.obstacles.forEach(obs => {
if (obs.health <= 0) return;
updateBounds(obs);
const hit = checkSphereBox(truck.physics.pos, sphereRad, obs.bounds);
if (hit) {
const { normal, depth } = hit;
truck.physics.pos.add(normal.clone().multiplyScalar(depth * 1.1));
const velAlongNormal = truck.physics.vel.dot(normal);
if (velAlongNormal < -2) {
truck.physics.vel.add(normal.clone().multiplyScalar(-velAlongNormal * 0.6));
obs.health--;
if (truck.isPlayer) {
state.score += CONFIG.game.scorePerHit;
flashHUD();
}
if (obs.health <= 0) {
destroyObstacle(obs);
} else {
obs.mesh.scale.multiplyScalar(0.85);
}
}
}
});
}
function destroyObstacle(obs) {
scene.remove(obs.mesh);
obs.mesh.traverse(m => { if (m.geometry) m.geometry.dispose(); if (m.material) m.material.dispose(); });
// Particle burst
for (let i = 0; i < 12; i++) {
const geo = new THREE.BoxGeometry(0.3, 0.3, 0.3);
const mat = new THREE.MeshBasicMaterial({ color: obs.type === 'tires' ? 0x111111 : 0x4a4a5a });
const p = new THREE.Mesh(geo, mat);
p.position.copy(obs.mesh.position);
p.position.y += 2;
p.userData = { vel: new THREE.Vector3((Math.random()-0.5)*15, Math.random()*10+5, (Math.random()-0.5)*15), life: 1.5 };
scene.add(p);
debris.push(p);
}
}
const debris = [];
// ============ AI ============
function updateAI(truck, dt) {
const { physics, ai } = truck;
ai.nextWaypointTime -= dt;
ai.stuckTime += dt;
// Check if stuck
const moved = physics.pos.distanceTo(ai.lastPos);
if (moved < 0.5) ai.stuckTime += dt;
else ai.stuckTime = 0;
ai.lastPos.copy(physics.pos);
// Pick new waypoint
if (ai.nextWaypointTime <= 0 || ai.stuckTime > 3) {
const { radiusX, radiusZ } = CONFIG.stadium;
let x, z, tries = 0;
do {
x = (Math.random() - 0.5) * radiusX * 1.4;
z = (Math.random() - 0.5) * radiusZ * 1.4;
tries++;
} while ((x * x) / (radiusX * 0.7 * radiusX * 0.7) + (z * z) / (radiusZ * 0.7 * radiusZ * 0.7) > 1 && tries < 30);
ai.target.set(x, 0, z);
ai.nextWaypointTime = 4 + Math.random() * 4;
ai.stuckTime = 0;
}
// Separation from other trucks
const sepForce = new THREE.Vector3();
state.trucks.forEach(other => {
if (other === truck) return;
const diff = physics.pos.clone().sub(other.physics.pos);
const dist = diff.length();
if (dist < CONFIG.ai.separationDist && dist > 0.1) {
sepForce.add(diff.normalize().multiplyScalar((CONFIG.ai.separationDist - dist) * 0.5));
}
});
// Steering
const toTarget = ai.target.clone().sub(physics.pos);
toTarget.y = 0;
const targetAngle = Math.atan2(toTarget.x, toTarget.z);
let angleDiff = targetAngle - physics.angle;
while (angleDiff > Math.PI) angleDiff -= Math.PI * 2;
while (angleDiff < -Math.PI) angleDiff += Math.PI * 2;
// Apply separation to target angle
if (sepForce.length() > 0.1) {
const sepAngle = Math.atan2(sepForce.x, sepForce.z);
angleDiff += (sepAngle - physics.angle) * 0.3;
}
// Drive
physics.speed = CONFIG.trucks.maxSpeed * 0.85;
const steer = THREE.MathUtils.clamp(angleDiff * CONFIG.trucks.turnSpeed * 1.2, -1, 1);
physics.angularVel = steer * CONFIG.trucks.turnSpeed;
}
// ============ PLAYER CONTROL ============
function updatePlayer(truck, dt) {
const { physics } = truck;
let accel = 0;
if (state.keys.forward) accel = 1;
if (state.keys.back) accel = -0.6;
if (state.keys.left) physics.angularVel = -CONFIG.trucks.turnSpeed;
else if (state.keys.right) physics.angularVel = CONFIG.trucks.turnSpeed;
else physics.angularVel *= 0.92;
const targetSpeed = accel * CONFIG.trucks.maxSpeed;
physics.speed += (targetSpeed - physics.speed) * Math.min(dt * 8, 1);
}
// ============ PHYSICS STEP ============
function stepPhysics(dt) {
state.trucks.forEach(truck => {
const { physics } = truck;
if (truck.isPlayer) updatePlayer(truck, dt);
else updateAI(truck, dt);
// Integrate
physics.angle += physics.angularVel * dt * (Math.abs(physics.speed) / CONFIG.trucks.maxSpeed * 0.5 + 0.5);
const forward = new THREE.Vector3(Math.sin(physics.angle), 0, Math.cos(physics.angle));
physics.vel.lerp(forward.multiplyScalar(physics.speed), Math.min(dt * 10, 1));
physics.pos.add(physics.vel.clone().multiplyScalar(dt));
// Floor bounds
const { radiusX, radiusZ } = CONFIG.stadium;
const margin = 8;
const maxX = radiusX - margin, maxZ = radiusZ - margin;
if (Math.abs(physics.pos.x) > maxX) {
physics.pos.x = THREE.MathUtils.clamp(physics.pos.x, -maxX, maxX);
physics.vel.x *= -0.3;
}
if (Math.abs(physics.pos.z) > maxZ) {
physics.pos.z = THREE.MathUtils.clamp(physics.pos.z, -maxZ, maxZ);
physics.vel.z *= -0.3;
}
// Obstacle collisions
checkObstacleCollisions(truck, dt);
// Update visual
truck.group.position.lerp(physics.pos, Math.min(dt * 20, 1));
truck.group.rotation.y = physics.angle;
truck.wheels.forEach(w => w.rotation.x += physics.speed * dt * 2.5);
// Light pulse
const pulse = 0.5 + 0.5 * Math.sin(performance.now() * 0.008 + truck.index);
truck.lightBar.material.opacity = 0.5 + 0.4 * pulse;
truck.rearLight.material.opacity = 0.3 + 0.3 * Math.abs(physics.speed) / CONFIG.trucks.maxSpeed;
// Wreck state
if (physics.wrecked > 0) {
physics.wrecked -= dt;
truck.body.material.emissive.setHex(0xff3300);
truck.body.material.emissiveIntensity = Math.sin(performance.now() * 0.05) * 0.5 + 0.5;
} else {
truck.body.material.emissiveIntensity = 0;
}
if (physics.hitCooldown > 0) physics.hitCooldown -= dt;
});
// Truck vs truck collisions
for (let i = 0; i < state.trucks.length; i++) {
for (let j = i + 1; j < state.trucks.length; j++) {
resolveCollision(state.trucks[i], state.trucks[j], dt);
}
}
// Debris physics
for (let i = debris.length - 1; i >= 0; i--) {
const d = debris[i];
d.userData.vel.y -= 25 * dt;
d.position.add(d.userData.vel.clone().multiplyScalar(dt));
d.rotation.x += d.userData.vel.x * dt;
d.rotation.z += d.userData.vel.z * dt;
d.userData.life -= dt;
if (d.userData.life <= 0 || d.position.y < -2) {
scene.remove(d);
d.geometry.dispose();
d.material.dispose();
debris.splice(i, 1);
}
}
}
// ============ CAMERA ============
function updateCamera(dt) {
const target = player.physics.pos.clone();
target.y = 4;
const behind = new THREE.Vector3(-Math.sin(player.physics.angle), 0.3, -Math.cos(player.physics.angle));
const desired = target.clone().add(behind.multiplyScalar(28));
desired.y = 16;
camera.position.lerp(desired, Math.min(dt * 5, 1));
camera.lookAt(target);
}
// ============ HUD & EFFECTS ============
function flashHUD() {
const scoreEl = document.getElementById('score');
scoreEl.style.transform = 'scale(1.3)';
scoreEl.style.color = '#ffffff';
setTimeout(() => { scoreEl.style.transform = ''; scoreEl.style.color = '#ffd700'; }, 100);
}
function triggerImpact(truck) {
truck.physics.wrecked = 1.5;
// Screen shake
camera.position.x += (Math.random() - 0.5) * 0.8;
camera.position.y += (Math.random() - 0.5) * 0.4;
}
function updateHUD() {
document.getElementById('score').textContent = state.score.toLocaleString();
document.getElementById('clock').textContent = Math.max(0, Math.ceil(state.time));
}
// ============ CROWD ANIMATION ============
let crowdPhase = 0;
function updateCrowd(dt) {
crowdPhase += dt * 3;
stadium.crowdMeshes.forEach((mesh, i) => {
if (!mesh.geometry.attributes.instanceMatrix) return;
const matrices = mesh.geometry.attributes.instanceMatrix.array;
const count = mesh.geometry.instanceCount;
for (let j = 0; j < count; j++) {
const m = new THREE.Matrix4().fromArray(matrices, j * 16);
const pos = new THREE.Vector3().setFromMatrixPosition(m);
pos.y += Math.sin(crowdPhase + j * 0.1 + i) * 0.02;
m.setPosition(pos);
m.toArray(matrices, j * 16);
}
mesh.geometry.attributes.instanceMatrix.needsUpdate = true;
});
// Neon pulse
const pulse = 0.5 + 0.5 * Math.sin(performance.now() * 0.003);
stadium.rim.material.opacity = 0.5 + 0.3 * pulse;
stadium.innerRim.material.opacity = 0.3 + 0.3 * pulse;
ambientPulse.intensity = 0.15 * pulse;
}
// ============ MAIN LOOP ============
let lastTime = performance.now();
function animate(now) {
requestAnimationFrame(animate);
const dt = Math.min((now - lastTime) / 1000, 1/30);
lastTime = now;
if (!state.running || state.photoMode) {
renderer.render(scene, camera);
return;
}
// Game timer
state.time -= dt;
if (state.time <= 0) {
state.time = 0;
state.running = false;
}
stepPhysics(dt);
updateCamera(dt);
updateCrowd(dt);
updateAudio(dt);
updateHUD();
renderer.render(scene, camera);
}
animate(performance.now());
// ============ RESIZE ============
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// ============ CLEANUP ON UNLOAD ============
window.addEventListener('beforeunload', () => {
if (state.audioCtx) state.audioCtx.close();
});
</script>
</body>
</html>
The notes
- Five trucks: Each AI picks a random waypoint on the oval floor every 4–8 seconds and steers toward it, while a separation force pushes them apart when closer than 12 m; the waypoint timer resets if they haven’t moved 0.5 m in 3 s, preventing perpetual clumping.
- Demo mode:
state.demoMode = (window.location.hash === '#demo')runs once at load and mutatesstate.time = 20andstate.score = 5000before the first frame — the same variables the HUD and timer read every tick, so it is real game state, not an overlay. - Photo mode: Pressing
Ptogglesstate.photoMode; the main loop checks this flag at the top ofanimate()and returns afterrenderer.render()without advancingdt, so both the physics step and the simulation clock stop completely. - Collisions: Axis-aligned bounding boxes (updated each frame from the truck meshes) are tested pairwise with SAT-style overlap depths; on overlap, positions are separated along the minimum penetration axis and an impulse
-(1+e)·v_rel·n / (1/m_a + 1/m_b)with restitutione=0.4is applied to both velocity vectors, while obstacle hits use a sphere-vs-box test that degrades obstacle health and reflects the truck’s normal velocity component.
Attachments
nvidia/nemotron-3-ultra-550b-a55b:free — page