Run Detail
completedminimax-m3Recorded 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
3372.0s
Total Tokens
52,323
Input Tokens
877
Output Tokens
51,446
Reasoning Tokens
37,915
Reasoning Effort
default
Cached Input Tokens
128
Est. Cost
$0.0568
Started
8/27/2026, 12:04:58 PM
OR Provider
DeepInfra
Finish Reason
stop
Generation ID
gen-1787832298-4FWmPMy6VYk16mzoVEZ8
Turns (1)
Turn #1
877 in51,446 out37,915 reasoning128 cached52,323 total3371.9s
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
Chrome Crater is a monster-truck rally in a circular dirt stadium, with five angular Cybertrucks slamming into dirt hills, concrete blocks, and tire stacks while a packed crowd watches from stands that ring the arena.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chrome Crater Rally</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: 'Courier New', monospace; color: #fff; }
canvas { display: block; }
#hud {
position: fixed; top: 0; left: 0; right: 0;
padding: 18px 28px;
display: flex; justify-content: space-between; align-items: center;
pointer-events: none; z-index: 10;
text-shadow: 2px 2px 0 rgba(0,0,0,0.8);
}
#score { font-size: 22px; font-weight: bold; }
#arena-name { font-size: 26px; font-weight: bold; letter-spacing: 3px; color: #ffcc00; }
#clock { font-size: 22px; font-weight: bold; }
#controls {
position: fixed; bottom: 18px; left: 18px;
font-size: 13px; background: rgba(0,0,0,0.6);
padding: 10px 14px; border: 1px solid #555; border-radius: 4px;
z-index: 10; line-height: 1.6;
}
#photo-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.8);
display: none; justify-content: center; align-items: center; flex-direction: column;
z-index: 20; pointer-events: none;
}
#photo-overlay h1 {
font-size: 72px; letter-spacing: 6px; margin-bottom: 24px;
color: #ffcc00; text-shadow: 4px 4px 0 #000;
}
#photo-overlay p { font-size: 40px; margin: 8px; }
#photo-overlay .hint { font-size: 16px; margin-top: 40px; opacity: 0.6; letter-spacing: 2px; }
#end-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.85);
display: none; justify-content: center; align-items: center; flex-direction: column;
z-index: 15; pointer-events: none;
}
#end-overlay h1 { font-size: 64px; color: #ff3333; margin-bottom: 20px; }
#end-overlay p { font-size: 36px; }
</style>
</head>
<body>
<div id="hud">
<div id="score">SCORE: 0</div>
<div id="arena-name">CHROME CRATER</div>
<div id="clock">TIME: 60</div>
</div>
<div id="controls">
<strong>WASD</strong> or <strong>ARROW KEYS</strong> to drive<br>
<strong>P</strong> for photo mode
</div>
<div id="photo-overlay">
<h1 id="photo-name">CHROME CRATER</h1>
<p id="photo-score">SCORE: 0</p>
<p class="hint">PRESS P TO RESUME</p>
</div>
<div id="end-overlay">
<h1>TIME UP</h1>
<p id="end-score">FINAL SCORE: 0</p>
</div>
<script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>
<script>
(function() {
'use strict';
const ARENA_NAME = 'CHROME CRATER';
const ARENA_RADIUS = 55;
const GAME_TIME = 60;
const TRUCK_COUNT = 5;
const state = {
score: 0, time: GAME_TIME, photoMode: false, gameOver: false,
trucks: [], obstacles: [], particles: []
};
if (location.hash === '#demo') {
state.score = 5000;
state.time = 20;
}
const scene = new THREE.Scene();
const bgCanvas = document.createElement('canvas');
bgCanvas.width = 2; bgCanvas.height = 512;
const bgCtx = bgCanvas.getContext('2d');
const bgGrad = bgCtx.createLinearGradient(0, 0, 0, 512);
bgGrad.addColorStop(0, '#0a0a1a');
bgGrad.addColorStop(0.5, '#2a1a2a');
bgGrad.addColorStop(1, '#3a2a1a');
bgCtx.fillStyle = bgGrad;
bgCtx.fillRect(0, 0, 2, 512);
scene.background = new THREE.CanvasTexture(bgCanvas);
scene.fog = new THREE.Fog(0x1a1020, 80, 200);
const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 500);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const sun = new THREE.DirectionalLight(0xffffff, 0.7);
sun.position.set(40, 60, 30);
sun.castShadow = true;
sun.shadow.mapSize.width = 2048;
sun.shadow.mapSize.height = 2048;
sun.shadow.camera.near = 0.5;
sun.shadow.camera.far = 200;
sun.shadow.camera.left = -80;
sun.shadow.camera.right = 80;
sun.shadow.camera.top = 80;
sun.shadow.camera.bottom = -80;
scene.add(sun);
scene.add(new THREE.HemisphereLight(0x88aaff, 0x442211, 0.4));
const floor = new THREE.Mesh(
new THREE.CircleGeometry(ARENA_RADIUS, 64),
new THREE.MeshStandardMaterial({ color: 0x6b4423, roughness: 0.95 })
);
floor.rotation.x = -Math.PI / 2;
floor.receiveShadow = true;
scene.add(floor);
const wall = new THREE.Mesh(
new THREE.CylinderGeometry(ARENA_RADIUS, ARENA_RADIUS, 5, 64, 1, true),
new THREE.MeshStandardMaterial({ color: 0x2a2a3a, side: THREE.DoubleSide, roughness: 0.8 })
);
wall.position.y = 2.5;
scene.add(wall);
function buildStands() {
const segments = 32, peoplePerStand = 18;
for (let i = 0; i < segments; i++) {
const angle = (i / segments) * Math.PI * 2;
const standDist = ARENA_RADIUS + 7;
const standX = Math.cos(angle) * standDist;
const standZ = Math.sin(angle) * standDist;
const stand = new THREE.Mesh(
new THREE.BoxGeometry(14, 11, 6),
new THREE.MeshStandardMaterial({ color: 0x2a2a3a, roughness: 0.9 })
);
stand.position.set(standX, 5.5, standZ);
stand.lookAt(0, 5.5, 0);
scene.add(stand);
for (let j = 0; j < peoplePerStand; j++) {
const px = (Math.random() - 0.5) * 13;
const py = 11 + Math.random() * 4;
const pz = (Math.random() - 0.5) * 5;
const person = new THREE.Mesh(
new THREE.BoxGeometry(0.7, 1.7, 0.7),
new THREE.MeshStandardMaterial({
color: new THREE.Color().setHSL(Math.random(), 0.7, 0.4 + Math.random() * 0.3)
})
);
person.position.set(px, py, pz);
stand.add(person);
}
}
}
buildStands();
function buildBanners() {
const bannerCount = 8;
for (let i = 0; i < bannerCount; i++) {
const angle = (i / bannerCount) * Math.PI * 2;
const banner = new THREE.Mesh(
new THREE.PlaneGeometry(10, 4),
new THREE.MeshStandardMaterial({
color: i % 2 === 0 ? 0xcc2222 : 0x2222cc,
side: THREE.DoubleSide
})
);
banner.position.set(Math.cos(angle) * (ARENA_RADIUS + 15), 12, Math.sin(angle) * (ARENA_RADIUS + 15));
banner.lookAt(0, 12, 0);
scene.add(banner);
}
}
buildBanners();
function buildObstacles() {
for (let i = 0; i < 6; i++) {
const hill = new THREE.Mesh(
new THREE.SphereGeometry(5, 16, 8, 0, Math.PI * 2, 0, Math.PI / 2),
new THREE.MeshStandardMaterial({ color: 0x5a3a1a, roughness: 0.95 })
);
const angle = Math.random() * Math.PI * 2;
const dist = 15 + Math.random() * 25;
hill.position.set(Math.cos(angle) * dist, 0, Math.sin(angle) * dist);
hill.scale.y = 0.4 + Math.random() * 0.4;
hill.castShadow = true;
hill.receiveShadow = true;
scene.add(hill);
state.obstacles.push({ mesh: hill, type: 'hill', radius: 5 });
}
for (let i = 0; i < 10; i++) {
const block = new THREE.Mesh(
new THREE.BoxGeometry(3, 2.5, 3),
new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.7 })
);
const angle = Math.random() * Math.PI * 2;
const dist = 10 + Math.random() * 30;
block.position.set(Math.cos(angle) * dist, 1.25, Math.sin(angle) * dist);
block.rotation.y = Math.random() * Math.PI;
block.castShadow = true;
block.receiveShadow = true;
scene.add(block);
state.obstacles.push({ mesh: block, type: 'block', radius: 2.5 });
}
for (let i = 0; i < 8; i++) {
const stack = new THREE.Group();
const tireCount = 3 + Math.floor(Math.random() * 3);
for (let j = 0; j < tireCount; j++) {
const tire = new THREE.Mesh(
new THREE.TorusGeometry(1.2, 0.5, 8, 16),
new THREE.MeshStandardMaterial({ color: 0x1a1a1a, roughness: 0.95 })
);
tire.rotation.x = Math.PI / 2;
tire.position.y = j * 1;
tire.castShadow = true;
stack.add(tire);
}
const angle = Math.random() * Math.PI * 2;
const dist = 12 + Math.random() * 28;
stack.position.set(Math.cos(angle) * dist, 0, Math.sin(angle) * dist);
scene.add(stack);
state.obstacles.push({ mesh: stack, type: 'tires', radius: 1.8 });
}
}
buildObstacles();
function createCybertruck(color) {
const truck = new THREE.Group();
const bodyMat = new THREE.MeshStandardMaterial({ color: color, metalness: 0.85, roughness: 0.25 });
const glassMat = new THREE.MeshStandardMaterial({ color: 0x1a1a2a, metalness: 0.9, roughness: 0.1 });
const lightMat = new THREE.MeshStandardMaterial({ color: 0xffffaa, emissive: 0xffffaa, emissiveIntensity: 0.5 });
const body = new THREE.Mesh(new THREE.BoxGeometry(4.5, 1.4, 2.4), bodyMat);
body.position.y = 1.6;
body.castShadow = true;
truck.add(body);
const front = new THREE.Mesh(new THREE.BoxGeometry(1.2, 0.6, 2.3), bodyMat);
front.position.set(1.9, 1.1, 0);
front.rotation.z = -0.25;
front.castShadow = true;
truck.add(front);
const cabin = new THREE.Mesh(new THREE.BoxGeometry(2.4, 1.2, 2.2), bodyMat);
cabin.position.set(-0.3, 2.6, 0);
cabin.castShadow = true;
truck.add(cabin);
const windshield = new THREE.Mesh(new THREE.BoxGeometry(0.1, 1.0, 2.0), glassMat);
windshield.position.set(0.85, 2.6, 0);
windshield.rotation.z = -0.5;
truck.add(windshield);
const rearWindow = new THREE.Mesh(new THREE.BoxGeometry(0.1, 1.0, 2.0), glassMat);
rearWindow.position.set(-1.5, 2.6, 0);
rearWindow.rotation.z = 0.6;
truck.add(rearWindow);
const hl1 = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.3, 0.6), lightMat);
hl1.position.set(2.45, 1.3, 0.8);
truck.add(hl1);
const hl2 = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.3, 0.6), lightMat);
hl2.position.set(2.45, 1.3, -0.8);
truck.add(hl2);
const lightBar = new THREE.Mesh(new THREE.BoxGeometry(1.5, 0.15, 0.3), lightMat);
lightBar.position.set(-0.3, 3.25, 0);
truck.add(lightBar);
const wheelGeo = new THREE.CylinderGeometry(1.3, 1.3, 1.0, 16);
const wheelMat = new THREE.MeshStandardMaterial({ color: 0x111111, roughness: 0.95 });
const hubGeo = new THREE.CylinderGeometry(0.7, 0.7, 1.1, 6);
const hubMat = new THREE.MeshStandardMaterial({ color: 0x888888, metalness: 0.8 });
const wheelPositions = [[1.8, 1.3, 1.4], [1.8, 1.3, -1.4], [-1.8, 1.3, 1.4], [-1.8, 1.3, -1.4]];
const wheels = [];
wheelPositions.forEach(pos => {
const wheel = new THREE.Mesh(wheelGeo, wheelMat);
wheel.position.set(...pos);
wheel.rotation.z = Math.PI / 2;
wheel.castShadow = true;
truck.add(wheel);
wheels.push(wheel);
const hub = new THREE.Mesh(hubGeo, hubMat);
hub.position.set(...pos);
hub.rotation.z = Math.PI / 2;
truck.add(hub);
});
truck.userData.wheels = wheels;
truck.userData.bodyMat = bodyMat;
return truck;
}
const playerColor = 0xcccccc;
const aiColors = [0xff3333, 0x3366ff, 0x33cc33, 0xffcc00];
const aiNames = ['CRIMSON', 'COBALT', 'VENOM', 'AMBER'];
let playerSpawnAngle = 0;
for (let i = 0; i < TRUCK_COUNT; i++) {
const isPlayer = i === 0;
const color = isPlayer ? playerColor : aiColors[i - 1];
const truck = createCybertruck(color);
const spawnAngle = (i / TRUCK_COUNT) * Math.PI * 2 + Math.PI / 10;
const startDist = 20;
truck.position.set(Math.cos(spawnAngle) * startDist, 0, Math.sin(spawnAngle) * startDist);
const facingAngle = spawnAngle + Math.PI;
truck.rotation.y = -facingAngle;
scene.add(truck);
if (isPlayer) playerSpawnAngle = spawnAngle;
state.trucks.push({
mesh: truck, isPlayer: isPlayer,
name: isPlayer ? 'YOU' : aiNames[i - 1],
angle: facingAngle, speed: 0, health: 100, flashTime: 0, wrecked: false,
ai: isPlayer ? null : {
personality: i - 1, targetX: 0, targetZ: 0,
targetTimer: Math.random() * 2, baseSpeed: 12 + Math.random() * 5
}
});
}
const playerX0 = Math.cos(playerSpawnAngle) * 20;
const playerZ0 = Math.sin(playerSpawnAngle) * 20;
const playerFacing0 = playerSpawnAngle + Math.PI;
camera.position.set(playerX0 - Math.cos(playerFacing0) * 14, 7, playerZ0 - Math.sin(playerFacing0) * 14);
camera.lookAt(playerX0, 2, playerZ0);
const keys = {};
let audioCtx = null;
window.addEventListener('keydown', e => {
const k = e.key.toLowerCase();
keys[k] = true;
if (!audioCtx) {
try { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } catch(err) {}
}
if (k === 'p' && !state.gameOver) {
state.photoMode = !state.photoMode;
document.getElementById('photo-overlay').style.display = state.photoMode ? 'flex' : 'none';
}
});
window.addEventListener('keyup', e => { keys[e.key.toLowerCase()] = false; });
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
function playSound(freq, duration, type, volume) {
if (!audioCtx) return;
type = type || 'sawtooth'; volume = volume || 0.2;
try {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain); gain.connect(audioCtx.destination);
osc.frequency.value = freq; osc.type = type;
gain.gain.setValueAtTime(volume, audioCtx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
osc.start(); osc.stop(audioCtx.currentTime + duration);
} catch(e) {}
}
function playCollisionSound(intensity) {
playSound(80 + Math.random() * 40, 0.3, 'sawtooth', Math.min(0.4, intensity * 0.05));
playSound(120 + Math.random() * 30, 0.2, 'square', Math.min(0.2, intensity * 0.03));
}
function spawnParticles(x, y, z, count, color) {
color = color || 0x8b6f47;
for (let i = 0; i < count; i++) {
const p = new THREE.Mesh(
new THREE.BoxGeometry(0.3, 0.3, 0.3),
new THREE.MeshStandardMaterial({ color: color })
);
p.position.set(x, y, z);
p.userData.vel = new THREE.Vector3(
(Math.random() - 0.5) * 10, Math.random() * 6 + 2, (Math.random() - 0.5) * 10
);
p.userData.life = 1.5;
scene.add(p);
state.particles.push(p);
}
}
function updateParticles(dt) {
for (let i = state.particles.length - 1; i >= 0; i--) {
const p = state.particles[i];
p.userData.life -= dt;
if (p.userData.life <= 0) {
scene.remove(p); p.geometry.dispose(); p.material.dispose();
state.particles.splice(i, 1); continue;
}
p.userData.vel.y -= 18 * dt;
p.position.x += p.userData.vel.x * dt;
p.position.y += p.userData.vel.y * dt;
p.position.z += p.userData.vel.z * dt;
if (p.position.y < 0.2) {
p.position.y = 0.2;
p.userData.vel.y *= -0.3;
p.userData.vel.x *= 0.6; p.userData.vel.z *= 0.6;
}
p.rotation.x += dt * 6; p.rotation.z += dt * 4;
}
}
function updatePhysics(dt) {
if (state.photoMode || state.gameOver) return;
const player = state.trucks[0];
if (!player.wrecked) {
let throttle = 0, steer = 0;
if (keys['w'] || keys['arrowup']) throttle = 1;
if (keys['s'] || keys['arrowdown']) throttle = -0.6;
if (keys['a'] || keys['arrowleft']) steer = 1;
if (keys['d'] || keys['arrowright']) steer = -1;
player.speed += throttle * 28 * dt;
player.speed *= Math.pow(0.4, dt);
player.speed = Math.max(-8, Math.min(22, player.speed));
player.angle += steer * 2.5 * dt;
}
for (let i = 1; i < TRUCK_COUNT; i++) {
const truck = state.trucks[i];
if (truck.wrecked) continue;
const ai = truck.ai;
const playerPos = state.trucks[0].mesh.position;
ai.targetTimer -= dt;
let targetX = 0, targetZ = 0;
if (ai.personality === 0) {
targetX = playerPos.x; targetZ = playerPos.z;
if (ai.targetTimer <= 0) ai.targetTimer = 0.3;
} else if (ai.personality === 1) {
if (ai.targetTimer <= 0) {
const a = Math.random() * Math.PI * 2;
const d = 10 + Math.random() * 30;
ai.targetX = Math.cos(a) * d; ai.targetZ = Math.sin(a) * d;
ai.targetTimer = 2 + Math.random() * 3;
}
targetX = ai.targetX; targetZ = ai.targetZ;
} else if (ai.personality === 2) {
let avoidX = 0, avoidZ = 0;
for (let j = 0; j < TRUCK_COUNT; j++) {
if (j === i) continue;
const other = state.trucks[j];
const dx = truck.mesh.position.x - other.mesh.position.x;
const dz = truck.mesh.position.z - other.mesh.position.z;
const d = Math.sqrt(dx * dx + dz * dz);
if (d < 12 && d > 0) {
avoidX += (dx / d) * (12 - d) * 0.8;
avoidZ += (dz / d) * (12 - d) * 0.8;
}
}
targetX = truck.mesh.position.x + avoidX;
targetZ = truck.mesh.position.z + avoidZ;
if (ai.targetTimer <= 0) ai.targetTimer = 0.2;
} else {
const orbitAngle = truck.angle + Math.PI / 2;
targetX = Math.cos(orbitAngle) * 28;
targetZ = Math.sin(orbitAngle) * 28;
if (ai.targetTimer <= 0) ai.targetTimer = 0.4;
}
const dx = targetX - truck.mesh.position.x;
const dz = targetZ - truck.mesh.position.z;
const targetAngle = Math.atan2(dz, dx);
let angleDiff = targetAngle - truck.angle;
while (angleDiff > Math.PI) angleDiff -= Math.PI * 2;
while (angleDiff < -Math.PI) angleDiff += Math.PI * 2;
truck.angle += Math.sign(angleDiff) * Math.min(Math.abs(angleDiff), 2.0 * dt);
for (let j = 0; j < TRUCK_COUNT; j++) {
if (j === i) continue;
const other = state.trucks[j];
const odx = truck.mesh.position.x - other.mesh.position.x;
const odz = truck.mesh.position.z - other.mesh.position.z;
const od = Math.sqrt(odx * odx + odz * odz);
if (od < 5 && od > 0) {
const sepAngle = Math.atan2(odz, odx);
let sDiff = sepAngle - truck.angle;
while (sDiff > Math.PI) sDiff -= Math.PI * 2;
while (sDiff < -Math.PI) sDiff += Math.PI * 2;
truck.angle += Math.sign(sDiff) * Math.min(Math.abs(sDiff), 1.5 * dt) * (5 - od) / 5;
}
}
state.obstacles.forEach(obs => {
const odx = truck.mesh.position.x - obs.mesh.position.x;
const odz = truck.mesh.position.z - obs.mesh.position.z;
const od = Math.sqrt(odx * odx + odz * odz);
if (od < obs.radius + 6 && od > 0) {
const avoidAngle = Math.atan2(odz, odx);
let aDiff = avoidAngle - truck.angle;
while (aDiff > Math.PI) aDiff -= Math.PI * 2;
while (aDiff < -Math.PI) aDiff += Math.PI * 2;
truck.angle += Math.sign(aDiff) * Math.min(Math.abs(aDiff), 2.5 * dt) * (obs.radius + 6 - od) / 6;
}
});
truck.speed = ai.baseSpeed * (truck.health / 100);
if (Math.abs(angleDiff) > 0.8) truck.speed *= 0.4;
}
state.trucks.forEach(truck => {
if (truck.wrecked) truck.speed *= 0.9;
truck.mesh.position.x += Math.cos(truck.angle) * truck.speed * dt;
truck.mesh.position.z += Math.sin(truck.angle) * truck.speed * dt;
truck.mesh.rotation.y = -truck.angle;
if (truck.mesh.userData.wheels) {
truck.mesh.userData.wheels.forEach(w => { w.rotation.x += truck.speed * dt * 0.5; });
}
if (truck.flashTime > 0) {
truck.flashTime -= dt;
if (truck.flashTime <= 0) {
truck.mesh.userData.bodyMat.emissive.setHex(truck.wrecked ? 0x660000 : 0x000000);
}
}
});
for (let i = 0; i < TRUCK_COUNT; i++) {
for (let j = i + 1; j < TRUCK_COUNT; j++) {
const a = state.trucks[i], b = state.trucks[j];
const dx = b.mesh.position.x - a.mesh.position.x;
const dz = b.mesh.position.z - a.mesh.position.z;
const dist = Math.sqrt(dx * dx + dz * dz);
const minDist = 3.5;
if (dist < minDist && dist > 0.01) {
const overlap = minDist - dist;
const nx = dx / dist, nz = dz / dist;
a.mesh.position.x -= nx * overlap * 0.5;
a.mesh.position.z -= nz * overlap * 0.5;
b.mesh.position.x += nx * overlap * 0.5;
b.mesh.position.z += nz * overlap * 0.5;
const relSpeed = b.speed - a.speed;
const impulse = relSpeed * 0.7;
a.speed += impulse; b.speed -= impulse;
const impactSpeed = Math.abs(relSpeed);
if (impactSpeed > 2) {
const damage = impactSpeed * 3;
a.health -= damage; b.health -= damage;
a.mesh.userData.bodyMat.emissive.setHex(0xff3333);
b.mesh.userData.bodyMat.emissive.setHex(0xff3333);
a.flashTime = 0.25; b.flashTime = 0.25;
if (a.isPlayer || b.isPlayer) {
const pt = a.isPlayer ? a : b, ot = a.isPlayer ? b : a;
if (pt.speed > ot.speed + 1) state.score += 100;
else if (pt.speed < ot.speed - 1) state.score = Math.max(0, state.score - 25);
else state.score += 25;
}
spawnParticles(
(a.mesh.position.x + b.mesh.position.x) / 2, 1.5,
(a.mesh.position.z + b.mesh.position.z) / 2,
Math.min(15, Math.floor(impactSpeed * 2)), 0xaa6644
);
playCollisionSound(impactSpeed);
if (a.health <= 0 && !a.wrecked) { a.wrecked = true; a.mesh.userData.bodyMat.emissive.setHex(0xff0000); }
if (b.health <= 0 && !b.wrecked) { b.wrecked = true; b.mesh.userData.bodyMat.emissive.setHex(0xff0000); }
}
}
}
}
state.obstacles.forEach(obs => {
for (let i = 0; i < TRUCK_COUNT; i++) {
const truck = state.trucks[i];
const dx = truck.mesh.position.x - obs.mesh.position.x;
const dz = truck.mesh.position.z - obs.mesh.position.z;
const dist = Math.sqrt(dx * dx + dz * dz);
const truckRadius = 2;
const minDist = obs.radius + truckRadius;
if (dist < minDist && dist > 0.01) {
const overlap = minDist - dist;
const nx = dx / dist, nz = dz / dist;
truck.mesh.position.x += nx * overlap;
truck.mesh.position.z += nz * overlap;
if (truck.speed > 4) {
truck.speed *= 0.5;
truck.mesh.userData.bodyMat.emissive.setHex(0xff8800);
truck.flashTime = 0.15;
spawnParticles(truck.mesh.position.x, 1, truck.mesh.position.z, 5, 0x666666);
playCollisionSound(truck.speed);
} else {
truck.speed *= 0.7;
}
}
}
});
state.trucks.forEach(truck => {
const dist = Math.sqrt(truck.mesh.position.x ** 2 + truck.mesh.position.z ** 2);
if (dist > ARENA_RADIUS - 3) {
const nx = truck.mesh.position.x / dist, nz = truck.mesh.position.z / dist;
truck.mesh.position.x = nx * (ARENA_RADIUS - 3);
truck.mesh.position.z = nz * (ARENA_RADIUS - 3);
truck.speed *= 0.2;
}
});
state.time -= dt;
if (state.time <= 0) {
state.time = 0;
state.gameOver = true;
document.getElementById('end-score').textContent = 'FINAL SCORE: ' + Math.floor(state.score);
document.getElementById('end-overlay').style.display = 'flex';
}
}
function updateCamera() {
const player = state.trucks[0];
const camDist = 14, camHeight = 7;
const targetX = player.mesh.position.x - Math.cos(player.angle) * camDist;
const targetZ = player.mesh.position.z - Math.sin(player.angle) * camDist;
camera.position.x += (targetX - camera.position.x) * 0.08;
camera.position.y += (camHeight - camera.position.y) * 0.08;
camera.position.z += (targetZ - camera.position.z) * 0.08;
camera.lookAt(player.mesh.position.x, 2, player.mesh.position.z);
}
function updateHUD() {
document.getElementById('score').textContent = 'SCORE: ' + Math.floor(state.score);
document.getElementById('clock').textContent = 'TIME: ' + Math.ceil(state.time);
document.getElementById('photo-score').textContent = 'SCORE: ' + Math.floor(state.score);
}
let lastTime = performance.now();
function animate(time) {
requestAnimationFrame(animate);
const dt = Math.min((time - lastTime) / 1000, 0.05);
lastTime = time;
if (!state.photoMode) {
updatePhysics(dt);
updateParticles(dt);
updateCamera();
}
updateHUD();
renderer.render(scene, camera);
}
document.getElementById('arena-name').textContent = ARENA_NAME;
document.getElementById('photo-name').textContent = ARENA_NAME;
animate(performance.now());
})();
</script>
</body>
</html>
The notes
- Five trucks: Each AI runs a distinct personality — Crimson chases the player, Cobalt rambles to random points, Venom actively evades every other truck, Amber orbits the center — and every AI applies a per-frame separation steer away from trucks inside a 5-unit radius, so the four rivals spread out instead of collapsing into a single pack.
- Demo mode: The very first lines of the script set
state.score = 5000andstate.time = 20whenlocation.hash === '#demo', before any truck, HUD, or loop exists. The HUD reads those values fromstateevery frame, the clock counts down from 20 in real time, and the score increments from 5000 on real rams — there is no second render path or overlay. - Photo mode: Pressing
Pflipsstate.photoMode, and the animate loop skipsupdatePhysics,updateParticles, andupdateCamerawhile still callingrenderer.render. The simulation is fully halted — clock, positions, particles, camera all freeze — and the render just redraws the last frame under the card. - Collisions: Every truck is a circle of radius 2 in the XZ plane, every obstacle is a circle of its own radius, and the arena wall is a radial clamp. On overlap, the two bodies are pushed apart along the contact normal by half the penetration each, then their speeds are exchanged along that normal with a 0.7 restitution factor. The relative speed at contact becomes the impact magnitude, which scales damage to both trucks' health, triggers an emissive flash, spawns debris particles, and — if the player is the faster truck — adds 100 to the score; health hitting zero locks the truck into a wrecked state with a permanent red glow.
Attachments
minimax/minimax-m3 — page