Run Detail
completedkimi-k3.1-proRecorded for these videos
27:18Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?
Nov 13, 2026 · YouTube
18:40ERNIE 5.5 Flash Preview vs GLM 5.3 Flash: Baidu's new model is very impressive!
Nov 11, 2026 · YouTube
36:22Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash
Nov 11, 2026 · YouTube
14:03Gemini 4 Carbon: Can it handle my challenges? (First look with one-shot coding tests)
Nov 10, 2026 · YouTube
47:51Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)
Nov 6, 2026 · YouTube
10:57"Crouton Alpha": the latest super-efficient coding model by Meta?
Nov 3, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
22:14GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?
Oct 27, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
31:28Is this company reselling GPT Sol 6.1 at a loss (for non-agentic/text-only)?🤔 Is this sustainable?
Oct 20, 2026 · YouTube
17:58Nemotron 3.5 Super VL vs Opus 5.5: Testing NVIDIA’s new coding juggernaut
Oct 15, 2026 · YouTube
16:04Testing a *massive* new open-weights model 🤯: Muse Spark Open (vs. Nemotron, Opus 5.5, and more)
Oct 15, 2026 · YouTube
16:43Gemini 4 Argon: Great 🐈 Animation, but a broken escalator. (Coding challenge vs Opus 5.5, Sol 6.1)
Oct 13, 2026 · YouTube
16:37Meta's new "Muse Wonder" AI is impressive... but can it compete with Anthropic's models?
Oct 12, 2026 · YouTube
11:12WOW... Haiku 5.5 is very impressive. RIP OpenAI?
Oct 7, 2026 · YouTube
22:47Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?
Oct 6, 2026 · YouTube
22:02Is Pareto 26.10 Preview Just Routing to GPT Sol? I Tested It Against Sol 6.1 Pro
Oct 1, 2026 · YouTube
11:22I Tested Sonnet 5.5 Against Opus 5.5. Is It Actually Cheaper?
Sep 28, 2026 · YouTube
30:00Did Elon Musk's team "train the gay away"... and make Grok 4.7 worse?
Sep 26, 2026 · YouTube
10:58So... how much better is Claude Opus 5.5 vs. GPT-6 Sol, really?
Sep 23, 2026 · YouTube
9:38Claude Opus 5.5... the BEST new model for coding!! 🤩
Sep 22, 2026 · YouTube
29:00Grok 4.7: improved, but GLM 5.3 FlashX beat it anyway (benchmark against Gemini, Sol, etc.)
Sep 22, 2026 · YouTube
16:54Stealth Union Alpha: Is this another cheap GPT model? (better than Luna, cheaper than Terra?)
Sep 16, 2026 · YouTube
16:45DeepSeek V4.1 Flash Is Shockingly Good for the Price
Sep 10, 2026 · YouTube
17:14How much better is GPT-6 Astra over Claude Opus 5? Real Website and Coding Tests
Sep 5, 2026 · YouTube
29:13Implementing a multiplayer game with GPT-6 Astra (+ Gemini 3.8, Opus 5, Sol Pro)
Sep 5, 2026 · YouTube
19:42Meta Muse Spark 1.3 Review: A Huge Leap Forward
Sep 2, 2026 · YouTube
17:31Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)
Sep 2, 2026 · YouTube
19:45Fable 5.1 writes an animated novel using Ren'Py... did it do better than Sol Pro 5.6?
Sep 1, 2026 · YouTube
14:09Testing IBM Granite-4.2-8B! Can it name 100 women?
Aug 31, 2026 · YouTube
17:37Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?
Aug 28, 2026 · YouTube
23:58Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok
Aug 27, 2026 · YouTube
Provider
openrouter
Challenge Version
v1.0
Turns
1
Duration
674.9s
Total Tokens
57,056
Input Tokens
786
Output Tokens
56,270
Reasoning Tokens
34,420
Reasoning Effort
default
Est. Cost
$0.5643
Started
10/23/2026, 7:10:45 PM
OR Provider
Moonshot AI
Finish Reason
stop
Generation ID
gen-1792782646-VRC6vYncz5VrIknoCPAQ
Turns (1)
Turn #1
786 in56,270 out34,420 reasoning57,056 total674.8s
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
Cybertruck: Voltage Bowl Rally is a neon-lit stadium brawl where five stainless-steel monster trucks trade jumps, debris impacts, and full-contact hits beneath packed grandstands.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>Cybertruck: Voltage Bowl Rally</title>
<style>
:root {
color-scheme: dark;
--cyan: #62edff;
--orange: #ff9d45;
--ink: #05090e;
--panel: rgba(7, 14, 22, .86);
}
* { box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background: #05090e;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: #eefaff;
}
#stage, #stage canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
#stage canvas { outline: none; }
#hud {
position: fixed;
inset: 0;
z-index: 5;
pointer-events: none;
text-transform: uppercase;
}
.topbar {
position: absolute;
top: 18px;
left: 20px;
right: 20px;
display: grid;
grid-template-columns: minmax(250px, 1fr) auto auto;
gap: 10px;
align-items: stretch;
}
.panel {
position: relative;
background: linear-gradient(135deg, rgba(12, 24, 35, .94), var(--panel));
border: 1px solid rgba(127, 224, 255, .25);
box-shadow: 0 12px 35px rgba(0,0,0,.28), inset 0 0 24px rgba(70,220,255,.025);
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.brand { padding: 12px 20px 11px; }
.brand::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 42%;
height: 2px;
background: var(--cyan);
box-shadow: 0 0 12px var(--cyan);
}
.eyebrow {
color: #88a3b2;
font-size: 9px;
letter-spacing: .23em;
margin-bottom: 4px;
}
.arena {
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: clamp(23px, 2.6vw, 38px);
line-height: .95;
letter-spacing: .065em;
font-weight: 900;
white-space: nowrap;
}
.arena span { color: var(--cyan); }
.stat {
min-width: 150px;
padding: 10px 18px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
}
.stat label {
color: #809aa9;
font-size: 9px;
letter-spacing: .25em;
}
.stat output {
font-size: clamp(24px, 3vw, 39px);
line-height: 1.05;
font-weight: 800;
letter-spacing: .04em;
font-variant-numeric: tabular-nums;
}
#score { color: var(--cyan); text-shadow: 0 0 18px rgba(98,237,255,.25); }
#clock.danger { color: #ff6959; text-shadow: 0 0 18px rgba(255,70,50,.45); }
#event {
position: absolute;
top: 112px;
left: 50%;
transform: translate(-50%, -8px);
padding: 8px 18px;
color: var(--cyan);
background: rgba(3, 9, 14, .78);
border-left: 2px solid currentColor;
border-right: 2px solid currentColor;
font-weight: 900;
font-size: 13px;
letter-spacing: .13em;
opacity: 0;
transition: opacity .16s, transform .16s;
white-space: nowrap;
}
#event.show { opacity: 1; transform: translate(-50%, 0); }
.controls {
position: absolute;
left: 20px;
bottom: 18px;
padding: 10px 15px;
display: flex;
gap: 16px;
align-items: center;
color: #9db1bc;
font-size: 10px;
letter-spacing: .08em;
}
.controls b { color: #fff; font-weight: 800; }
.controls .drive { color: var(--cyan); }
#truck-status {
position: absolute;
right: 20px;
bottom: 18px;
padding: 10px 15px;
color: #9db1bc;
font-size: 10px;
letter-spacing: .12em;
}
#truck-status::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 9px;
background: var(--cyan);
box-shadow: 0 0 9px var(--cyan);
vertical-align: 1px;
}
.overlay {
position: fixed;
inset: 0;
z-index: 20;
display: none;
pointer-events: none;
text-transform: uppercase;
}
.overlay.show { display: flex; }
#photo {
align-items: flex-end;
justify-content: space-between;
padding: clamp(28px, 6vw, 80px);
background:
linear-gradient(180deg, rgba(2,5,9,.16), rgba(2,5,9,.7)),
repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.018) 3px 4px);
}
.photo-title {
border-left: 4px solid var(--cyan);
padding-left: 22px;
}
.photo-title small, .photo-score small {
display: block;
color: var(--cyan);
font-size: 11px;
letter-spacing: .3em;
margin-bottom: 10px;
}
.photo-title strong {
display: block;
max-width: 760px;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: clamp(48px, 9vw, 132px);
line-height: .82;
letter-spacing: .025em;
text-shadow: 0 6px 30px #000;
}
.photo-score { text-align: right; }
.photo-score strong {
display: block;
color: #fff;
font-size: clamp(38px, 6vw, 80px);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.photo-resume {
position: absolute;
top: 28px;
right: 32px;
padding: 9px 13px;
border: 1px solid rgba(255,255,255,.35);
background: rgba(0,0,0,.45);
color: #d6e6ed;
font-size: 10px;
letter-spacing: .16em;
}
#gameover {
z-index: 15;
align-items: center;
justify-content: center;
background: rgba(2,5,9,.56);
}
.gameover-card {
min-width: min(440px, 88vw);
padding: 32px;
text-align: center;
background: rgba(6,13,20,.95);
border: 1px solid rgba(98,237,255,.45);
box-shadow: 0 20px 80px #000;
}
.gameover-card h2 {
margin: 0 0 8px;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: 46px;
letter-spacing: .06em;
}
.gameover-card p { color: #8fa7b4; font-size: 11px; letter-spacing: .13em; }
#final-score { color: var(--cyan); font-size: 42px; font-weight: 900; margin: 15px 0; }
#failure {
position: fixed;
inset: 0;
z-index: 100;
display: none;
place-items: center;
padding: 30px;
background: #080d12;
color: #ffae75;
text-align: center;
}
@media (max-width: 760px) {
.topbar { top: 10px; left: 10px; right: 10px; grid-template-columns: 1fr 1fr; }
.brand { grid-column: 1 / -1; }
.stat { min-width: 0; }
#event { top: 166px; }
.controls { left: 10px; right: 10px; bottom: 10px; gap: 8px; flex-wrap: wrap; }
#truck-status { display: none; }
#photo { align-items: flex-start; flex-direction: column; justify-content: flex-end; gap: 28px; }
.photo-score { text-align: left; }
}
</style>
</head>
<body>
<div id="stage"></div>
<div id="hud">
<div class="topbar">
<div class="panel brand">
<div class="eyebrow">Cybertruck // Monster Truck Rally</div>
<div class="arena">Voltage <span>Bowl</span></div>
</div>
<div class="panel stat">
<label>Score</label>
<output id="score">000000</output>
</div>
<div class="panel stat">
<label>Clock</label>
<output id="clock">02:00</output>
</div>
</div>
<div id="event"></div>
<div class="panel controls">
<span class="drive"><b>WASD / Arrows</b> Drive</span>
<span><b>Space</b> Handbrake</span>
<span><b>P</b> Photo mode</span>
<span><b>R</b> Restart</span>
</div>
<div id="truck-status" class="panel">5 trucks // full contact</div>
</div>
<div id="photo" class="overlay" aria-hidden="true">
<div class="photo-resume">Simulation frozen // Press P to resume</div>
<div class="photo-title">
<small>Photo mode // Arena</small>
<strong>Voltage<br>Bowl</strong>
</div>
<div class="photo-score">
<small>Current score</small>
<strong id="photo-score">0</strong>
</div>
</div>
<div id="gameover" class="overlay">
<div class="gameover-card">
<h2>Heat Complete</h2>
<p>Final Voltage Bowl score</p>
<div id="final-score">0</div>
<p>Press R to run the rally again</p>
</div>
</div>
<div id="failure">The pinned Three.js runtime could not be loaded.<br>Check the connection and reload the page.</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
<script>
(function () {
"use strict";
if (!window.THREE) {
document.getElementById("failure").style.display = "grid";
return;
}
const DEMO = window.location.hash === "#demo";
const ROUND_TIME = 120;
const STEP = 1 / 60;
const ARENA_X = 49.5;
const ARENA_Z = 31.5;
const ARENA_NAME = "VOLTAGE BOWL";
const scoreEl = document.getElementById("score");
const clockEl = document.getElementById("clock");
const eventEl = document.getElementById("event");
const statusEl = document.getElementById("truck-status");
const photoEl = document.getElementById("photo");
const photoScoreEl = document.getElementById("photo-score");
const gameoverEl = document.getElementById("gameover");
const finalScoreEl = document.getElementById("final-score");
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const lerp = (a, b, t) => a + (b - a) * t;
const wrapAngle = a => Math.atan2(Math.sin(a), Math.cos(a));
const formatScore = n => String(Math.max(0, Math.floor(n))).padStart(6, "0");
const formatTime = seconds => {
const total = Math.max(0, Math.ceil(seconds));
return String(Math.floor(total / 60)).padStart(2, "0") + ":" +
String(total % 60).padStart(2, "0");
};
function mulberry32(seed) {
return function () {
let t = seed += 0x6D2B79F5;
t = Math.imul(t ^ t >>> 15, t | 1);
t ^= t + Math.imul(t ^ t >>> 7, t | 61);
return ((t ^ t >>> 14) >>> 0) / 4294967296;
};
}
const worldRand = mulberry32(0x51A7E);
let gameRand = mulberry32(0xC0FFEE);
const renderer = new THREE.WebGLRenderer({
antialias: true,
powerPreference: "high-performance"
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.75));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.15;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.domElement.tabIndex = 0;
renderer.domElement.setAttribute("aria-label", "Voltage Bowl monster truck rally");
document.getElementById("stage").appendChild(renderer.domElement);
renderer.domElement.addEventListener("pointerdown", () => renderer.domElement.focus());
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x07101a);
scene.fog = new THREE.FogExp2(0x07101a, 0.0058);
const camera = new THREE.PerspectiveCamera(48, window.innerWidth / window.innerHeight, 0.1, 300);
camera.position.set(0, 52, 64);
scene.add(new THREE.HemisphereLight(0xbfe8ff, 0x4a2918, 1.65));
const sun = new THREE.DirectionalLight(0xfff1d6, 2.5);
sun.position.set(-28, 48, 24);
sun.castShadow = true;
sun.shadow.mapSize.set(1536, 1536);
sun.shadow.camera.left = -68;
sun.shadow.camera.right = 68;
sun.shadow.camera.top = 58;
sun.shadow.camera.bottom = -58;
sun.shadow.camera.near = 1;
sun.shadow.camera.far = 130;
sun.shadow.bias = -0.00035;
scene.add(sun);
const rim = new THREE.DirectionalLight(0x458cff, 0.8);
rim.position.set(35, 24, -30);
scene.add(rim);
function makeDirtTexture() {
const canvas = document.createElement("canvas");
canvas.width = canvas.height = 256;
const ctx = canvas.getContext("2d");
const image = ctx.createImageData(256, 256);
for (let i = 0; i < image.data.length; i += 4) {
const n = (worldRand() - 0.5) * 26;
image.data[i] = 83 + n;
image.data[i + 1] = 61 + n * 0.72;
image.data[i + 2] = 40 + n * 0.45;
image.data[i + 3] = 255;
}
ctx.putImageData(image, 0, 0);
ctx.globalAlpha = 0.18;
for (let i = 0; i < 180; i++) {
ctx.strokeStyle = worldRand() > 0.5 ? "#21170f" : "#b38a58";
ctx.lineWidth = 1 + worldRand() * 3;
ctx.beginPath();
const x = worldRand() * 256;
const y = worldRand() * 256;
ctx.moveTo(x, y);
ctx.lineTo(x + (worldRand() - 0.5) * 35, y + (worldRand() - 0.5) * 35);
ctx.stroke();
}
const texture = new THREE.CanvasTexture(canvas);
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(7, 5);
texture.colorSpace = THREE.SRGBColorSpace;
texture.anisotropy = Math.min(8, renderer.capabilities.getMaxAnisotropy());
return texture;
}
const dirtMaterial = new THREE.MeshStandardMaterial({
map: makeDirtTexture(),
color: 0xb99a78,
roughness: 1,
metalness: 0
});
const floorGeometry = new THREE.CircleGeometry(1, 128);
floorGeometry.rotateX(-Math.PI / 2);
const floor = new THREE.Mesh(floorGeometry, dirtMaterial);
floor.scale.set(55, 1, 37);
floor.receiveShadow = true;
scene.add(floor);
function ringGeometry(ix, iz, ox, oz, y, segments = 128) {
const positions = [];
const indices = [];
for (let i = 0; i < segments; i++) {
const a = i / segments * Math.PI * 2;
positions.push(ix * Math.cos(a), y, iz * Math.sin(a));
positions.push(ox * Math.cos(a), y, oz * Math.sin(a));
}
for (let i = 0; i < segments; i++) {
const j = (i + 1) % segments;
const a = i * 2;
const b = j * 2;
indices.push(a, b, b + 1, a, b + 1, a + 1);
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
geometry.setIndex(indices);
geometry.computeVertexNormals();
return geometry;
}
function wallGeometry(rx, rz, bottom, top, segments = 128) {
const positions = [];
const indices = [];
for (let i = 0; i < segments; i++) {
const a = i / segments * Math.PI * 2;
const x = rx * Math.cos(a);
const z = rz * Math.sin(a);
positions.push(x, bottom, z, x, top, z);
}
for (let i = 0; i < segments; i++) {
const j = (i + 1) % segments;
const a = i * 2;
const b = j * 2;
indices.push(a, b, b + 1, a, b + 1, a + 1);
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
geometry.setIndex(indices);
geometry.computeVertexNormals();
return geometry;
}
const concreteMaterials = [
new THREE.MeshStandardMaterial({ color: 0x242d35, roughness: 0.95, side: THREE.DoubleSide }),
new THREE.MeshStandardMaterial({ color: 0x303941, roughness: 0.95, side: THREE.DoubleSide })
];
const innerWall = new THREE.Mesh(
wallGeometry(55, 37, 0, 2.5),
new THREE.MeshStandardMaterial({ color: 0x41474b, roughness: 0.85, side: THREE.DoubleSide })
);
innerWall.receiveShadow = true;
scene.add(innerWall);
const crowdRows = [];
for (let row = 0; row < 8; row++) {
const y = 2.8 + row * 1.12;
const rx = 56 + row * 1.8;
const rz = 38 + row * 1.35;
const material = concreteMaterials[row % 2];
const riser = new THREE.Mesh(wallGeometry(rx, rz, y - 1.12, y), material);
const tread = new THREE.Mesh(ringGeometry(rx, rz, rx + 1.8, rz + 1.35, y), material);
scene.add(riser, tread);
crowdRows.push({ y, rx, rz, count: 170 + row * 12 });
}
function buildCrowd() {
const total = crowdRows.reduce((sum, row) => sum + row.count, 0);
const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.9 });
const headMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.95 });
const bodies = new THREE.InstancedMesh(new THREE.BoxGeometry(0.62, 0.78, 0.4), bodyMaterial, total);
const heads = new THREE.InstancedMesh(new THREE.SphereGeometry(0.23, 5, 4), headMaterial, total);
const dummy = new THREE.Object3D();
const shirtColors = [
0x48d9ef, 0xff7448, 0xf0d84d, 0xe9edf0, 0x315b86,
0xd94378, 0x78bc59, 0x803fa2, 0xc6c1a9, 0x27323e
];
const skinColors = [0xf0c39d, 0xc98d64, 0x8d5b3e, 0xf2d2b5, 0x68442f];
let index = 0;
for (const row of crowdRows) {
for (let i = 0; i < row.count; i++) {
const a = (i + worldRand() * 0.55) / row.count * Math.PI * 2;
const scale = 0.82 + worldRand() * 0.34;
const x = (row.rx + 0.75 + worldRand() * 0.25) * Math.cos(a);
const z = (row.rz + 0.55 + worldRand() * 0.2) * Math.sin(a);
dummy.position.set(x, row.y + 0.48 * scale, z);
dummy.rotation.set(0, -a, (worldRand() - 0.5) * 0.08);
dummy.scale.set(scale, scale, scale);
dummy.updateMatrix();
bodies.setMatrixAt(index, dummy.matrix);
bodies.setColorAt(index, new THREE.Color(shirtColors[Math.floor(worldRand() * shirtColors.length)]));
dummy.position.set(x, row.y + 1.08 * scale, z);
dummy.rotation.set(0, 0, 0);
dummy.scale.set(scale, scale, scale);
dummy.updateMatrix();
heads.setMatrixAt(index, dummy.matrix);
heads.setColorAt(index, new THREE.Color(skinColors[Math.floor(worldRand() * skinColors.length)]));
index++;
}
}
bodies.instanceMatrix.needsUpdate = true;
heads.instanceMatrix.needsUpdate = true;
if (bodies.instanceColor) bodies.instanceColor.needsUpdate = true;
if (heads.instanceColor) heads.instanceColor.needsUpdate = true;
scene.add(bodies, heads);
}
buildCrowd();
const adColors = [0x24dfff, 0xff6b32, 0xe8409a, 0x9bea45];
const adGeometry = new THREE.BoxGeometry(6.8, 1.25, 0.25);
for (let i = 0; i < 28; i++) {
const a = i / 28 * Math.PI * 2;
const tx = -55 * Math.sin(a);
const tz = 37 * Math.cos(a);
const length = Math.hypot(tx, tz);
const material = new THREE.MeshStandardMaterial({
color: 0x111a20,
emissive: adColors[i % adColors.length],
emissiveIntensity: i % 2 ? 0.35 : 0.85,
roughness: 0.5
});
const panel = new THREE.Mesh(adGeometry, material);
panel.position.set(55.15 * Math.cos(a), 1.45, 37.15 * Math.sin(a));
panel.rotation.y = Math.atan2(-tz / length, tx / length);
scene.add(panel);
}
function addLightTower(x, z) {
const pole = new THREE.Mesh(
new THREE.CylinderGeometry(0.22, 0.35, 20, 8),
new THREE.MeshStandardMaterial({ color: 0x3a4852, metalness: 0.7, roughness: 0.4 })
);
pole.position.set(x, 10, z);
scene.add(pole);
const bank = new THREE.Group();
const housing = new THREE.Mesh(
new THREE.BoxGeometry(5.2, 2.1, 0.55),
new THREE.MeshStandardMaterial({ color: 0x182129, metalness: 0.6 })
);
bank.add(housing);
for (let ix = -1; ix <= 1; ix++) {
for (let iy = -0.5; iy <= 0.5; iy += 1) {
const lamp = new THREE.Mesh(
new THREE.BoxGeometry(1.25, 0.65, 0.12),
new THREE.MeshBasicMaterial({ color: 0xd9f5ff })
);
lamp.position.set(ix * 1.55, iy * 0.85, 0.34);
bank.add(lamp);
}
}
bank.position.set(x, 20.5, z);
bank.lookAt(0, 5, 0);
scene.add(bank);
}
addLightTower(-61, -42);
addLightTower(61, -42);
addLightTower(-61, 42);
addLightTower(61, 42);
function makeScoreboard() {
const canvas = document.createElement("canvas");
canvas.width = 1024;
canvas.height = 256;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#050b11";
ctx.fillRect(0, 0, 1024, 256);
ctx.strokeStyle = "#3de5ff";
ctx.lineWidth = 8;
ctx.strokeRect(10, 10, 1004, 236);
ctx.fillStyle = "#6cecff";
ctx.font = "bold 30px monospace";
ctx.textAlign = "center";
ctx.fillText("CYBERTRUCK // FULL CONTACT", 512, 58);
ctx.fillStyle = "#f4fbff";
ctx.font = "900 94px sans-serif";
ctx.fillText(ARENA_NAME, 512, 164);
ctx.fillStyle = "#ff9d45";
ctx.font = "bold 25px monospace";
ctx.fillText("STEEL • DIRT • NO LIFT", 512, 214);
const texture = new THREE.CanvasTexture(canvas);
texture.colorSpace = THREE.SRGBColorSpace;
const board = new THREE.Mesh(
new THREE.PlaneGeometry(23, 5.75),
new THREE.MeshBasicMaterial({ map: texture })
);
board.position.set(0, 15.2, -50);
scene.add(board);
const back = new THREE.Mesh(
new THREE.BoxGeometry(24, 6.5, 0.6),
new THREE.MeshStandardMaterial({ color: 0x101820, metalness: 0.5 })
);
back.position.set(0, 15.2, -50.4);
scene.add(back);
}
makeScoreboard();
const hills = [
{ x: -19, z: 7, rx: 8, rz: 5, h: 2.25 },
{ x: 16, z: -13, rx: 7, rz: 5, h: 2.05 },
{ x: 3, z: 16, rx: 6, rz: 4, h: 1.65 }
];
const hillMaterial = new THREE.MeshStandardMaterial({
color: 0x79583a,
roughness: 1,
flatShading: false
});
for (const hill of hills) {
const mesh = new THREE.Mesh(
new THREE.SphereGeometry(1, 28, 12, 0, Math.PI * 2, 0, Math.PI / 2),
hillMaterial
);
mesh.position.set(hill.x, -0.03, hill.z);
mesh.scale.set(hill.rx, hill.h, hill.rz);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);
}
function prismGeometry(profile, width) {
const contour = profile.map(p => new THREE.Vector2(p[0], p[1]));
const triangles = THREE.ShapeUtils.triangulateShape(contour, []);
const positions = [];
const half = width / 2;
const push = (x, p) => positions.push(x, p[1], p[0]);
for (const tri of triangles) {
push(-half, profile[tri[0]]);
push(-half, profile[tri[2]]);
push(-half, profile[tri[1]]);
push(half, profile[tri[0]]);
push(half, profile[tri[1]]);
push(half, profile[tri[2]]);
}
for (let i = 0; i < profile.length; i++) {
const j = (i + 1) % profile.length;
const a = profile[i];
const b = profile[j];
push(-half, a); push(half, a); push(half, b);
push(-half, a); push(half, b); push(-half, b);
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
geometry.computeVertexNormals();
return geometry;
}
const ramps = [
{ x: -1, z: -4, yaw: Math.PI / 2, w: 6, l: 9, h: 2.75 },
{ x: 25, z: 7, yaw: -0.85, w: 5.5, l: 8, h: 2.4 }
];
const rampMaterial = new THREE.MeshStandardMaterial({
color: 0x3d4242,
roughness: 0.8,
metalness: 0.25,
side: THREE.DoubleSide
});
const rampStripeMaterial = new THREE.MeshStandardMaterial({
color: 0xffb12e,
emissive: 0x7a3500,
emissiveIntensity: 0.25,
roughness: 0.7
});
for (const ramp of ramps) {
const group = new THREE.Group();
const profile = [
[-ramp.l / 2, 0],
[ramp.l / 2, 0],
[ramp.l / 2, ramp.h],
[-ramp.l / 2, 0.05]
];
const mesh = new THREE.Mesh(prismGeometry(profile, ramp.w), rampMaterial);
mesh.castShadow = true;
mesh.receiveShadow = true;
group.add(mesh);
for (let i = 1; i <= 5; i++) {
const z = -ramp.l / 2 + i * ramp.l / 6;
const stripe = new THREE.Mesh(
new THREE.BoxGeometry(ramp.w * 0.88, 0.055, 0.32),
rampStripeMaterial
);
stripe.position.set(0, ramp.h * (z + ramp.l / 2) / ramp.l + 0.055, z);
stripe.rotation.x = -Math.atan2(ramp.h, ramp.l);
group.add(stripe);
}
group.position.set(ramp.x, 0.02, ramp.z);
group.rotation.y = ramp.yaw;
scene.add(group);
}
function getSurface(x, z) {
let height = 0;
for (const hill of hills) {
const q = ((x - hill.x) / hill.rx) ** 2 + ((z - hill.z) / hill.rz) ** 2;
if (q < 1) height = Math.max(height, hill.h * Math.sqrt(1 - q));
}
for (const ramp of ramps) {
const dx = x - ramp.x;
const dz = z - ramp.z;
const c = Math.cos(ramp.yaw);
const s = Math.sin(ramp.yaw);
const lx = c * dx - s * dz;
const lz = s * dx + c * dz;
if (Math.abs(lx) <= ramp.w / 2 && Math.abs(lz) <= ramp.l / 2) {
height = Math.max(height, ramp.h * (lz + ramp.l / 2) / ramp.l);
}
}
return height;
}
const debrisGeometry = new THREE.DodecahedronGeometry(0.27, 0);
const debrisMaterial = new THREE.MeshStandardMaterial({ color: 0x4b4138, roughness: 1 });
const debris = new THREE.InstancedMesh(debrisGeometry, debrisMaterial, 70);
{
const dummy = new THREE.Object3D();
for (let i = 0; i < 70; i++) {
const a = worldRand() * Math.PI * 2;
const r = Math.sqrt(worldRand()) * 0.88;
const x = Math.cos(a) * ARENA_X * r;
const z = Math.sin(a) * ARENA_Z * r;
const scale = 0.45 + worldRand() * 1.4;
dummy.position.set(x, getSurface(x, z) + 0.1 * scale, z);
dummy.rotation.set(worldRand() * 3, worldRand() * 3, worldRand() * 3);
dummy.scale.set(scale * 1.5, scale * 0.55, scale);
dummy.updateMatrix();
debris.setMatrixAt(i, dummy.matrix);
}
debris.instanceMatrix.needsUpdate = true;
debris.castShadow = true;
scene.add(debris);
}
const obstacles = [];
function registerObstacle(o) {
o.id = obstacles.length;
o.start = { x: o.x, z: o.z, yaw: o.yaw };
o.vx = 0;
o.vz = 0;
o.spin = 0;
o.jolt = 0;
o.tilt = 0;
o.cooldowns = Array(5).fill(-100);
obstacles.push(o);
scene.add(o.mesh);
}
function addCar(x, z, yaw, color) {
const group = new THREE.Group();
const paint = new THREE.MeshStandardMaterial({ color, roughness: 0.75, metalness: 0.35 });
const dark = new THREE.MeshStandardMaterial({ color: 0x141719, roughness: 0.9 });
const base = new THREE.Mesh(new THREE.BoxGeometry(1.95, 0.52, 3.8), paint);
base.position.y = 0.55;
base.rotation.z = 0.05;
const cabin = new THREE.Mesh(new THREE.BoxGeometry(1.65, 0.43, 1.85), paint);
cabin.position.set(0.08, 0.98, -0.25);
cabin.rotation.set(0.08, 0, -0.12);
const glass = new THREE.Mesh(new THREE.BoxGeometry(1.5, 0.08, 0.8), dark);
glass.position.set(0, 1.2, 0.35);
glass.rotation.x = -0.18;
group.add(base, cabin, glass);
for (const sx of [-1, 1]) {
for (const sz of [-1, 1]) {
const wheel = new THREE.Mesh(new THREE.CylinderGeometry(0.38, 0.38, 0.28, 10), dark);
wheel.geometry.rotateZ(Math.PI / 2);
wheel.position.set(sx * 1.02, 0.38, sz * 1.25);
group.add(wheel);
}
}
const door = new THREE.Mesh(new THREE.BoxGeometry(1.4, 0.08, 1.1), paint);
door.position.set(1.45, 0.12, 0.8);
door.rotation.y = 0.6;
group.add(door);
group.traverse(m => { if (m.isMesh) { m.castShadow = true; m.receiveShadow = true; } });
registerObstacle({
kind: "car", shape: "circle", x, z, yaw, mesh: group,
r: 1.95, height: 1.35, dynamic: true, invMass: 0.16,
restitution: 0.16, drag: 3.8, avoidR: 2.3
});
}
function addTires(x, z, yaw) {
const group = new THREE.Group();
const material = new THREE.MeshStandardMaterial({ color: 0x151719, roughness: 0.95 });
for (let i = 0; i < 3; i++) {
const tire = new THREE.Mesh(new THREE.TorusGeometry(0.65, 0.23, 7, 14), material);
tire.rotation.x = Math.PI / 2;
tire.rotation.z = i * 0.35;
tire.position.y = 0.28 + i * 0.42;
tire.castShadow = true;
group.add(tire);
}
registerObstacle({
kind: "tires", shape: "circle", x, z, yaw, mesh: group,
r: 0.9, height: 1.45, dynamic: true, invMass: 2.4,
restitution: 0.3, drag: 2.1, avoidR: 1
});
}
function addBarrier(x, z, yaw) {
const group = new THREE.Group();
const concrete = new THREE.MeshStandardMaterial({ color: 0xa5a099, roughness: 0.95 });
const stripe = new THREE.MeshStandardMaterial({
color: 0xffa62e, emissive: 0x5b2500, emissiveIntensity: 0.2, roughness: 0.8
});
const base = new THREE.Mesh(new THREE.BoxGeometry(5, 1.05, 1), concrete);
base.position.y = 0.55;
const foot = new THREE.Mesh(new THREE.BoxGeometry(5.5, 0.22, 1.55), concrete);
foot.position.y = 0.12;
group.add(base, foot);
for (let i = -2; i <= 2; i++) {
const mark = new THREE.Mesh(new THREE.BoxGeometry(0.52, 0.65, 0.04), stripe);
mark.position.set(i * 0.95, 0.61, 0.52);
mark.rotation.z = -0.35;
group.add(mark);
}
group.traverse(m => { if (m.isMesh) { m.castShadow = true; m.receiveShadow = true; } });
registerObstacle({
kind: "barrier", shape: "box", x, z, yaw, mesh: group,
hw: 2.5, hd: 0.5, height: 1.2, dynamic: false, invMass: 0,
restitution: 0.1, avoidR: 3
});
}
addCar(-10, -15, 0.45, 0xb84c32);
addCar(10, 7, -0.8, 0x367c96);
addCar(-29, -12, 1.4, 0xc59935);
addCar(29, -15, -0.3, 0x72518c);
addTires(-8, 4, 0);
addTires(8, -8, 0.4);
addTires(-30, 11, 0);
addTires(31, 15, 0);
addTires(0, -23, 0);
addBarrier(-13, 0, 0.3);
addBarrier(13, 17, -0.4);
addBarrier(-22, -20, 1.1);
addBarrier(21, -1, 1.3);
function makeLabel(text, color) {
const canvas = document.createElement("canvas");
canvas.width = 384;
canvas.height = 80;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(3,8,12,.78)";
ctx.fillRect(28, 10, 328, 58);
ctx.strokeStyle = color;
ctx.lineWidth = 3;
ctx.strokeRect(28, 10, 328, 58);
ctx.fillStyle = "#ffffff";
ctx.font = "bold 30px monospace";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(text, 192, 40);
const texture = new THREE.CanvasTexture(canvas);
texture.colorSpace = THREE.SRGBColorSpace;
const sprite = new THREE.Sprite(new THREE.SpriteMaterial({
map: texture,
transparent: true,
depthTest: false
}));
sprite.scale.set(5.2, 1.08, 1);
sprite.position.y = 4.9;
sprite.renderOrder = 8;
return sprite;
}
const tireGeometry = new THREE.CylinderGeometry(1, 1, 0.72, 14);
tireGeometry.rotateZ(Math.PI / 2);
const hubGeometry = new THREE.CylinderGeometry(0.42, 0.42, 0.76, 8);
hubGeometry.rotateZ(Math.PI / 2);
const truckTireMaterial = new THREE.MeshStandardMaterial({
color: 0x111416, roughness: 0.92, flatShading: true
});
const hubMaterial = new THREE.MeshStandardMaterial({
color: 0x7d8b91, metalness: 0.8, roughness: 0.3, flatShading: true
});
const darkMetalMaterial = new THREE.MeshStandardMaterial({
color: 0x1c252b, metalness: 0.65, roughness: 0.45
});
const windowMaterial = new THREE.MeshStandardMaterial({
color: 0x07151e, metalness: 0.55, roughness: 0.2, side: THREE.DoubleSide
});
function sidePanelGeometry(points, x) {
const positions = [];
for (let i = 1; i < points.length - 1; i++) {
for (const p of [points[0], points[i], points[i + 1]]) {
positions.push(x, p[1], p[0]);
}
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
geometry.computeVertexNormals();
return geometry;
}
function createTruckModel(def, index) {
const root = new THREE.Group();
root.rotation.order = "YXZ";
const bodyShell = new THREE.Group();
root.add(bodyShell);
const bodyMaterial = new THREE.MeshStandardMaterial({
color: 0xaab5ba,
metalness: 0.48,
roughness: 0.31,
flatShading: true,
side: THREE.DoubleSide,
emissive: 0x000000
});
const accentMaterial = new THREE.MeshStandardMaterial({
color: def.color,
emissive: def.color,
emissiveIntensity: 1.5,
roughness: 0.35
});
const profile = [
[-2.75, 1.25], [2.75, 1.25], [2.75, 1.75],
[2.25, 2.05], [-0.25, 3.05], [-2.45, 2.15], [-2.75, 1.85]
];
const body = new THREE.Mesh(prismGeometry(profile, 2.7), bodyMaterial);
bodyShell.add(body);
const chassis = new THREE.Mesh(new THREE.BoxGeometry(2.45, 0.35, 4.75), darkMetalMaterial);
chassis.position.y = 1.15;
bodyShell.add(chassis);
const sideWindowPoints = [
[-1.55, 2.2], [-0.35, 2.87], [0.95, 2.52],
[0.55, 2.12], [-1.4, 2.12]
];
for (const side of [-1, 1]) {
const windowMesh = new THREE.Mesh(
sidePanelGeometry(sideWindowPoints, side * 1.356),
windowMaterial
);
bodyShell.add(windowMesh);
const strip = new THREE.Mesh(new THREE.BoxGeometry(0.035, 0.075, 3.8), accentMaterial);
strip.position.set(side * 1.375, 1.55, -0.05);
bodyShell.add(strip);
}
const windshieldGeometry = new THREE.BufferGeometry();
windshieldGeometry.setAttribute("position", new THREE.Float32BufferAttribute([
-1.12, 3.015, -0.12, 1.12, 3.015, -0.12, 1.12, 2.35, 1.5,
-1.12, 3.015, -0.12, 1.12, 2.35, 1.5, -1.12, 2.35, 1.5
], 3));
windshieldGeometry.computeVertexNormals();
bodyShell.add(new THREE.Mesh(windshieldGeometry, windowMaterial));
const frontBar = new THREE.Mesh(new THREE.BoxGeometry(2.42, 0.13, 0.09), accentMaterial);
frontBar.position.set(0, 1.68, 2.77);
bodyShell.add(frontBar);
const rearMaterial = new THREE.MeshStandardMaterial({
color: 0xff263c, emissive: 0xff1028, emissiveIntensity: 1.6
});
const rearBar = new THREE.Mesh(new THREE.BoxGeometry(2.35, 0.11, 0.08), rearMaterial);
rearBar.position.set(0, 1.76, -2.77);
bodyShell.add(rearBar);
for (const z of [-2.82, 2.82]) {
const bumper = new THREE.Mesh(new THREE.BoxGeometry(2.85, 0.25, 0.24), darkMetalMaterial);
bumper.position.set(0, 1.12, z);
bodyShell.add(bumper);
}
const beacon = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.18, 0.5), accentMaterial);
beacon.position.set(0, 3.12, -0.28);
bodyShell.add(beacon);
const wheelPivots = [];
const wheelSpinners = [];
for (const sx of [-1, 1]) {
for (const sz of [-1, 1]) {
const pivot = new THREE.Group();
pivot.position.set(sx * 1.58, 1, sz * 1.78);
const spinner = new THREE.Group();
const tire = new THREE.Mesh(tireGeometry, truckTireMaterial);
const hub = new THREE.Mesh(hubGeometry, hubMaterial);
spinner.add(tire, hub);
pivot.add(spinner);
root.add(pivot);
wheelPivots.push({ pivot, front: sz > 0 });
wheelSpinners.push(spinner);
}
}
const ring = new THREE.Mesh(
new THREE.RingGeometry(2.45, 2.7, 36),
new THREE.MeshBasicMaterial({
color: def.color,
transparent: true,
opacity: index === 0 ? 0.72 : 0.18,
side: THREE.DoubleSide,
depthWrite: false
})
);
ring.rotation.x = -Math.PI / 2;
ring.position.y = 0.07;
root.add(ring);
const label = makeLabel((index === 0 ? "01 // YOU" : "0" + (index + 1) + " // " + def.name), "#" + def.color.toString(16).padStart(6, "0"));
root.add(label);
root.traverse(object => {
if (object.isMesh && object !== ring) {
object.castShadow = true;
object.receiveShadow = true;
}
});
scene.add(root);
return {
root, bodyShell, bodyMaterial, accentMaterial, label,
wheelPivots, wheelSpinners
};
}
const truckDefs = [
{ name: "YOU", color: 0x59e9ff, x: 0, z: 23 },
{ name: "RAPTOR", color: 0xff812e, x: -30, z: 2 },
{ name: "HEX", color: 0xff439c, x: -15, z: -21 },
{ name: "NOVA", color: 0xa5ed4b, x: 15, z: -21 },
{ name: "BRUTE", color: 0xff4758, x: 30, z: 2 }
];
const initialTargets = [0, 0, 3, 1, 2];
const trucks = truckDefs.map((def, id) => {
const model = createTruckModel(def, id);
return Object.assign({
id,
name: def.name,
color: def.color,
isPlayer: id === 0,
radius: 2.15,
spawnX: def.x,
spawnZ: def.z,
x: def.x,
z: def.z,
y: 0,
vx: 0,
vz: 0,
vy: 0,
yaw: 0,
av: 0,
visualPitch: 0,
visualRoll: 0,
steerVisual: 0,
wheelSpin: 0,
fwdSpeed: 0,
airborne: false,
airTime: 0,
slopeVy: 0,
damage: 0,
wrecked: false,
wreckTimer: 0,
stun: 0,
hitFlash: 0,
wallCooldown: 0,
dustTimer: 0,
smokeTimer: 0,
ai: {
think: 0.15 + id * 0.19,
modeTimer: 2 + id,
mode: id % 2 ? "attack" : "roam",
target: initialTargets[id],
preferred: initialTargets[id],
waypoint: (id * 2) % 8,
lane: id % 2 ? 1 : -1,
reverseTimer: 0,
stuck: 0,
maxSpeed: 18.5 + id * 0.85
}
}, model);
});
const player = trucks[0];
class ParticlePool {
constructor(count, size, opacity, additive) {
this.count = count;
this.cursor = 0;
this.positions = new Float32Array(count * 3);
this.colors = new Float32Array(count * 3);
this.life = new Float32Array(count);
this.maxLife = new Float32Array(count);
this.vx = new Float32Array(count);
this.vy = new Float32Array(count);
this.vz = new Float32Array(count);
this.baseR = new Float32Array(count);
this.baseG = new Float32Array(count);
this.baseB = new Float32Array(count);
this.gravity = 0;
for (let i = 0; i < count; i++) this.positions[i * 3 + 1] = -100;
this.geometry = new THREE.BufferGeometry();
this.geometry.setAttribute("position", new THREE.BufferAttribute(this.positions, 3));
this.geometry.setAttribute("color", new THREE.BufferAttribute(this.colors, 3));
this.points = new THREE.Points(this.geometry, new THREE.PointsMaterial({
size,
transparent: true,
opacity,
depthWrite: false,
vertexColors: true,
blending: additive ? THREE.AdditiveBlending : THREE.NormalBlending
}));
this.points.frustumCulled = false;
scene.add(this.points);
this.tempColor = new THREE.Color();
}
spawn(x, y, z, vx, vy, vz, life, color, gravity) {
const i = this.cursor++ % this.count;
const p = i * 3;
this.positions[p] = x;
this.positions[p + 1] = y;
this.positions[p + 2] = z;
this.vx[i] = vx;
this.vy[i] = vy;
this.vz[i] = vz;
this.life[i] = this.maxLife[i] = life;
this.gravity = gravity;
this.tempColor.set(color);
this.baseR[i] = this.tempColor.r;
this.baseG[i] = this.tempColor.g;
this.baseB[i] = this.tempColor.b;
}
update(dt) {
for (let i = 0; i < this.count; i++) {
const p = i * 3;
if (this.life[i] <= 0) continue;
this.life[i] -= dt;
if (this.life[i] <= 0) {
this.positions[p + 1] = -100;
continue;
}
this.vy[i] -= this.gravity * dt;
this.positions[p] += this.vx[i] * dt;
this.positions[p + 1] += this.vy[i] * dt;
this.positions[p + 2] += this.vz[i] * dt;
const fade = clamp(this.life[i] / this.maxLife[i], 0, 1);
const brightness = 0.25 + fade * 0.75;
this.colors[p] = this.baseR[i] * brightness;
this.colors[p + 1] = this.baseG[i] * brightness;
this.colors[p + 2] = this.baseB[i] * brightness;
}
this.geometry.attributes.position.needsUpdate = true;
this.geometry.attributes.color.needsUpdate = true;
}
clear() {
this.life.fill(0);
for (let i = 0; i < this.count; i++) this.positions[i * 3 + 1] = -100;
this.geometry.attributes.position.needsUpdate = true;
}
}
const dust = new ParticlePool(260, 0.7, 0.45, false);
const sparks = new ParticlePool(130, 0.25, 0.9, true);
function burstDust(x, y, z, count, force = 1) {
for (let i = 0; i < count; i++) {
const a = gameRand() * Math.PI * 2;
const speed = (0.5 + gameRand() * 2.2) * force;
dust.spawn(
x + (gameRand() - 0.5) * 1.5, y + gameRand() * 0.4, z + (gameRand() - 0.5) * 1.5,
Math.cos(a) * speed, 0.6 + gameRand() * 1.8 * force, Math.sin(a) * speed,
0.55 + gameRand() * 0.75, gameRand() > 0.25 ? 0xa47a50 : 0x5d5650, 1.2
);
}
}
function burstSparks(x, y, z, count, color = 0xffb23f) {
for (let i = 0; i < count; i++) {
const a = gameRand() * Math.PI * 2;
const speed = 2 + gameRand() * 7;
sparks.spawn(
x, y, z,
Math.cos(a) * speed, 1.5 + gameRand() * 5, Math.sin(a) * speed,
0.22 + gameRand() * 0.45, color, 13
);
}
}
const state = {
score: 0,
timeLeft: ROUND_TIME,
elapsed: 0,
eventTimer: 0,
shake: 0,
photo: false,
gameOver: false,
cameraReady: false
};
let pairHitTimes = {};
const keys = Object.create(null);
function clearInputs() {
for (const code of Object.keys(keys)) keys[code] = false;
}
function setEvent(text, color = "#62edff", duration = 1.5) {
eventEl.textContent = text;
eventEl.style.color = color;
eventEl.classList.add("show");
state.eventTimer = duration;
}
function setPhotoMode(enabled) {
state.photo = enabled;
photoEl.classList.toggle("show", enabled);
photoEl.setAttribute("aria-hidden", String(!enabled));
if (enabled) photoScoreEl.textContent = String(Math.floor(state.score));
clearInputs();
accumulator = 0;
}
window.addEventListener("keydown", event => {
if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Space"].includes(event.code)) {
event.preventDefault();
}
if (event.code === "KeyP" && !event.repeat) {
event.preventDefault();
setPhotoMode(!state.photo);
return;
}
if (event.code === "KeyR" && !event.repeat) {
resetGame();
return;
}
keys[event.code] = true;
});
window.addEventListener("keyup", event => { keys[event.code] = false; });
window.addEventListener("blur", clearInputs);
function playerControls() {
return {
throttle: (keys.KeyW || keys.ArrowUp ? 1 : 0) + (keys.KeyS || keys.ArrowDown ? -1 : 0),
steer: (keys.KeyD || keys.ArrowRight ? 1 : 0) + (keys.KeyA || keys.ArrowLeft ? -1 : 0),
handbrake: !!keys.Space
};
}
const route = [
[-34, -13], [-10, -25], [23, -20], [37, -2],
[27, 19], [2, 25], [-27, 19], [-38, 1]
];
function updateAI(t, dt) {
const a = t.ai;
a.think -= dt;
a.modeTimer -= dt;
a.reverseTimer = Math.max(0, a.reverseTimer - dt);
if (a.modeTimer <= 0) {
if (a.mode === "attack") {
a.mode = "roam";
a.modeTimer = 1.3 + gameRand() * 1.8;
} else {
a.mode = "attack";
a.modeTimer = 3.2 + gameRand() * 2.8;
a.think = 0;
}
}
if (a.think <= 0) {
a.think = 0.55 + gameRand() * 0.5;
if (a.mode === "attack") {
const claims = Array(5).fill(0);
for (const rival of trucks) {
if (!rival.isPlayer && rival.ai.mode === "attack" && rival !== t) {
claims[rival.ai.target]++;
}
}
let best = null;
let bestScore = Infinity;
for (const candidate of trucks) {
if (candidate === t) continue;
const distance = Math.hypot(candidate.x - t.x, candidate.z - t.z);
let value = distance * 0.055 + claims[candidate.id] * 4.5 + gameRand() * 2;
if (candidate.id === a.preferred) value -= 3.5;
if (candidate.isPlayer && t.id !== 1) value += 2.5;
if (candidate.wrecked) value += 18;
if (value < bestScore) {
bestScore = value;
best = candidate;
}
}
if (best) a.target = best.id;
}
}
let destinationX;
let destinationZ;
const target = trucks[a.target];
if (a.mode === "attack" && target && target !== t) {
const distance = Math.hypot(target.x - t.x, target.z - t.z);
const lead = clamp(distance / 28, 0, 0.65);
destinationX = target.x + target.vx * lead;
destinationZ = target.z + target.vz * lead;
if (distance > 10) {
const dx = destinationX - t.x;
const dz = destinationZ - t.z;
const d = Math.max(0.01, Math.hypot(dx, dz));
const offset = a.lane * Math.min(4, distance * 0.13);
destinationX += -dz / d * offset;
destinationZ += dx / d * offset;
}
} else {
let point = route[a.waypoint];
if (Math.hypot(point[0] - t.x, point[1] - t.z) < 5) {
a.waypoint = (a.waypoint + 1 + t.id % 3) % route.length;
point = route[a.waypoint];
}
destinationX = point[0];
destinationZ = point[1];
}
let dx = destinationX - t.x;
let dz = destinationZ - t.z;
let distance = Math.max(0.01, Math.hypot(dx, dz));
let dirX = dx / distance;
let dirZ = dz / distance;
for (const other of trucks) {
if (other === t) continue;
const ox = t.x - other.x;
const oz = t.z - other.z;
const d = Math.hypot(ox, oz);
if (d > 0.01 && d < 9) {
const isChosenVictim = a.mode === "attack" && other.id === a.target;
const weight = isChosenVictim ? 0 : 0.2 * (9 - d);
dirX += ox / d * weight;
dirZ += oz / d * weight;
}
}
for (const obstacle of obstacles) {
const ox = t.x - obstacle.x;
const oz = t.z - obstacle.z;
const d = Math.hypot(ox, oz);
const range = 5 + obstacle.avoidR;
if (d > 0.01 && d < range) {
const weight = obstacle.kind === "barrier" ? 0.18 : obstacle.kind === "car" ? 0.08 : 0.015;
dirX += ox / d * (range - d) * weight;
dirZ += oz / d * (range - d) * weight;
}
}
const boundary = Math.sqrt((t.x / 45) ** 2 + (t.z / 28) ** 2);
if (boundary > 0.82) {
const inward = Math.hypot(t.x, t.z) || 1;
const strength = (boundary - 0.82) * 5;
dirX -= t.x / inward * strength;
dirZ -= t.z / inward * strength;
}
const desiredYaw = Math.atan2(dirX, dirZ);
const difference = wrapAngle(desiredYaw - t.yaw);
const speed = Math.hypot(t.vx, t.vz);
if (speed < 0.8) a.stuck += dt;
else a.stuck = Math.max(0, a.stuck - dt * 2);
if (a.stuck > 1.05) {
a.reverseTimer = 0.85;
a.stuck = 0;
}
if (a.reverseTimer > 0) {
return {
throttle: -0.8,
steer: difference >= 0 ? -1 : 1,
handbrake: false
};
}
return {
throttle: Math.abs(difference) > 2.15 ? 0.35 : 1,
steer: clamp(difference * 1.7, -1, 1),
handbrake: Math.abs(difference) > 1.15 && speed > 14
};
}
function constrainToArena(body, restitution = 0.25) {
const q = Math.sqrt((body.x / ARENA_X) ** 2 + (body.z / ARENA_Z) ** 2);
if (q <= 1) return 0;
body.x /= q;
body.z /= q;
let nx = body.x / (ARENA_X * ARENA_X);
let nz = body.z / (ARENA_Z * ARENA_Z);
const length = Math.hypot(nx, nz) || 1;
nx /= length;
nz /= length;
const outward = body.vx * nx + body.vz * nz;
if (outward > 0) {
body.vx -= (1 + restitution) * outward * nx;
body.vz -= (1 + restitution) * outward * nz;
}
return Math.max(0, outward);
}
function wreckTruck(t) {
if (t.wrecked) return false;
t.wrecked = true;
t.wreckTimer = 3.4;
t.damage = 80;
t.airborne = true;
t.airTime = 0;
t.vy = Math.max(t.vy, 3.8);
t.y += 0.08;
t.av += (gameRand() - 0.5) * 3.5;
burstDust(t.x, t.y + 0.5, t.z, 15, 1.4);
burstSparks(t.x, t.y + 1.5, t.z, 15);
return true;
}
function addDamage(t, amount) {
if (t.wrecked) return false;
t.damage += amount;
return t.damage >= 80 ? wreckTruck(t) : false;
}
function landTruck(t, impact) {
const airtime = t.airTime;
t.airborne = false;
t.vy = 0;
t.slopeVy = 0;
t.airTime = 0;
if (impact > 4.5) {
burstDust(t.x, t.y + 0.15, t.z, Math.floor(clamp(impact, 5, 16)), 0.8 + impact * 0.04);
t.vx *= clamp(1 - impact * 0.012, 0.78, 1);
t.vz *= clamp(1 - impact * 0.012, 0.78, 1);
if (t.isPlayer) state.shake = Math.max(state.shake, impact * 0.035);
}
if (t.isPlayer && !t.wrecked && airtime > 0.55) {
const points = Math.round(airtime * 180);
state.score += points;
setEvent("BIG AIR +" + points, "#62edff");
}
}
function integrateTruck(t, dt) {
t.hitFlash = Math.max(0, t.hitFlash - dt);
t.stun = Math.max(0, t.stun - dt);
t.wallCooldown = Math.max(0, t.wallCooldown - dt);
t.dustTimer -= dt;
t.smokeTimer -= dt;
if (t.wrecked) {
t.wreckTimer -= dt;
if (t.wreckTimer <= 0) {
t.wrecked = false;
t.damage = 24;
t.hitFlash = 0.8;
if (t.isPlayer) setEvent("SYSTEMS BACK ONLINE", "#62edff");
}
}
let controls = t.isPlayer ? playerControls() : updateAI(t, dt);
if (t.wrecked) controls = { throttle: 0, steer: 0, handbrake: false };
if (t.stun > 0) controls.throttle *= 0.25;
let fx = Math.sin(t.yaw);
let fz = Math.cos(t.yaw);
let rx = Math.cos(t.yaw);
let rz = -Math.sin(t.yaw);
let forwardSpeed = t.vx * fx + t.vz * fz;
let lateralSpeed = t.vx * rx + t.vz * rz;
const speedAuthority = 0.22 + 0.78 * clamp(Math.abs(forwardSpeed) / 4, 0, 1);
const reverseDirection = forwardSpeed < -0.4 ? -1 : 1;
let turn = controls.steer * speedAuthority * reverseDirection *
(1.6 - clamp(Math.abs(forwardSpeed) / 60, 0, 0.42));
if (controls.handbrake) turn *= 1.35;
if (t.airborne) turn *= 0.25;
if (t.wrecked) turn = 0;
t.yaw += (turn + t.av) * dt;
t.av *= Math.exp(-3.4 * dt);
fx = Math.sin(t.yaw);
fz = Math.cos(t.yaw);
rx = Math.cos(t.yaw);
rz = -Math.sin(t.yaw);
const engine = t.isPlayer ? 24 : 20.5;
const opposing = controls.throttle * forwardSpeed < -1;
const acceleration = opposing ? 32 : engine;
const airControl = t.airborne ? 0.12 : 1;
forwardSpeed += controls.throttle * acceleration * airControl * dt;
forwardSpeed *= Math.exp(-(controls.throttle ? 0.3 : 1.15) * dt);
if (controls.handbrake) forwardSpeed *= Math.exp(-0.75 * dt);
if (t.wrecked) forwardSpeed *= Math.exp(-1.8 * dt);
const maximum = t.isPlayer ? 26 : t.ai.maxSpeed;
forwardSpeed = clamp(forwardSpeed, -10.5, maximum);
const grip = t.airborne ? 0.15 : controls.handbrake ? 1.35 : 7.2;
lateralSpeed *= Math.exp(-grip * dt);
t.vx = fx * forwardSpeed + rx * lateralSpeed;
t.vz = fz * forwardSpeed + rz * lateralSpeed;
t.fwdSpeed = forwardSpeed;
t.x += t.vx * dt;
t.z += t.vz * dt;
const wallImpact = constrainToArena(t);
if (wallImpact > 6 && t.wallCooldown <= 0) {
t.wallCooldown = 0.5;
t.hitFlash = 0.18;
burstSparks(t.x, t.y + 1, t.z, 8);
if (t.isPlayer) state.shake = Math.max(state.shake, 0.32);
}
const ground = getSurface(t.x, t.z);
if (t.airborne) {
t.vy -= 18 * dt;
t.y += t.vy * dt;
t.airTime += dt;
if (t.y <= ground) {
const impact = Math.max(0, -t.vy);
t.y = ground;
landTruck(t, impact);
}
} else {
const drop = t.y - ground;
if (drop > 0.18) {
t.airborne = true;
t.airTime = 0;
t.vy = clamp(t.slopeVy, 0, 6) + Math.min(1.8, Math.abs(forwardSpeed) * 0.045);
t.y += t.vy * dt;
t.slopeVy = 0;
} else {
t.slopeVy = clamp((ground - t.y) / dt, -8, 8);
t.y = ground;
t.vy = 0;
}
}
if (!t.airborne && Math.abs(forwardSpeed) > 5 && t.dustTimer <= 0) {
t.dustTimer = 0.045 + gameRand() * 0.035;
const side = (gameRand() - 0.5) * 2.2;
dust.spawn(
t.x - fx * 2.2 + rx * side,
t.y + 0.2,
t.z - fz * 2.2 + rz * side,
-t.vx * 0.08 + (gameRand() - 0.5),
0.5 + gameRand(),
-t.vz * 0.08 + (gameRand() - 0.5),
0.55 + gameRand() * 0.55,
0xa37b52,
1.1
);
}
if (t.wrecked && t.smokeTimer <= 0) {
t.smokeTimer = 0.09;
dust.spawn(
t.x, t.y + 2.5, t.z,
(gameRand() - 0.5) * 0.7, 1.3 + gameRand(), (gameRand() - 0.5) * 0.7,
0.9 + gameRand() * 0.6, 0x3d4449, -0.2
);
}
t.steerVisual = lerp(t.steerVisual, controls.steer, 1 - Math.exp(-9 * dt));
}
function handleObstacleImpact(t, o, nx, nz, impact) {
if (impact < 4 || state.elapsed - o.cooldowns[t.id] < 0.55) return;
o.cooldowns[t.id] = state.elapsed;
o.jolt = Math.min(0.6, impact * 0.035);
o.spin += (gameRand() - 0.5) * impact * 0.16;
t.hitFlash = 0.2;
t.stun = Math.max(t.stun, 0.12);
t.av += (gameRand() - 0.5) * impact * 0.06;
burstSparks(t.x - nx * t.radius, t.y + 0.9, t.z - nz * t.radius, Math.floor(clamp(impact, 5, 14)));
if (t.isPlayer) state.shake = Math.max(state.shake, impact * 0.025);
if (t.isPlayer && o.kind === "tires" && impact > 6) {
state.score += 25;
setEvent("TIRE STACK +25", "#ffb14d");
}
if (impact > 10 && addDamage(t, (impact - 8) * 1.25)) {
if (t.isPlayer) setEvent("WRECKED ON " + o.kind.toUpperCase(), "#ff6959", 2);
else setEvent(t.name + " WRECKED ON DEBRIS", "#ff9d45", 1.8);
}
}
function collideCircleObstacle(t, o) {
if (t.y > o.height + 0.7) return;
let dx = t.x - o.x;
let dz = t.z - o.z;
const minimum = t.radius + o.r;
const distanceSquared = dx * dx + dz * dz;
if (distanceSquared >= minimum * minimum) return;
let distance = Math.sqrt(distanceSquared);
if (distance < 0.001) {
dx = 1;
dz = 0;
distance = 1;
}
const nx = dx / distance;
const nz = dz / distance;
const penetration = minimum - distance;
const invT = 1;
const invO = o.invMass;
const sum = invT + invO;
t.x += nx * penetration * invT / sum;
t.z += nz * penetration * invT / sum;
if (o.dynamic) {
o.x -= nx * penetration * invO / sum;
o.z -= nz * penetration * invO / sum;
}
const relX = t.vx - o.vx;
const relZ = t.vz - o.vz;
const relative = relX * nx + relZ * nz;
if (relative < 0) {
const impact = -relative;
const impulse = -(1 + o.restitution) * relative / sum;
t.vx += nx * impulse * invT;
t.vz += nz * impulse * invT;
if (o.dynamic) {
o.vx -= nx * impulse * invO;
o.vz -= nz * impulse * invO;
}
handleObstacleImpact(t, o, nx, nz, impact);
}
}
function collideBoxObstacle(t, o) {
if (t.y > o.height + 0.7) return;
const c = Math.cos(o.yaw);
const s = Math.sin(o.yaw);
const dx = t.x - o.x;
const dz = t.z - o.z;
const lx = c * dx - s * dz;
const lz = s * dx + c * dz;
const qx = clamp(lx, -o.hw, o.hw);
const qz = clamp(lz, -o.hd, o.hd);
let nxLocal = lx - qx;
let nzLocal = lz - qz;
const distance = Math.hypot(nxLocal, nzLocal);
let penetration;
if (distance > 0.0001) {
if (distance >= t.radius) return;
nxLocal /= distance;
nzLocal /= distance;
penetration = t.radius - distance;
} else {
const px = o.hw - Math.abs(lx);
const pz = o.hd - Math.abs(lz);
if (px < pz) {
nxLocal = lx >= 0 ? 1 : -1;
nzLocal = 0;
penetration = t.radius + px;
} else {
nxLocal = 0;
nzLocal = lz >= 0 ? 1 : -1;
penetration = t.radius + pz;
}
}
const nx = c * nxLocal + s * nzLocal;
const nz = -s * nxLocal + c * nzLocal;
t.x += nx * penetration;
t.z += nz * penetration;
const relative = t.vx * nx + t.vz * nz;
if (relative < 0) {
const impact = -relative;
const impulse = -(1 + o.restitution) * relative;
t.vx += nx * impulse;
t.vz += nz * impulse;
handleObstacleImpact(t, o, nx, nz, impact);
}
}
function registerTruckHit(a, b, nx, nz, impact) {
const key = a.id + ":" + b.id;
if (state.elapsed - (pairHitTimes[key] ?? -100) < 0.45) return;
pairHitTimes[key] = state.elapsed;
const afx = Math.sin(a.yaw);
const afz = Math.cos(a.yaw);
const bfx = Math.sin(b.yaw);
const bfz = Math.cos(b.yaw);
const aimA = afx * -nx + afz * -nz;
const aimB = bfx * nx + bfz * nz;
const powerA = Math.max(0, aimA) * (Math.hypot(a.vx, a.vz) + impact * 0.5);
const powerB = Math.max(0, aimB) * (Math.hypot(b.vx, b.vz) + impact * 0.5);
const attacker = powerA >= powerB ? a : b;
const victim = attacker === a ? b : a;
a.hitFlash = b.hitFlash = 0.24;
victim.stun = Math.max(victim.stun, 0.28);
victim.av += (gameRand() - 0.5) * impact * 0.16;
burstSparks((a.x + b.x) / 2, Math.max(a.y, b.y) + 1.25, (a.z + b.z) / 2, Math.floor(clamp(impact, 6, 20)));
burstDust((a.x + b.x) / 2, Math.max(a.y, b.y) + 0.2, (a.z + b.z) / 2, 5, 0.7);
if (a.isPlayer || b.isPlayer) state.shake = Math.max(state.shake, impact * 0.035);
let ramPoints = 0;
if (attacker.isPlayer && !victim.isPlayer && !victim.wrecked) {
ramPoints = Math.max(50, Math.round(impact * 30 / 10) * 10);
state.score += ramPoints;
}
const wreckedNow = addDamage(victim, impact * 2.8);
if (wreckedNow) {
let bonus = 0;
if (attacker.isPlayer && !victim.isPlayer) {
bonus = 750;
state.score += bonus;
setEvent("WRECKED " + victim.name + " +" + (ramPoints + bonus), "#ffb14d", 2.1);
} else if (victim.isPlayer) {
setEvent("YOU ARE WRECKED // REBOOTING", "#ff6959", 2.3);
} else {
setEvent(victim.name + " IS WRECKED", "#ff9d45", 1.7);
}
} else if (ramPoints) {
setEvent("RAM " + victim.name + " +" + ramPoints, "#62edff");
} else if (victim.isPlayer) {
setEvent(attacker.name + " TAGGED YOU", "#ff8c68", 1.1);
}
}
function collideTrucks(a, b) {
if (Math.abs(a.y - b.y) > 2.15) return;
let dx = a.x - b.x;
let dz = a.z - b.z;
const minimum = a.radius + b.radius;
const distanceSquared = dx * dx + dz * dz;
if (distanceSquared >= minimum * minimum) return;
let distance = Math.sqrt(distanceSquared);
if (distance < 0.001) {
dx = a.id % 2 ? 1 : -1;
dz = 0.2;
distance = Math.hypot(dx, dz);
}
const nx = dx / distance;
const nz = dz / distance;
const penetration = minimum - distance;
a.x += nx * penetration * 0.5;
a.z += nz * penetration * 0.5;
b.x -= nx * penetration * 0.5;
b.z -= nz * penetration * 0.5;
const relative = (a.vx - b.vx) * nx + (a.vz - b.vz) * nz;
if (relative < 0) {
const impact = -relative;
const impulse = -(1 + 0.25) * relative / 2;
a.vx += nx * impulse;
a.vz += nz * impulse;
b.vx -= nx * impulse;
b.vz -= nz * impulse;
if (impact > 2) {
const kick = clamp(impact * 0.018, 0, 0.4);
a.av += kick * (a.id % 2 ? 1 : -1);
b.av -= kick * (b.id % 2 ? 1 : -1);
}
if (impact > 4) registerTruckHit(a, b, nx, nz, impact);
}
}
function updateObstacles(dt) {
for (const o of obstacles) {
o.jolt *= Math.exp(-8 * dt);
if (o.dynamic) {
o.x += o.vx * dt;
o.z += o.vz * dt;
o.yaw += o.spin * dt;
o.vx *= Math.exp(-o.drag * dt);
o.vz *= Math.exp(-o.drag * dt);
o.spin *= Math.exp(-3 * dt);
constrainToArena(o, 0.3);
const targetTilt = clamp(Math.hypot(o.vx, o.vz) * 0.025, 0, 0.48);
o.tilt = lerp(o.tilt, targetTilt, 1 - Math.exp(-5 * dt));
} else {
o.tilt *= Math.exp(-8 * dt);
}
o.mesh.position.set(o.x, Math.sin(state.elapsed * 42 + o.id) * o.jolt * 0.11, o.z);
o.mesh.rotation.order = "YXZ";
o.mesh.rotation.y = o.yaw;
o.mesh.rotation.z = o.tilt + Math.sin(state.elapsed * 35) * o.jolt * 0.12;
}
}
function syncTruckVisual(t, dt) {
const fx = Math.sin(t.yaw);
const fz = Math.cos(t.yaw);
let targetPitch;
if (t.airborne) {
targetPitch = clamp(-t.vy * 0.025, -0.22, 0.25);
} else {
const front = getSurface(t.x + fx * 1.7, t.z + fz * 1.7);
const back = getSurface(t.x - fx * 1.7, t.z - fz * 1.7);
targetPitch = -Math.atan2(front - back, 3.4);
}
const targetRoll = t.wrecked ? 0.48 :
clamp(-t.steerVisual * Math.abs(t.fwdSpeed) * 0.011, -0.17, 0.17);
const smoothing = 1 - Math.exp(-8 * dt);
t.visualPitch = lerp(t.visualPitch, targetPitch, smoothing);
t.visualRoll = lerp(t.visualRoll, targetRoll, smoothing);
t.root.position.set(t.x, t.y, t.z);
t.root.rotation.y = t.yaw;
t.root.rotation.x = t.visualPitch;
t.root.rotation.z = t.visualRoll;
t.wheelSpin += t.fwdSpeed * dt;
for (const entry of t.wheelPivots) {
entry.pivot.rotation.y = entry.front ? t.steerVisual * 0.34 : 0;
}
for (const spinner of t.wheelSpinners) spinner.rotation.x = t.wheelSpin;
t.bodyMaterial.emissive.set(t.hitFlash > 0 || t.wrecked ? 0xff3d18 : 0x000000);
t.bodyMaterial.emissiveIntensity = t.hitFlash > 0 ? 1.2 : t.wrecked ? 0.4 : 0;
t.accentMaterial.emissiveIntensity = t.wrecked ?
(Math.sin(state.elapsed * 18) > 0 ? 2.5 : 0.15) : 1.5;
t.label.material.color.set(t.wrecked ? 0xff7766 : 0xffffff);
}
const cameraDesired = new THREE.Vector3();
const cameraTarget = new THREE.Vector3();
function updateCamera(dt) {
const aspectBoost = camera.aspect < 1.15 ? 1.28 : 1;
cameraDesired.set(
player.x * 0.22,
51 * aspectBoost,
63 * aspectBoost + player.z * 0.18
);
cameraTarget.set(player.x * 0.28, 0.8, player.z * 0.22);
if (!state.cameraReady) {
camera.position.copy(cameraDesired);
state.cameraReady = true;
} else {
camera.position.lerp(cameraDesired, 1 - Math.exp(-3.2 * dt));
}
if (state.shake > 0.001) {
camera.position.x += (gameRand() - 0.5) * state.shake;
camera.position.y += (gameRand() - 0.5) * state.shake * 0.5;
camera.position.z += (gameRand() - 0.5) * state.shake;
state.shake *= Math.exp(-7 * dt);
}
camera.lookAt(cameraTarget);
}
function endRound() {
state.gameOver = true;
state.timeLeft = 0;
clearInputs();
finalScoreEl.textContent = formatScore(state.score);
gameoverEl.classList.add("show");
}
function physicsStep(dt) {
if (state.gameOver) return;
state.elapsed += dt;
state.timeLeft = Math.max(0, state.timeLeft - dt);
if (state.timeLeft <= 0) {
endRound();
return;
}
if (state.eventTimer > 0) {
state.eventTimer -= dt;
if (state.eventTimer <= 0) eventEl.classList.remove("show");
}
for (const truck of trucks) integrateTruck(truck, dt);
updateObstacles(dt);
for (const truck of trucks) {
for (const obstacle of obstacles) {
if (obstacle.shape === "circle") collideCircleObstacle(truck, obstacle);
else collideBoxObstacle(truck, obstacle);
}
}
for (let i = 0; i < trucks.length; i++) {
for (let j = i + 1; j < trucks.length; j++) collideTrucks(trucks[i], trucks[j]);
}
for (const truck of trucks) {
constrainToArena(truck);
const speed = Math.hypot(truck.vx, truck.vz);
if (speed > 34) {
truck.vx *= 34 / speed;
truck.vz *= 34 / speed;
}
if (!truck.airborne) truck.y = getSurface(truck.x, truck.z);
syncTruckVisual(truck, dt);
}
dust.update(dt);
sparks.update(dt);
updateCamera(dt);
}
function resetGame() {
gameRand = mulberry32(0xC0FFEE);
pairHitTimes = {};
clearInputs();
state.score = DEMO ? 5000 : 0;
state.timeLeft = DEMO ? 20 : ROUND_TIME;
state.elapsed = 0;
state.eventTimer = 0;
state.shake = 0;
state.gameOver = false;
state.cameraReady = false;
gameoverEl.classList.remove("show");
for (const o of obstacles) {
o.x = o.start.x;
o.z = o.start.z;
o.yaw = o.start.yaw;
o.vx = o.vz = o.spin = o.jolt = o.tilt = 0;
o.cooldowns.fill(-100);
}
updateObstacles(0);
for (const t of trucks) {
t.x = t.spawnX;
t.z = t.spawnZ;
t.y = getSurface(t.x, t.z);
t.yaw = Math.atan2(-t.x, -t.z);
const initialSpeed = t.isPlayer ? 0 : 4.5;
t.vx = Math.sin(t.yaw) * initialSpeed;
t.vz = Math.cos(t.yaw) * initialSpeed;
t.vy = 0;
t.av = 0;
t.fwdSpeed = initialSpeed;
t.visualPitch = t.visualRoll = t.steerVisual = 0;
t.airborne = false;
t.airTime = 0;
t.slopeVy = 0;
t.damage = 0;
t.wrecked = false;
t.wreckTimer = 0;
t.stun = 0;
t.hitFlash = 0;
t.wallCooldown = 0;
t.dustTimer = 0;
t.smokeTimer = 0;
t.ai.think = 0.12 + t.id * 0.19;
t.ai.modeTimer = 2 + t.id;
t.ai.mode = t.id % 2 ? "attack" : "roam";
t.ai.target = initialTargets[t.id];
t.ai.waypoint = (t.id * 2) % route.length;
t.ai.reverseTimer = 0;
t.ai.stuck = 0;
syncTruckVisual(t, 0);
}
dust.clear();
sparks.clear();
accumulator = 0;
updateCamera(STEP);
setEvent("GREEN FLAG // FULL CONTACT", "#62edff", 2.1);
updateHUD();
}
function updateHUD() {
scoreEl.textContent = formatScore(state.score);
clockEl.textContent = formatTime(state.timeLeft);
clockEl.classList.toggle("danger", state.timeLeft <= 10);
statusEl.textContent = player.wrecked ?
"Player wrecked // rebooting" : "5 trucks // full contact";
}
let last = performance.now();
let accumulator = 0;
function frame(now) {
requestAnimationFrame(frame);
const dt = clamp((now - last) / 1000, 0, 0.05);
last = now;
if (!state.photo && !state.gameOver) {
accumulator += dt;
while (accumulator >= STEP && !state.gameOver) {
physicsStep(STEP);
accumulator -= STEP;
}
} else {
accumulator = 0;
}
updateHUD();
renderer.render(scene, camera);
}
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.75));
renderer.setSize(window.innerWidth, window.innerHeight);
});
resetGame();
requestAnimationFrame(frame);
})();
</script>
</body>
</html>
The notes
- Five trucks: The four rivals use staggered target decisions, different preferred victims, alternating attack/roam phases, individual routes and speeds, target-claim penalties, local separation, obstacle avoidance, and reverse-out recovery, so they form changing matchups rather than one moving wall.
- Demo mode:
resetGame()assigns the real simulation fieldsstate.score = DEMO ? 5000 : 0andstate.timeLeft = DEMO ? 20 : ROUND_TIME; the HUD, scoring, countdown, and round-over logic all consume those same fields, not an overlay copy. - Photo mode:
Pstops the fixed-step physics, AI, clock, damage, particles, and camera updates; the RAF/render loop continues only to redraw the frozen scene beneath the photo card untilPis pressed again. - Collisions: Trucks are verticality-checked 2D circles resolved with penetration correction, restitution impulses, and yaw kicks; cars and tire stacks are dynamic circles, while concrete barriers use oriented-box closest-point tests. Normal closing speed drives impact cooldowns, stun, damage, wreck transitions, and player points, while ramps and hills feed a separate height-field/gravity model.
Attachments
moonshotai/kimi-k3.1-pro — page