Run Detail
completedgrok-4.7Recorded 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
723.3s
Total Tokens
64,220
Input Tokens
1,948
Output Tokens
62,272
Reasoning Tokens
50,765
Reasoning Effort
default
Cached Input Tokens
1,152
Est. Cost
$0.3006
Started
9/22/2026, 4:34:43 AM
OR Provider
xAI
Finish Reason
stop
Generation ID
gen-1790051683-4gSfwg7bzzlsv3cl25nH
Turns (1)
Turn #1
1,948 in62,272 out50,765 reasoning1,152 cached64,220 total723.3s
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
Stainless Bowl Rally is a night smash in a tight steel stadium: five angular Cybertrucks, a full-circle crowd, and hills, barriers, crates, and boulders under the lights.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stainless Bowl Rally</title>
<style>
html, body { margin: 0; height: 100%; background: #07090e; overflow: hidden; }
canvas { display: block; }
#hud {
position: fixed; inset: 0; pointer-events: none; z-index: 2;
font-family: Impact, "Arial Black", sans-serif;
color: #f4f7fb; letter-spacing: 1px; text-shadow: 0 2px 0 #000;
}
#arena { position: absolute; top: 18px; left: 22px; font-size: 30px; color: #ffb703; }
#score { position: absolute; top: 18px; right: 22px; font-size: 30px; }
#clock-wrap {
position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
text-align: center; background: rgba(0,0,0,.5);
border: 2px solid #ffb703; padding: 4px 18px 6px;
}
#clock-label { font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: 3px; color: #ffb703; }
#clock { font-size: 40px; line-height: 1; }
#controls {
position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
font-family: system-ui, sans-serif; font-size: 14px; letter-spacing: 2px;
background: rgba(0,0,0,.55); padding: 8px 14px; border: 1px solid rgba(255,183,3,.45);
}
#photo {
display: none; position: fixed; inset: 0; z-index: 5;
background: rgba(4,6,12,.5); align-items: center; justify-content: center;
}
#photo.on { display: flex; }
#photo-card {
background: rgba(6,8,14,.88); border: 4px solid #ffb703;
padding: 32px 56px; text-align: center; min-width: 340px;
font-family: Impact, "Arial Black", sans-serif; color: #fff;
}
#photo-name { font-size: 64px; color: #ffb703; letter-spacing: 2px; }
#photo-score { font-size: 42px; margin-top: 6px; }
#photo-hint {
margin-top: 16px; font-family: system-ui, sans-serif;
font-size: 13px; letter-spacing: 3px; color: #ddd;
}
</style>
</head>
<body tabindex="0">
<div id="hud">
<div id="arena">STAINLESS BOWL</div>
<div id="score">SCORE 0</div>
<div id="clock-wrap">
<div id="clock-label">TIME</div>
<div id="clock">1:30</div>
</div>
<div id="controls">DRIVE: WASD / ARROWS · P PHOTO</div>
</div>
<div id="photo">
<div id="photo-card">
<div id="photo-name"></div>
<div id="photo-score"></div>
<div id="photo-hint">P TO RESUME</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(function () {
if (!window.THREE) {
var warn = document.createElement('div');
warn.textContent = 'three.js failed to load from the CDN. Reload when the network is up.';
warn.style.cssText = 'color:#fff;font:16px/1.4 sans-serif;padding:24px';
document.body.appendChild(warn);
return;
}
var ARENA = 'STAINLESS BOWL';
var state = { score: 0, timeLeft: 90, photo: false };
if (location.href.endsWith('#demo')) {
state.score = 5000;
state.timeLeft = 20;
}
var keys = {};
var trucks = [];
var obstacles = [];
var hills = [];
var sparks = [];
var shake = 0;
var player = null;
var camX = 0, camY = 18, camZ = 28;
var arenaEl = document.getElementById('arena');
var scoreEl = document.getElementById('score');
var clockEl = document.getElementById('clock');
var photoEl = document.getElementById('photo');
var photoName = document.getElementById('photo-name');
var photoScore = document.getElementById('photo-score');
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x0b1020);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x0b1020, 48, 115);
var camera = new THREE.PerspectiveCamera(58, window.innerWidth / window.innerHeight, 0.1, 220);
scene.add(new THREE.HemisphereLight(0x9eb4d4, 0x2a241c, 0.62));
var sun = new THREE.DirectionalLight(0xfff0d2, 0.72);
sun.position.set(24, 42, 10);
scene.add(sun);
function makeFloorTexture() {
var c = document.createElement('canvas');
c.width = 512;
c.height = 512;
var g = c.getContext('2d');
g.fillStyle = '#3c424a';
g.fillRect(0, 0, 512, 512);
var i;
for (i = 0; i < 3500; i++) {
g.fillStyle = (i % 2) ? '#343a42' : '#4a515a';
g.fillRect(Math.random() * 512, Math.random() * 512, 2, 2);
}
g.strokeStyle = '#d4a017';
g.lineWidth = 8;
g.beginPath();
g.arc(256, 256, 168, 0, Math.PI * 2);
g.stroke();
g.strokeStyle = '#c0392b';
g.lineWidth = 12;
g.beginPath();
g.arc(256, 256, 228, 0, Math.PI * 2);
g.stroke();
g.fillStyle = '#9aa3ad';
g.font = 'bold 28px sans-serif';
g.textAlign = 'center';
g.fillText('STAINLESS BOWL', 256, 268);
var tex = new THREE.CanvasTexture(c);
return tex;
}
var floor = new THREE.Mesh(
new THREE.CircleGeometry(33, 64),
new THREE.MeshLambertMaterial({ map: makeFloorTexture() })
);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);
var apron = new THREE.Mesh(
new THREE.RingGeometry(33, 40, 64),
new THREE.MeshLambertMaterial({ color: 0x23272e, side: THREE.DoubleSide })
);
apron.rotation.x = -Math.PI / 2;
apron.position.y = 0.01;
scene.add(apron);
var curb = new THREE.Mesh(
new THREE.TorusGeometry(33.2, 0.28, 8, 48),
new THREE.MeshLambertMaterial({ color: 0xc0392b })
);
curb.rotation.x = Math.PI / 2;
curb.position.y = 0.28;
scene.add(curb);
var wall = new THREE.Mesh(
new THREE.CylinderGeometry(52, 52, 16, 64, 1, true),
new THREE.MeshLambertMaterial({ color: 0x141820, side: THREE.BackSide })
);
wall.position.y = 7;
scene.add(wall);
var tier;
for (tier = 0; tier < 5; tier++) {
var rad = 41.2 + tier * 1.35;
var deck = new THREE.Mesh(
new THREE.RingGeometry(rad - 0.75, rad + 0.75, 64),
new THREE.MeshLambertMaterial({ color: 0x2c333c, side: THREE.DoubleSide })
);
deck.rotation.x = -Math.PI / 2;
deck.position.y = 0.28 + tier * 0.72;
scene.add(deck);
}
var palette = [0xc0392b, 0x2471a3, 0xf4d03f, 0xf5f5f5, 0x8e44ad, 0x148f77, 0xe67e22, 0x2c3e50];
var personGeo = new THREE.BoxGeometry(0.42, 1.15, 0.36);
var dummy = new THREE.Object3D();
var ci, n, im, a, personRad;
for (ci = 0; ci < palette.length; ci++) {
n = 56;
im = new THREE.InstancedMesh(personGeo, new THREE.MeshLambertMaterial({ color: palette[ci] }), n);
for (i = 0; i < n; i++) {
tier = i % 5;
a = (i / n) * Math.PI * 2 + ci * 0.11;
personRad = 41.2 + tier * 1.35;
dummy.position.set(Math.cos(a) * personRad, 0.95 + tier * 0.72, Math.sin(a) * personRad);
dummy.rotation.set(0, -a, 0);
dummy.scale.set(0.85 + (i % 3) * 0.12, 0.85 + (i % 4) * 0.08, 0.9);
dummy.updateMatrix();
im.setMatrixAt(i, dummy.matrix);
}
im.instanceMatrix.needsUpdate = true;
scene.add(im);
}
function bannerTexture() {
var c = document.createElement('canvas');
c.width = 512;
c.height = 128;
var g = c.getContext('2d');
g.fillStyle = '#12141a';
g.fillRect(0, 0, 512, 128);
g.fillStyle = '#ffb703';
g.font = 'bold 52px sans-serif';
g.textAlign = 'center';
g.textBaseline = 'middle';
g.fillText('STAINLESS BOWL', 256, 64);
return new THREE.CanvasTexture(c);
}
var bannerMat = new THREE.MeshLambertMaterial({ map: bannerTexture(), side: THREE.DoubleSide });
for (i = 0; i < 6; i++) {
a = (i / 6) * Math.PI * 2;
var banner = new THREE.Mesh(new THREE.PlaneGeometry(10, 2.3), bannerMat);
banner.position.set(Math.cos(a) * 38, 5.2, Math.sin(a) * 38);
banner.lookAt(0, 5.2, 0);
scene.add(banner);
}
for (i = 0; i < 4; i++) {
a = i * Math.PI / 2 + 0.35;
var lx = Math.cos(a) * 34;
var lz = Math.sin(a) * 34;
var pole = new THREE.Mesh(new THREE.BoxGeometry(0.35, 9, 0.35), new THREE.MeshLambertMaterial({ color: 0x6e7680 }));
pole.position.set(lx, 4.5, lz);
scene.add(pole);
var head = new THREE.Mesh(new THREE.BoxGeometry(1.5, 0.28, 0.5), new THREE.MeshLambertMaterial({ color: 0xffe7a8, emissive: 0x665522 }));
head.position.set(lx, 9, lz);
scene.add(head);
var pl = new THREE.PointLight(0xfff1cc, 0.55, 52);
pl.position.set(lx, 9, lz);
scene.add(pl);
}
function addHill(x, z, r, h) {
hills.push({ x: x, z: z, r: r, h: h });
var mesh = new THREE.Mesh(
new THREE.SphereGeometry(1, 18, 12),
new THREE.MeshLambertMaterial({ color: 0x6d7344 })
);
mesh.scale.set(r, h, r);
mesh.position.set(x, 0, z);
scene.add(mesh);
}
addHill(0, 18, 6, 2.4);
addHill(-18, -6, 7, 2.8);
addHill(18, 4, 5.5, 2.2);
addHill(2, -16, 6, 2.5);
addHill(-8, 8, 4.5, 1.7);
function groundHeight(x, z) {
var h = 0;
var i, hill, dx, dz, d, u, s;
for (i = 0; i < hills.length; i++) {
hill = hills[i];
dx = x - hill.x;
dz = z - hill.z;
d = Math.sqrt(dx * dx + dz * dz);
if (d < hill.r) {
u = d / hill.r;
s = Math.sqrt(1 - u * u) * hill.h;
if (s > h) h = s;
}
}
return h;
}
function sampleSlope(x, z) {
var e = 0.75;
return {
x: (groundHeight(x + e, z) - groundHeight(x - e, z)) / (2 * e),
z: (groundHeight(x, z + e) - groundHeight(x, z - e)) / (2 * e)
};
}
function addBox(kind, x, z, hx, hz, hy, color) {
var mesh = new THREE.Mesh(
new THREE.BoxGeometry(hx * 2, hy * 2, hz * 2),
new THREE.MeshLambertMaterial({ color: color })
);
var y = groundHeight(x, z) + hy;
mesh.position.set(x, y, z);
if (kind === 'barrier') {
var stripe = new THREE.Mesh(
new THREE.BoxGeometry(hx * 2 * 0.28, hy * 0.55, hz * 2 + 0.08),
new THREE.MeshLambertMaterial({ color: 0xff7a18 })
);
stripe.position.y = hy * 0.2;
mesh.add(stripe);
} else {
var band = new THREE.Mesh(
new THREE.BoxGeometry(hx * 2 + 0.06, hy * 0.32, hz * 2 + 0.06),
new THREE.MeshLambertMaterial({ color: 0x4a2e1c })
);
mesh.add(band);
}
scene.add(mesh);
obstacles.push({ shape: 'aabb', x: x, z: z, hx: hx, hz: hz, mesh: mesh, baseY: y, shake: 0, cd: 0 });
}
function addBoulder(x, z, r) {
var mesh = new THREE.Mesh(
new THREE.SphereGeometry(r, 10, 8),
new THREE.MeshLambertMaterial({ color: 0x8a9098 })
);
var y = groundHeight(x, z) + r * 0.55;
mesh.position.set(x, y, z);
mesh.scale.y = 0.78;
scene.add(mesh);
obstacles.push({ shape: 'circle', x: x, z: z, radius: r * 0.85, mesh: mesh, baseY: y, shake: 0, cd: 0 });
}
addBox('barrier', 0, 11, 2.4, 0.45, 0.55, 0xb7b1a8);
addBox('barrier', 10, -7, 0.45, 2.2, 0.55, 0xb7b1a8);
addBox('barrier', -15, 3, 2.2, 0.45, 0.55, 0xb7b1a8);
addBox('barrier', 21, -8, 0.45, 2.0, 0.55, 0xb7b1a8);
addBox('barrier', -7, -18, 2.3, 0.45, 0.55, 0xb7b1a8);
addBox('barrier', 14, 16, 2.0, 0.45, 0.55, 0xb7b1a8);
addBox('barrier', -21, -12, 0.45, 2.1, 0.55, 0xb7b1a8);
addBox('crate', 5, 4, 0.7, 0.7, 0.7, 0xc2652a);
addBox('crate', 6.6, 5.2, 0.55, 0.55, 0.55, 0xa34e22);
addBox('crate', -4, -4, 0.75, 0.75, 0.75, 0xc2652a);
addBox('crate', 11, -10, 0.65, 0.65, 0.65, 0xd4783a);
addBox('crate', -11, 15, 0.7, 0.7, 0.7, 0xc2652a);
addBox('crate', -16, -16, 0.6, 0.6, 0.8, 0xa34e22);
addBox('crate', 8, 18, 0.7, 0.7, 0.6, 0xc2652a);
addBox('crate', 19, 8, 0.55, 0.55, 0.55, 0xd4783a);
addBoulder(-4, 10, 1.15);
addBoulder(9, 2, 1.3);
addBoulder(-14, -8, 1.2);
addBoulder(6, 14, 1.05);
addBoulder(18, -14, 1.35);
addBoulder(-20, 12, 1.1);
var sparkGeo = new THREE.BoxGeometry(0.16, 0.16, 0.16);
var sparkMat = new THREE.MeshLambertMaterial({ color: 0xffe08a, emissive: 0xff8800 });
for (i = 0; i < 48; i++) {
var sm = new THREE.Mesh(sparkGeo, sparkMat);
sm.visible = false;
scene.add(sm);
sparks.push({ mesh: sm, vx: 0, vy: 0, vz: 0, life: 0 });
}
function spawnSparks(x, y, z) {
var made = 0;
var s;
for (var i = 0; i < sparks.length && made < 8; i++) {
s = sparks[i];
if (s.life > 0) continue;
s.life = 0.32 + Math.random() * 0.22;
s.mesh.visible = true;
s.mesh.position.set(x, y, z);
s.vx = (Math.random() - 0.5) * 9;
s.vy = 2 + Math.random() * 5;
s.vz = (Math.random() - 0.5) * 9;
made++;
}
}
function buildTruck(color, isPlayer) {
var group = new THREE.Group();
group.rotation.order = 'YXZ';
var bodyMat = new THREE.MeshLambertMaterial({ color: isPlayer ? 0xd7dee4 : color, emissive: 0x000000 });
var dark = new THREE.MeshLambertMaterial({ color: 0x141414 });
var glass = new THREE.MeshLambertMaterial({ color: 0x1b2836, emissive: 0x0c1824 });
var body = new THREE.Mesh(new THREE.BoxGeometry(2.45, 0.78, 4.6), bodyMat);
body.position.y = 1.22;
group.add(body);
var nose = new THREE.Mesh(new THREE.BoxGeometry(2.3, 0.42, 1.5), bodyMat);
nose.position.set(0, 1.42, 1.85);
nose.rotation.x = -0.55;
group.add(nose);
var cab = new THREE.Mesh(new THREE.BoxGeometry(2.15, 0.62, 1.35), glass);
cab.position.set(0, 1.72, 0.35);
cab.rotation.x = 0.22;
group.add(cab);
var bed = new THREE.Mesh(new THREE.BoxGeometry(2.35, 0.28, 1.7), bodyMat);
bed.position.set(0, 1.55, -1.25);
group.add(bed);
var lampMat = new THREE.MeshLambertMaterial({ color: 0xfff6d0, emissive: isPlayer ? 0x9fdfff : 0xffcc77 });
var lampGeo = new THREE.BoxGeometry(0.28, 0.14, 0.08);
var lampL = new THREE.Mesh(lampGeo, lampMat);
lampL.position.set(-0.7, 1.25, 2.35);
var lampR = new THREE.Mesh(lampGeo, lampMat);
lampR.position.set(0.7, 1.25, 2.35);
group.add(lampL);
group.add(lampR);
var barMat = new THREE.MeshLambertMaterial({
color: isPlayer ? 0x7fe7ff : 0xff5533,
emissive: isPlayer ? 0x1aa8cc : 0xaa2200
});
for (var b = 0; b < 4; b++) {
var bulb = new THREE.Mesh(new THREE.BoxGeometry(0.22, 0.16, 0.16), barMat);
bulb.position.set(-0.55 + b * 0.36, 2.12, -0.15);
group.add(bulb);
}
if (isPlayer) {
var ant = new THREE.Mesh(
new THREE.BoxGeometry(0.08, 1.5, 0.08),
new THREE.MeshLambertMaterial({ color: 0x00e5ff, emissive: 0x00aac8 })
);
ant.position.set(0, 2.7, -0.5);
group.add(ant);
}
var wheels = [];
var wGeo = new THREE.CylinderGeometry(0.68, 0.68, 0.42, 12);
var positions = [[-1.28, 0.68, 1.45], [1.28, 0.68, 1.45], [-1.28, 0.68, -1.45], [1.28, 0.68, -1.45]];
for (var w = 0; w < positions.length; w++) {
var axle = new THREE.Group();
axle.position.set(positions[w][0], positions[w][1], positions[w][2]);
axle.rotation.z = Math.PI / 2;
var wheel = new THREE.Mesh(wGeo, dark);
axle.add(wheel);
group.add(axle);
wheels.push(wheel);
}
scene.add(group);
return { group: group, wheels: wheels, bodyMat: bodyMat };
}
var starts = [
{ x: 0, z: 0, h: 0, color: 0xd7dee4, player: true },
{ x: 15, z: 6, h: 2.4, color: 0xe23d3d, orbitR: 10, orbitW: 0.36, lane: -4, aggro: 0.28, wanderRate: 0.7, dive: 1.4 },
{ x: -14, z: 9, h: -0.8, color: 0x2f6fed, orbitR: 16, orbitW: -0.3, lane: 3.5, aggro: 0.34, wanderRate: 1.05, dive: 3.1 },
{ x: -10, z: -14, h: 0.6, color: 0xf0a202, orbitR: 12, orbitW: 0.44, lane: -1.5, aggro: 0.42, wanderRate: 0.55, dive: 4.6 },
{ x: 13, z: -12, h: 2.7, color: 0xb44cff, orbitR: 20, orbitW: -0.24, lane: 5, aggro: 0.22, wanderRate: 0.9, dive: 2.3 }
];
function makeSim(start) {
var built = buildTruck(start.color, !!start.player);
var speed0 = start.player ? 0 : 6;
var truck = {
group: built.group,
wheels: built.wheels,
bodyMat: built.bodyMat,
x: start.x,
z: start.z,
heading: start.h,
vx: Math.sin(start.h) * speed0,
vz: Math.cos(start.h) * speed0,
speed: speed0,
radius: 2.2,
invMass: 1,
isPlayer: !!start.player,
wreck: 0,
wreckSpin: 0,
hitCd: 0,
phase: start.h,
orbitR: start.orbitR || 0,
orbitW: start.orbitW || 0,
lane: start.lane || 0,
aggro: start.aggro || 0,
wander: start.h * 2,
wanderRate: start.wanderRate || 0,
dive: start.dive || 0
};
trucks.push(truck);
return truck;
}
for (i = 0; i < starts.length; i++) makeSim(starts[i]);
player = trucks[0];
function playerInput() {
var throttle = 0;
var steer = 0;
if (keys.KeyW || keys.ArrowUp) throttle += 1;
if (keys.KeyS || keys.ArrowDown) throttle -= 0.75;
if (keys.KeyA || keys.ArrowLeft) steer -= 1;
if (keys.KeyD || keys.ArrowRight) steer += 1;
return { throttle: throttle, steer: steer };
}
function aiControls(truck, dt) {
truck.phase += truck.orbitW * dt;
truck.wander += truck.wanderRate * dt;
truck.dive -= dt;
var aggro = truck.aggro;
if (truck.dive < 0) {
aggro = 0.9;
if (truck.dive < -1.4) truck.dive = 3.5 + Math.random() * 3;
}
var tx = Math.cos(truck.phase) * truck.orbitR + Math.cos(truck.wander) * 3.5;
var tz = Math.sin(truck.phase) * truck.orbitR + Math.sin(truck.wander * 0.85) * 3.5;
tx = tx * (1 - aggro) + player.x * aggro;
tz = tz * (1 - aggro) + player.z * aggro;
var sx = 0;
var sz = 0;
var near = 0;
var o, dx, dz, d2, d, w;
for (var i = 0; i < trucks.length; i++) {
o = trucks[i];
if (o === truck) continue;
dx = truck.x - o.x;
dz = truck.z - o.z;
d2 = dx * dx + dz * dz;
if (d2 < 121 && d2 > 0.04) {
d = Math.sqrt(d2);
w = (11 - d) / d;
sx += dx * w;
sz += dz * w;
if (d < 7) near++;
}
}
tx += sx * 4 + (-Math.cos(truck.heading)) * truck.lane;
tz += sz * 4 + Math.sin(truck.heading) * truck.lane;
var desired = Math.atan2(tx - truck.x, tz - truck.z);
var diff = desired - truck.heading;
while (diff > Math.PI) diff -= Math.PI * 2;
while (diff < -Math.PI) diff += Math.PI * 2;
var steer = diff * 1.8;
if (steer > 1) steer = 1;
if (steer < -1) steer = -1;
var throttle = near > 0 ? 0.32 : 0.85;
if (truck.wreck > 0) throttle = 0.2;
return { throttle: throttle, steer: steer };
}
function integrate(truck, throttle, steer, dt) {
if (truck.wreck > 0) {
truck.heading += truck.wreckSpin * dt;
truck.wreckSpin *= Math.max(0, 1 - 2.2 * dt);
truck.wreck -= dt;
if (truck.wreck < 0) truck.wreck = 0;
throttle *= 0.35;
}
truck.heading += steer * (1.15 + Math.min(8, Math.abs(truck.speed)) * 0.1) * dt;
var fx = Math.sin(truck.heading);
var fz = Math.cos(truck.heading);
truck.vx += fx * throttle * 20 * dt;
truck.vz += fz * throttle * 20 * dt;
var slope = sampleSlope(truck.x, truck.z);
truck.vx -= slope.x * 22 * dt;
truck.vz -= slope.z * 22 * dt;
var drag = Math.max(0, 1 - 0.9 * dt);
truck.vx *= drag;
truck.vz *= drag;
var forward = truck.vx * fx + truck.vz * fz;
var sideX = truck.vx - fx * forward;
var sideZ = truck.vz - fz * forward;
var grip = Math.max(0, 1 - 5 * dt);
truck.vx = fx * forward + sideX * grip;
truck.vz = fz * forward + sideZ * grip;
var sp = Math.sqrt(truck.vx * truck.vx + truck.vz * truck.vz);
if (sp > 15) {
truck.vx *= 15 / sp;
truck.vz *= 15 / sp;
}
truck.speed = truck.vx * fx + truck.vz * fz;
truck.x += truck.vx * dt;
truck.z += truck.vz * dt;
if (truck.hitCd > 0) truck.hitCd -= dt;
}
function popScore(n) {
var el = document.createElement('div');
el.textContent = '+' + n;
el.style.cssText = 'position:fixed;left:50%;top:28%;transform:translateX(-50%);font:700 36px Impact,sans-serif;color:#ffb703;pointer-events:none;text-shadow:0 2px 0 #000;z-index:4';
document.body.appendChild(el);
setTimeout(function () {
if (el.parentNode) el.parentNode.removeChild(el);
}, 650);
}
function collideTrucks(a, b, allowScore) {
var dx = b.x - a.x;
var dz = b.z - a.z;
var min = a.radius + b.radius;
var d2 = dx * dx + dz * dz;
if (d2 >= min * min || d2 < 1e-8) return;
var d = Math.sqrt(d2);
var nx = dx / d;
var nz = dz / d;
var overlap = min - d;
var inv = a.invMass + b.invMass;
a.x -= nx * overlap * (a.invMass / inv);
a.z -= nz * overlap * (a.invMass / inv);
b.x += nx * overlap * (b.invMass / inv);
b.z += nz * overlap * (b.invMass / inv);
var rv = (b.vx - a.vx) * nx + (b.vz - a.vz) * nz;
var impact = 0;
if (rv < 0) {
impact = -rv;
var j = -(1 + 0.55) * rv / inv;
a.vx -= j * a.invMass * nx;
a.vz -= j * a.invMass * nz;
b.vx += j * b.invMass * nx;
b.vz += j * b.invMass * nz;
}
if (impact > 2.2) {
var freshA = a.wreck <= 0.05;
var freshB = b.wreck <= 0.05;
a.wreck = Math.max(a.wreck, 0.5);
b.wreck = Math.max(b.wreck, 0.5);
if (freshA) a.wreckSpin = (Math.random() < 0.5 ? -1 : 1) * (4 + impact * 0.3);
if (freshB) b.wreckSpin = (Math.random() < 0.5 ? -1 : 1) * (4 + impact * 0.3);
spawnSparks((a.x + b.x) * 0.5, 1.3, (a.z + b.z) * 0.5);
if (allowScore && state.timeLeft > 0 && (a.isPlayer || b.isPlayer)) {
var rival = a.isPlayer ? b : a;
if (rival.hitCd <= 0) {
rival.hitCd = 0.8;
state.score += 250;
popScore(250);
shake = 0.45;
}
rival.wreck = Math.max(rival.wreck, 1.35);
rival.wreckSpin = (Math.random() < 0.5 ? -1 : 1) * (6 + impact * 0.4);
}
}
}
function markHit(obs, truck) {
obs.shake = 1;
if (obs.cd <= 0) {
obs.cd = 0.35;
spawnSparks(truck.x, 1.1, truck.z);
if (truck.isPlayer) shake = Math.max(shake, 0.22);
}
}
function collideAABB(truck, obs) {
var dx = truck.x - obs.x;
var dz = truck.z - obs.z;
var penX = obs.hx + truck.radius - Math.abs(dx);
var penZ = obs.hz + truck.radius - Math.abs(dz);
if (penX <= 0 || penZ <= 0) return;
if (penX < penZ) {
var sx = dx < 0 ? -1 : 1;
truck.x += sx * penX;
if (truck.vx * sx < 0) truck.vx = -truck.vx * 0.4;
else truck.vx += sx * 2;
} else {
var sz = dz < 0 ? -1 : 1;
truck.z += sz * penZ;
if (truck.vz * sz < 0) truck.vz = -truck.vz * 0.4;
else truck.vz += sz * 2;
}
markHit(obs, truck);
}
function collideCircle(truck, obs) {
var dx = truck.x - obs.x;
var dz = truck.z - obs.z;
var min = truck.radius + obs.radius;
var d2 = dx * dx + dz * dz;
if (d2 >= min * min || d2 < 1e-8) return;
var d = Math.sqrt(d2);
var nx = dx / d;
var nz = dz / d;
truck.x += nx * (min - d);
truck.z += nz * (min - d);
var vn = truck.vx * nx + truck.vz * nz;
if (vn < 0) {
truck.vx -= 1.45 * vn * nx;
truck.vz -= 1.45 * vn * nz;
}
markHit(obs, truck);
}
function contain(truck) {
var d = Math.sqrt(truck.x * truck.x + truck.z * truck.z);
var limit = 32.4;
if (d > limit) {
var nx = truck.x / d;
var nz = truck.z / d;
truck.x = nx * limit;
truck.z = nz * limit;
var vn = truck.vx * nx + truck.vz * nz;
if (vn > 0) {
truck.vx -= 1.6 * vn * nx;
truck.vz -= 1.6 * vn * nz;
}
}
}
function syncTruck(truck, dt) {
var h = groundHeight(truck.x, truck.z);
var fx = Math.sin(truck.heading);
var fz = Math.cos(truck.heading);
var ahead = groundHeight(truck.x + fx * 1.4, truck.z + fz * 1.4);
var side = groundHeight(truck.x + fz * 1.2, truck.z - fx * 1.2);
var pitch = (h - ahead) * 0.4;
var roll = (h - side) * 0.28;
if (truck.wreck > 0) roll += Math.sin(performance.now() * 0.018) * 0.4 * Math.min(1, truck.wreck);
var bob = 0;
if (truck.wreck > 0) bob = Math.abs(Math.sin(performance.now() * 0.02)) * 0.25 * Math.min(1, truck.wreck);
truck.group.position.set(truck.x, h + bob, truck.z);
truck.group.rotation.set(pitch, truck.heading, roll);
var spin = truck.speed * dt / 0.68;
for (var w = 0; w < truck.wheels.length; w++) truck.wheels[w].rotation.y -= spin;
truck.bodyMat.emissive.setHex(truck.wreck > 0.08 ? 0x992200 : 0x000000);
}
function updateCamera(dt) {
var fx = Math.sin(player.heading);
var fz = Math.cos(player.heading);
var tx = player.x - fx * 26;
var ty = 17 + groundHeight(player.x, player.z);
var tz = player.z - fz * 26;
var k = 1 - Math.exp(-3.2 * dt);
camX += (tx - camX) * k;
camY += (ty - camY) * k;
camZ += (tz - camZ) * k;
camera.position.set(camX, camY, camZ);
if (shake > 0) {
camera.position.x += (Math.random() - 0.5) * shake;
camera.position.y += (Math.random() - 0.5) * shake * 0.6;
shake *= Math.max(0, 1 - 2.8 * dt);
}
camera.lookAt(player.x + fx * 5, 1.6 + groundHeight(player.x, player.z), player.z + fz * 5);
}
function formatTime(t) {
var s = Math.ceil(Math.max(0, t));
var m = Math.floor(s / 60);
var r = s % 60;
return m + ':' + (r < 10 ? '0' : '') + r;
}
function refreshHud() {
arenaEl.textContent = ARENA;
scoreEl.textContent = 'SCORE ' + state.score;
clockEl.textContent = formatTime(state.timeLeft);
clockEl.style.color = state.timeLeft < 10 ? '#ff5d5d' : '#f4f7fb';
}
function applyPhoto() {
photoEl.className = state.photo ? 'on' : '';
photoName.textContent = ARENA;
photoScore.textContent = 'SCORE ' + state.score;
}
function step(dt) {
var i, j, inp, ai, obs, s;
for (i = 0; i < trucks.length; i++) {
if (trucks[i].isPlayer) {
inp = playerInput();
integrate(trucks[i], inp.throttle, inp.steer, dt);
} else {
ai = aiControls(trucks[i], dt);
integrate(trucks[i], ai.throttle, ai.steer, dt);
}
}
for (i = 0; i < trucks.length; i++) {
for (j = i + 1; j < trucks.length; j++) collideTrucks(trucks[i], trucks[j], true);
}
for (i = 0; i < trucks.length; i++) {
for (j = i + 1; j < trucks.length; j++) collideTrucks(trucks[i], trucks[j], false);
}
for (i = 0; i < trucks.length; i++) {
for (j = 0; j < obstacles.length; j++) {
obs = obstacles[j];
if (obs.shape === 'circle') collideCircle(trucks[i], obs);
else collideAABB(trucks[i], obs);
}
contain(trucks[i]);
syncTruck(trucks[i], dt);
}
for (i = 0; i < obstacles.length; i++) {
obs = obstacles[i];
if (obs.cd > 0) obs.cd -= dt;
if (obs.shake > 0) {
obs.shake *= Math.max(0, 1 - 3 * dt);
obs.mesh.position.x = obs.x + Math.sin(performance.now() * 0.04) * obs.shake * 0.16;
obs.mesh.position.z = obs.z + Math.cos(performance.now() * 0.05) * obs.shake * 0.16;
obs.mesh.position.y = obs.baseY + obs.shake * 0.06;
} else {
obs.mesh.position.x = obs.x;
obs.mesh.position.z = obs.z;
obs.mesh.position.y = obs.baseY;
}
}
for (i = 0; i < sparks.length; i++) {
s = sparks[i];
if (s.life <= 0) continue;
s.life -= dt;
s.vy -= 14 * dt;
s.mesh.position.x += s.vx * dt;
s.mesh.position.y += s.vy * dt;
s.mesh.position.z += s.vz * dt;
if (s.life <= 0) s.mesh.visible = false;
}
if (state.timeLeft > 0) {
state.timeLeft -= dt;
if (state.timeLeft < 0) state.timeLeft = 0;
}
updateCamera(dt);
refreshHud();
}
window.addEventListener('keydown', function (e) {
keys[e.code] = true;
if (e.code === 'ArrowUp' || e.code === 'ArrowDown' || e.code === 'ArrowLeft' || e.code === 'ArrowRight' || e.code === 'Space') {
e.preventDefault();
}
if ((e.key === 'p' || e.key === 'P') && !e.repeat) {
state.photo = !state.photo;
applyPhoto();
}
});
window.addEventListener('keyup', function (e) {
keys[e.code] = false;
});
window.addEventListener('resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
window.addEventListener('pointerdown', function () { window.focus(); });
for (i = 0; i < trucks.length; i++) syncTruck(trucks[i], 0);
camX = player.x - Math.sin(player.heading) * 26;
camY = 17;
camZ = player.z - Math.cos(player.heading) * 26;
camera.position.set(camX, camY, camZ);
camera.lookAt(player.x, 2, player.z);
refreshHud();
applyPhoto();
document.body.focus();
var last = performance.now();
requestAnimationFrame(function frame(now) {
requestAnimationFrame(frame);
var dt = Math.min(0.05, (now - last) / 1000);
last = now;
if (!state.photo) step(dt);
else {
photoName.textContent = ARENA;
photoScore.textContent = 'SCORE ' + state.score;
}
renderer.render(scene, camera);
});
})();
</script>
</body>
</html>
The notes
- Five trucks: The four rivals run opposite orbit directions on different radii, each with a lane offset, and they only dive the player on staggered timers. Every step a separation force shoves any pair inside 11 units apart, and the circle resolver will not leave an overlap in place, so they cannot lock into one moving wall.
- Demo mode: If the URL ends in
#demo, the boot path sets the live match fields withstate.score = 5000; state.timeLeft = 20;. The HUD only prints those fields, the clock subtracts fromstate.timeLeft, and a ram doesstate.score += 250on that same object — it is not a caption painted over a normal 0 / 1:30 game. - Photo mode:
Ptogglesstate.photo, and while that is set the loop does not callstep(). That is the physics step: integration, AI, collisions, sparks, clock, and camera. The render loop still draws the frozen frame plus the card, so nothing keeps simulating behind it. - Collisions: Each truck is a circle of radius 2.2 with velocity as the source of truth. Overlapping pairs are separated along the contact normal by inverse mass, then if relative velocity along that normal is closing an impulse
j = -(1+0.55)*v_rel/(invA+invB)is applied. Barriers and crates are static AABBs resolved on the smaller penetration axis; boulders are static circles with a 1.45 bounce. A player-rival hit with closing speed above 2.2 adds 250 tostate.score(0.8s cooldown), sets a wreck timer, and storeswreckSpin, which the integrator adds to heading until it decays. Hills are not contacts — they are a height sample plus a slope force.
Attachments
x-ai/grok-4.7 — page