Run Detail
completedgpt-5.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
81,087
Input Tokens
41,776
Output Tokens
39,311
Reasoning Tokens
11,634
Reasoning Effort
default
Est. Cost
$0.2383
Started
8/27/2026, 12:04:54 PM
OR Provider
OpenAI
Finish Reason
stop
Generation ID
gen-batch-1787832295-25ac572c77b073c1c4eb
Turns (1)
Turn #1
41,776 in39,311 out11,634 reasoning81,087 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
Voltage Crater Rally is a neon-lit Cybertruck monster-truck brawl inside a compact dirt stadium packed wall-to-wall with a roaring, colorful crowd.
The game
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Voltage Crater Rally</title>
<style>
:root {
color-scheme: dark;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background: #05070b;
}
canvas {
display: block;
width: 100%;
height: 100%;
outline: none;
}
#hud {
position: fixed;
inset: 0;
z-index: 10;
pointer-events: none;
color: white;
text-shadow: 0 2px 6px #000, 0 0 18px #000;
}
#topbar {
position: absolute;
top: 18px;
left: 18px;
right: 18px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
gap: 14px;
}
.panel {
padding: 11px 15px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 8px;
background: linear-gradient(135deg, rgba(5,10,18,.88), rgba(22,32,44,.64));
box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 0 24px rgba(56,196,255,.07);
backdrop-filter: blur(5px);
}
#arena {
justify-self: start;
color: #86e9ff;
font-size: clamp(15px, 2vw, 23px);
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
#clock {
min-width: 112px;
justify-self: center;
text-align: center;
font-size: clamp(24px, 4vw, 40px);
line-height: 1;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
#score {
min-width: 150px;
justify-self: end;
text-align: right;
font-size: clamp(17px, 2.5vw, 28px);
font-weight: 900;
font-variant-numeric: tabular-nums;
transition: transform .08s, color .08s;
}
#score.hit {
color: #ffe067;
transform: scale(1.12);
}
#controls {
position: absolute;
left: 18px;
bottom: 18px;
max-width: calc(100% - 36px);
padding: 9px 13px;
border-radius: 7px;
background: rgba(4,8,14,.75);
border: 1px solid rgba(255,255,255,.2);
font-size: 13px;
font-weight: 800;
letter-spacing: .06em;
}
#card {
position: fixed;
inset: 0;
z-index: 30;
display: none;
place-items: center;
padding: 24px;
pointer-events: none;
background:
radial-gradient(circle at center, rgba(18,28,39,.3), rgba(0,0,0,.82)),
repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
}
#card.show {
display: grid;
}
#cardInner {
width: min(680px, 92vw);
padding: 42px 26px;
text-align: center;
border: 2px solid rgba(127,231,255,.72);
border-radius: 12px;
background: rgba(4,9,16,.82);
box-shadow: 0 0 70px rgba(55,201,255,.18), inset 0 0 40px rgba(55,201,255,.08);
}
#cardMode {
margin-bottom: 14px;
color: #91ebff;
font-size: 13px;
font-weight: 900;
letter-spacing: .42em;
}
#cardArena {
margin: 0;
font-size: clamp(30px, 7vw, 72px);
line-height: .96;
letter-spacing: .05em;
text-transform: uppercase;
}
#cardScore {
margin-top: 23px;
color: #ffe470;
font-size: clamp(22px, 4vw, 42px);
font-weight: 900;
font-variant-numeric: tabular-nums;
}
#cardHint {
margin-top: 16px;
color: rgba(255,255,255,.7);
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
}
#loading {
position: fixed;
inset: 0;
z-index: 50;
display: grid;
place-items: center;
color: #9deeff;
background: #05070b;
font: 900 18px Arial, sans-serif;
letter-spacing: .22em;
}
</style>
</head>
<body>
<div id="loading">IGNITING VOLTAGE CRATER</div>
<div id="hud">
<div id="topbar">
<div id="arena" class="panel">Voltage Crater Arena</div>
<div id="clock" class="panel">02:00</div>
<div id="score" class="panel">SCORE 000000</div>
</div>
<div id="controls">DRIVE: WASD / ARROW KEYS • PHOTO MODE: P</div>
</div>
<div id="card">
<div id="cardInner">
<div id="cardMode">PHOTO MODE</div>
<h1 id="cardArena">Voltage Crater Arena</h1>
<div id="cardScore">SCORE 000000</div>
<div id="cardHint">PRESS P TO RETURN TO THE RALLY</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script>
(() => {
"use strict";
const ARENA_NAME = "Voltage Crater Arena";
const isDemo = location.hash === "#demo";
// This is the authoritative game state used by the clock, scoring and simulation.
const gameState = {
score: isDemo ? 5000 : 0,
timeLeft: isDemo ? 20 : 120,
paused: false,
ended: false,
simTime: 0,
scorePulse: 0
};
const arenaEl = document.getElementById("arena");
const clockEl = document.getElementById("clock");
const scoreEl = document.getElementById("score");
const card = document.getElementById("card");
const cardMode = document.getElementById("cardMode");
const cardArena = document.getElementById("cardArena");
const cardScore = document.getElementById("cardScore");
const cardHint = document.getElementById("cardHint");
const loading = document.getElementById("loading");
arenaEl.textContent = ARENA_NAME;
cardArena.textContent = ARENA_NAME;
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x09101a);
scene.fog = new THREE.FogExp2(0x09101a, 0.012);
const camera = new THREE.PerspectiveCamera(59, innerWidth / innerHeight, 0.1, 250);
camera.position.set(0, 11, -17);
const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
renderer.setPixelRatio(Math.min(devicePixelRatio, 1.75));
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;
document.body.insertBefore(renderer.domElement, document.body.firstChild);
const hemi = new THREE.HemisphereLight(0x8bc8ff, 0x402312, 2.25);
scene.add(hemi);
const flood = new THREE.DirectionalLight(0xffffff, 3.2);
flood.position.set(-22, 42, -18);
flood.castShadow = true;
flood.shadow.mapSize.set(2048, 2048);
flood.shadow.camera.left = -55;
flood.shadow.camera.right = 55;
flood.shadow.camera.top = 45;
flood.shadow.camera.bottom = -45;
scene.add(flood);
const rimLight = new THREE.DirectionalLight(0x40cfff, 1.8);
rimLight.position.set(35, 20, 28);
scene.add(rimLight);
const groundMaterial = new THREE.MeshStandardMaterial({
color: 0x4b3425,
roughness: 1,
metalness: 0
});
const ground = new THREE.Mesh(new THREE.PlaneGeometry(82, 57, 1, 1), groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);
const infield = new THREE.Mesh(
new THREE.RingGeometry(9, 34, 64),
new THREE.MeshStandardMaterial({ color: 0x5a3c27, roughness: 1, side: THREE.DoubleSide })
);
infield.rotation.x = -Math.PI / 2;
infield.scale.z = 0.67;
infield.position.y = 0.012;
infield.receiveShadow = true;
scene.add(infield);
function canvasSignTexture() {
const canvas = document.createElement("canvas");
canvas.width = 1024;
canvas.height = 220;
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0, 0, 1024, 0);
gradient.addColorStop(0, "#08101c");
gradient.addColorStop(.5, "#173145");
gradient.addColorStop(1, "#08101c");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 1024, 220);
ctx.strokeStyle = "#69ddff";
ctx.lineWidth = 12;
ctx.strokeRect(10, 10, 1004, 200);
ctx.shadowColor = "#25cfff";
ctx.shadowBlur = 24;
ctx.fillStyle = "#dffaff";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "900 72px Arial";
ctx.fillText("VOLTAGE CRATER", 512, 93);
ctx.shadowBlur = 8;
ctx.fillStyle = "#ffdc5f";
ctx.font = "900 36px Arial";
ctx.fillText("MONSTER RALLY", 512, 158);
const texture = new THREE.CanvasTexture(canvas);
texture.colorSpace = THREE.SRGBColorSpace;
return texture;
}
const signMaterial = new THREE.MeshBasicMaterial({ map: canvasSignTexture() });
for (const z of [-31.1, 31.1]) {
const sign = new THREE.Mesh(new THREE.PlaneGeometry(18, 3.9), signMaterial);
sign.position.set(0, 8.4, z);
sign.rotation.y = z > 0 ? Math.PI : 0;
scene.add(sign);
}
const standMaterialA = new THREE.MeshStandardMaterial({ color: 0x202b38, roughness: .82 });
const standMaterialB = new THREE.MeshStandardMaterial({ color: 0x344151, roughness: .82 });
const railMaterial = new THREE.MeshStandardMaterial({ color: 0xaab7c0, metalness: .7, roughness: .35 });
const standSegments = 80;
for (let i = 0; i < standSegments; i++) {
const a = i / standSegments * Math.PI * 2;
const x = Math.sin(a) * 40.6;
const z = Math.cos(a) * 28.5;
const stand = new THREE.Mesh(
new THREE.BoxGeometry(3.55, 2.5, 5.1),
i % 2 ? standMaterialA : standMaterialB
);
stand.position.set(x, 1.3, z);
stand.rotation.y = a;
stand.receiveShadow = true;
scene.add(stand);
if (i % 4 === 0) {
const rail = new THREE.Mesh(new THREE.BoxGeometry(3.5, .16, .16), railMaterial);
rail.position.set(Math.sin(a) * 37.9, 4.25, Math.cos(a) * 26.45);
rail.rotation.y = a;
scene.add(rail);
}
}
const crowdRows = 6;
const crowdColumns = 112;
const crowdCount = crowdRows * crowdColumns;
const bodyGeometry = new THREE.BoxGeometry(.32, .65, .26);
const headGeometry = new THREE.SphereGeometry(.18, 6, 5);
const bodyMaterial = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: .8 });
const headMaterial = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: .9 });
const crowdBodies = new THREE.InstancedMesh(bodyGeometry, bodyMaterial, crowdCount);
const crowdHeads = new THREE.InstancedMesh(headGeometry, headMaterial, crowdCount);
const dummy = new THREE.Object3D();
const crowdColors = [
new THREE.Color(0xf04455), new THREE.Color(0x32b7ff),
new THREE.Color(0xffcb38), new THREE.Color(0x55dd87),
new THREE.Color(0xd97cff), new THREE.Color(0xf3f5f7)
];
const skinColors = [
new THREE.Color(0x5c3828), new THREE.Color(0x8b5b3e),
new THREE.Color(0xc98b62), new THREE.Color(0xf0ba8d),
new THREE.Color(0x7c4934)
];
let crowdIndex = 0;
for (let row = 0; row < crowdRows; row++) {
for (let i = 0; i < crowdColumns; i++) {
const a = i / crowdColumns * Math.PI * 2 + (row % 2) * .018;
const rx = 38.5 + row * .92;
const rz = 26.5 + row * .64;
const x = Math.sin(a) * rx;
const z = Math.cos(a) * rz;
const y = 3.25 + row * .77 + Math.sin(i * 5.73 + row) * .08;
dummy.position.set(x, y, z);
dummy.rotation.set(0, a + Math.PI, Math.sin(i * 2.1) * .08);
dummy.scale.setScalar(.92 + ((i * 17 + row * 9) % 13) / 70);
dummy.updateMatrix();
crowdBodies.setMatrixAt(crowdIndex, dummy.matrix);
crowdBodies.setColorAt(crowdIndex, crowdColors[(i + row * 3) % crowdColors.length]);
dummy.position.y = y + .48;
dummy.scale.setScalar(1);
dummy.updateMatrix();
crowdHeads.setMatrixAt(crowdIndex, dummy.matrix);
crowdHeads.setColorAt(crowdIndex, skinColors[(i * 3 + row) % skinColors.length]);
crowdIndex++;
}
}
crowdBodies.instanceMatrix.needsUpdate = true;
crowdHeads.instanceMatrix.needsUpdate = true;
crowdBodies.castShadow = true;
scene.add(crowdBodies, crowdHeads);
const wallMaterial = new THREE.MeshStandardMaterial({
color: 0x86919a,
metalness: .35,
roughness: .55
});
for (let i = 0; i < 64; i++) {
const a = i / 64 * Math.PI * 2;
const wall = new THREE.Mesh(new THREE.BoxGeometry(3.55, 1.1, .45), wallMaterial);
wall.position.set(Math.sin(a) * 36.4, .55, Math.cos(a) * 24.2);
wall.rotation.y = a;
wall.castShadow = true;
wall.receiveShadow = true;
scene.add(wall);
}
const hills = [];
const hillMaterial = new THREE.MeshStandardMaterial({ color: 0x7a4e2b, roughness: 1 });
const hillSpecs = [
{ x: -18, z: -7, r: 6.3, h: 2.7 },
{ x: 16, z: 8, r: 5.6, h: 2.35 },
{ x: 4, z: -14, r: 4.7, h: 1.85 }
];
for (const spec of hillSpecs) {
const hill = new THREE.Mesh(new THREE.ConeGeometry(spec.r, spec.h, 28, 5), hillMaterial);
hill.position.set(spec.x, spec.h * .5 - .05, spec.z);
hill.scale.z = .72;
hill.rotation.y = spec.x;
hill.castShadow = true;
hill.receiveShadow = true;
scene.add(hill);
hills.push(spec);
}
const obstacles = [];
function addBarrier(x, z, rotation, length = 5.2) {
const group = new THREE.Group();
const concrete = new THREE.Mesh(
new THREE.BoxGeometry(1.1, 1.25, length),
new THREE.MeshStandardMaterial({ color: 0xc4bca7, roughness: .95 })
);
concrete.position.y = .63;
concrete.castShadow = true;
concrete.receiveShadow = true;
group.add(concrete);
for (const stripeZ of [-length * .3, length * .3]) {
const stripe = new THREE.Mesh(
new THREE.BoxGeometry(1.13, .35, .65),
new THREE.MeshStandardMaterial({ color: 0xe84c32, roughness: .8 })
);
stripe.position.set(0, .75, stripeZ);
group.add(stripe);
}
group.position.set(x, 0, z);
group.rotation.y = rotation;
scene.add(group);
obstacles.push({ x, z, radius: length * .45, kick: .72, type: "barrier" });
}
addBarrier(-4, 7, Math.PI / 2, 6);
addBarrier(23, -6, .45, 5.3);
addBarrier(-24, 12, -.55, 5.1);
function addTirePile(x, z, count) {
const group = new THREE.Group();
const tireMaterial = new THREE.MeshStandardMaterial({ color: 0x111315, roughness: .9 });
for (let i = 0; i < count; i++) {
const tire = new THREE.Mesh(new THREE.TorusGeometry(.7, .25, 8, 16), tireMaterial);
tire.rotation.x = Math.PI / 2 + (i % 2) * .1;
tire.rotation.z = i * .8;
tire.position.set(
Math.sin(i * 2.3) * .47,
.26 + Math.floor(i / 3) * .42,
Math.cos(i * 1.7) * .45
);
tire.castShadow = true;
group.add(tire);
}
group.position.set(x, 0, z);
scene.add(group);
obstacles.push({ x, z, radius: 1.55, kick: .48, type: "tires" });
}
addTirePile(-10, -16, 7);
addTirePile(10, 16, 8);
addTirePile(27, 11, 6);
addTirePile(-27, -10, 6);
const debrisMaterial = new THREE.MeshStandardMaterial({
color: 0x6f7680,
metalness: .7,
roughness: .48
});
for (let i = 0; i < 15; i++) {
const beam = new THREE.Mesh(new THREE.BoxGeometry(.28, .22, 1.7 + (i % 4) * .25), debrisMaterial);
const a = i * 2.399;
const radius = 8 + (i % 3) * 2.2;
beam.position.set(Math.sin(a) * radius, .13, Math.cos(a) * radius);
beam.rotation.set((i % 3) * .15, a * 1.7, (i % 2) * .18);
beam.castShadow = true;
scene.add(beam);
}
function makeWedgeGeometry() {
const profile = [
[-3.0, .62],
[-2.72, 1.38],
[-.75, 2.12],
[2.58, 1.16],
[3.08, .72]
];
const vertices = [];
for (const x of [-1.28, 1.28]) {
for (const p of profile) vertices.push(x, p[1], p[0]);
}
const indices = [
0,2,1, 0,3,2, 0,4,3,
5,6,7, 5,7,8, 5,8,9
];
for (let i = 0; i < profile.length; i++) {
const n = (i + 1) % profile.length;
indices.push(i, n, 5 + n, i, 5 + n, 5 + i);
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
geometry.setIndex(indices);
geometry.computeVertexNormals();
return geometry;
}
const wedgeGeometry = makeWedgeGeometry();
const wheelGeometry = new THREE.CylinderGeometry(.72, .72, .58, 16);
const tireMat = new THREE.MeshStandardMaterial({ color: 0x090a0b, roughness: .85 });
const hubMat = new THREE.MeshStandardMaterial({ color: 0xabb8c1, metalness: .88, roughness: .25 });
const windowMat = new THREE.MeshStandardMaterial({
color: 0x0b2434,
metalness: .45,
roughness: .22,
emissive: 0x06121c,
emissiveIntensity: .8
});
function createTruck(color, x, z, yaw, isPlayer, aiIndex) {
const root = new THREE.Group();
const visual = new THREE.Group();
root.add(visual);
const bodyMat = new THREE.MeshStandardMaterial({
color,
metalness: .83,
roughness: .27
});
const lower = new THREE.Mesh(new THREE.BoxGeometry(2.7, .72, 5.75), bodyMat);
lower.position.y = .88;
lower.castShadow = true;
visual.add(lower);
const wedge = new THREE.Mesh(wedgeGeometry, bodyMat);
wedge.position.y = .18;
wedge.castShadow = true;
visual.add(wedge);
const windshield = new THREE.Mesh(new THREE.PlaneGeometry(2.15, 1.05), windowMat);
windshield.position.set(0, 1.72, 1.59);
windshield.rotation.x = -1.05;
visual.add(windshield);
const rearGlass = windshield.clone();
rearGlass.position.z = -1.92;
rearGlass.position.y = 1.7;
rearGlass.rotation.x = 1.05;
visual.add(rearGlass);
const lightMat = new THREE.MeshBasicMaterial({ color: isPlayer ? 0xc9f7ff : 0xffe0a1 });
const light = new THREE.Mesh(new THREE.BoxGeometry(2.35, .12, .08), lightMat);
light.position.set(0, 1.18, 3.06);
visual.add(light);
const brakeMat = new THREE.MeshBasicMaterial({ color: 0xff2438 });
const brake = new THREE.Mesh(new THREE.BoxGeometry(2.25, .12, .08), brakeMat);
brake.position.set(0, 1.18, -3.06);
visual.add(brake);
for (const wx of [-1.48, 1.48]) {
for (const wz of [-2.02, 2.02]) {
const wheel = new THREE.Mesh(wheelGeometry, tireMat);
wheel.rotation.z = Math.PI / 2;
wheel.position.set(wx, .7, wz);
wheel.castShadow = true;
visual.add(wheel);
const hub = new THREE.Mesh(new THREE.CylinderGeometry(.3, .3, .61, 12), hubMat);
hub.rotation.z = Math.PI / 2;
hub.position.copy(wheel.position);
visual.add(hub);
}
}
root.position.set(x, 0, z);
root.rotation.y = yaw;
scene.add(root);
return {
root,
visual,
pos: new THREE.Vector2(x, z),
vel: new THREE.Vector2(),
yaw,
angularVelocity: 0,
radius: 2.25,
health: 100,
wrecked: false,
wreckTimer: 0,
wreckSide: 1,
isPlayer,
aiIndex,
phase: aiIndex * Math.PI * .5,
lane: aiIndex % 2 ? 1 : -1
};
}
// Exactly five rally trucks: one player and four independently steered rivals.
const trucks = [
createTruck(0xc8d1d7, 0, 13, Math.PI, true, 0),
createTruck(0xff394f, -18, 2, .65, false, 1),
createTruck(0x2bc9ff, 17, -5, -2.1, false, 2),
createTruck(0xffb62e, -10, -14, .2, false, 3),
createTruck(0x9e64ff, 11, 12, 2.8, false, 4)
];
const player = trucks[0];
const keys = Object.create(null);
addEventListener("keydown", event => {
if (event.code === "KeyP" && !event.repeat) {
gameState.paused = !gameState.paused;
updateCard();
event.preventDefault();
return;
}
if ([
"ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight",
"KeyW", "KeyA", "KeyS", "KeyD"
].includes(event.code)) {
keys[event.code] = true;
event.preventDefault();
}
});
addEventListener("keyup", event => {
keys[event.code] = false;
});
addEventListener("blur", () => {
for (const key in keys) keys[key] = false;
});
const collisionCooldowns = new Map();
const sparks = [];
const sparkGeometry = new THREE.SphereGeometry(.09, 5, 4);
const sparkMaterial = new THREE.MeshBasicMaterial({ color: 0xffd55c });
function spawnSparks(x, y, z, amount, strength) {
for (let i = 0; i < amount; i++) {
const mesh = new THREE.Mesh(sparkGeometry, sparkMaterial);
mesh.position.set(x, y, z);
scene.add(mesh);
sparks.push({
mesh,
life: .35 + Math.random() * .45,
velocity: new THREE.Vector3(
(Math.random() - .5) * strength,
2 + Math.random() * strength * .55,
(Math.random() - .5) * strength
)
});
}
}
function hillHeight(x, z) {
let height = 0;
for (const hill of hills) {
const dx = (x - hill.x) / hill.r;
const dz = (z - hill.z) / (hill.r * .72);
const d = Math.sqrt(dx * dx + dz * dz);
if (d < 1) height = Math.max(height, hill.h * Math.pow(1 - d, 1.65));
}
return height;
}
function wrapAngle(angle) {
while (angle > Math.PI) angle -= Math.PI * 2;
while (angle < -Math.PI) angle += Math.PI * 2;
return angle;
}
function applyDrive(truck, throttle, steering, dt, power = 19) {
if (truck.wrecked) return;
const forward = new THREE.Vector2(Math.sin(truck.yaw), Math.cos(truck.yaw));
const forwardSpeed = truck.vel.dot(forward);
const steeringGrip = Math.min(1.25, .35 + Math.abs(forwardSpeed) * .055);
truck.yaw += steering * steeringGrip * dt * (forwardSpeed >= -1 ? 1 : -1);
truck.yaw += truck.angularVelocity * dt;
truck.angularVelocity *= Math.pow(.22, dt);
forward.set(Math.sin(truck.yaw), Math.cos(truck.yaw));
truck.vel.addScaledVector(forward, throttle * power * dt);
const lateral = new THREE.Vector2(forward.y, -forward.x);
const sideSpeed = truck.vel.dot(lateral);
truck.vel.addScaledVector(lateral, -sideSpeed * Math.min(1, dt * 3.4));
const damping = Math.pow(throttle ? .79 : .48, dt);
truck.vel.multiplyScalar(damping);
const maxSpeed = 23;
if (truck.vel.length() > maxSpeed) truck.vel.setLength(maxSpeed);
}
function updatePlayer(dt) {
const throttle =
(keys.ArrowUp || keys.KeyW ? 1 : 0) -
(keys.ArrowDown || keys.KeyS ? 1 : 0);
const steering =
(keys.ArrowLeft || keys.KeyA ? 1 : 0) -
(keys.ArrowRight || keys.KeyD ? 1 : 0);
applyDrive(player, throttle, steering, dt, 22);
}
function updateAI(truck, dt) {
if (truck.wrecked) return;
const index = truck.aiIndex - 1;
const direction = index % 2 === 0 ? 1 : -1;
const routeAngle = truck.phase + gameState.simTime * (.14 + index * .012) * direction;
const routeX = Math.sin(routeAngle) * (24 + index * 1.7);
const routeZ = Math.cos(routeAngle) * (14.5 + (index % 2) * 3.1);
const target = new THREE.Vector2(routeX, routeZ);
if ((index + Math.floor(gameState.simTime / 7)) % 3 === 0) {
target.lerp(player.pos, .28);
}
const separation = new THREE.Vector2();
for (const other of trucks) {
if (other === truck) continue;
const away = truck.pos.clone().sub(other.pos);
const distance = away.length();
if (distance > .001 && distance < 8) {
separation.addScaledVector(away.normalize(), (8 - distance) * .85);
}
}
target.add(separation);
const desired = target.sub(truck.pos);
const desiredYaw = Math.atan2(desired.x, desired.y);
const turnError = wrapAngle(desiredYaw - truck.yaw);
const steering = THREE.MathUtils.clamp(turnError * 1.65, -1, 1);
const forward = new THREE.Vector2(Math.sin(truck.yaw), Math.cos(truck.yaw));
const aligned = forward.dot(desired.normalize());
const throttle = aligned < -.25 ? -.45 : THREE.MathUtils.clamp(.68 + aligned * .38, .25, 1);
applyDrive(truck, throttle, steering, dt, 18.3 + index * .35);
}
function collideWithArena(truck) {
const rx = 33.8;
const rz = 21.8;
const q = truck.pos.x * truck.pos.x / (rx * rx) +
truck.pos.y * truck.pos.y / (rz * rz);
if (q > 1) {
const normal = new THREE.Vector2(
truck.pos.x / (rx * rx),
truck.pos.y / (rz * rz)
).normalize();
const scale = .985 / Math.sqrt(q);
truck.pos.multiplyScalar(scale);
const outward = truck.vel.dot(normal);
if (outward > 0) {
truck.vel.addScaledVector(normal, -outward * 1.65);
truck.angularVelocity += (Math.random() - .5) * .9;
if (outward > 5) spawnSparks(truck.pos.x, 1, truck.pos.y, 5, outward);
}
}
}
function collideWithObstacles(truck) {
for (const obstacle of obstacles) {
const delta = new THREE.Vector2(
truck.pos.x - obstacle.x,
truck.pos.y - obstacle.z
);
const minDistance = truck.radius + obstacle.radius;
const distance = delta.length();
if (distance < minDistance) {
const normal = distance > .001 ? delta.multiplyScalar(1 / distance) : new THREE.Vector2(1, 0);
truck.pos.addScaledVector(normal, minDistance - distance + .02);
const inward = truck.vel.dot(normal);
if (inward < 0) {
const impact = -inward;
truck.vel.addScaledVector(normal, impact * (1.3 + obstacle.kick));
truck.vel.multiplyScalar(.78);
truck.angularVelocity += (Math.random() - .5) * impact * .16;
if (impact > 3.5) {
spawnSparks(truck.pos.x, .8, truck.pos.y, Math.min(9, 3 + impact | 0), impact);
}
}
}
}
}
function collideTrucks() {
for (let i = 0; i < trucks.length; i++) {
for (let j = i + 1; j < trucks.length; j++) {
const a = trucks[i];
const b = trucks[j];
const delta = b.pos.clone().sub(a.pos);
const minimum = a.radius + b.radius;
const distance = delta.length();
if (distance >= minimum) continue;
const normal = distance > .001 ? delta.multiplyScalar(1 / distance) : new THREE.Vector2(1, 0);
const penetration = minimum - distance;
a.pos.addScaledVector(normal, -penetration * .5);
b.pos.addScaledVector(normal, penetration * .5);
const relativeVelocity = b.vel.clone().sub(a.vel);
const normalSpeed = relativeVelocity.dot(normal);
const closingSpeed = Math.max(0, -normalSpeed);
if (normalSpeed < 0) {
const restitution = .58;
const impulse = -(1 + restitution) * normalSpeed / 2;
a.vel.addScaledVector(normal, -impulse);
b.vel.addScaledVector(normal, impulse);
const tangent = new THREE.Vector2(-normal.y, normal.x);
const tangentialSpeed = relativeVelocity.dot(tangent);
a.angularVelocity -= tangentialSpeed * .035 + closingSpeed * .045;
b.angularVelocity += tangentialSpeed * .035 - closingSpeed * .045;
}
if (closingSpeed > 2.6) {
const midpointX = (a.pos.x + b.pos.x) * .5;
const midpointZ = (a.pos.y + b.pos.y) * .5;
spawnSparks(midpointX, 1.2, midpointZ, Math.min(15, 5 + closingSpeed | 0), closingSpeed);
const damage = closingSpeed * 7.5;
a.health -= damage;
b.health -= damage;
const key = i + ":" + j;
const lastHit = collisionCooldowns.get(key) ?? -99;
if (gameState.simTime - lastHit > .5) {
collisionCooldowns.set(key, gameState.simTime);
if (a.isPlayer || b.isPlayer) {
const rival = a.isPlayer ? b : a;
const ramScore = Math.round(closingSpeed * 115);
gameState.score += ramScore;
gameState.scorePulse = .24;
rival.angularVelocity += (a.isPlayer ? 1 : -1) * closingSpeed * .075;
}
}
if (a.health <= 0 && !a.wrecked) wreckTruck(a, normal.x || 1);
if (b.health <= 0 && !b.wrecked) wreckTruck(b, -normal.x || -1);
}
}
}
}
function wreckTruck(truck, side) {
truck.wrecked = true;
truck.wreckTimer = 3.8;
truck.wreckSide = side >= 0 ? 1 : -1;
truck.angularVelocity += truck.wreckSide * 2;
truck.vel.multiplyScalar(.6);
if (!truck.isPlayer) {
gameState.score += 1000;
gameState.scorePulse = .35;
}
}
function updateTrucks(dt) {
updatePlayer(dt);
for (let i = 1; i < trucks.length; i++) updateAI(trucks[i], dt);
for (const truck of trucks) {
if (truck.wrecked) {
truck.wreckTimer -= dt;
truck.vel.multiplyScalar(Math.pow(.15, dt));
truck.yaw += truck.angularVelocity * dt;
truck.angularVelocity *= Math.pow(.3, dt);
if (truck.wreckTimer <= 0) {
truck.wrecked = false;
truck.health = 68;
truck.angularVelocity = 0;
}
}
truck.pos.addScaledVector(truck.vel, dt);
collideWithArena(truck);
collideWithObstacles(truck);
}
collideTrucks();
for (const truck of trucks) {
const h = hillHeight(truck.pos.x, truck.pos.y);
const hx = hillHeight(truck.pos.x + .35, truck.pos.y) -
hillHeight(truck.pos.x - .35, truck.pos.y);
const hz = hillHeight(truck.pos.x, truck.pos.y + .35) -
hillHeight(truck.pos.x, truck.pos.y - .35);
truck.root.position.set(truck.pos.x, h, truck.pos.y);
truck.root.rotation.y = truck.yaw;
const wreckRoll = truck.wrecked ? truck.wreckSide * 1.22 : -hx * .11;
truck.visual.rotation.z = THREE.MathUtils.lerp(truck.visual.rotation.z, wreckRoll, .12);
truck.visual.rotation.x = THREE.MathUtils.lerp(truck.visual.rotation.x, hz * .1, .13);
}
}
function updateSparks(dt) {
for (let i = sparks.length - 1; i >= 0; i--) {
const spark = sparks[i];
spark.life -= dt;
spark.velocity.y -= 9.8 * dt;
spark.mesh.position.addScaledVector(spark.velocity, dt);
spark.mesh.scale.setScalar(Math.max(.1, spark.life * 1.7));
if (spark.life <= 0) {
scene.remove(spark.mesh);
sparks.splice(i, 1);
}
}
}
const cameraTarget = new THREE.Vector3();
const desiredCamera = new THREE.Vector3();
function updateCamera(dt) {
const forward = new THREE.Vector3(Math.sin(player.yaw), 0, Math.cos(player.yaw));
desiredCamera.set(player.pos.x, 0, player.pos.y)
.addScaledVector(forward, -14.5)
.add(new THREE.Vector3(0, 8.2, 0));
camera.position.lerp(desiredCamera, 1 - Math.pow(.002, dt));
cameraTarget.set(player.pos.x, 1.4, player.pos.y).addScaledVector(forward, 5.2);
camera.lookAt(cameraTarget);
}
function formatTime(seconds) {
const total = Math.max(0, Math.ceil(seconds));
const minutes = Math.floor(total / 60);
const remainder = total % 60;
return String(minutes).padStart(2, "0") + ":" + String(remainder).padStart(2, "0");
}
function updateHUD() {
clockEl.textContent = formatTime(gameState.timeLeft);
scoreEl.textContent = "SCORE " + String(gameState.score).padStart(6, "0");
scoreEl.classList.toggle("hit", gameState.scorePulse > 0);
cardScore.textContent = "SCORE " + String(gameState.score).padStart(6, "0");
}
function updateCard() {
if (gameState.paused) {
cardMode.textContent = "PHOTO MODE";
cardHint.textContent = "PRESS P TO RETURN TO THE RALLY";
card.classList.add("show");
} else if (gameState.ended) {
cardMode.textContent = "RALLY COMPLETE";
cardHint.textContent = "FINAL SCORE";
card.classList.add("show");
} else {
card.classList.remove("show");
}
updateHUD();
}
function stepSimulation(dt) {
gameState.simTime += dt;
gameState.timeLeft = Math.max(0, gameState.timeLeft - dt);
gameState.scorePulse = Math.max(0, gameState.scorePulse - dt);
updateTrucks(dt);
updateSparks(dt);
updateCamera(dt);
updateHUD();
if (gameState.timeLeft <= 0) {
gameState.ended = true;
updateCard();
}
}
updateCamera(1);
updateHUD();
let previousTime = performance.now();
function frame(now) {
requestAnimationFrame(frame);
const dt = Math.min(.033, Math.max(0, (now - previousTime) / 1000));
previousTime = now;
if (!gameState.paused && !gameState.ended) {
stepSimulation(dt);
}
renderer.render(scene, camera);
}
addEventListener("resize", () => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 1.75));
});
loading.remove();
requestAnimationFrame(frame);
})();
</script>
</body>
</html>
The notes
- Five trucks: The truck array is created with one player and exactly four AI rivals; each rival has a different route phase, lane radius, direction, speed bias, and short-range separation force so they circulate and attack without collapsing into one moving wall.
- Demo mode:
const gameState = { score: isDemo ? 5000 : 0, timeLeft: isDemo ? 20 : 120, ... };initializes the authoritative score and countdown consumed by simulation and HUD updates, so#demochanges real game state rather than drawing replacement text. - Photo mode: The render loop continues so the photo card remains visible, but the entire simulation step is skipped: the clock, input-driven physics, AI, collisions, wreck timers, camera movement, and spark particles all freeze.
- Collisions: Trucks use circular planar bounds with penetration correction and a restitution impulse computed from relative velocity along the contact normal; tangential velocity adds opposing angular impulses, impact speed determines damage and score, and depleted health triggers a timed wreck state. Arena walls and obstacles similarly project trucks out of overlap and reflect the inward velocity component.
Attachments
openai/gpt-5.6-sol-pro — page