Run Detail
completedgpt-6-astraRecorded 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
185.0s
Total Tokens
13,530
Input Tokens
719
Output Tokens
12,811
Reasoning Tokens
1,552
Reasoning Effort
default
Est. Cost
$0.6477
Started
9/4/2026, 8:40:14 PM
OR Provider
OpenAI
Finish Reason
stop
Generation ID
gen-1788554414-WdW4qGiTdUPtwZillTrT
Turns (1)
Turn #1
719 in12,811 out1,552 reasoning13,530 total185.0s
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 Pit: Cybertruck Stampede packs five angular electric monsters into a floodlit bowl of roaring color, dirt hills, scattered junk, and full-contact rivalry.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="data:,">
<title>Volt Pit — Cybertruck Stampede</title>
<style>
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #101724; }
body { font-family: Arial, Helvetica, sans-serif; color: #fff; }
canvas { display: block; outline: none; }
#hud {
position: absolute; top: 20px; left: 22px; right: 22px;
display: flex; align-items: flex-start; justify-content: space-between;
pointer-events: none; gap: 12px;
}
.panel {
padding: 13px 18px; background: #101724df;
border: 1px solid #ffffff2b; border-bottom: 3px solid #65ffe0;
box-shadow: 0 7px 28px #0005;
}
.eyebrow { font-size: 10px; letter-spacing: 3px; color: #65ffe0; font-weight: bold; }
h1 { font-size: clamp(19px, 3vw, 31px); margin: 4px 0 0; letter-spacing: -1px; }
.stats { display: flex; gap: 28px; }
.label { display: block; color: #aebbc9; font-size: 10px; letter-spacing: 2px; }
.value { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
#clock.urgent { color: #ff795e; }
#controls {
position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
padding: 11px 17px; background: #101724dc; border: 1px solid #ffffff26;
color: #dce6ef; font-size: 12px; text-align: center; width: max-content; max-width: 94%;
pointer-events: none; line-height: 1.6;
}
#controls b { color: #65ffe0; }
#toast {
position: absolute; top: 120px; left: 50%; transform: translateX(-50%);
font-size: 24px; font-weight: 900; color: #ffe190;
text-shadow: 0 2px 8px #000; pointer-events: none; opacity: 0;
}
#card {
position: absolute; inset: 0; display: none; place-items: center;
background: #06101945; pointer-events: none;
border: 16px solid #ffffff16;
}
#card.visible { display: grid; }
#card .inner {
text-align: center; padding: 28px 42px; background: #0c1426e8;
border-top: 4px solid #65ffe0; box-shadow: 0 15px 80px #0006;
}
#card h2 { margin: 12px 0; font-size: clamp(32px, 6vw, 64px); letter-spacing: -2px; }
#cardScore { font-size: 35px; font-weight: bold; color: #ffe190; margin: 16px 0; }
#cardHint { font-size: 13px; color: #c1ccd9; }
#loading {
position: absolute; inset: 0; display: grid; place-items: center;
background: #101724; z-index: 10; text-align: center; padding: 32px;
line-height: 1.7;
}
@media (max-width: 580px) {
#hud { top: 10px; left: 10px; right: 10px; }
.panel { padding: 9px 11px; }
.stats { gap: 12px; }
.value { font-size: 24px; }
.eyebrow { letter-spacing: 1px; font-size: 9px; }
}
</style>
</head>
<body>
<div id="hud">
<div class="panel">
<div class="eyebrow">CYBERTRUCK STAMPEDE</div>
<h1>VOLT PIT ARENA</h1>
</div>
<div class="panel stats">
<div><span class="label">SCORE</span><span class="value" id="score">0</span></div>
<div><span class="label">CLOCK</span><span class="value" id="clock">1:30</span></div>
</div>
</div>
<div id="toast"></div>
<div id="controls">
<b>YOU: MINT TRIM</b> WASD / arrows: drive ·
Space: brake · P: photo · R: restart<br>
Ram rivals. Smash debris. Keep moving.
</div>
<div id="card">
<div class="inner">
<div class="eyebrow" id="cardLabel"></div>
<h2>VOLT PIT ARENA</h2>
<div id="cardScore"></div>
<div id="cardHint"></div>
</div>
</div>
<div id="loading">Charging the floodlights…<br>Loading the single Three.js dependency.</div>
<!-- The only external resource request. All other assets are generated below. -->
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"
onerror="document.getElementById('loading').textContent='Three.js could not load. This page needs an internet connection for its one pinned CDN dependency. Reconnect and reload.'"></script>
<script>
(() => {
'use strict';
if (!window.THREE) return;
const $ = id => document.getElementById(id);
const ARENA = 'VOLT PIT ARENA';
const demo = location.hash === '#demo';
const state = { score: demo ? 5000 : 0, time: demo ? 20 : 90, photo: false, ended: false, elapsed: 0 };
const keys = new Set();
const clamp = THREE.MathUtils.clamp;
const TAU = Math.PI * 2;
let seed = 8137;
function random() {
seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;
return seed / 4294967296;
}
let renderer;
try {
renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
} catch (error) {
$('loading').textContent = 'WebGL is unavailable. Enable hardware acceleration in your browser and reload.';
return;
}
renderer.setPixelRatio(Math.min(devicePixelRatio || 1, 1.5));
renderer.setSize(innerWidth, innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.15;
renderer.domElement.tabIndex = 0;
renderer.domElement.setAttribute('aria-label', 'Cybertruck rally. Drive with WASD or arrows. P freezes photo mode.');
document.body.prepend(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x172335);
scene.fog = new THREE.Fog(0x172335, 100, 205);
const camera = new THREE.PerspectiveCamera(57, innerWidth / innerHeight, 0.15, 250);
scene.add(new THREE.HemisphereLight(0xbadfff, 0x574331, 2.1));
const sun = new THREE.DirectionalLight(0xffe4bb, 3.0);
sun.position.set(-25, 58, -30);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
Object.assign(sun.shadow.camera, { left: -58, right: 58, top: 58, bottom: -58, near: 1, far: 130 });
sun.shadow.normalBias = 0.035;
scene.add(sun);
const fill = new THREE.DirectionalLight(0x79caff, 1.2);
fill.position.set(40, 22, 20);
scene.add(fill);
const mat = (color, roughness = 0.8, metalness = 0) =>
new THREE.MeshStandardMaterial({ color, roughness, metalness });
const silver = mat(0xaebbc2, 0.34, 0.7);
const steel = mat(0x333e48, 0.6, 0.6);
const rubber = mat(0x151b21);
const dirtMat = mat(0x92704a);
const concrete = mat(0x354554);
const glass = new THREE.MeshStandardMaterial({
color: 0x122e3c, roughness: 0.17, metalness: 0.6,
emissive: 0x10232c, emissiveIntensity: 0.3, side: THREE.DoubleSide
});
const whiteLight = new THREE.MeshBasicMaterial({ color: 0xe5ffff });
const redLight = new THREE.MeshBasicMaterial({ color: 0xff463c });
function mesh(geo, material, parent = scene) {
const m = new THREE.Mesh(geo, material);
parent.add(m);
return m;
}
function box(w, h, d, material, x, y, z, parent = scene) {
const m = mesh(new THREE.BoxGeometry(w, h, d), material, parent);
m.position.set(x, y, z);
return m;
}
// Generated dirt texture: no image file or image URL.
const dirtCanvas = document.createElement('canvas');
dirtCanvas.width = dirtCanvas.height = 256;
const dc = dirtCanvas.getContext('2d');
dc.fillStyle = '#957951'; dc.fillRect(0, 0, 256, 256);
for (let i = 0; i < 9000; i++) {
const v = 65 + Math.floor(random() * 75);
dc.fillStyle = `rgba(${v + 30},${v + 12},${v},0.25)`;
dc.fillRect(random() * 256, random() * 256, 1 + random() * 3, 1 + random() * 2);
}
const dirtTexture = new THREE.CanvasTexture(dirtCanvas);
dirtTexture.colorSpace = THREE.SRGBColorSpace;
dirtTexture.wrapS = dirtTexture.wrapT = THREE.RepeatWrapping;
dirtTexture.repeat.set(12, 12);
const floor = mesh(new THREE.CircleGeometry(50, 128),
new THREE.MeshStandardMaterial({ map: dirtTexture, roughness: 1 }));
floor.rotation.x = -Math.PI / 2;
floor.receiveShadow = true;
for (const r of [17, 30, 42]) {
const ring = mesh(new THREE.RingGeometry(r, r + 0.22, 128),
new THREE.MeshBasicMaterial({ color: 0xc8a87a, transparent: true, opacity: 0.28, side: THREE.DoubleSide }));
ring.rotation.x = -Math.PI / 2; ring.position.y = 0.015;
}
const wall = mesh(new THREE.CylinderGeometry(49.5, 49.5, 2.2, 128, 1, true),
new THREE.MeshStandardMaterial({ color: 0x263b49, side: THREE.DoubleSide }));
wall.position.y = 1.1;
for (let i = 0; i < 80; i++) {
const a = i / 80 * TAU;
const barrier = box(3.1, 0.45, 0.55, i % 2 ? mat(0xeeb853) : concrete,
Math.sin(a) * 49.1, 1.85, Math.cos(a) * 49.1);
barrier.rotation.y = a;
}
// Eight continuous seating tiers, with 2,048 individually colored spectators.
const rows = 8, perRow = 256, count = rows * perRow;
const bodies = new THREE.InstancedMesh(new THREE.BoxGeometry(0.65, 0.9, 0.48), mat(0xffffff), count);
const heads = new THREE.InstancedMesh(new THREE.SphereGeometry(0.28, 6, 4), mat(0xffffff), count);
const dummy = new THREE.Object3D();
const shirtColors = [0x42c6ca, 0xfa6a61, 0xe8bd52, 0x798be1, 0xdfe6d8, 0x426b93, 0xab72c5];
const skinColors = [0xe9bd93, 0xbf8964, 0x815b43, 0xdca67d, 0xf1cfaf];
const color = new THREE.Color();
for (let row = 0; row < rows; row++) {
const r = 52 + row * 1.85, y = 1.3 + row * 1.3;
const tier = mesh(new THREE.RingGeometry(r - 0.9, r + 1.0, 128), concrete);
tier.rotation.x = -Math.PI / 2; tier.position.y = y;
const riser = mesh(new THREE.CylinderGeometry(r - 0.9, r - 0.9, 1.3, 128, 1, true),
new THREE.MeshStandardMaterial({ color: 0x253440, side: THREE.DoubleSide }));
riser.position.y = y - 0.65;
for (let j = 0; j < perRow; j++) {
const i = row * perRow + j;
const a = (j + (row % 2) * 0.5) / perRow * TAU;
const jitter = random() * 0.18;
dummy.position.set(Math.sin(a) * r, y + 0.53 + jitter, Math.cos(a) * r);
dummy.rotation.set(0, a, (random() - 0.5) * 0.2);
dummy.scale.set(1, 0.85 + random() * 0.3, 1);
dummy.updateMatrix();
bodies.setMatrixAt(i, dummy.matrix);
bodies.setColorAt(i, color.setHex(shirtColors[Math.floor(random() * shirtColors.length)]));
dummy.position.y += 0.68;
dummy.scale.setScalar(1);
dummy.updateMatrix();
heads.setMatrixAt(i, dummy.matrix);
heads.setColorAt(i, color.setHex(skinColors[Math.floor(random() * skinColors.length)]));
}
}
scene.add(bodies, heads);
// In-memory lettering and floodlight rigs.
const bannerCanvas = document.createElement('canvas');
bannerCanvas.width = 1024; bannerCanvas.height = 128;
const bc = bannerCanvas.getContext('2d');
bc.fillStyle = '#0d2532'; bc.fillRect(0, 0, 1024, 128);
bc.fillStyle = '#65ffe0'; bc.font = 'bold 65px Arial';
bc.textAlign = 'center'; bc.fillText('VOLT PIT / FULL CONTACT', 512, 87);
const bannerTexture = new THREE.CanvasTexture(bannerCanvas);
bannerTexture.colorSpace = THREE.SRGBColorSpace;
const bannerMat = new THREE.MeshBasicMaterial({ map: bannerTexture, side: THREE.DoubleSide });
for (let i = 0; i < 8; i++) {
const a = i / 8 * TAU;
const x = Math.sin(a) * 68, z = Math.cos(a) * 68;
box(0.55, 24, 0.55, steel, x, 12, z);
const lightBank = box(6, 1.4, 0.65, whiteLight, x, 24, z);
lightBank.rotation.y = a;
if (i % 2 === 0) {
const banner = mesh(new THREE.PlaneGeometry(23, 2.9), bannerMat);
banner.position.set(Math.sin(a) * 60, 12.6, Math.cos(a) * 60);
banner.rotation.y = a;
}
}
// Obstacle type 1: smooth, physically sampled artificial dirt hills.
const hills = [
{ x: -15, z: 5, r: 7, h: 3.5 },
{ x: 15, z: 12, r: 7.5, h: 4.1 },
{ x: 2, z: -15, r: 6.2, h: 3.1 },
{ x: -24, z: -19, r: 5.5, h: 2.6 }
];
function heightAt(x, z) {
let height = 0;
for (const h of hills) {
const q = ((x - h.x) ** 2 + (z - h.z) ** 2) / (h.r * h.r);
if (q < 1) height = Math.max(height, h.h * (1 - q) ** 2);
}
return height;
}
for (const h of hills) {
const vertices = [], indices = [], segments = 40, rings = 12;
for (let j = 0; j <= rings; j++) {
const r = h.r * j / rings;
for (let i = 0; i <= segments; i++) {
const a = i / segments * TAU;
vertices.push(Math.sin(a) * r, h.h * (1 - (r / h.r) ** 2) ** 2, Math.cos(a) * r);
}
}
for (let j = 0; j < rings; j++) for (let i = 0; i < segments; i++) {
const k = j * (segments + 1) + i;
indices.push(k, k + 1, k + segments + 1, k + 1, k + segments + 2, k + segments + 1);
}
const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geo.setIndex(indices); geo.computeVertexNormals();
const mound = mesh(geo, new THREE.MeshStandardMaterial({ color: 0xa78451, roughness: 1, side: THREE.DoubleSide }));
mound.position.set(h.x, 0.02, h.z);
mound.receiveShadow = true;
}
// Obstacles 2–4: timber crates, steel barrels and loose tire stacks.
const obstacles = [];
const wood = mat(0xb67d43), woodBand = mat(0x503d2c);
const barrelMat = mat(0xd7673e, 0.6, 0.35);
const tireGeo = new THREE.TorusGeometry(0.8, 0.29, 6, 12);
const layouts = [
[-8, 19], [-5, 21], [-2, 23], [23, -11], [25, -8], [27, -5],
[-29, 13], [-31, 16], [-26, 17], [11, -29], [14, -28], [17, -27],
[6, 4], [8, 3], [10, 1], [-12, -29], [-15, -30], [-18, -31],
[29, 23], [31, 20], [-35, -4], [-34, -7], [0, 33], [3, 34]
];
layouts.forEach(([x, z], i) => {
const type = Math.floor(i / 3) % 3;
const g = new THREE.Group(); scene.add(g);
if (type === 0) {
box(2.2, 2, 2.2, wood, 0, 1, 0, g);
for (const s of [-0.73, 0.73]) {
box(2.3, 0.18, 2.3, woodBand, 0, 1 + s, 0, g);
box(0.16, 2.05, 2.25, woodBand, s, 1, 0, g);
}
} else if (type === 1) {
const b = mesh(new THREE.CylinderGeometry(0.85, 0.85, 2.1, 12), barrelMat, g);
b.position.y = 1.05;
for (const y of [0.35, 1.7]) {
const band = mesh(new THREE.TorusGeometry(0.86, 0.07, 4, 12), steel, g);
band.rotation.x = Math.PI / 2; band.position.y = y;
}
} else {
for (let j = 0; j < 3; j++) {
const tire = mesh(tireGeo, rubber, g);
tire.rotation.x = Math.PI / 2;
tire.position.set(j % 2 * 0.12, 0.3 + j * 0.55, 0);
}
}
g.traverse(m => { if (m.isMesh) { m.castShadow = true; m.receiveShadow = true; } });
g.position.set(x, heightAt(x, z), z);
obstacles.push({ mesh: g, x, z, startX: x, startZ: z, vx: 0, vz: 0,
r: type === 0 ? 1.45 : 1.1, mass: type === 0 ? 0.65 : 0.35, hit: false, spin: 0 });
});
function polygon(points, material, parent) {
const pos = [], idx = [];
points.forEach(p => pos.push(...p));
for (let i = 1; i < points.length - 1; i++) idx.push(0, i, i + 1);
const g = new THREE.BufferGeometry();
g.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
g.setIndex(idx); g.computeVertexNormals();
return mesh(g, material, parent);
}
function cybertruck(accentColor) {
const root = new THREE.Group(), chassis = new THREE.Group();
root.add(chassis); scene.add(root);
const accent = new THREE.MeshBasicMaterial({ color: accentColor });
// Profile coordinates are [longitudinal Z, height Y].
const profile = [[3.05, 1.35], [2.9, 2.05], [0.25, 3.12], [-1.15, 2.65], [-3, 1.96], [-3, 1.35]];
const vertices = [], indices = [];
for (const x of [-1.45, 1.45]) for (const [z, y] of profile) vertices.push(x, y, z);
const n = profile.length;
for (let i = 1; i < n - 1; i++) {
indices.push(0, i + 1, i, n, n + i, n + i + 1);
}
for (let i = 0; i < n; i++) {
const j = (i + 1) % n;
indices.push(i, j, n + j, i, n + j, n + i);
}
const bodyGeo = new THREE.BufferGeometry();
bodyGeo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
bodyGeo.setIndex(indices); bodyGeo.computeVertexNormals();
const bodyMaterial = silver.clone(); bodyMaterial.side = THREE.DoubleSide;
mesh(bodyGeo, bodyMaterial, chassis);
for (const x of [-1.468, 1.468]) {
polygon([[x,2.16,2.42],[x,3.02,0.23],[x,2.6,-1.08],[x,2.13,-1.35]], glass, chassis);
box(0.045, 0.65, 0.09, steel, x, 2.49, 0.15, chassis);
box(0.05, 0.08, 4.5, accent, x, 1.61, 0, chassis);
box(0.08, 0.05, 0.34, steel, x, 2.03, -0.36, chassis);
}
polygon([[-1.36,3.14,0.25],[1.36,3.14,0.25],[1.36,2.15,2.7],[-1.36,2.15,2.7]], glass, chassis);
box(2.9, 0.12, 0.09, whiteLight, 0, 1.99, 2.98, chassis);
box(2.8, 0.1, 0.1, redLight, 0, 1.91, -3.02, chassis);
box(3.25, 0.25, 0.28, steel, 0, 1.28, 3.03, chassis);
box(3.3, 0.22, 0.3, steel, 0, 1.23, -3.02, chassis);
box(2.4, 0.35, 4.6, steel, 0, 1.02, 0, chassis);
const wheels = [];
for (const x of [-1.83, 1.83]) for (const z of [-1.92, 1.92]) {
const wheel = new THREE.Group(); wheel.position.set(x, 1.05, z); root.add(wheel);
const tire = mesh(new THREE.CylinderGeometry(1.12, 1.12, 0.82, 16), rubber, wheel);
tire.rotation.z = Math.PI / 2;
const hub = mesh(new THREE.CylinderGeometry(0.54, 0.54, 0.86, 8), steel, wheel);
hub.rotation.z = Math.PI / 2;
const cap = mesh(new THREE.CylinderGeometry(0.25, 0.25, 0.89, 8), accent, wheel);
cap.rotation.z = Math.PI / 2;
for (let j = 0; j < 12; j++) {
const a = j / 12 * TAU;
const tread = box(0.88, 0.16, 0.34, rubber, 0, Math.cos(a) * 1.08, Math.sin(a) * 1.08, wheel);
tread.rotation.x = a;
}
wheels.push(wheel);
}
const glow = mesh(new THREE.RingGeometry(2.75, 2.93, 40),
new THREE.MeshBasicMaterial({ color: accentColor, transparent: true, opacity: 0.62, side: THREE.DoubleSide }), root);
glow.rotation.x = -Math.PI / 2; glow.position.y = 0.04;
root.traverse(m => { if (m.isMesh && m !== glow) m.castShadow = true; });
return { root, chassis, wheels, bodyMaterial, glow };
}
// Exactly five truck objects: index zero is the player; 1–4 are AI.
const accents = [0x65ffe0, 0xff665e, 0xffc348, 0xb799ff, 0x6bafff];
const spawns = [[0,-34,0], [-25,0,Math.PI/2], [0,28,Math.PI], [27,0,-Math.PI/2], [-18,-22,0.7]];
const trucks = Array.from({ length: 5 }, (_, i) => ({
...cybertruck(accents[i]), id: i, x: spawns[i][0], z: spawns[i][1], angle: spawns[i][2],
vx: 0, vz: 0, y: 0, vy: 0, ground: 0, flash: 0, lean: 0,
lane: 16 + i * 4.8, direction: i % 2 ? 1 : -1
}));
// Recycled impact particles, also frozen by photo mode.
const particles = [];
const sparkGeo = new THREE.BoxGeometry(0.16, 0.16, 0.36);
const sparkMat = new THREE.MeshBasicMaterial({ color: 0xffd16f });
for (let i = 0; i < 110; i++) {
const m = mesh(sparkGeo, sparkMat); m.visible = false;
particles.push({ mesh: m, life: 0, vx: 0, vy: 0, vz: 0 });
}
let sparkCursor = 0, toastTime = 0;
const pairTimes = new Map();
function burst(x, y, z, amount = 15) {
for (let i = 0; i < amount; i++) {
const p = particles[sparkCursor++ % particles.length], a = random() * TAU;
p.mesh.position.set(x, y, z); p.mesh.visible = true;
p.life = 0.3 + random() * 0.5;
p.vx = Math.sin(a) * (3 + random() * 8);
p.vz = Math.cos(a) * (3 + random() * 8);
p.vy = 3 + random() * 7;
p.mesh.rotation.set(random() * 5, random() * 5, random() * 5);
}
}
function award(points, text) {
state.score += points;
$('toast').textContent = text + ' +' + points;
toastTime = 1.25;
}
function angleDifference(a, b) { return Math.atan2(Math.sin(a - b), Math.cos(a - b)); }
function aiControl(t) {
// Different lanes and opposite circulation prevent a single convoy.
const polar = Math.atan2(t.x, t.z);
const targetAngle = polar + t.direction * 0.48;
const lane = t.lane + Math.sin(state.elapsed * 0.45 + t.id * 2) * 2.5;
let tx = Math.sin(targetAngle) * lane, tz = Math.cos(targetAngle) * lane;
const p = trucks[0], distance = Math.hypot(p.x - t.x, p.z - t.z);
// Only one rival gets the attack slot at a time; everybody else circulates.
const hunter = 1 + Math.floor(state.elapsed / 4) % 4;
const attacking = t.id === hunter && distance < 37;
if (attacking) { tx = p.x + p.vx * 0.5; tz = p.z + p.vz * 0.5; }
let dx = tx - t.x, dz = tz - t.z;
const length = Math.hypot(dx, dz) || 1;
dx /= length; dz /= length;
for (const other of trucks) {
if (other === t || (attacking && other.id === 0)) continue;
const sx = t.x - other.x, sz = t.z - other.z, d = Math.hypot(sx, sz);
if (d > 0.01 && d < 11) {
const strength = (11 - d) / 11 * 1.8;
dx += sx / d * strength; dz += sz / d * strength;
}
}
for (const o of obstacles) {
const sx = t.x - o.x, sz = t.z - o.z, d = Math.hypot(sx, sz);
if (d > 0.01 && d < 6) {
dx += sx / d * (6 - d) * 0.12;
dz += sz / d * (6 - d) * 0.12;
}
}
const error = angleDifference(Math.atan2(dx, dz), t.angle);
const forward = t.vx * Math.sin(t.angle) + t.vz * Math.cos(t.angle);
const targetSpeed = (attacking ? 22 : 15 + t.id * 0.7) * (Math.abs(error) > 1.2 ? 0.65 : 1);
return { throttle: clamp((targetSpeed - forward) * 0.4, -0.3, 1),
steer: clamp(error * 1.7, -1, 1), brake: false };
}
function integrateTruck(t, dt) {
let input;
if (t.id === 0) {
input = {
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')
};
} else input = aiControl(t);
let fx = Math.sin(t.angle), fz = Math.cos(t.angle);
let forward = t.vx * fx + t.vz * fz;
const grounded = t.y < heightAt(t.x, t.z) + 0.22;
const grip = grounded ? 1 : 0.18;
t.angle += input.steer * 1.65 * clamp(Math.abs(forward) / 7, 0, 1) *
(forward < -0.5 ? -1 : 1) * grip * dt;
fx = Math.sin(t.angle); fz = Math.cos(t.angle);
forward = t.vx * fx + t.vz * fz;
const side = t.vx * fz - t.vz * fx;
forward += input.throttle * 19 * grip * dt;
forward *= Math.exp(-(input.brake ? 5 : 0.38) * dt);
forward = clamp(forward, -11, t.id ? 25 : 30);
const lateral = side * Math.exp(-(input.brake ? 3 : 5.5) * grip * dt);
t.vx = fx * forward + fz * lateral;
t.vz = fz * forward - fx * lateral;
// Gravity along terrain gradients slows climbs and accelerates descents.
if (grounded) {
t.vx -= (heightAt(t.x + 0.3, t.z) - heightAt(t.x - 0.3, t.z)) / 0.6 * 7 * dt;
t.vz -= (heightAt(t.x, t.z + 0.3) - heightAt(t.x, t.z - 0.3)) / 0.6 * 7 * dt;
}
t.x += t.vx * dt; t.z += t.vz * dt;
const r = Math.hypot(t.x, t.z), limit = 46;
if (r > limit) {
const nx = t.x / r, nz = t.z / r;
t.x = nx * limit; t.z = nz * limit;
const vn = t.vx * nx + t.vz * nz;
if (vn > 0) {
t.vx -= nx * vn * 1.5; t.vz -= nz * vn * 1.5;
if (vn > 5) { burst(t.x + nx * 2, t.y + 1, t.z + nz * 2, 8); t.flash = 0.2; }
}
}
const ground = heightAt(t.x, t.z);
t.vy -= 22 * dt; t.y += t.vy * dt;
if (t.y < ground) {
t.y = ground;
t.vy = Math.max(0, (ground - t.ground) / dt);
}
t.ground = ground;
t.flash = Math.max(0, t.flash - dt);
t.lean += (-input.steer * forward * 0.007 - t.lean) * Math.min(1, dt * 7);
for (const wheel of t.wheels) wheel.rotation.x += forward * dt / 1.12;
}
function truckContacts() {
for (let i = 0; i < trucks.length; i++) for (let j = i + 1; j < trucks.length; j++) {
const a = trucks[i], b = trucks[j];
if (Math.abs(a.y - b.y) > 3) continue;
let dx = b.x - a.x, dz = b.z - a.z;
const distance = Math.hypot(dx, dz), radius = 5.5;
if (distance >= radius) continue;
const nx = distance > 0.001 ? dx / distance : 1;
const nz = distance > 0.001 ? dz / distance : 0;
const penetration = radius - distance;
a.x -= nx * penetration * 0.5; a.z -= nz * penetration * 0.5;
b.x += nx * penetration * 0.5; b.z += nz * penetration * 0.5;
const closing = (a.vx - b.vx) * nx + (a.vz - b.vz) * nz;
if (closing <= 0) continue;
const impulse = closing * 1.55 / 2;
a.vx -= nx * impulse; a.vz -= nz * impulse;
b.vx += nx * impulse; b.vz += nz * impulse;
const key = i + ':' + j;
if (closing > 2.5 && state.elapsed - (pairTimes.get(key) ?? -10) > 0.65) {
pairTimes.set(key, state.elapsed);
a.flash = b.flash = 0.35;
burst((a.x + b.x) / 2, Math.max(a.y, b.y) + 1.7, (a.z + b.z) / 2, 22);
if (i === 0) award(Math.round(closing * 35), closing > 14 ? 'MONSTER RAM' : 'CONTACT');
}
}
}
function debrisContacts(dt) {
for (const o of obstacles) {
o.x += o.vx * dt; o.z += o.vz * dt;
o.vx *= Math.exp(-1.5 * dt); o.vz *= Math.exp(-1.5 * dt);
o.mesh.rotation.y += o.spin * dt; o.spin *= Math.exp(-1.7 * dt);
const radius = Math.hypot(o.x, o.z);
if (radius > 47) {
const nx = o.x / radius, nz = o.z / radius;
o.x = nx * 47; o.z = nz * 47;
const dot = o.vx * nx + o.vz * nz;
if (dot > 0) { o.vx -= nx * dot * 1.4; o.vz -= nz * dot * 1.4; }
}
for (const t of trucks) {
if (t.y > heightAt(o.x, o.z) + 2.1) continue;
const dx = o.x - t.x, dz = o.z - t.z, d = Math.hypot(dx, dz);
const required = 2.55 + o.r;
if (d >= required) continue;
const nx = d > 0.001 ? dx / d : 1, nz = d > 0.001 ? dz / d : 0;
const invO = 1 / o.mass, total = 1 + invO;
const push = required - d;
t.x -= nx * push / total; t.z -= nz * push / total;
o.x += nx * push * invO / total; o.z += nz * push * invO / total;
const closing = (t.vx - o.vx) * nx + (t.vz - o.vz) * nz;
if (closing > 0) {
const impulse = closing * 1.35 / total;
t.vx -= nx * impulse; t.vz -= nz * impulse;
o.vx += nx * impulse * invO; o.vz += nz * impulse * invO;
o.spin = closing * (random() - 0.5);
if (closing > 3 && !o.hit) {
o.hit = true; o.mesh.scale.y = 0.65;
burst(o.x, heightAt(o.x, o.z) + 1, o.z, 12);
if (t.id === 0) award(125, 'DEBRIS SMASH');
}
}
}
o.mesh.position.set(o.x, heightAt(o.x, o.z), o.z);
}
}
function step(dt) {
state.elapsed += dt;
state.time = Math.max(0, state.time - dt);
for (const t of trucks) integrateTruck(t, dt);
truckContacts();
debrisContacts(dt);
for (const p of particles) if (p.life > 0) {
p.life -= dt; p.mesh.visible = p.life > 0;
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;
}
toastTime = Math.max(0, toastTime - dt);
if (state.time <= 0) { state.ended = true; showCard(); }
}
function syncTrucks(dt) {
for (const t of trucks) {
t.root.position.set(t.x, t.y, t.z);
t.root.rotation.y = t.angle;
const fx = Math.sin(t.angle), fz = Math.cos(t.angle);
const slope = (heightAt(t.x + fx * 1.8, t.z + fz * 1.8) -
heightAt(t.x - fx * 1.8, t.z - fz * 1.8)) / 3.6;
const pitch = t.y <= t.ground + 0.2 ? -Math.atan(slope) : clamp(-t.vy * 0.022, -0.3, 0.3);
t.chassis.rotation.x += (pitch - t.chassis.rotation.x) * Math.min(1, dt * 9);
t.chassis.rotation.z = t.lean;
t.bodyMaterial.emissive.setHex(t.flash > 0 ? 0xff823b : 0x000000);
t.bodyMaterial.emissiveIntensity = t.flash * 1.8;
t.glow.material.opacity = t.id === 0 ? 0.65 : 0.25 + t.flash;
}
}
function updateHUD() {
$('score').textContent = state.score.toLocaleString('en-US');
const s = Math.ceil(state.time);
$('clock').textContent = Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0');
$('clock').classList.toggle('urgent', s <= 10);
$('toast').style.opacity = Math.min(1, toastTime * 3);
}
function showCard() {
$('card').classList.toggle('visible', state.photo || state.ended);
$('cardLabel').textContent = state.photo ? 'PHOTO MODE / SIMULATION FROZEN' : 'RALLY COMPLETE';
$('cardScore').textContent = state.score.toLocaleString('en-US') + ' POINTS';
$('cardHint').textContent = state.photo ? 'Press P to return to the rally' : 'Press R to rally again · P for a frozen photo';
}
const cameraTarget = new THREE.Vector3();
const lookTarget = new THREE.Vector3();
const smoothedLook = new THREE.Vector3(0, 1, -30);
function updateCamera(dt, instant = false) {
const p = trucks[0], fx = Math.sin(p.angle), fz = Math.cos(p.angle);
cameraTarget.set(p.x - fx * 18, p.y + 11.5, p.z - fz * 18);
lookTarget.set(p.x + fx * 5, p.y + 1.6, p.z + fz * 5);
const a = instant ? 1 : 1 - Math.exp(-dt * 4.5);
camera.position.lerp(cameraTarget, a);
smoothedLook.lerp(lookTarget, instant ? 1 : 1 - Math.exp(-dt * 7));
camera.lookAt(smoothedLook);
}
function restart() {
// #demo initializes actual simulation values on every restart as well.
state.score = demo ? 5000 : 0;
state.time = demo ? 20 : 90;
state.elapsed = 0; state.photo = false; state.ended = false;
keys.clear(); pairTimes.clear(); toastTime = 0;
trucks.forEach((t, i) => {
t.x = spawns[i][0]; t.z = spawns[i][1]; t.angle = spawns[i][2];
t.vx = t.vz = t.vy = t.flash = t.lean = 0;
t.y = t.ground = heightAt(t.x, t.z);
t.chassis.rotation.set(0,0,0);
t.wheels.forEach(w => w.rotation.set(0,0,0));
});
obstacles.forEach(o => {
o.x = o.startX; o.z = o.startZ; o.vx = o.vz = o.spin = 0; o.hit = false;
o.mesh.position.set(o.x, heightAt(o.x,o.z), o.z);
o.mesh.rotation.set(0,0,0); o.mesh.scale.set(1,1,1);
});
particles.forEach(p => { p.life = 0; p.mesh.visible = false; });
syncTrucks(1); updateCamera(0, true); updateHUD(); showCard();
}
addEventListener('keydown', e => {
if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Space','KeyW','KeyA','KeyS','KeyD','KeyP','KeyR'].includes(e.code))
e.preventDefault();
if (e.code === 'KeyP' && !e.repeat) {
state.photo = !state.photo;
keys.clear();
showCard();
return;
}
// The photo is held until P is pressed again; R cannot dismiss it.
if (e.code === 'KeyR' && !e.repeat && !state.photo) { restart(); return; }
if (!state.photo && !state.ended) keys.add(e.code);
});
addEventListener('keyup', e => keys.delete(e.code));
addEventListener('blur', () => keys.clear());
document.addEventListener('visibilitychange', () => keys.clear());
renderer.domElement.addEventListener('pointerdown', () => renderer.domElement.focus());
addEventListener('resize', () => {
camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
});
restart();
$('loading').style.display = 'none';
renderer.domElement.focus();
let last = performance.now();
function frame(now) {
requestAnimationFrame(frame);
const dt = Math.min(Math.max((now - last) / 1000, 0), 0.05);
last = now; // Updated even when frozen: no accumulated catch-up on resume.
if (!state.photo && !state.ended) {
const steps = Math.max(1, Math.ceil(dt / (1 / 120)));
for (let i = 0; i < steps && !state.ended; i++) step(dt / steps);
syncTrucks(dt);
updateCamera(dt);
updateHUD();
}
// Rendering continues, but photo mode changes no simulation or camera state.
renderer.render(scene, camera);
}
requestAnimationFrame(frame);
})();
</script>
</body>
</html>
The notes
- Five trucks: A fixed five-element array creates one player and four AI rivals. Rivals use different orbital lanes, opposing circulation, nearby-truck separation, and rotating attack slots so only one deliberately hunts the player at a time.
- Demo mode:
const state = { score: demo ? 5000 : 0, time: demo ? 20 : 90, photo: false, ended: false, elapsed: 0 };initializes the actual score and countdown. Collision awards modify that score, and that clock ends the rally; neither value is an overlay. - Photo mode:
Pstops physics, AI, countdown, particles, wheel animation, and camera tracking. Rendering continues with the frozen scene and score card. Frame timestamps still update, preventing catch-up whenPresumes play. - Collisions: Trucks use horizontal collision circles with a vertical-separation check. Overlaps are separated equally, and closing relative normal velocity produces an equal-mass impulse with restitution
0.55; sufficiently strong player contacts award impact-scaled points with a per-pair cooldown. Debris uses inverse-mass-weighted separation and impulses, damping, and one-time smash awards. Walls reflect outward velocity, while sampled hill heights and gradients govern climbing, gravity, launches, and landings.
Attachments
openai/gpt-6-astra — page