Run Detail
completedgpt-6-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
Batched — not timed
Total Tokens
48,852
Input Tokens
25,904
Output Tokens
22,948
Reasoning Tokens
5,454
Reasoning Effort
default
Est. Cost
$0.1406
Started
9/22/2026, 10:06:01 PM
OR Provider
OpenAI
Finish Reason
stop
Generation ID
gen-batch-1790114761-a6edc2d5a3273fcda0c9
Turns (1)
Turn #1
25,904 in22,948 out5,454 reasoning48,852 total
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
Thunderbowl 9 is a floodlit, crowd-packed Cybertruck monster-truck rally where five angular giants charge over dirt hills and wreckage.
The game
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Thunderbowl 9 — Monster-Truck Rally</title>
<style>
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #10151d; }
body { font-family: Arial, Helvetica, sans-serif; color: white; }
canvas { display: block; }
#hud {
position: fixed; z-index: 3; top: 18px; left: 20px;
display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap;
pointer-events: none;
}
.panel {
padding: 10px 15px; background: rgba(8, 16, 24, .82);
border: 1px solid rgba(116, 226, 255, .45);
border-left: 4px solid #73eaff; box-shadow: 0 8px 30px #0008;
min-width: 110px;
}
.label { color: #9fb7bf; font-size: 10px; letter-spacing: .2em; font-weight: bold; }
.value { margin-top: 3px; font-size: 22px; font-weight: 900; letter-spacing: .04em; }
#name .value { color: #a7f2ff; }
#help {
position: fixed; z-index: 3; left: 20px; bottom: 18px;
padding: 10px 14px; background: rgba(8, 16, 24, .78);
border: 1px solid #ffffff35; font-size: 12px; letter-spacing: .08em;
pointer-events: none;
}
#help b { color: #9ceeff; }
#photo, #finish {
position: fixed; z-index: 5; inset: 0; display: none;
align-items: center; justify-content: center; text-align: center;
background: rgba(6, 12, 20, .68); backdrop-filter: blur(7px);
}
#photo.show, #finish.show { display: flex; }
.card {
width: min(550px, calc(100vw - 36px)); padding: 35px 25px;
border: 1px solid #a9f3ff; background: linear-gradient(145deg, #182832ee, #09121bee);
box-shadow: 0 0 75px #52cfff55, 0 25px 65px #000a;
}
.eyebrow { color: #85eaff; font-size: 12px; font-weight: bold; letter-spacing: .35em; }
.card h1 { font-size: clamp(38px, 8vw, 67px); margin: 12px 0; line-height: .95; }
.card .big { font-size: 35px; font-weight: 900; color: #ffdf80; }
.card .hint { margin-top: 21px; color: #b6c5cb; font-size: 12px; letter-spacing: .13em; }
#error {
display: none; position: fixed; z-index: 8; inset: 0; padding: 12vw;
background: #10151d; color: white; font-size: 18px;
}
@media (max-width: 600px) {
#hud { top: 8px; left: 8px; gap: 5px; }
.panel { padding: 7px 9px; min-width: 82px; }
.value { font-size: 15px; }
#help { left: 8px; bottom: 8px; font-size: 10px; }
}
</style>
</head>
<body>
<div id="hud">
<div class="panel" id="name"><div class="label">THE ARENA</div><div class="value">THUNDERBOWL 9</div></div>
<div class="panel"><div class="label">SCORE</div><div class="value" id="score">0</div></div>
<div class="panel"><div class="label">CLOCK</div><div class="value" id="clock">1:30</div></div>
</div>
<div id="help"><b>DRIVE</b> WASD / ARROWS · <b>PHOTO MODE</b> P</div>
<div id="photo"><div class="card">
<div class="eyebrow">PHOTO MODE · ACTION FROZEN</div>
<h1>THUNDERBOWL 9</h1>
<div class="label">CURRENT SCORE</div><div class="big" id="photoScore">0</div>
<div class="hint">PRESS P TO RETURN TO THE RALLY</div>
</div></div>
<div id="finish"><div class="card">
<div class="eyebrow">FINAL HORN</div><h1>THUNDERBOWL 9</h1>
<div class="label">FINAL SCORE</div><div class="big" id="finalScore">0</div>
<div class="hint">PRESS R TO RALLY AGAIN</div>
</div></div>
<div id="error">The 3D engine could not load. This page needs access to its single, pinned three.js CDN request.</div>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.1/build/three.module.js';
const ARENA = 'THUNDERBOWL 9';
const demo = location.hash === '#demo';
const state = {
score: demo ? 5000 : 0,
time: demo ? 20 : 90,
elapsed: 0,
paused: false,
finished: false
};
const scoreEl = document.getElementById('score');
const clockEl = document.getElementById('clock');
const photoEl = document.getElementById('photo');
const finishEl = document.getElementById('finish');
const keys = new Set();
const clamp = THREE.MathUtils.clamp;
const TAU = Math.PI * 2;
let seed = 71393;
function rand() { seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0; return seed / 4294967296; }
function mat(color, extra = {}) { return new THREE.MeshStandardMaterial({ color, roughness: .83, ...extra }); }
function mesh(geometry, material, parent, x = 0, y = 0, z = 0) {
const m = new THREE.Mesh(geometry, material);
m.position.set(x, y, z);
parent.add(m);
return m;
}
function box(parent, w, h, d, material, x, y, z) {
return mesh(new THREE.BoxGeometry(w, h, d), material, parent, x, y, z);
}
function updateHUD() {
scoreEl.textContent = state.score.toLocaleString();
const t = Math.ceil(Math.max(0, state.time));
clockEl.textContent = Math.floor(t / 60) + ':' + String(t % 60).padStart(2, '0');
}
updateHUD();
let renderer;
try {
renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
renderer.setPixelRatio(Math.min(devicePixelRatio || 1, 1.7));
renderer.setSize(innerWidth, innerHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.42;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
} catch (e) {
document.getElementById('error').style.display = 'block';
throw e;
}
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111c2b);
scene.fog = new THREE.FogExp2(0x111c2b, .0041);
const camera = new THREE.PerspectiveCamera(57, innerWidth / innerHeight, .1, 300);
const hemi = new THREE.HemisphereLight(0xbadfff, 0x55412b, 2.15);
scene.add(hemi);
const sun = new THREE.DirectionalLight(0xffedca, 2.65);
sun.position.set(-35, 75, 30);
sun.castShadow = true;
sun.shadow.mapSize.set(1024, 1024);
sun.shadow.camera.left = -82;
sun.shadow.camera.right = 82;
sun.shadow.camera.top = 82;
sun.shadow.camera.bottom = -82;
sun.shadow.camera.near = 1;
sun.shadow.camera.far = 165;
sun.shadow.bias = -.0007;
scene.add(sun);
const dark = mat(0x18232a);
const asphalt = mat(0x263038);
const concrete = mat(0x797e79);
const concreteTop = mat(0xb1aba0);
const sand = mat(0x75533c);
const tireMat = mat(0x101214);
const metal = mat(0x9ca7aa, { metalness: .75, roughness: .34 });
const lampMat = new THREE.MeshBasicMaterial({ color: 0xb9f6ff });
const redLamp = new THREE.MeshBasicMaterial({ color: 0xff3c37 });
const crowdShirts = [0xe9b76c, 0x37a9cf, 0xe75852, 0xe4e1ca, 0x79b979, 0x645eab, 0xe59b39];
const ground = box(scene, 250, 1, 250, dark, 0, -.8, 0);
ground.receiveShadow = true;
function ovalBand(innerX, innerZ, outerX, outerZ, y0, y1, material, segments = 128) {
const v = [], ix = [];
for (let i = 0; i <= segments; i++) {
const a = i / segments * TAU;
v.push(Math.cos(a) * innerX, y0, Math.sin(a) * innerZ);
v.push(Math.cos(a) * outerX, y1, Math.sin(a) * outerZ);
if (i < segments) {
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 m = mesh(g, material, scene);
m.receiveShadow = true;
return m;
}
// All arena textures are made in memory; nothing is downloaded.
const dirtCanvas = document.createElement('canvas');
dirtCanvas.width = dirtCanvas.height = 512;
const ctx = dirtCanvas.getContext('2d');
ctx.fillStyle = '#8e6545';
ctx.fillRect(0, 0, 512, 512);
for (let i = 0; i < 10000; i++) {
const n = Math.floor(rand() * 70);
ctx.fillStyle = `rgba(${55 + n},${38 + n},${27 + Math.floor(n * .7)},${.08 + rand() * .18})`;
const x = rand() * 512, y = rand() * 512, s = .3 + rand() * 2.2;
ctx.fillRect(x, y, s * 2, s);
}
const dirtTexture = new THREE.CanvasTexture(dirtCanvas);
dirtTexture.wrapS = dirtTexture.wrapT = THREE.RepeatWrapping;
dirtTexture.repeat.set(3, 2);
dirtTexture.colorSpace = THREE.SRGBColorSpace;
const floor = mesh(
new THREE.CircleGeometry(1, 128),
mat(0xffffff, { map: dirtTexture }),
scene, 0, -.22, 0
);
floor.rotation.x = -Math.PI / 2;
floor.scale.set(51, 1, 36);
floor.receiveShadow = true;
ovalBand(50.7, 35.7, 52, 37, -.16, .25, concrete);
ovalBand(52, 37, 53, 38, .25, 1.5, dark);
for (let row = 0; row < 10; row++) {
const x = 53 + row * 1.9, z = 38 + row * 1.9;
const y = 1.5 + row * .72;
ovalBand(x, z, x + 1.9, z + 1.9, y, y + .72,
mat(row % 2 ? 0x354450 : 0x43505a, { side: THREE.DoubleSide }));
if (row % 3 === 0)
ovalBand(x + 1.7, z + 1.7, x + 1.86, z + 1.86, y + .66, y + .69,
mat(0x8a9a9d, { side: THREE.DoubleSide }));
}
ovalBand(72, 57, 74, 59, 9.1, 10.1, dark);
ovalBand(74, 59, 75, 60, 10.1, 12.5, concrete);
const crowdCountPerRow = 158;
const crowdRows = 9;
const count = crowdCountPerRow * crowdRows;
const torsoGeo = new THREE.CylinderGeometry(.29, .37, .82, 5);
const headGeo = new THREE.SphereGeometry(.24, 5, 4);
const crowdBody = new THREE.InstancedMesh(torsoGeo, mat(0xffffff, { side: THREE.DoubleSide }), count);
const crowdHead = new THREE.InstancedMesh(headGeo, mat(0xe8b68b), count);
const dummy = new THREE.Object3D();
const shirtColors = crowdShirts.map(c => new THREE.Color(c));
let person = 0;
for (let row = 0; row < crowdRows; row++) {
for (let j = 0; j < crowdCountPerRow; j++) {
const a = (j + (row % 2) * .5 + (rand() - .5) * .3) / crowdCountPerRow * TAU;
const x = Math.cos(a) * (54.3 + row * 1.9);
const z = Math.sin(a) * (39.3 + row * 1.9);
const y = 2.5 + row * .72;
dummy.position.set(x, y + .43, z);
dummy.rotation.set(0, -a, 0);
dummy.scale.setScalar(.8 + rand() * .32);
dummy.updateMatrix();
crowdBody.setMatrixAt(person, dummy.matrix);
crowdBody.setColorAt(person, shirtColors[Math.floor(rand() * shirtColors.length)]);
dummy.position.y += .58;
dummy.scale.setScalar(.86 + rand() * .24);
dummy.updateMatrix();
crowdHead.setMatrixAt(person, dummy.matrix);
crowdHead.setColorAt(person, new THREE.Color().setHSL(.055 + rand() * .065, .28 + rand() * .2, .55 + rand() * .23));
person++;
}
}
crowdBody.instanceMatrix.needsUpdate = true;
crowdHead.instanceMatrix.needsUpdate = true;
if (crowdBody.instanceColor) crowdBody.instanceColor.needsUpdate = true;
if (crowdHead.instanceColor) crowdHead.instanceColor.needsUpdate = true;
scene.add(crowdBody, crowdHead);
// Painted arena advertisements, also generated locally.
function sign(text, sub, x, y, z, w = 24) {
const c = document.createElement('canvas');
c.width = 1024; c.height = 256;
const q = c.getContext('2d');
q.fillStyle = '#081a24'; q.fillRect(0, 0, 1024, 256);
q.strokeStyle = '#5ce7ff'; q.lineWidth = 14; q.strokeRect(12, 12, 1000, 232);
q.fillStyle = '#c4f7ff'; q.textAlign = 'center';
q.font = 'bold 100px Arial'; q.fillText(text, 512, 130);
q.fillStyle = '#ffcf75'; q.font = 'bold 37px Arial'; q.fillText(sub, 512, 198);
const texture = new THREE.CanvasTexture(c);
texture.colorSpace = THREE.SRGBColorSpace;
const board = mesh(new THREE.PlaneGeometry(w, w / 4), new THREE.MeshBasicMaterial({
map: texture, side: THREE.DoubleSide
}), scene, x, y, z);
return board;
}
sign(ARENA, 'MONSTER TRUCK RALLY', 0, 15.4, -57, 27);
sign('VOLT', 'FULL SEND · ALL NIGHT', -36, 12.4, -49, 17);
sign('VOLT', 'FULL SEND · ALL NIGHT', 36, 12.4, -49, 17);
for (const x of [-62, 62]) for (const z of [-46, 46]) {
box(scene, .55, 22, .55, metal, x, 10.5, z);
const lamp = box(scene, 5, .45, 2, lampMat, x, 21.5, z);
lamp.rotation.y = Math.atan2(-x, -z);
}
// Small, scattered debris gives the floor texture without extra assets.
const stoneGeo = new THREE.IcosahedronGeometry(1, 0);
const debris = new THREE.InstancedMesh(stoneGeo, mat(0x6b6660), 230);
for (let i = 0; i < 230; i++) {
const x = (rand() - .5) * 91, z = (rand() - .5) * 62;
dummy.position.set(x, -.02, z);
dummy.rotation.set(rand() * 2, rand() * 6, rand() * 2);
dummy.scale.set(.13 + rand() * .38, .08 + rand() * .22, .13 + rand() * .38);
dummy.updateMatrix();
debris.setMatrixAt(i, dummy.matrix);
}
debris.instanceMatrix.needsUpdate = true;
scene.add(debris);
const obstacles = [];
function mound(x, z, sx, sy, sz) {
const m = mesh(new THREE.SphereGeometry(1, 14, 8), sand, scene, x, -.35, z);
m.scale.set(sx, sy, sz);
m.receiveShadow = true; m.castShadow = true;
obstacles.push({ kind: 'hill', x, z, rx: sx, rz: sz, height: sy });
}
mound(-17, -9, 8, 2.8, 5.8);
mound(15, 8, 7.5, 2.4, 5.4);
mound(2, -23, 9, 3.2, 5.5);
function solid(x, z, radius, kind) { obstacles.push({ kind, x, z, radius }); }
function tirePile(x, z) {
for (let layer = 0; layer < 3; layer++) {
const t = mesh(new THREE.TorusGeometry(1.7 - layer * .1, .46, 7, 12),
tireMat, scene, x, .58 + layer * .71, z);
t.rotation.x = Math.PI / 2;
t.castShadow = true;
mesh(new THREE.CylinderGeometry(.87, .87, .12, 10),
metal, scene, x, .58 + layer * .71, z);
}
solid(x, z, 2.55, 'tires');
}
tirePile(-30, 5);
tirePile(31, -13);
tirePile(8, 24);
function barrier(x, z, rotation) {
const g = new THREE.Group();
g.position.set(x, 0, z); g.rotation.y = rotation; scene.add(g);
const b = box(g, 9, 2, 2.1, concrete, 0, .95, 0);
b.castShadow = true; b.receiveShadow = true;
box(g, 9.2, .18, 2.25, concreteTop, 0, 2, 0);
for (const dx of [-2.7, 0, 2.7])
box(g, .9, .23, 2.24, mat(0xffa33a), dx, 1.43, 0);
solid(x, z, 5.2, 'barrier');
}
barrier(-7, 14, -.27);
barrier(29, 1, .68);
function wreck(x, z, color, a) {
const g = new THREE.Group();
g.position.set(x, 0, z); g.rotation.y = a; scene.add(g);
const paint = mat(color, { metalness: .38 });
const body = box(g, 4.3, 1.05, 7, paint, 0, .75, 0);
body.castShadow = true;
box(g, 3.7, .72, 3.1, mat(0x232e32), 0, 1.52, -.4);
for (const dx of [-1.9, 1.9]) for (const dz of [-2.1, 2.1]) {
const w = mesh(new THREE.CylinderGeometry(.72, .72, .48, 9),
tireMat, g, dx, .58, dz);
w.rotation.z = Math.PI / 2;
}
solid(x, z, 4, 'wreck');
}
wreck(-31, -18, 0xc56434, .45);
wreck(32, 20, 0x647a8b, -.7);
// A prism whose profile is specified as [forward/back z, height y] points.
function profilePrism(points, width, material, parent) {
const vertices = [];
const add = (a, b, c) => vertices.push(...a, ...b, ...c);
const p = (i, side) => [side * width / 2, points[i][1], points[i][0]];
for (let i = 1; i < points.length - 1; i++) {
add(p(0, -1), p(i, -1), p(i + 1, -1));
add(p(0, 1), p(i + 1, 1), p(i, 1));
}
for (let i = 0; i < points.length; i++) {
const j = (i + 1) % points.length;
add(p(i, -1), p(j, -1), p(j, 1));
add(p(i, -1), p(j, 1), p(i, 1));
}
const g = new THREE.BufferGeometry();
g.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
g.computeVertexNormals();
const m = mesh(g, material, parent);
m.castShadow = true; m.receiveShadow = true;
return m;
}
const shellProfile = [
[-4.55, 1.8], [-4.2, 2.55], [-1.65, 3.03], [-.57, 4.22],
[1.18, 4.2], [4.05, 2.69], [4.55, 2.3], [4.48, 1.72]
];
const windowProfile = [
[-1.42, 3.08], [-.43, 3.98], [1.08, 3.97], [3.19, 2.91]
];
const wheelRubber = mat(0x111316, { roughness: 1 });
const treadRubber = mat(0x222426, { roughness: 1 });
const glass = mat(0x152e39, { metalness: .4, roughness: .23, side: THREE.DoubleSide });
const wheelGeo = new THREE.CylinderGeometry(1.52, 1.52, .94, 14);
const hubGeo = new THREE.CylinderGeometry(.68, .68, .98, 10);
const treadGeo = new THREE.BoxGeometry(1.01, .3, .66);
const truckData = [];
function makeTruck(color, x, z, angle, isPlayer, phase) {
const root = new THREE.Group();
root.position.set(x, 0, z);
root.rotation.y = angle;
scene.add(root);
const paint = mat(color, { metalness: .7, roughness: .33, side: THREE.DoubleSide });
const accent = mat(isPlayer ? 0x8fefff : color, { metalness: .45, roughness: .35 });
const chassis = box(root, 3.7, .64, 8.7, dark, 0, 1.57, 0);
chassis.castShadow = true;
profilePrism(shellProfile, 4.36, paint, root);
// The continuous triangular roof and dark side glazing give each truck its Cybertruck profile.
for (const side of [-1, 1]) {
const pane = profilePrism(windowProfile, .035, glass, root);
pane.position.x = side * 2.202;
box(root, .055, .13, 7.8, accent, side * 2.23, 2.48, .05);
for (const wz of [-2.87, 2.83]) {
const wheel = new THREE.Group();
wheel.position.set(side * 2.42, 1.48, wz);
root.add(wheel);
const tire = mesh(wheelGeo, wheelRubber, wheel);
tire.rotation.z = Math.PI / 2;
tire.castShadow = true;
const hub = mesh(hubGeo, metal, wheel, side * .04, 0, 0);
hub.rotation.z = Math.PI / 2;
for (let n = 0; n < 11; n++) {
const a = n / 11 * TAU;
const tread = mesh(treadGeo, treadRubber, wheel,
0, Math.cos(a) * 1.52, Math.sin(a) * 1.52);
tread.rotation.x = -a;
}
}
}
box(root, 3.84, .15, .13, lampMat, 0, 2.64, -4.18);
box(root, 3.84, .15, .13, redLamp, 0, 2.49, 4.1);
box(root, 4.8, .27, .42, dark, 0, 1.49, -4.38);
box(root, 4.8, .27, .42, dark, 0, 1.49, 4.4);
const flash = box(root, 4.4, .26, .23,
new THREE.MeshBasicMaterial({ color: 0xffe395, transparent: true, opacity: 0 }),
0, 3.42, -.3);
return { root, x, z, vx: 0, vz: 0, angle, isPlayer, phase,
hit: 0, cooldown: 0, flash, radius: 3.35 };
}
// Exactly one player and four independently steered AI rivals.
truckData.push(makeTruck(0xb7c5ca, 0, 21, 0, true, 0));
truckData.push(makeTruck(0xff703c, -22, -14, 1.1, false, 0));
truckData.push(makeTruck(0x46bfeb, 22, -14, -1.1, false, Math.PI));
truckData.push(makeTruck(0xe9cb5b, -32, 8, 2.3, false, Math.PI * .5));
truckData.push(makeTruck(0x8fd56b, 32, 8, -2.3, false, Math.PI * 1.5));
const sparks = [];
const sparkMat = new THREE.MeshBasicMaterial({ color: 0xffce65 });
const sparkGeo = new THREE.BoxGeometry(.24, .24, .24);
function burst(x, z, amount = 14) {
for (let i = 0; i < amount; i++) {
const m = mesh(sparkGeo, sparkMat, scene, x, 2.1, z);
sparks.push({ m, vx: (rand() - .5) * 19, vy: 4 + rand() * 8,
vz: (rand() - .5) * 19, life: .35 + rand() * .35 });
}
}
function damage(t, x, z) {
t.hit = 1.25;
t.cooldown = .68;
burst(x, z, 11);
}
function angleDifference(a) { return Math.atan2(Math.sin(a), Math.cos(a)); }
function steerToward(t, dx, dz, dt) {
const target = Math.atan2(-dx, -dz);
t.angle += clamp(angleDifference(target - t.angle), -2.25 * dt, 2.25 * dt);
}
function drive(t, throttle, dt) {
const forwardX = -Math.sin(t.angle), forwardZ = -Math.cos(t.angle);
const power = t.hit > .6 ? 9 : 18;
t.vx += forwardX * throttle * power * dt;
t.vz += forwardZ * throttle * power * dt;
const drag = Math.exp(-(throttle ? .65 : 1.55) * dt);
t.vx *= drag; t.vz *= drag;
const speed = Math.hypot(t.vx, t.vz), max = t.isPlayer ? 22 : 15.8;
if (speed > max) { t.vx *= max / speed; t.vz *= max / speed; }
t.x += t.vx * dt;
t.z += t.vz * dt;
}
function updateTruck(t, dt) {
if (t.isPlayer) {
const up = keys.has('ArrowUp') || keys.has('KeyW');
const down = keys.has('ArrowDown') || keys.has('KeyS');
const left = keys.has('ArrowLeft') || keys.has('KeyA');
const right = keys.has('ArrowRight') || keys.has('KeyD');
const throttle = (up ? 1 : 0) - (down ? .75 : 0);
const turn = (left ? 1 : 0) - (right ? 1 : 0);
t.angle += turn * dt * (1.15 + Math.min(Math.hypot(t.vx, t.vz), 12) * .065)
* (down && !up ? -1 : 1);
drive(t, throttle, dt);
} else {
// Separate orbit phases, speeds and avoidance prevent a four-truck convoy.
const orbit = state.elapsed * (.36 + truckData.indexOf(t) * .026) + t.phase + .45;
let dx = Math.cos(orbit) * 32 - t.x;
let dz = Math.sin(orbit) * 21 - t.z;
for (const other of truckData) {
if (other === t) continue;
const ox = t.x - other.x, oz = t.z - other.z;
const d2 = ox * ox + oz * oz;
if (d2 < 170 && d2 > .01) {
dx += ox / d2 * 100;
dz += oz / d2 * 100;
}
}
for (const o of obstacles) {
if (o.kind === 'hill') continue;
const ox = t.x - o.x, oz = t.z - o.z;
const d2 = ox * ox + oz * oz;
if (d2 < 115 && d2 > .01) {
dx += ox / d2 * 80;
dz += oz / d2 * 80;
}
}
steerToward(t, dx, dz, dt);
drive(t, .9, dt);
}
t.hit = Math.max(0, t.hit - dt);
t.cooldown = Math.max(0, t.cooldown - dt);
// Soft elliptical arena wall.
const edge = Math.hypot(t.x / 46, t.z / 31);
if (edge > 1) {
t.x /= edge; t.z /= edge;
const nx = t.x / (46 * 46), nz = t.z / (31 * 31);
const len = Math.hypot(nx, nz);
const ux = nx / len, uz = nz / len;
const outward = t.vx * ux + t.vz * uz;
if (outward > 0) { t.vx -= outward * 1.65 * ux; t.vz -= outward * 1.65 * uz; }
}
let elevation = 0;
for (const o of obstacles) {
const dx = t.x - o.x, dz = t.z - o.z;
if (o.kind === 'hill') {
const q = (dx / o.rx) ** 2 + (dz / o.rz) ** 2;
if (q < 1) {
elevation = Math.max(elevation, o.height * Math.sqrt(1 - q) * .78);
t.vx *= 1 - .22 * dt; t.vz *= 1 - .22 * dt;
}
} else {
const dist = Math.hypot(dx, dz) || .001;
const min = t.radius + o.radius;
if (dist < min) {
const nx = dx / dist, nz = dz / dist;
t.x += nx * (min - dist) * .65;
t.z += nz * (min - dist) * .65;
const into = t.vx * nx + t.vz * nz;
if (into < 0) {
t.vx -= into * 1.55 * nx; t.vz -= into * 1.55 * nz;
if (into < -6 && t.cooldown <= 0) damage(t, t.x - nx * 2, t.z - nz * 2);
}
}
}
}
t.root.position.set(t.x, elevation, t.z);
t.root.rotation.y = t.angle;
t.root.rotation.z = Math.sin(state.elapsed * 13 + t.phase) * Math.min(t.hit, .8) * .105;
t.flash.material.opacity = t.hit > .08 ? Math.min(.88, t.hit * .7) : 0;
}
function truckCollisions() {
for (let i = 0; i < truckData.length; i++) {
for (let j = i + 1; j < truckData.length; j++) {
const a = truckData[i], b = truckData[j];
const dx = b.x - a.x, dz = b.z - a.z;
const dist = Math.hypot(dx, dz) || .001;
const min = a.radius + b.radius;
if (dist >= min) continue;
const nx = dx / dist, nz = dz / dist;
const overlap = (min - dist) * .5;
a.x -= nx * overlap; a.z -= nz * overlap;
b.x += nx * overlap; b.z += nz * overlap;
const closing = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;
if (closing < 0) {
const impulse = -closing * .72 + 2;
a.vx -= nx * impulse; a.vz -= nz * impulse;
b.vx += nx * impulse; b.vz += nz * impulse;
if (closing < -3.5 && a.cooldown <= 0 && b.cooldown <= 0) {
damage(a, (a.x + b.x) / 2, (a.z + b.z) / 2);
damage(b, (a.x + b.x) / 2, (a.z + b.z) / 2);
if (a.isPlayer || b.isPlayer) {
state.score += closing < -10 ? 500 : 150;
updateHUD();
}
}
}
}
}
}
function updateSparks(dt) {
for (let i = sparks.length - 1; i >= 0; i--) {
const p = sparks[i];
p.life -= dt;
p.vy -= 24 * dt;
p.m.position.x += p.vx * dt;
p.m.position.y += p.vy * dt;
p.m.position.z += p.vz * dt;
p.m.scale.setScalar(Math.max(.02, p.life * 1.5));
if (p.life <= 0 || p.m.position.y < 0) {
scene.remove(p.m); sparks.splice(i, 1);
}
}
}
const player = truckData[0];
const look = new THREE.Vector3();
function updateCamera(dt) {
const desired = new THREE.Vector3(player.x + 12, 43, player.z + 53);
camera.position.lerp(desired, 1 - Math.exp(-3 * dt));
look.set(player.x, 1.6, player.z - 9);
camera.lookAt(look);
}
camera.position.set(player.x + 12, 43, player.z + 53);
camera.lookAt(player.x, 1.6, player.z - 9);
function reset() { location.reload(); }
document.addEventListener('keydown', e => {
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space'].includes(e.code))
e.preventDefault();
if (e.code === 'KeyP' && !e.repeat) {
state.paused = !state.paused;
photoEl.classList.toggle('show', state.paused);
document.getElementById('photoScore').textContent = state.score.toLocaleString();
} else if (e.code === 'KeyR' && state.finished) {
reset();
}
keys.add(e.code);
});
document.addEventListener('keyup', e => keys.delete(e.code));
window.addEventListener('blur', () => keys.clear());
window.addEventListener('resize', () => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
});
let last = performance.now();
function frame(now) {
requestAnimationFrame(frame);
const dt = Math.min((now - last) / 1000, .045);
last = now;
// Render continues in photo mode, but no clock, AI, physics, particles or camera step runs.
if (!state.paused && !state.finished) {
state.elapsed += dt;
state.time = Math.max(0, state.time - dt);
for (const t of truckData) updateTruck(t, dt);
truckCollisions();
updateSparks(dt);
updateCamera(dt);
updateHUD();
if (state.time <= 0) {
state.finished = true;
document.getElementById('finalScore').textContent = state.score.toLocaleString();
finishEl.classList.add('show');
}
}
renderer.render(scene, camera);
}
requestAnimationFrame(frame);
</script>
</body>
</html>
The notes
- Five trucks: There is one player truck and four AI rivals. Each rival has a different orbit phase and speed, plus separation steering around nearby trucks and solid obstacles.
- Demo mode:
const state = { score: demo ? 5000 : 0, time: demo ? 20 : 90, ... };sets the actual score and remaining time used by gameplay, collisions, the HUD, and the clock—not an overlay. - Photo mode:
Pstops simulation updates, including physics, AI, particles, camera movement, and the clock. Rendering continues so the frozen scene and photo card remain visible. - Collisions: Trucks are moving circles on the arena floor. Overlap is separated, closing velocity produces an impulse, and sufficiently hard contacts trigger a visible flash and sparks; player-involved rival hits also award points. Solid obstacles repel trucks, while hills compute elevation and slow them.
Attachments
openai/gpt-6-sol-pro — page