Run Detail
completedgemini-3.8-flashRecorded 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
60.9s
Total Tokens
14,724
Input Tokens
732
Output Tokens
13,992
Reasoning Tokens
1,512
Reasoning Effort
default
Est. Cost
$0.0530
Started
9/2/2026, 3:54:41 PM
OR Provider
Google
Finish Reason
stop
Generation ID
gen-1788364481-LFc70IYHGte3d0Db8gKC
Turns (1)
Turn #1
732 in13,992 out1,512 reasoning14,724 total60.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
The Austin Giga-Dome pits five stainless-steel Cybertruck monster rigs with massive four-foot terra-tires against each other over dirt mounds, concrete barriers, and scrap piles before thousands of screaming fans.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cybertruck Monster Rally - Austin Giga-Dome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
body, html { width: 100%; height: 100%; overflow: hidden; background: #050508; font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; }
#canvas-container { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
/* HUD */
#hud {
position: absolute; top: 0; left: 0; width: 100%; padding: 18px 24px;
display: flex; justify-content: space-between; align-items: flex-start;
pointer-events: none; z-index: 10;
color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}
.hud-box {
background: rgba(12, 14, 20, 0.75);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
padding: 10px 18px; border-radius: 4px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.arena-title {
font-size: 20px; font-weight: 900; letter-spacing: 2.5px;
text-transform: uppercase; color: #ff2a4b; display: flex; align-items: center; gap: 8px;
}
.arena-sub {
font-size: 11px; font-weight: 600; color: #8fa0b5; letter-spacing: 1.5px; text-transform: uppercase;
}
.stats-group { display: flex; gap: 16px; }
.stat-card { text-align: right; min-width: 90px; }
.stat-label { font-size: 10px; font-weight: 700; color: #94a3b8; letter-spacing: 1.5px; text-transform: uppercase; }
.stat-value { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; color: #00f0ff; }
#controls-hint {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
background: rgba(10, 12, 18, 0.7); border: 1px solid rgba(255,255,255,0.12);
padding: 8px 18px; border-radius: 20px; color: #cbd5e1;
font-size: 12px; letter-spacing: 1px; font-weight: 600; pointer-events: none; z-index: 10;
text-transform: uppercase;
}
#controls-hint span { color: #ff2a4b; font-weight: 800; }
/* Photo Mode Overlay */
#photo-card {
display: none; position: absolute; inset: 0;
background: rgba(5, 7, 12, 0.6); backdrop-filter: blur(4px);
z-index: 100; flex-direction: column; justify-content: center; align-items: center;
color: #fff; pointer-events: auto;
}
#photo-card.active { display: flex; }
.photo-frame {
border: 2px solid rgba(0, 240, 255, 0.8);
background: rgba(15, 20, 28, 0.92);
padding: 36px 54px; border-radius: 6px; text-align: center;
box-shadow: 0 0 50px rgba(0, 240, 255, 0.25), inset 0 0 20px rgba(0, 240, 255, 0.1);
position: relative;
}
.photo-frame::before {
content: "PHOTO MODE // FROZEN"; position: absolute; top: -11px; left: 24px;
background: #00f0ff; color: #000; font-size: 9px; font-weight: 900;
letter-spacing: 2px; padding: 2px 8px; border-radius: 2px;
}
.photo-arena { font-size: 32px; font-weight: 900; letter-spacing: 3px; color: #fff; margin-bottom: 8px; }
.photo-score { font-size: 54px; font-weight: 900; color: #ff2a4b; font-variant-numeric: tabular-nums; }
.photo-sub { font-size: 12px; color: #94a3b8; letter-spacing: 2px; text-transform: uppercase; margin-top: 14px; }
</style>
<!-- Single permitted external script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<div id="canvas-container"></div>
<div id="hud">
<div class="hud-box">
<div class="arena-title">Austin Giga-Dome</div>
<div class="arena-sub">Cyber Monster Derby Series</div>
</div>
<div class="stats-group">
<div class="hud-box stat-card">
<div class="stat-label">Score</div>
<div class="stat-value" id="hud-score">0</div>
</div>
<div class="hud-box stat-card">
<div class="stat-label">Clock</div>
<div class="stat-value" id="hud-clock">60</div>
</div>
</div>
</div>
<div id="controls-hint">Drive: <span>WASD</span> or <span>ARROWS</span> | Freeze: <span>P</span> (Photo Mode)</div>
<div id="photo-card">
<div class="photo-frame">
<div class="photo-arena" id="photo-arena-name">AUSTIN GIGA-DOME</div>
<div class="photo-sub">Official Score</div>
<div class="photo-score" id="photo-score-val">0</div>
<div class="photo-sub">Press [P] to Resume Action</div>
</div>
</div>
<script>
// --- SYNTHETIC AUDIO ENGINE (Web Audio API) ---
class AudioEngine {
constructor() {
this.ctx = null;
this.engineOsc = null;
this.engineGain = null;
this.filter = null;
}
init() {
if (this.ctx) return;
const AudioContext = window.AudioContext || window.webkitAudioContext;
if (!AudioContext) return;
this.ctx = new AudioContext();
this.engineOsc = this.ctx.createOscillator();
this.engineOsc.type = 'sawtooth';
this.engineOsc.frequency.setValueAtTime(45, this.ctx.currentTime);
this.filter = this.ctx.createBiquadFilter();
this.filter.type = 'lowpass';
this.filter.frequency.setValueAtTime(280, this.ctx.currentTime);
this.engineGain = this.ctx.createGain();
this.engineGain.gain.setValueAtTime(0.08, this.ctx.currentTime);
this.engineOsc.connect(this.filter);
this.filter.connect(this.engineGain);
this.engineGain.connect(this.ctx.destination);
this.engineOsc.start();
}
setThrottle(speedRatio) {
if (!this.ctx) return;
const targetFreq = 42 + Math.abs(speedRatio) * 110;
this.engineOsc.frequency.setTargetAtTime(targetFreq, this.ctx.currentTime, 0.08);
}
playImpact(intensity = 1.0) {
if (!this.ctx) return;
const now = this.ctx.currentTime;
const osc = this.ctx.createOscillator();
const gain = this.ctx.createGain();
osc.type = 'triangle';
osc.frequency.setValueAtTime(120, now);
osc.frequency.exponentialRampToValueAtTime(25, now + 0.28);
gain.gain.setValueAtTime(Math.min(intensity * 0.45, 0.7), now);
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.32);
osc.connect(gain);
gain.connect(this.ctx.destination);
osc.start(now);
osc.stop(now + 0.35);
// Noise snap
const bufferSize = this.ctx.sampleRate * 0.18;
const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < bufferSize; i++) data[i] = (Math.random() * 2 - 1) * Math.exp(-i / (bufferSize * 0.3));
const noise = this.ctx.createBufferSource();
noise.buffer = buffer;
const noiseGain = this.ctx.createGain();
noiseGain.gain.setValueAtTime(Math.min(intensity * 0.35, 0.5), now);
noiseGain.gain.linearRampToValueAtTime(0.01, now + 0.18);
noise.connect(noiseGain);
noiseGain.connect(this.ctx.destination);
noise.start(now);
}
}
const sound = new AudioEngine();
// --- GAME STATE ---
const ARENA_NAME = "AUSTIN GIGA-DOME";
let score = 0;
let clockTime = 60.0;
let isPhotoMode = false;
// Check #demo directly touching runtime state
if (window.location.hash.toLowerCase() === '#demo') {
score = 5000;
clockTime = 20.0;
}
const hudScore = document.getElementById('hud-score');
const hudClock = document.getElementById('hud-clock');
const photoCard = document.getElementById('photo-card');
const photoScoreVal = document.getElementById('photo-score-val');
function updateHudDisplay() {
hudScore.textContent = Math.floor(score);
hudClock.textContent = Math.ceil(Math.max(0, clockTime));
}
updateHudDisplay();
// --- THREE.JS SCENE SETUP ---
const container = document.getElementById('canvas-container');
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0c0e14);
scene.fog = new THREE.FogExp2(0x0c0e14, 0.0075);
const camera = new THREE.PerspectiveCamera(52, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
container.appendChild(renderer.domElement);
// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.55);
scene.add(ambientLight);
const spotMain = new THREE.DirectionalLight(0xfff5ea, 1.25);
spotMain.position.set(60, 90, 40);
spotMain.castShadow = true;
spotMain.shadow.mapSize.width = 2048;
spotMain.shadow.mapSize.height = 2048;
spotMain.shadow.camera.near = 10;
spotMain.shadow.camera.far = 220;
const d = 95;
spotMain.shadow.camera.left = -d;
spotMain.shadow.camera.right = d;
spotMain.shadow.camera.top = d;
spotMain.shadow.camera.bottom = -d;
scene.add(spotMain);
// Stadium edge floodlights
const floodColors = [0x00f0ff, 0xff2a4b, 0xffd700, 0x00f0ff];
const floodPos = [[-85, 40, -85], [85, 40, -85], [85, 40, 85], [-85, 40, 85]];
floodPos.forEach((p, idx) => {
const fl = new THREE.PointLight(floodColors[idx], 0.9, 150);
fl.position.set(...p);
scene.add(fl);
});
// --- ARENA FLOOR & HILL HEIGHTMAP ---
const ARENA_RADIUS = 82;
const floorGeo = new THREE.PlaneGeometry(190, 190, 80, 80);
floorGeo.rotateX(-Math.PI / 2);
// Hills data: center ramps and dirt mounds
const hills = [
{ x: 0, z: 0, radius: 18, height: 4.8 }, // Center mega dirt jump
{ x: -38, z: -30, radius: 14, height: 3.6 }, // North-west mound
{ x: 38, z: 32, radius: 15, height: 3.8 }, // South-east mound
{ x: -35, z: 34, radius: 13, height: 3.2 }, // South-west ramp
{ x: 36, z: -35, radius: 13, height: 3.4 } // North-east ramp
];
function getTerrainHeight(x, z) {
let h = 0;
for (let i = 0; i < hills.length; i++) {
const hill = hills[i];
const dx = x - hill.x;
const dz = z - hill.z;
const distSq = dx * dx + dz * dz;
const rSq = hill.radius * hill.radius;
if (distSq < rSq) {
const factor = Math.cos((Math.sqrt(distSq) / hill.radius) * (Math.PI / 2));
h += hill.height * factor * factor;
}
}
return h;
}
const posAttr = floorGeo.attributes.position;
for (let i = 0; i < posAttr.count; i++) {
const vx = posAttr.getX(i);
const vz = posAttr.getZ(i);
posAttr.setY(i, getTerrainHeight(vx, vz));
}
floorGeo.computeVertexNormals();
const floorMat = new THREE.MeshStandardMaterial({
color: 0x4a3423,
roughness: 0.9,
metalness: 0.1
});
const floorMesh = new THREE.Mesh(floorGeo, floorMat);
floorMesh.receiveShadow = true;
scene.add(floorMesh);
// Perimeter retention barrier (Jersey barricade ring)
const wallSegments = 40;
const wallGeo = new THREE.BoxGeometry(14, 4.5, 2);
const wallMat = new THREE.MeshStandardMaterial({ color: 0x22252a, roughness: 0.6 });
for (let i = 0; i < wallSegments; i++) {
const angle = (i / wallSegments) * Math.PI * 2;
const wall = new THREE.Mesh(wallGeo, wallMat);
wall.position.set(Math.cos(angle) * ARENA_RADIUS, 2.2, Math.sin(angle) * ARENA_RADIUS);
wall.rotation.y = -angle + Math.PI / 2;
wall.receiveShadow = true;
scene.add(wall);
}
// --- CROWD IN THE STANDS (Circling All Around) ---
const crowdTiers = 7;
const peoplePerTier = 180;
const totalCrowd = crowdTiers * peoplePerTier;
const crowdInstancedGeo = new THREE.BoxGeometry(0.7, 1.1, 0.7);
const crowdInstancedMat = new THREE.MeshLambertMaterial();
const crowdMesh = new THREE.InstancedMesh(crowdInstancedGeo, crowdInstancedMat, totalCrowd);
const dummy = new THREE.Object3D();
const crowdPalette = [0xffffff, 0xff2a4b, 0x00f0ff, 0xffbb00, 0x1e293b, 0x3b82f6, 0xe2e8f0];
let cIdx = 0;
for (let tier = 0; tier < crowdTiers; tier++) {
const r = ARENA_RADIUS + 4 + tier * 2.8;
const y = 3.5 + tier * 2.2;
for (let p = 0; p < peoplePerTier; p++) {
const theta = (p / peoplePerTier) * Math.PI * 2 + (tier % 2 ? 0.015 : 0);
dummy.position.set(Math.cos(theta) * r, y, Math.sin(theta) * r);
dummy.rotation.y = -theta - Math.PI / 2;
dummy.scale.set(1, 0.85 + Math.random() * 0.35, 1);
dummy.updateMatrix();
crowdMesh.setMatrixAt(cIdx, dummy.matrix);
const col = new THREE.Color(crowdPalette[Math.floor(Math.random() * crowdPalette.length)]);
crowdMesh.setColorAt(cIdx, col);
cIdx++;
}
}
crowdMesh.instanceMatrix.needsUpdate = true;
if (crowdMesh.instanceColor) crowdMesh.instanceColor.needsUpdate = true;
scene.add(crowdMesh);
// --- OBSTACLES (3 DISTINCT TYPES ON THE FLOOR) ---
const obstacles = [];
// Type 1: Crushed Sedan Car Hulks (Squashed metal rectangles)
const scrapGeo = new THREE.BoxGeometry(4.4, 1.3, 2.4);
const scrapColors = [0x991b1b, 0x1e3a8a, 0x3f3f46, 0x854d0e];
for (let i = 0; i < 9; i++) {
const angle = (i / 9) * Math.PI * 2 + 0.4;
const r = 24 + (i % 3) * 16;
const ox = Math.cos(angle) * r;
const oz = Math.sin(angle) * r;
const mat = new THREE.MeshStandardMaterial({
color: scrapColors[i % scrapColors.length],
metalness: 0.7,
roughness: 0.4
});
const scrap = new THREE.Mesh(scrapGeo, mat);
scrap.position.set(ox, getTerrainHeight(ox, oz) + 0.65, oz);
scrap.rotation.y = Math.random() * Math.PI;
scrap.rotation.z = (Math.random() - 0.5) * 0.2;
scrap.castShadow = true;
scrap.receiveShadow = true;
scene.add(scrap);
obstacles.push({
type: 'scrap',
mesh: scrap,
x: ox, z: oz,
radius: 2.4,
mass: 1200
});
}
// Type 2: Heavy Hazard Barrels (Arranged in clusters)
const barrelGeo = new THREE.CylinderGeometry(0.8, 0.8, 2.2, 12);
const barrelMat = new THREE.MeshStandardMaterial({ color: 0xf59e0b, roughness: 0.3, metalness: 0.5 });
const barrelClusters = [
{ x: -16, z: 20 }, { x: 18, z: -18 }, { x: -22, z: -22 }, { x: 25, z: 22 }
];
barrelClusters.forEach(c => {
for (let b = 0; b < 4; b++) {
const bx = c.x + (b % 2) * 1.8 - 0.9;
const bz = c.z + Math.floor(b / 2) * 1.8 - 0.9;
const bMesh = new THREE.Mesh(barrelGeo, barrelMat);
bMesh.position.set(bx, getTerrainHeight(bx, bz) + 1.1, bz);
bMesh.castShadow = true;
scene.add(bMesh);
obstacles.push({
type: 'barrel',
mesh: bMesh,
x: bx, z: bz,
radius: 1.1,
mass: 300
});
}
});
// Type 3: Industrial Concrete K-Rails / Blocks
const blockGeo = new THREE.BoxGeometry(6.5, 2.2, 1.8);
const blockMat = new THREE.MeshStandardMaterial({ color: 0x80858e, roughness: 0.9 });
const blockPositions = [
{ x: -48, z: 0, rot: 0.3 },
{ x: 48, z: 0, rot: -0.3 },
{ x: 0, z: -52, rot: Math.PI / 2 + 0.1 },
{ x: 0, z: 52, rot: Math.PI / 2 - 0.1 }
];
blockPositions.forEach(b => {
const bMesh = new THREE.Mesh(blockGeo, blockMat);
bMesh.position.set(b.x, getTerrainHeight(b.x, b.z) + 1.1, b.z);
bMesh.rotation.y = b.rot;
bMesh.castShadow = true;
bMesh.receiveShadow = true;
scene.add(bMesh);
obstacles.push({
type: 'concrete',
mesh: bMesh,
x: b.x, z: b.z,
radius: 3.2,
mass: 9000
});
});
// --- CYBERTRUCK MODEL GENERATOR ---
function createCybertruckMesh(bodyColorHex, neonColorHex) {
const truckGroup = new THREE.Group();
// Chassis / Body - Sharp triangular origami lines
const bodyShape = new THREE.Shape();
bodyShape.moveTo(-3.4, 0.4);
bodyShape.lineTo(-3.4, 1.4);
bodyShape.lineTo(-1.1, 2.0); // Hood to windshield base
bodyShape.lineTo(0.7, 2.75); // Peak apex roofline
bodyShape.lineTo(3.4, 1.7); // Slanted sail pillars down to tailgate
bodyShape.lineTo(3.4, 0.4);
bodyShape.closePath();
const extrudeSettings = { depth: 2.4, bevelEnabled: false };
const bodyGeo = new THREE.ExtrudeGeometry(bodyShape, extrudeSettings);
bodyGeo.center();
const bodyMat = new THREE.MeshStandardMaterial({
color: bodyColorHex,
metalness: 0.85,
roughness: 0.28,
flatShading: true
});
const bodyMesh = new THREE.Mesh(bodyGeo, bodyMat);
bodyMesh.position.y = 1.6;
bodyMesh.castShadow = true;
truckGroup.add(bodyMesh);
// Cyber Lightbars: Front White/Cyan, Rear Red
const fLightGeo = new THREE.BoxGeometry(0.12, 0.16, 2.3);
const fLightMat = new THREE.MeshBasicMaterial({ color: neonColorHex });
const fLight = new THREE.Mesh(fLightGeo, fLightMat);
fLight.position.set(-3.41, 1.8, 0);
truckGroup.add(fLight);
const rLightGeo = new THREE.BoxGeometry(0.12, 0.14, 2.3);
const rLightMat = new THREE.MeshBasicMaterial({ color: 0xff1e27 });
const rLight = new THREE.Mesh(rLightGeo, rLightMat);
rLight.position.set(3.41, 2.05, 0);
truckGroup.add(rLight);
// Monster Truck Lift Suspension Frame
const frameGeo = new THREE.BoxGeometry(4.4, 0.7, 1.6);
const frameMat = new THREE.MeshStandardMaterial({ color: 0x111317, metalness: 0.9, roughness: 0.4 });
const frameMesh = new THREE.Mesh(frameGeo, frameMat);
frameMesh.position.y = 0.8;
truckGroup.add(frameMesh);
// Monster Truck Giant Terra Wheels
const tireGeo = new THREE.CylinderGeometry(1.4, 1.4, 1.1, 16);
tireGeo.rotateX(Math.PI / 2);
const tireMat = new THREE.MeshStandardMaterial({ color: 0x1a1a1c, roughness: 0.95 });
const rimMat = new THREE.MeshStandardMaterial({ color: 0x555c68, metalness: 0.8, roughness: 0.3 });
const wheelOffsets = [
{ x: -2.1, z: 1.55 },
{ x: -2.1, z: -1.55 },
{ x: 2.1, z: 1.55 },
{ x: 2.1, z: -1.55 }
];
const wheels = [];
wheelOffsets.forEach(pos => {
const wheelHub = new THREE.Group();
wheelHub.position.set(pos.x, 0.8, pos.z);
const tire = new THREE.Mesh(tireGeo, tireMat);
tire.castShadow = true;
wheelHub.add(tire);
const rimGeo = new THREE.CylinderGeometry(0.75, 0.75, 1.15, 8);
rimGeo.rotateX(Math.PI / 2);
const rim = new THREE.Mesh(rimGeo, rimMat);
wheelHub.add(rim);
truckGroup.add(wheelHub);
wheels.push(wheelHub);
});
truckGroup.wheels = wheels;
truckGroup.bodyMesh = bodyMesh;
return truckGroup;
}
// --- EXACTLY FIVE TRUCKS ---
// 1 Player + 4 Rivals
const truckConfigs = [
{ id: 'player', name: 'CYBER-ONE', color: 0xd8dee9, neon: 0x00f0ff, isPlayer: true, x: 0, z: 26, heading: -Math.PI / 2 },
{ id: 'ai1', name: 'ROAD-GOLIATH', color: 0x1c1e24, neon: 0xff0044, isPlayer: false, x: -32, z: -15, heading: 0.8 },
{ id: 'ai2', name: 'APEX-BEAST', color: 0xdd6b20, neon: 0xffaa00, isPlayer: false, x: 34, z: -20, heading: 2.2 },
{ id: 'ai3', name: 'TITAN-X', color: 0x22c55e, neon: 0xa3e635, isPlayer: false, x: -28, z: 36, heading: -0.6 },
{ id: 'ai4', name: 'WAR-STEEL', color: 0x8b5cf6, neon: 0xd946ef, isPlayer: false, x: 30, z: 28, heading: 3.14 }
];
const trucks = truckConfigs.map((cfg) => {
const model = createCybertruckMesh(cfg.color, cfg.neon);
scene.add(model);
return {
id: cfg.id,
name: cfg.name,
isPlayer: cfg.isPlayer,
mesh: model,
x: cfg.x,
z: cfg.z,
y: 0,
vx: 0,
vz: 0,
vy: 0,
heading: cfg.heading,
speed: 0,
steerAngle: 0,
radius: 2.6,
mass: 2200,
onGround: true,
aiTimer: Math.random() * 2,
aiTargetX: (Math.random() - 0.5) * 50,
aiTargetZ: (Math.random() - 0.5) * 50,
hitCooldown: 0
};
});
const playerTruck = trucks.find(t => t.isPlayer);
// --- SPARK & DEBRIS PARTICLE SYSTEM ---
const MAX_PARTICLES = 160;
const pGeo = new THREE.BufferGeometry();
const pPos = new Float32Array(MAX_PARTICLES * 3);
const pVel = [];
for (let i = 0; i < MAX_PARTICLES; i++) {
pPos[i * 3] = 0;
pPos[i * 3 + 1] = -100;
pPos[i * 3 + 2] = 0;
pVel.push({ x: 0, y: 0, z: 0, life: 0 });
}
pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
const pMat = new THREE.PointsMaterial({
color: 0xffa028,
size: 0.9,
transparent: true,
opacity: 0.9,
blending: THREE.AdditiveBlending
});
const particleSystem = new THREE.Points(pGeo, pMat);
scene.add(particleSystem);
function spawnSparks(x, y, z, count = 20) {
let spawned = 0;
for (let i = 0; i < MAX_PARTICLES && spawned < count; i++) {
if (pVel[i].life <= 0) {
pPos[i * 3] = x;
pPos[i * 3 + 1] = y;
pPos[i * 3 + 2] = z;
pVel[i].x = (Math.random() - 0.5) * 22;
pVel[i].y = 4 + Math.random() * 16;
pVel[i].z = (Math.random() - 0.5) * 22;
pVel[i].life = 0.4 + Math.random() * 0.45;
spawned++;
}
}
pGeo.attributes.position.needsUpdate = true;
}
// --- INPUT HANDLING ---
const keys = {};
window.addEventListener('keydown', (e) => {
sound.init();
const code = e.code;
keys[code] = true;
// Photo mode trigger
if (code === 'KeyP') {
isPhotoMode = !isPhotoMode;
if (isPhotoMode) {
photoCard.classList.add('active');
photoScoreVal.textContent = Math.floor(score);
} else {
photoCard.classList.remove('active');
}
}
});
window.addEventListener('keyup', (e) => {
keys[e.code] = false;
});
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Camera shake
let shakeIntensity = 0;
function addCameraShake(amt) {
shakeIntensity = Math.min(shakeIntensity + amt, 2.5);
}
// --- PHYSICS & COLLISION MODEL ---
const DT = 1 / 60;
const GRAVITY = 32.0;
function resolveCircleCollision(c1, c2, restitution = 0.72) {
const dx = c2.x - c1.x;
const dz = c2.z - c1.z;
const dist = Math.hypot(dx, dz);
const minDist = c1.radius + c2.radius;
if (dist < minDist && dist > 0.0001) {
const nx = dx / dist;
const nz = dz / dist;
const overlap = minDist - dist;
// Position separation proportional to mass inverse
const invM1 = 1 / c1.mass;
const invM2 = 1 / c2.mass;
const totalInvM = invM1 + invM2;
c1.x -= nx * (overlap * (invM1 / totalInvM));
c1.z -= nz * (overlap * (invM1 / totalInvM));
c2.x += nx * (overlap * (invM2 / totalInvM));
c2.z += nz * (overlap * (invM2 / totalInvM));
// Relative velocity along collision normal
const rvx = c2.vx - c1.vx;
const rvz = c2.vz - c1.vz;
const velAlongNormal = rvx * nx + rvz * nz;
// Do not resolve if moving apart
if (velAlongNormal < 0) {
const impulseMag = -(1 + restitution) * velAlongNormal / totalInvM;
const ix = impulseMag * nx;
const iz = impulseMag * nz;
c1.vx -= ix * invM1;
c1.vz -= iz * invM1;
c2.vx += ix * invM2;
c2.vz += iz * invM2;
return { hit: true, impactSpeed: -velAlongNormal, cx: c1.x + nx * c1.radius, cz: c1.z + nz * c1.radius };
}
}
return { hit: false };
}
// --- MAIN SIMULATION STEP ---
function updateSimulation(dt) {
// 1. Clock Countdown
if (clockTime > 0) {
clockTime -= dt;
if (clockTime < 0) clockTime = 0;
}
updateHudDisplay();
// 2. Crowd Cheer Jiggle
const time = performance.now() * 0.005;
const waveY = Math.sin(time) * 0.15;
crowdMesh.position.y = waveY;
// 3. Player Drive Controls
let accelInput = 0;
let steerInput = 0;
if (keys['KeyW'] || keys['ArrowUp']) accelInput += 1;
if (keys['KeyS'] || keys['ArrowDown']) accelInput -= 0.8;
if (keys['KeyA'] || keys['ArrowLeft']) steerInput += 1;
if (keys['KeyD'] || keys['ArrowRight']) steerInput -= 1;
// Update Player
playerTruck.steerAngle = THREE.MathUtils.lerp(playerTruck.steerAngle, steerInput * 0.55, 0.15);
if (playerTruck.onGround) {
playerTruck.heading += playerTruck.steerAngle * (playerTruck.speed / 28) * 2.8 * dt * 60;
playerTruck.speed += accelInput * 38.0 * dt;
playerTruck.speed *= 0.96; // Rolling friction
}
sound.setThrottle(playerTruck.speed / 35.0);
// 4. AI Rivals Flocking & Separation
trucks.forEach((t) => {
if (t.isPlayer) return;
t.aiTimer -= dt;
if (t.aiTimer <= 0) {
t.aiTimer = 1.4 + Math.random() * 1.8;
// Hunt player or contested arena center
if (Math.random() < 0.65) {
t.aiTargetX = playerTruck.x + (Math.random() - 0.5) * 16;
t.aiTargetZ = playerTruck.z + (Math.random() - 0.5) * 16;
} else {
t.aiTargetX = (Math.random() - 0.5) * 70;
t.aiTargetZ = (Math.random() - 0.5) * 70;
}
}
// Steer toward target with flocking avoidance
let targetDx = t.aiTargetX - t.x;
let targetDz = t.aiTargetZ - t.z;
// Mutual AI separation repulsion
trucks.forEach(other => {
if (other === t) return;
const odx = t.x - other.x;
const odz = t.z - other.z;
const dist = Math.hypot(odx, odz);
if (dist < 14 && dist > 0.1) {
const push = (14 - dist) * 1.8;
targetDx += (odx / dist) * push;
targetDz += (odz / dist) * push;
}
});
// Face desired vector
const desiredHeading = Math.atan2(targetDz, -targetDx);
let dAngle = desiredHeading - t.heading;
while (dAngle > Math.PI) dAngle -= Math.PI * 2;
while (dAngle < -Math.PI) dAngle += Math.PI * 2;
const aiSteer = Math.max(-0.6, Math.min(0.6, dAngle * 2.2));
t.steerAngle = THREE.MathUtils.lerp(t.steerAngle, aiSteer, 0.12);
if (t.onGround) {
t.heading += t.steerAngle * (t.speed / 28) * 2.8 * dt * 60;
t.speed += 28.0 * dt;
t.speed = Math.min(t.speed, 26.0);
t.speed *= 0.965;
}
});
// 5. Integrate Velocities and Ground Elevations
trucks.forEach(t => {
// Translate planar speed to velocity
const forwardX = -Math.cos(t.heading);
const forwardZ = Math.sin(t.heading);
t.vx = THREE.MathUtils.lerp(t.vx, forwardX * t.speed, 0.35);
t.vz = THREE.MathUtils.lerp(t.vz, forwardZ * t.speed, 0.35);
t.x += t.vx * dt;
t.z += t.vz * dt;
// Terrain height & suspension jumping
const terrainH = getTerrainHeight(t.x, t.z);
if (t.y > terrainH + 0.1) {
t.vy -= GRAVITY * dt;
t.onGround = false;
} else {
// Ramp launch air physics
const slopeLaunch = Math.max(0, (terrainH - t.y) / Math.max(dt, 0.001));
if (slopeLaunch > 3.5 && t.onGround) {
t.vy = Math.min(slopeLaunch * 0.6, 20.0);
t.onGround = false;
} else {
t.y = THREE.MathUtils.lerp(t.y, terrainH, 0.4);
t.vy = 0;
t.onGround = true;
}
}
t.y += t.vy * dt;
if (t.y < terrainH) {
t.y = terrainH;
t.vy = 0;
t.onGround = true;
}
// Arena boundary elastic bounce
const distFromCenter = Math.hypot(t.x, t.z);
if (distFromCenter > ARENA_RADIUS - 3.5) {
const nx = t.x / distFromCenter;
const nz = t.z / distFromCenter;
t.x = nx * (ARENA_RADIUS - 3.5);
t.z = nz * (ARENA_RADIUS - 3.5);
t.vx *= -0.5;
t.vz *= -0.5;
t.speed *= -0.4;
sound.playImpact(0.5);
}
// Decrement hit visual flash cooldown
if (t.hitCooldown > 0) t.hitCooldown -= dt;
});
// 6. Truck-to-Truck Collisions
for (let i = 0; i < trucks.length; i++) {
for (let j = i + 1; j < trucks.length; j++) {
const t1 = trucks[i];
const t2 = trucks[j];
const res = resolveCircleCollision(t1, t2, 0.78);
if (res.hit && res.impactSpeed > 2.0) {
sound.playImpact(res.impactSpeed / 12);
spawnSparks(res.cx, Math.max(t1.y, t2.y) + 1.2, res.cz, Math.floor(res.impactSpeed * 3));
// Score awarded if player delivers the hit
if (t1.isPlayer || t2.isPlayer) {
const award = Math.floor(res.impactSpeed * 65);
score += award;
addCameraShake(res.impactSpeed * 0.08);
}
// Visible reaction: flash trucks & apply recoil pitch
t1.hitCooldown = 0.3;
t2.hitCooldown = 0.3;
t1.speed *= 0.4;
t2.speed *= 0.4;
}
}
}
// 7. Truck-to-Obstacle Collisions
trucks.forEach(t => {
obstacles.forEach(obs => {
const res = resolveCircleCollision(t, obs, 0.45);
if (res.hit && res.impactSpeed > 2.5) {
sound.playImpact(res.impactSpeed / 15);
spawnSparks(res.cx, t.y + 1.0, res.cz, 15);
if (t.isPlayer) {
score += 40;
addCameraShake(0.3);
}
if (obs.type === 'barrel') {
obs.x += (Math.random() - 0.5) * 1.5;
obs.z += (Math.random() - 0.5) * 1.5;
}
}
});
});
// 8. Update Meshes, Wheels, & Visual Orientations
trucks.forEach(t => {
t.mesh.position.set(t.x, t.y, t.z);
t.mesh.rotation.y = t.heading - Math.PI / 2;
// Subtle body pitch & roll based on speed and turning
const pitch = (t.vy * 0.04) - (t.speed * 0.008);
const roll = -t.steerAngle * (t.speed / 28) * 0.4;
t.mesh.rotation.x = pitch;
t.mesh.rotation.z = roll;
// Front wheel steering angle & wheel roll
t.mesh.wheels.forEach((w, idx) => {
w.rotation.x += (t.speed * dt * 2.0);
if (idx < 2) w.rotation.y = t.steerAngle * 0.8;
});
// Visible hit flash reaction
if (t.hitCooldown > 0) {
t.mesh.bodyMesh.material.color.setHex(0xff3355);
} else {
const cfg = truckConfigs.find(c => c.id === t.id);
t.mesh.bodyMesh.material.color.setHex(cfg.color);
}
});
// Sync obstacle mesh positions (for knockables)
obstacles.forEach(obs => {
obs.mesh.position.x = obs.x;
obs.mesh.position.z = obs.z;
});
// 9. Particle Update
for (let i = 0; i < MAX_PARTICLES; i++) {
if (pVel[i].life > 0) {
pVel[i].life -= dt;
pPos[i * 3] += pVel[i].x * dt;
pPos[i * 3 + 1] += pVel[i].y * dt;
pPos[i * 3 + 2] += pVel[i].z * dt;
pVel[i].y -= GRAVITY * 0.6 * dt;
if (pPos[i * 3 + 1] < 0) pVel[i].life = 0;
} else {
pPos[i * 3 + 1] = -100;
}
}
pGeo.attributes.position.needsUpdate = true;
// 10. Dynamic Stadium Chase Camera
const camTargetDist = 18.0;
const camTargetH = 9.0;
const camAngle = playerTruck.heading;
const targetCamX = playerTruck.x + Math.cos(camAngle) * camTargetDist;
const targetCamZ = playerTruck.z - Math.sin(camAngle) * camTargetDist;
const targetCamY = playerTruck.y + camTargetH;
camera.position.x = THREE.MathUtils.lerp(camera.position.x, targetCamX, 0.08);
camera.position.y = THREE.MathUtils.lerp(camera.position.y, targetCamY, 0.08);
camera.position.z = THREE.MathUtils.lerp(camera.position.z, targetCamZ, 0.08);
if (shakeIntensity > 0.01) {
camera.position.x += (Math.random() - 0.5) * shakeIntensity;
camera.position.y += (Math.random() - 0.5) * shakeIntensity;
camera.position.z += (Math.random() - 0.5) * shakeIntensity;
shakeIntensity *= 0.88;
}
camera.lookAt(playerTruck.x, playerTruck.y + 2.0, playerTruck.z);
}
// --- ANIMATION RENDER LOOP ---
let lastTime = performance.now();
function animate() {
requestAnimationFrame(animate);
const now = performance.now();
const dt = Math.min((now - lastTime) / 1000, 0.1);
lastTime = now;
// When photo mode is engaged: the simulation halts completely
if (!isPhotoMode) {
updateSimulation(dt);
}
renderer.render(scene, camera);
}
requestAnimationFrame(animate);
</script>
</body>
</html>
The notes
- Five trucks: Each AI rival executes a targeted flocking routine that evaluates a mutual distance-repulsion vector
(14 - dist) * 1.8against all other trucks, steering toward the player or arena mounds only after subtracting proximity vectors from neighbouring rigs to prevent clumping. - Demo mode: The line
if (window.location.hash.toLowerCase() === '#demo') { score = 5000; clockTime = 20.0; }modifies the core numeric state variables directly before the loop starts, driving the real simulation timer and score pipeline rather than drawing a fake cosmetic label. - Photo mode: Pressing
Phalts the physics step (updateSimulation(dt)) entirely while leaving Three'srenderer.render()active on the frozen scene, holding all velocities, timers, and particle lifetimes in place without dropping the WebGL context. - Collisions: The engine computes continuous 2D circle-vs-circle intersection geometry with mass-weighted position separation (
minDist - dist) and instantaneous impulse resolution: projecting relative velocities along the contact normal $v_n = (\vec{v}_2 - \vec{v}_1) \cdot \hat{n}$ and redistributing momentum using coefficient of restitution $e = 0.78$ across masses $m_1$ and $m_2$ via $J = \frac{-(1 + e) v_n}{m_1^{-1} + m_2^{-1}}$.
Attachments
google/gemini-3.8-flash — page