Run Detail
completedgpt-6.1-sol-proRecorded 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
342.5s
Total Tokens
59,693
Input Tokens
31,093
Output Tokens
28,600
Reasoning Tokens
6,552
Reasoning Effort
default
Est. Cost
$0.3482
Started
10/1/2026, 3:35:57 PM
OR Provider
OpenAI
Finish Reason
stop
Generation ID
gen-1790868957-nYlRb3Loi2JLWWN3BHH1
Turns (1)
Turn #1
31,093 in28,600 out6,552 reasoning59,693 total342.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
Volt Vault: Cybertruck Clash is a floodlit, packed-bowl monster-truck rally where five angular electric bruisers launch over dirt hills and smash through barrels, crates, tires, and each other.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Volt Vault: Cybertruck Clash</title>
<style>
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #101b2b; }
body { font-family: Arial, Helvetica, sans-serif; color: white; }
canvas { display: block; }
#hud {
position: fixed; top: 20px; left: 22px; right: 22px;
display: flex; justify-content: space-between; gap: 14px;
pointer-events: none; text-shadow: 0 2px 8px #000;
}
.panel {
background: rgba(9,18,28,.82); border: 1px solid #ffffff28;
border-top: 3px solid #62ffe0; padding: 13px 18px;
box-shadow: 0 8px 30px #0005;
}
.eyebrow { font-size: 10px; letter-spacing: 3px; color: #9db8ca; }
h1 { font-size: 23px; margin: 5px 0 0; letter-spacing: 1px; }
.numbers { display: flex; gap: 30px; }
.number { font-size: 29px; font-weight: 900; font-variant-numeric: tabular-nums; margin-top: 4px; }
#clock.urgent { color: #ff956b; }
#help {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
padding: 12px 20px; background: #09121cdb; border: 1px solid #ffffff25;
font-size: 12px; letter-spacing: .6px; text-align: center; white-space: nowrap;
pointer-events: none;
}
#help b { color: #62ffe0; }
#message {
position: fixed; top: 120px; left: 0; right: 0;
text-align: center; font-size: 22px; font-weight: 900;
color: #ffcf74; text-shadow: 0 2px 8px #000;
pointer-events: none; opacity: 0; transition: opacity .12s;
}
.overlay {
position: fixed; inset: 0; display: none; align-items: center;
justify-content: center; background: #03111d65;
text-align: center; padding: 20px;
}
.card {
padding: 35px 55px; background: #0c1827eb;
border: 1px solid #62ffe078; border-top: 5px solid #62ffe0;
box-shadow: 0 25px 90px #0007;
}
.card h2 { font-size: clamp(28px, 5vw, 56px); margin: 12px 0; }
.card .total { font-size: 44px; font-weight: 900; color: #62ffe0; margin: 18px 0; }
.card p { color: #bdcbd6; }
#photo { pointer-events: none; background: #02101a30; }
#photo .card { background: #091521d9; }
#error { display: none; position: fixed; inset: 0; padding: 15vh 12vw; background: #101b2b; }
@media (max-width: 600px) {
#hud { top: 10px; left: 10px; right: 10px; gap: 8px; }
.panel { padding: 10px; }
h1 { font-size: 16px; }
.numbers { gap: 14px; }
.number { font-size: 22px; }
#help { width: calc(100% - 20px); white-space: normal; line-height: 1.7; bottom: 10px; }
.card { padding: 25px; }
}
</style>
</head>
<body>
<div id="hud">
<div class="panel">
<div class="eyebrow">CYBERTRUCK MONSTER RALLY</div>
<h1>VOLT VAULT ARENA</h1>
</div>
<div class="panel numbers">
<div><div class="eyebrow">SCORE</div><div id="score" class="number">0</div></div>
<div><div class="eyebrow">CLOCK</div><div id="clock" class="number">01:30</div></div>
</div>
</div>
<div id="message"></div>
<div id="help"><b>WASD / ARROWS</b> drive · <b>SPACE</b> brake · <b>P</b> photo freeze · <b>R</b> restart · Your truck glows mint</div>
<div id="photo" class="overlay">
<div class="card">
<div class="eyebrow">PHOTO MODE · SIMULATION FROZEN</div>
<h2>VOLT VAULT ARENA</h2>
<div id="photoScore" class="total"></div>
<p>Press P to return to the rally</p>
</div>
</div>
<div id="finish" class="overlay">
<div class="card">
<div class="eyebrow">THE DUST SETTLES</div>
<h2>RALLY COMPLETE</h2>
<div id="finalScore" class="total"></div>
<p>Press R to run it again</p>
</div>
</div>
<div id="error"></div>
<!-- The only external resource in this page. -->
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"
onerror="document.getElementById('error').style.display='block';document.getElementById('error').textContent='The pinned three.js library could not load. Connect to the internet, then reload this file.';"></script>
<script>
(() => {
'use strict';
if (!window.THREE) return;
const ARENA = 'VOLT VAULT ARENA';
const demo = location.hash === '#demo';
// These are the actual simulation values, including on the very first frame.
const state = { score: demo ? 5000 : 0, time: demo ? 20 : 90, photo: false, ended: false };
const $ = id => document.getElementById(id);
const clamp = THREE.MathUtils.clamp;
const TAU = Math.PI * 2;
const keys = new Set();
let seed = 1947;
function random() { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967296; }
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x15283e);
scene.fog = new THREE.Fog(0x15283e, 90, 190);
const camera = new THREE.PerspectiveCamera(58, innerWidth / innerHeight, .1, 240);
let renderer;
try {
renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
} catch (error) {
$('error').style.display = 'block';
$('error').textContent = 'This rally needs WebGL. Enable browser hardware acceleration and reload.';
return;
}
renderer.setPixelRatio(Math.min(devicePixelRatio || 1, 1.6));
renderer.setSize(innerWidth, innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.25;
document.body.insertBefore(renderer.domElement, document.body.firstChild);
scene.add(new THREE.HemisphereLight(0xc0e8ff, 0x5b3f29, 2.2));
const sun = new THREE.DirectionalLight(0xffe2b8, 3.1);
sun.position.set(-25, 65, 22);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
Object.assign(sun.shadow.camera, { left: -58, right: 58, top: 48, bottom: -48, near: 1, far: 130 });
sun.shadow.bias = -.0005;
sun.shadow.normalBias = .035;
scene.add(sun);
const fill = new THREE.DirectionalLight(0x7cbcff, 1.1);
fill.position.set(40, 22, -35);
scene.add(fill);
const mat = (color, extra = {}) => new THREE.MeshStandardMaterial({ color, roughness: .8, ...extra });
const dirt = mat(0x9f7450);
const concrete = mat(0x475669);
const dark = mat(0x111821);
const rubber = mat(0x161b21);
const steel = mat(0x8295a0, { metalness: .7, roughness: .35 });
const mint = mat(0x62ffe0, { emissive: 0x20b997, emissiveIntensity: 1.5 });
const amber = mat(0xffbf57, { emissive: 0xc86415, emissiveIntensity: .6 });
const boxGeo = new THREE.BoxGeometry(1, 1, 1);
const dummy = new THREE.Object3D();
function box(parent, material, x, y, z, sx, sy, sz, shadow = false) {
const mesh = new THREE.Mesh(boxGeo, material);
mesh.position.set(x, y, z); mesh.scale.set(sx, sy, sz);
mesh.castShadow = shadow; mesh.receiveShadow = true;
parent.add(mesh);
return mesh;
}
const hills = [
{ x: -12, z: -8, r: 8, h: 3.6 },
{ x: 13, z: 8, r: 8.5, h: 3.3 },
{ x: 1, z: -16, r: 6, h: 2.8 },
{ x: -15, z: 13, r: 6, h: 2.4 }
];
function ground(x, z) {
let h = 0;
for (const m of hills) {
const d = Math.hypot(x - m.x, z - m.z);
if (d < m.r) h += m.h * (1 + Math.cos(Math.PI * d / m.r)) * .5;
}
return h;
}
// A tessellated elliptical dirt floor; its heights are also used by physics.
const floorVertices = [], floorColors = [], floorIndices = [];
const radial = 32, angular = 160;
for (let r = 0; r <= radial; r++) {
for (let a = 0; a <= angular; a++) {
const t = a / angular * TAU;
const x = Math.cos(t) * 40 * r / radial;
const z = Math.sin(t) * 29 * r / radial;
const y = ground(x, z);
floorVertices.push(x, y, z);
const variation = .82 + random() * .2 + y * .025;
const c = new THREE.Color(0x9f7450).multiplyScalar(variation);
floorColors.push(c.r, c.g, c.b);
if (r < radial && a < angular) {
const i = r * (angular + 1) + a;
floorIndices.push(i, i + angular + 1, i + 1, i + 1, i + angular + 1, i + angular + 2);
}
}
}
const floorGeo = new THREE.BufferGeometry();
floorGeo.setAttribute('position', new THREE.Float32BufferAttribute(floorVertices, 3));
floorGeo.setAttribute('color', new THREE.Float32BufferAttribute(floorColors, 3));
floorGeo.setIndex(floorIndices);
floorGeo.computeVertexNormals();
const floor = new THREE.Mesh(floorGeo, mat(0xffffff, { vertexColors: true, side: THREE.DoubleSide }));
floor.receiveShadow = true;
scene.add(floor);
function ring(rx, rz, width, y, material) {
const v = [], ix = [];
for (let i = 0; i <= 160; i++) {
const a = i / 160 * TAU;
v.push(rx * Math.cos(a), y, rz * Math.sin(a),
(rx + width) * Math.cos(a), y, (rz + width) * Math.sin(a));
if (i < 160) { const n = i * 2; ix.push(n, n + 1, n + 2, n + 1, n + 3, n + 2); }
}
const g = new THREE.BufferGeometry();
g.setAttribute('position', new THREE.Float32BufferAttribute(v, 3)); g.setIndex(ix); g.computeVertexNormals();
const mesh = new THREE.Mesh(g, material);
mesh.material.side = THREE.DoubleSide; mesh.receiveShadow = true; scene.add(mesh);
}
ring(37.8, 26.8, .18, .025, amber);
ring(40, 29, 3, .05, dark);
for (let row = 0; row < 7; row++) {
ring(43 + row * 1.65, 32 + row * 1.65, 1.7, 2.1 + row * 1.2, concrete);
}
// Low collision wall with alternating hazard colors.
for (let i = 0; i < 100; i++) {
const a = i / 100 * TAU;
const wall = box(scene, i % 4 < 2 ? amber : dark,
Math.cos(a) * 40.5, .8, Math.sin(a) * 29.5, 2.35, 1.6, .75, true);
wall.rotation.y = Math.atan2(-40.5 * Math.sin(a), 29.5 * Math.cos(a));
const outer = box(scene, concrete, Math.cos(a) * 55.2, 5.2,
Math.sin(a) * 44.2, 3.2, 10.4, .8);
outer.rotation.y = Math.atan2(-55.2 * Math.sin(a), 44.2 * Math.cos(a));
}
// 1,820 individual spectators: separate colored bodies, heads, and raised arms.
const peopleCount = 7 * 260;
const bodies = new THREE.InstancedMesh(boxGeo, mat(0xffffff), peopleCount);
const heads = new THREE.InstancedMesh(new THREE.SphereGeometry(.19, 7, 5), mat(0xffffff), peopleCount);
const arms = new THREE.InstancedMesh(boxGeo, mat(0xffffff), peopleCount);
const shirts = [0xf07355, 0x63c5e5, 0xe9c454, 0xe1e9ef, 0x8a73d9, 0x45ac9e, 0x243b59];
const skins = [0xc58e66, 0xe6b897, 0x895b42, 0xf0cfad];
let person = 0;
for (let row = 0; row < 7; row++) {
for (let i = 0; i < 260; i++, person++) {
const a = (i + row * .48) / 260 * TAU;
const x = Math.cos(a) * (43.8 + row * 1.65);
const z = Math.sin(a) * (32.8 + row * 1.65);
const y = 2.1 + row * 1.2;
const shirt = new THREE.Color(shirts[Math.floor(random() * shirts.length)]);
dummy.position.set(x, y + .48, z);
dummy.rotation.set(0, -a, (random() - .5) * .14);
dummy.scale.set(.42, .75 + random() * .15, .32); dummy.updateMatrix();
bodies.setMatrixAt(person, dummy.matrix); bodies.setColorAt(person, shirt);
dummy.position.set(x, y + 1.07, z); dummy.rotation.set(0, 0, 0);
dummy.scale.setScalar(1); dummy.updateMatrix();
heads.setMatrixAt(person, dummy.matrix);
heads.setColorAt(person, new THREE.Color(skins[Math.floor(random() * skins.length)]));
dummy.position.set(x + .27, y + .79, z);
dummy.rotation.set(0, a, random() > .45 ? -.65 : .3);
dummy.scale.set(.13, .65, .13); dummy.updateMatrix();
arms.setMatrixAt(person, dummy.matrix); arms.setColorAt(person, shirt);
}
}
scene.add(bodies, heads, arms);
function sign(text, x, y, z, angle, width = 15) {
const canvas = document.createElement('canvas');
canvas.width = 1024; canvas.height = 160;
const c = canvas.getContext('2d');
c.fillStyle = '#102535'; c.fillRect(0, 0, 1024, 160);
c.fillStyle = '#62ffe0'; c.fillRect(0, 0, 1024, 9);
c.font = 'bold 58px Arial'; c.textAlign = 'center'; c.textBaseline = 'middle';
c.fillText(text, 512, 85);
const texture = new THREE.CanvasTexture(canvas);
texture.colorSpace = THREE.SRGBColorSpace;
const mesh = new THREE.Mesh(new THREE.PlaneGeometry(width, width * 160 / 1024),
new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide }));
mesh.position.set(x, y, z); mesh.rotation.y = angle; scene.add(mesh);
}
sign('VOLT VAULT ARENA', 0, 5.1, -33, 0, 21);
sign('CYBERTRUCK CLASH', 0, 5.1, 33, Math.PI, 21);
sign('FULL SEND • NO FUEL', -44, 5, 0, Math.PI / 2);
sign('500 VOLTS OF CHAOS', 44, 5, 0, -Math.PI / 2);
for (let i = 0; i < 8; i++) {
const a = i / 8 * TAU;
const x = Math.cos(a) * 54, z = Math.sin(a) * 43;
box(scene, steel, x, 10, z, .35, 20, .35);
const lights = box(scene, dark, x, 20, z, 5, 1.5, .5);
lights.rotation.y = -a;
for (let n = -1; n <= 1; n++) {
const lamp = box(lights, mat(0xe8f9ff, { emissive: 0xb5dcff, emissiveIntensity: 3 }),
n * .32, 0, .55, .22, .55, .18);
// Coordinates above are local to the scaled light bar.
lamp.castShadow = false;
}
}
// Faceted, wedge-shaped pickup body. Coordinates use local +Z as the nose.
function hull(material) {
const profile = [[-2.6,.25], [2.7,.25], [2.55,1.03], [.35,1.83], [-1.05,1.65], [-2.6,.95]];
const positions = [], indices = [];
for (const x of [-1.16, 1.16]) for (const [z, y] of profile) positions.push(x, y, z);
for (let k = 1; k < 5; k++) indices.push(0, k + 1, k, 6, 6 + k, 7 + k);
for (let k = 0; k < 6; k++) {
const next = (k + 1) % 6;
indices.push(k, next, k + 6, next, next + 6, k + 6);
}
const g = new THREE.BufferGeometry();
g.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
g.setIndex(indices);
const flat = g.toNonIndexed(); flat.computeVertexNormals();
return new THREE.Mesh(flat, material);
}
function quad(parent, points, material) {
const g = new THREE.BufferGeometry();
g.setAttribute('position', new THREE.Float32BufferAttribute(points.flat(), 3));
g.setIndex([0,1,2,0,2,3]); g.computeVertexNormals();
const m = new THREE.Mesh(g, material); parent.add(m); return m;
}
const trucks = [];
const accentColors = [0x62ffe0, 0xff795b, 0xbc89ff, 0xffcf65, 0x6aaaff];
function makeTruck(index) {
const root = new THREE.Group(), chassis = new THREE.Group();
root.add(chassis); scene.add(root);
const bodyMat = mat(index === 0 ? 0xd6e5e8 : 0xaab8c4, { metalness: .66, roughness: .34 });
const body = hull(bodyMat); body.castShadow = true; chassis.add(body);
const accent = mat(accentColors[index], { emissive: accentColors[index], emissiveIntensity: .55 });
const glass = mat(0x0b2638, { metalness: .5, roughness: .15, side: THREE.DoubleSide });
quad(chassis, [[-1.04,1.82,.38],[1.04,1.82,.38],[1.04,1.08,2.4],[-1.04,1.08,2.4]], glass);
for (const side of [-1, 1]) {
quad(chassis, [[side*1.17,.95,-1.8],[side*1.17,1.55,-1.02],
[side*1.17,1.72,.27],[side*1.17,1.03,1.9]], glass);
box(chassis, accent, side*1.18, .48, 0, .035, .14, 4.6);
box(chassis, steel, side*1.2, .77, -.4, .08, .07, .45);
}
box(chassis, dark, 0, .22, 0, 2.15, .35, 4.5, true);
box(chassis, mint, 0, 1.03, 2.56, 2.15, .075, .075);
box(chassis, mat(0xff3232, { emissive: 0xff1010, emissiveIntensity: 1 }),
0, .88, -2.62, 2.15, .09, .05);
box(chassis, dark, 0, .35, 2.72, 2.3, .25, .2);
const wheels = [], frontPivots = [];
const tireGeo = new THREE.CylinderGeometry(.92, .92, .7, 14);
const rimGeo = new THREE.CylinderGeometry(.48, .48, .73, 8);
for (const x of [-1.53, 1.53]) for (const z of [-1.65, 1.65]) {
const pivot = new THREE.Group(); pivot.position.set(x, 0, z); root.add(pivot);
const wheel = new THREE.Group(); pivot.add(wheel);
const tire = new THREE.Mesh(tireGeo, rubber); tire.rotation.z = Math.PI / 2;
tire.castShadow = true; wheel.add(tire);
const rim = new THREE.Mesh(rimGeo, steel); rim.rotation.z = Math.PI / 2; wheel.add(rim);
for (let t = 0; t < 12; t++) {
const a = t / 12 * TAU;
const tread = box(wheel, dark, 0, Math.cos(a)*.91, Math.sin(a)*.91, .77, .13, .22);
tread.rotation.x = a;
}
wheels.push(wheel); if (z > 0) frontPivots.push(pivot);
}
const t = { index, root, chassis, bodyMat, wheels, frontPivots, x:0,z:0,vx:0,vz:0,
angle:0,y:.94,vy:0,lastBase:.94,steer:0,flash:0,hitCooldown:0,waypoint:0,lane:index };
trucks.push(t);
}
for (let i = 0; i < 5; i++) makeTruck(i); // Exactly one player and four AI trucks.
const obstacles = [];
const crateMat = mat(0xb78343), bandMat = mat(0x4f3624);
const barrelMat = mat(0xf17a39);
function addObstacle(type, x, z) {
const group = new THREE.Group(); scene.add(group);
let radius;
if (type === 'crate') {
box(group, crateMat, 0, .75, 0, 1.5, 1.5, 1.5, true);
for (const v of [-.53,.53]) {
box(group, bandMat, v, .76, 0, .12, 1.54, 1.54);
box(group, bandMat, 0, .76, v, 1.54, 1.54, .12);
}
radius = 1;
} else if (type === 'barrel') {
const barrel = new THREE.Mesh(new THREE.CylinderGeometry(.57,.57,1.5,12), barrelMat);
barrel.position.y = .75; barrel.castShadow = true; group.add(barrel);
for (const y of [.25,1.2]) {
const band = new THREE.Mesh(new THREE.CylinderGeometry(.59,.59,.12,12), steel);
band.position.y = y; group.add(band);
}
radius = .65;
} else {
for (let j = 0; j < 3; j++) {
const tire = new THREE.Mesh(new THREE.TorusGeometry(.63,.23,7,14), rubber);
tire.rotation.x = Math.PI / 2; tire.position.y = .25 + j * .43;
tire.castShadow = true; group.add(tire);
}
radius = .9;
}
const o = { type, group, x, z, vx:0, vz:0, radius, active:true, cooldown:0, spin:0 };
obstacles.push(o);
}
// Four hills plus three independently collidable prop types.
for (let i = 0; i < 12; i++) {
const a = i / 12 * TAU;
addObstacle('crate', Math.cos(a)*23, Math.sin(a)*18);
addObstacle('barrel', Math.cos(a+.18)*29, Math.sin(a+.18)*21);
addObstacle('tires', Math.cos(a+.35)*16, Math.sin(a+.35)*12);
}
// Small recycled fragments: no textures, assets, or extra network requests.
const particles = [];
const particleGeo = new THREE.BoxGeometry(.12,.12,.12);
for (let i = 0; i < 180; i++) {
const mesh = new THREE.Mesh(particleGeo, mat(0xffc45c, { emissive: 0xe16f1d, emissiveIntensity: .7 }));
mesh.visible = false; scene.add(mesh);
particles.push({ mesh, life:0, vx:0,vy:0,vz:0 });
}
let particleCursor = 0, messageLife = 0;
function burst(x, y, z, color, count = 16) {
for (let i = 0; i < count; i++) {
const p = particles[particleCursor++ % particles.length];
p.life = .45 + random()*.55;
p.mesh.visible = true; p.mesh.position.set(x,y,z);
p.mesh.material.color.setHex(color);
p.mesh.scale.setScalar(1 + random()*2);
p.vx = (random()-.5)*12; p.vz = (random()-.5)*12; p.vy = 3 + random()*7;
}
}
function award(points, text) {
state.score += points;
$('message').textContent = text + ' +' + points;
messageLife = 1.25;
}
function syncHUD() {
$('score').textContent = state.score.toLocaleString('en-US');
const seconds = Math.max(0, Math.ceil(state.time));
$('clock').textContent = String(Math.floor(seconds/60)).padStart(2,'0') + ':' + String(seconds%60).padStart(2,'0');
$('clock').classList.toggle('urgent', seconds <= 10);
}
const spawn = [[0,14,Math.PI],[-23,-13,.8],[23,-13,-.8],[-24,12,2.2],[24,12,-2.2]];
let accumulator = 0;
function reset() {
state.score = demo ? 5000 : 0; state.time = demo ? 20 : 90;
state.photo = false; state.ended = false; accumulator = 0;
keys.clear(); messageLife = 0;
$('photo').style.display = $('finish').style.display = 'none';
trucks.forEach((t,i) => {
[t.x,t.z,t.angle] = spawn[i]; t.vx=t.vz=t.vy=t.flash=t.hitCooldown=0;
t.y=t.lastBase=ground(t.x,t.z)+.94; t.waypoint=i*2; t.steer=0;
t.bodyMat.emissive.setHex(0); drawTruck(t,0);
});
obstacles.forEach(o => {
o.active=true; o.group.visible=true; o.vx=o.vz=o.spin=o.cooldown=0;
o.x=o.startX === undefined ? (o.startX=o.x) : o.startX;
o.z=o.startZ === undefined ? (o.startZ=o.z) : o.startZ;
o.group.rotation.set(0,0,0); drawObstacle(o);
});
particles.forEach(p => { p.life=0; p.mesh.visible=false; });
updateCamera(1, true); syncHUD();
}
function angleDifference(a,b) { return Math.atan2(Math.sin(a-b), Math.cos(a-b)); }
function aiInput(t) {
// Different routes, radii, phases, and short staggered pursuit windows.
const phase = t.waypoint * TAU / 12 + t.index * .31;
const rx = 20 + t.index * 2, rz = 13 + t.index * 1.4;
let tx = Math.cos(phase)*rx, tz = Math.sin(phase)*rz;
if (Math.hypot(tx-t.x,tz-t.z) < 6) t.waypoint++;
const elapsed = (demo ? 20 : 90) - state.time;
const hunting = (elapsed + t.index*4.7) % 18 < 3.5;
if (hunting) { tx=trucks[0].x; tz=trucks[0].z; }
let dx=tx-t.x, dz=tz-t.z;
const length = Math.hypot(dx,dz) || 1;
dx/=length; dz/=length;
// Local separation excludes the player during a pursuit, so AI still ram.
for (const other of trucks) {
if (other === t || (hunting && other.index === 0)) continue;
const ax=t.x-other.x, az=t.z-other.z, d=Math.hypot(ax,az);
if (d > .01 && d < 9) {
const force=(9-d)/9*1.9;
dx+=ax/d*force; dz+=az/d*force;
}
}
const desired = Math.atan2(dx,dz);
const error = angleDifference(desired,t.angle);
const speed = t.vx*Math.sin(t.angle)+t.vz*Math.cos(t.angle);
const targetSpeed = (hunting ? 22 : 15+t.index) * (1-.5*Math.min(1,Math.abs(error)));
return { steer:clamp(error*1.8,-1,1), throttle:speed<targetSpeed ? 1 : -.25, brake:false };
}
function playerInput() {
return {
throttle: (keys.has('KeyW') || keys.has('ArrowUp') ? 1 : 0)
- (keys.has('KeyS') || keys.has('ArrowDown') ? 1 : 0),
steer: (keys.has('KeyA') || keys.has('ArrowLeft') ? 1 : 0)
- (keys.has('KeyD') || keys.has('ArrowRight') ? 1 : 0),
brake: keys.has('Space')
};
}
function moveTruck(t,dt) {
const input = t.index ? aiInput(t) : playerInput();
const sx=Math.sin(t.angle), sz=Math.cos(t.angle);
let forward=t.vx*sx+t.vz*sz, lateral=t.vx*sz-t.vz*sx;
forward += input.throttle*20*dt;
forward *= Math.exp(-(input.brake ? 6 : .48)*dt);
forward=clamp(forward,-11,27);
lateral*=Math.exp(-(input.brake ? 2 : 7)*dt);
t.vx=sx*forward+sz*lateral; t.vz=sz*forward-sx*lateral;
t.angle += input.steer*1.8*clamp(forward/12,-1,1)*dt;
t.steer=input.steer;
t.x+=t.vx*dt; t.z+=t.vz*dt;
// Elliptical wall: project outside centers inward, reflect outward velocity.
const boundary=Math.hypot(t.x/37.4,t.z/26.4);
if (boundary > 1) {
const nx0=t.x/(37.4*37.4), nz0=t.z/(26.4*26.4), n=Math.hypot(nx0,nz0);
const nx=nx0/n, nz=nz0/n, outward=t.vx*nx+t.vz*nz;
t.x/=boundary; t.z/=boundary;
if (outward>0) {
t.vx-=nx*outward*1.5; t.vz-=nz*outward*1.5;
if (outward>5 && t.hitCooldown<=0) {
burst(t.x,1.3,t.z,0xffc45c); t.flash=.25; t.hitCooldown=.3;
}
}
}
t.hitCooldown=Math.max(0,t.hitCooldown-dt); t.flash=Math.max(0,t.flash-dt);
}
const pairCooldown = new Map();
function truckContacts() {
for (let i=0;i<5;i++) for (let j=i+1;j<5;j++) {
const a=trucks[i], b=trucks[j];
let dx=b.x-a.x, dz=b.z-a.z, d=Math.hypot(dx,dz);
if (d>=4.65 || Math.abs(a.y-b.y)>2.5) continue;
if (d<.001) { dx=1; dz=0; d=1; }
const nx=dx/d, nz=dz/d, overlap=4.65-d;
a.x-=nx*overlap*.5; a.z-=nz*overlap*.5;
b.x+=nx*overlap*.5; b.z+=nz*overlap*.5;
const closing=(a.vx-b.vx)*nx+(a.vz-b.vz)*nz;
if (closing>0) {
const impulse=closing*.8;
a.vx-=nx*impulse; a.vz-=nz*impulse;
b.vx+=nx*impulse; b.vz+=nz*impulse;
const key=i*5+j;
if (closing>2.5 && !(pairCooldown.get(key)>0)) {
pairCooldown.set(key,.8);
a.flash=b.flash=.35;
a.vy=Math.max(a.vy,closing*.14); b.vy=Math.max(b.vy,closing*.14);
burst((a.x+b.x)/2,Math.max(a.y,b.y)+.7,(a.z+b.z)/2,0xffd36e,24);
if (i===0) award(Math.round(100+closing*35),'RIVAL RAM');
}
}
}
}
function obstacleContacts(t) {
if (t.y>ground(t.x,t.z)+3) return;
for (const o of obstacles) {
if (!o.active) continue;
const dx=t.x-o.x, dz=t.z-o.z, d=Math.hypot(dx,dz);
const radius=2.05+o.radius;
if (d>=radius || d<.001) continue;
const nx=dx/d,nz=dz/d, overlap=radius-d;
t.x+=nx*overlap*.28; t.z+=nz*overlap*.28;
o.x-=nx*overlap*.72; o.z-=nz*overlap*.72;
const closing=-((t.vx-o.vx)*nx+(t.vz-o.vz)*nz);
if (closing>0) {
t.vx+=nx*closing*.22; t.vz+=nz*closing*.22;
o.vx-=nx*closing*.9; o.vz-=nz*closing*.9; o.spin+=closing*.13;
if (closing>3 && o.cooldown<=0) {
o.cooldown=.7;
burst(o.x,ground(o.x,o.z)+.9,o.z,o.type==='crate'?0xc79657:0xffad53,12);
if (t.index===0) award(o.type==='tires'?60:100,o.type==='tires'?'TIRE TOSS':'DEBRIS SMASH');
if (closing>7 && o.type!=='tires') {
o.active=false; o.group.visible=false;
}
}
}
}
}
function drawObstacle(o) {
o.group.position.set(o.x,ground(o.x,o.z),o.z);
o.group.rotation.y=o.spin;
o.group.rotation.z=Math.sin(o.spin)*.13;
}
function drawTruck(t,dt) {
const base=ground(t.x,t.z)+.94;
if (dt>0) {
t.vy-=24*dt; t.y+=t.vy*dt;
if (t.y<=base) {
t.y=base; t.vy=Math.max(0,Math.min(9,(base-t.lastBase)/dt));
}
t.lastBase=base;
}
t.root.position.set(t.x,t.y,t.z); t.root.rotation.y=t.angle;
const sx=Math.sin(t.angle),sz=Math.cos(t.angle);
const slope=(ground(t.x+sx*1.8,t.z+sz*1.8)-ground(t.x-sx*1.8,t.z-sz*1.8))/3.6;
t.chassis.rotation.x=THREE.MathUtils.lerp(t.chassis.rotation.x,-Math.atan(slope),dt ? .14 : 1);
t.chassis.rotation.z=THREE.MathUtils.lerp(t.chassis.rotation.z,-t.steer*Math.hypot(t.vx,t.vz)*.004,dt ? .13 : 1);
t.bodyMat.emissive.setHex(t.flash>0 ? 0xb95618 : 0x000000);
t.bodyMat.emissiveIntensity=t.flash>0 ? t.flash*2 : 0;
const speed=t.vx*sx+t.vz*sz;
t.wheels.forEach(w => w.rotation.x+=speed*dt/.92);
t.frontPivots.forEach(w => w.rotation.y=t.steer*.32);
}
function step(dt) {
state.time=Math.max(0,state.time-dt);
for (const [k,v] of pairCooldown) {
if (v<=dt) pairCooldown.delete(k); else pairCooldown.set(k,v-dt);
}
trucks.forEach(t => moveTruck(t,dt));
truckContacts();
trucks.forEach(obstacleContacts);
for (const o of obstacles) {
if (!o.active) continue;
o.cooldown=Math.max(0,o.cooldown-dt);
o.x+=o.vx*dt; o.z+=o.vz*dt;
o.vx*=Math.exp(-3*dt); o.vz*=Math.exp(-3*dt);
const edge=Math.hypot(o.x/38,o.z/27);
if (edge>1) { o.x/=edge; o.z/=edge; o.vx*=-.3; o.vz*=-.3; }
drawObstacle(o);
}
trucks.forEach(t => drawTruck(t,dt));
for (const p of particles) {
if (p.life<=0) continue;
p.life-=dt;
if (p.life<=0) { p.mesh.visible=false; continue; }
p.vy-=18*dt;
p.mesh.position.x+=p.vx*dt; p.mesh.position.y+=p.vy*dt; p.mesh.position.z+=p.vz*dt;
p.mesh.rotation.x+=dt*8; p.mesh.rotation.z+=dt*5;
if (p.mesh.position.y<ground(p.mesh.position.x,p.mesh.position.z)+.1) {
p.mesh.position.y=ground(p.mesh.position.x,p.mesh.position.z)+.1;
p.vy=Math.abs(p.vy)*.3;
}
}
messageLife=Math.max(0,messageLife-dt);
if (state.time<=0) {
state.ended=true;
$('finalScore').textContent=state.score.toLocaleString('en-US')+' POINTS';
$('finish').style.display='flex';
}
}
const cameraTarget=new THREE.Vector3();
const desiredCamera=new THREE.Vector3(), desiredTarget=new THREE.Vector3();
function updateCamera(dt,snap=false) {
const p=trucks[0], sx=Math.sin(p.angle),sz=Math.cos(p.angle);
desiredCamera.set(p.x-sx*18,p.y+15,p.z-sz*18);
desiredTarget.set(p.x+sx*5,p.y+.8,p.z+sz*5);
const blend=snap ? 1 : 1-Math.exp(-dt*4);
camera.position.lerp(desiredCamera,blend);
cameraTarget.lerp(desiredTarget,blend);
camera.lookAt(cameraTarget);
}
function togglePhoto() {
state.photo=!state.photo;
accumulator=0; keys.clear();
$('photoScore').textContent=state.score.toLocaleString('en-US')+' POINTS';
$('photo').style.display=state.photo?'flex':'none';
$('finish').style.display=state.ended&&!state.photo?'flex':'none';
}
const captured = new Set(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Space','KeyW','KeyA','KeyS','KeyD','KeyP','KeyR']);
window.addEventListener('keydown',e => {
if (captured.has(e.code)) e.preventDefault();
if (e.code==='KeyP') { if (!e.repeat) togglePhoto(); return; }
if (e.code==='KeyR') {
if (!e.repeat && !state.photo) { pairCooldown.clear(); reset(); }
return;
}
if (!state.photo && !state.ended) keys.add(e.code);
});
window.addEventListener('keyup',e => {
if (captured.has(e.code)) e.preventDefault();
keys.delete(e.code);
});
window.addEventListener('blur',() => keys.clear());
window.addEventListener('resize',() => {
camera.aspect=innerWidth/innerHeight; camera.updateProjectionMatrix();
renderer.setSize(innerWidth,innerHeight);
});
document.addEventListener('visibilitychange',() => {
keys.clear(); accumulator=0; last=performance.now();
});
reset();
let last=performance.now();
function frame(now) {
requestAnimationFrame(frame);
const dt=Math.min(.08,Math.max(0,(now-last)/1000));
last=now;
if (!state.photo && !state.ended && !document.hidden) {
accumulator+=dt;
while (accumulator>=1/60 && !state.ended) {
step(1/60); accumulator-=1/60;
}
updateCamera(dt);
} else {
accumulator=0;
}
// Photo mode renders the same frozen scene; nothing simulated or animated moves.
syncHUD();
$('message').style.opacity=messageLife>0&&!state.photo?'1':'0';
renderer.render(scene,camera);
}
requestAnimationFrame(frame);
})();
</script>
</body>
</html>
The notes
- Five trucks: One player and exactly four AI rivals are created. Rivals use different elliptical routes, lane radii, waypoint phases, staggered pursuit windows, and local separation forces instead of sharing one chase target continuously.
- Demo mode:
const state = { score: demo ? 5000 : 0, time: demo ? 20 : 90, photo: false, ended: false };initializes the real state. Scoring, countdown, restart, photo capture, and completion all read those values—not a replacement overlay. - Photo mode:
Pstops the fixed-step simulation, countdown, particle updates, and camera tracking, and clears the time accumulator. Rendering continues with the frozen scene; the card holds the arena name and captured score untilPis pressed again. - Collisions: Trucks use circular horizontal bounds with a vertical-separation check. Contact resolves penetration, computes relative closing velocity along the contact normal, and applies equal-mass impulses; sufficiently hard player impacts award points with per-pair cooldowns. Props use lighter-body displacement and velocity transfer, with hard impacts breaking crates and barrels. The elliptical wall projects trucks inward and reflects outward velocity; terrain height drives suspension contact, gravity, and jumps.
Attachments
openai/gpt-6.1-sol-pro — page