Run Detail
completeddeepseek-v4.1-flash-1017Recorded 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
232.2s
Total Tokens
64,748
Input Tokens
748
Output Tokens
64,000
Reasoning Tokens
51,677
Reasoning Effort
default
Est. Cost
$0.0385
Started
10/17/2026, 12:10:55 PM
OR Provider
DeepSeek
Finish Reason
length
Generation ID
gen-1792239056-5lLvHFEEhwPmV5OTKv5f
Turns (1)
Turn #1
748 in64,000 out51,677 reasoning64,748 total232.2s
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
Dustline Thunderdome is a compact floodlit dirt bowl packed with a full-circle crowd, five angular Cybertruck monster trucks, and a floor littered with hills, tire stacks, barriers, and crates.
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,user-scalable=no">
<title>Dustline Thunderdome</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%23ff5a1f'/%3E%3Cpath d='M6 20l6-9 8 2 6 7z' fill='white'/%3E%3C/svg%3E">
<style>
* { box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background: #05070b;
color: #eef4ff;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
canvas { display: block; }
#hud {
position: fixed;
inset: 18px 20px auto 20px;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: flex-start;
pointer-events: none;
text-shadow: 0 2px 16px rgba(0, 0, 0, .9);
}
.arenaLabel {
font-size: 10px;
font-weight: 800;
letter-spacing: .34em;
color: #8fb6ff;
margin-bottom: 3px;
}
#arenaName {
font-size: clamp(18px, 2.2vw, 27px);
font-weight: 950;
letter-spacing: .065em;
line-height: 1;
color: #ffffff;
text-transform: uppercase;
}
#hudRight {
display: flex;
gap: 10px;
}
.metric {
min-width: 108px;
padding: 8px 13px 9px;
border: 1px solid rgba(140, 185, 255, .32);
border-radius: 10px;
background: rgba(8, 14, 26, .68);
box-shadow: 0 8px 30px rgba(0, 0, 0, .38);
backdrop-filter: blur(7px);
}
.metric span {
display: block;
margin-bottom: 2px;
font-size: 9px;
font-weight: 800;
letter-spacing: .25em;
color: #8fb6ff;
}
.metric b {
display: block;
font-size: 22px;
line-height: 1;
color: #ffffff;
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
}
#controls {
position: fixed;
left: 20px;
bottom: 16px;
z-index: 10;
padding: 8px 13px;
border: 1px solid rgba(140, 185, 255, .26);
border-radius: 999px;
background: rgba(8, 14, 26, .64);
color: #b8c9e6;
font-size: 11px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
pointer-events: none;
backdrop-filter: blur(6px);
}
#controls span {
color: #6b7d9e;
padding: 0 4px;
}
#scorePop {
position: fixed;
left: 50%;
top: 19%;
z-index: 20;
transform: translate(-50%, 0);
opacity: 0;
pointer-events: none;
color: #ffd36a;
font-size: clamp(24px, 3vw, 38px);
font-weight: 950;
letter-spacing: .06em;
text-shadow: 0 0 20px rgba(255, 143, 34, .95), 0 3px 20px #000;
}
#scorePop.show {
animation: popScore .72s ease-out forwards;
}
@keyframes popScore {
0% { opacity: 0; transform: translate(-50%, 18px) scale(.72); }
18% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -62px) scale(1.08); }
}
#photoOverlay {
position: fixed;
inset: 0;
z-index: 30;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 45%, rgba(6, 10, 20, .08), rgba(4, 7, 14, .78));
pointer-events: none;
}
#photoOverlay.hidden { display: none; }
.photoCard {
padding: 32px 56px 36px;
border: 1px solid rgba(145, 195, 255, .45);
border-radius: 16px;
background: rgba(7, 12, 23, .82);
box-shadow: 0 30px 100px rgba(0, 0, 0, .7), inset 0 0 50px rgba(68, 130, 255, .08);
text-align: center;
backdrop-filter: blur(9px);
}
.photoKicker {
margin-bottom: 13px;
color: #79a8ff;
font-size: 11px;
font-weight: 850;
letter-spacing: .5em;
}
.photoName {
color: #ffffff;
font-size: clamp(25px, 4vw, 48px);
font-weight: 950;
letter-spacing: .075em;
line-height: 1.05;
text-shadow: 0 4px 35px rgba(70, 135, 255, .38);
}
.photoScore {
margin-top: 18px;
color: #ffd36a;
font-size: 18px;
font-weight: 850;
letter-spacing: .22em;
font-variant-numeric: tabular-nums;
}
.err {
position: fixed;
inset: 0;
display: grid;
place-items: center;
padding: 30px;
z-index: 100;
background: #05070b;
color: #dbe8ff;
text-align: center;
font: 18px/1.5 ui-sans-serif, system-ui, sans-serif;
}
</style>
</head>
<body>
<div id="hud">
<div>
<div class="arenaLabel">ARENA</div>
<div id="arenaName">DUSTLINE THUNDERDOME</div>
</div>
<div id="hudRight">
<div class="metric"><span>SCORE</span><b id="scoreValue">000000</b></div>
<div class="metric"><span>TIME</span><b id="clockValue">01:30</b></div>
</div>
</div>
<div id="controls">Drive: WASD / Arrows <span>•</span> P: Photo</div>
<div id="scorePop"></div>
<div id="photoOverlay" class="hidden">
<div class="photoCard">
<div class="photoKicker">PHOTO MODE</div>
<div id="photoArenaValue" class="photoName">DUSTLINE THUNDERDOME</div>
<div id="photoScoreValue" class="photoScore">SCORE 000000</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script>
(function () {
'use strict';
if (!window.THREE) {
document.body.innerHTML = '<div class="err">three.js failed to load. Check the single pinned CDN request.</div>';
return;
}
const ARENA_NAME = 'DUSTLINE THUNDERDOME';
const PLAY_RADIUS = 35.25;
const TRUCK_RADIUS = 2.15;
const MAX_PARTICLES = 700;
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const wrapAngle = (a) => {
while (a > Math.PI) a -= Math.PI * 2;
while (a < -Math.PI) a += Math.PI * 2;
return a;
};
const game = {
score: 0,
timeLeft: 90,
elapsed: 0,
demo: false
};
// Real game-state demo mode. This is not an overlay.
if ((location.hash || '').toLowerCase() === '#demo') {
game.score = 5000;
game.timeLeft = 20;
game.demo = true;
}
const scoreEl = document.getElementById('scoreValue');
const clockEl = document.getElementById('clockValue');
const arenaNameEl = document.getElementById('arenaName');
const photoOverlay = document.getElementById('photoOverlay');
const photoArenaEl = document.getElementById('photoArenaValue');
const photoScoreEl = document.getElementById('photoScoreValue');
const scorePopEl = document.getElementById('scorePop');
arenaNameEl.textContent = ARENA_NAME;
function formatScore(v) {
return String(Math.max(0, Math.floor(v))).padStart(6, '0');
}
function formatClock(seconds) {
const total = Math.max(0, Math.ceil(seconds));
const m = Math.floor(total / 60);
const s = total % 60;
return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
}
function updateHUD() {
const scoreText = formatScore(game.score);
const clockText = formatClock(game.timeLeft);
if (scoreEl.textContent !== scoreText) scoreEl.textContent = scoreText;
if (clockEl.textContent !== clockText) clockEl.textContent = clockText;
}
function popScore(points) {
scorePopEl.textContent = 'SLAM +' + points;
scorePopEl.classList.remove('show');
void scorePopEl.offsetWidth;
scorePopEl.classList.add('show');
}
let photo = false;
let lastTime = performance.now();
let shake = 0;
function togglePhoto() {
photo = !photo;
if (photo) {
photoArenaEl.textContent = ARENA_NAME;
photoScoreEl.textContent = 'SCORE ' + formatScore(game.score);
photoOverlay.classList.remove('hidden');
} else {
photoOverlay.classList.add('hidden');
lastTime = performance.now();
}
}
// ---------- renderer / scene ----------
const renderer = new THREE.WebGLRenderer({
antialias: true,
powerPreference: 'high-performance'
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.08;
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x070b14);
scene.fog = new THREE.Fog(0x070b14, 95, 195);
const camera = new THREE.PerspectiveCamera(58, window.innerWidth / window.innerHeight, 0.1, 280);
camera.position.set(0, 10.5, -34);
camera.lookAt(0, 1.8, -14);
scene.add(new THREE.HemisphereLight(0x9bb8ff, 0x2a1a10, 1.25));
const sun = new THREE.DirectionalLight(0xffe1b8, 2.35);
sun.position.set(28, 44, 18);
scene.add(sun);
const fill = new THREE.DirectionalLight(0x587dff, 0.8);
fill.position.set(-26, 22, -24);
scene.add(fill);
function makeDirtTexture() {
const c = document.createElement('canvas');
c.width = c.height = 512;
const ctx = c.getContext('2d');
ctx.fillStyle = '#4b3522';
ctx.fillRect(0, 0, 512, 512);
for (let i = 0; i < 9000; i++) {
const x = Math.random() * 512;
const y = Math.random() * 512;
const v = Math.random();
ctx.fillStyle = 'rgba(' + ((28 + v * 45) | 0) + ',' + ((19 + v * 33) | 0) + ',' + ((11 + v * 20) | 0) + ',' + (0.12 + v * 0.25) + ')';
const s = 1 + Math.random() * 3;
ctx.fillRect(x, y, s, s);
}
ctx.globalAlpha = 0.18;
for (let i = 0; i < 40; i++) {
ctx.beginPath();
ctx.arc(Math.random() * 512, Math.random() * 512, 10 + Math.random() * 45, 0, Math.PI * 2);
ctx.fillStyle = Math.random() < 0.5 ? '#2a1a0e' : '#71502c';
ctx.fill();
}
ctx.globalAlpha = 1;
ctx.strokeStyle = 'rgba(20,13,8,0.25)';
ctx.lineWidth = 9;
for (let i = 0; i < 14; i++) {
ctx.beginPath();
const y = Math.random() * 512;
ctx.moveTo(-30, y);
ctx.bezierCurveTo(140, y + 80 * (Math.random() - 0.5), 340, y - 70 * (Math.random() - 0.5), 550, y + 40 * (Math.random() - 0.5));
ctx.stroke();
}
const tex = new THREE.CanvasTexture(c);
tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
tex.repeat.set(5, 5);
tex.colorSpace = THREE.SRGBColorSpace;
tex.anisotropy = Math.min(8, renderer.capabilities.getMaxAnisotropy());
return tex;
}
const floor = new THREE.Mesh(
new THREE.CircleGeometry(36.2, 128),
new THREE.MeshStandardMaterial({ map: makeDirtTexture(), roughness: 1, metalness: 0 })
);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);
const edgeDirt = new THREE.Mesh(
new THREE.RingGeometry(32.6, 35.9, 96),
new THREE.MeshStandardMaterial({ color: 0x2d2117, roughness: 1, transparent: true, opacity: 0.88 })
);
edgeDirt.rotation.x = -Math.PI / 2;
edgeDirt.position.y = 0.012;
scene.add(edgeDirt);
const wallMat = new THREE.MeshStandardMaterial({
color: 0x20242d,
roughness: 0.82,
metalness: 0.28,
side: THREE.DoubleSide
});
const wall = new THREE.Mesh(new THREE.CylinderGeometry(35.5, 35.5, 2.15, 96, 1, true), wallMat);
wall.position.y = 1.075;
scene.add(wall);
const rail = new THREE.Mesh(
new THREE.TorusGeometry(35.5, 0.11, 5, 96),
new THREE.MeshStandardMaterial({ color: 0xffb02e, emissive: 0xff5a00, emissiveIntensity: 0.38, roughness: 0.4 })
);
rail.rotation.x = Math.PI / 2;
rail.position.y = 2.2;
scene.add(rail);
// ---------- stands and crowd ----------
const standMat = new THREE.MeshStandardMaterial({ color: 0x373b46, roughness: 0.92, metalness: 0.08 });
for (let tier = 0; tier < 4; tier++) {
const inner = 38.0 + tier * 4.2;
const outer = inner + 4.05;
const y = 2.65 + tier * 1.35;
const ring = new THREE.Mesh(new THREE.RingGeometry(inner, outer, 96), standMat);
ring.rotation.x = -Math.PI / 2;
ring.position.y = y;
scene.add(ring);
const riser = new THREE.Mesh(new THREE.CylinderGeometry(inner, inner, 1.35, 96, 1, true), standMat);
riser.position.y = y - 0.675;
scene.add(riser);
}
const shell = new THREE.Mesh(
new THREE.CylinderGeometry(56.8, 56.8, 9, 96, 1, true),
new THREE.MeshStandardMaterial({ color: 0x0b0f18, roughness: 0.95, side: THREE.DoubleSide })
);
shell.position.y = 5.5;
scene.add(shell);
const poleMat = new THREE.MeshStandardMaterial({ color: 0x323947, metalness: 0.72, roughness: 0.35 });
const lampMat = new THREE.MeshStandardMaterial({ color: 0xc8e4ff, emissive: 0x6a9cff, emissiveIntensity: 2.2 });
for (let i = 0; i < 4; i++) {
const a = Math.PI / 4 + i * Math.PI / 2;
const r = 57;
const x = Math.cos(a) * r;
const z = Math.sin(a) * r;
const pole = new THREE.Mesh(new THREE.CylinderGeometry(0.16, 0.24, 18, 8), poleMat);
pole.position.set(x, 9, z);
scene.add(pole);
const panel = new THREE.Mesh(new THREE.BoxGeometry(4.4, 1.2, 0.35), lampMat);
panel.position.set(x, 18, z);
panel.lookAt(0, 0, 0);
scene.add(panel);
}
function buildCrowd() {
const bodyData = [];
const headData = [];
for (let tier = 0; tier < 4; tier++) {
for (let row = 0; row < 2; row++) {
const radius = 38.6 + tier * 4.2 + row * 1.35;
const baseY = 2.65 + tier * 1.35 + row * 0.34;
const count = Math.max(40, Math.floor((Math.PI * 2 * radius) / 0.92));
for (let i = 0; i < count; i++) {
const a = (i / count) * Math.PI * 2 + tier * 0.17 + row * 0.08 + (Math.random() - 0.5) * 0.03;
const rr = radius + (Math.random() - 0.5) * 0.35;
const x = Math.cos(a) * rr;
const z = Math.sin(a) * rr;
const rot = -a + Math.PI / 2 + (Math.random() - 0.5) * 0.4;
const bodyY = baseY + 0.55 + Math.random() * 0.12;
bodyData.push({
x: x,
y: bodyY,
z: z,
rot: rot,
hue: Math.random()
});
headData.push({
x: x,
y: bodyY + 0.53,
z: z,
rot: rot,
skin: Math.random()
});
}
}
}
const bodyGeo = new THREE.BoxGeometry(0.46, 0.85, 0.36);
const bodyMat = new THREE.MeshLambertMaterial({ color: 0xffffff });
const bodies = new THREE.InstancedMesh(bodyGeo, bodyMat, bodyData.length);
const headGeo = new THREE.SphereGeometry(0.17, 6, 5);
const headMat = new THREE.MeshLambertMaterial({ color: 0xffffff });
const heads = new THREE.InstancedMesh(headGeo, headMat, headData.length);
const dummy = new THREE.Object3D();
const color = new THREE.Color();
for (let i = 0; i < bodyData.length; i++) {
const b = bodyData[i];
dummy.position.set(b.x, b.y, b.z);
dummy.rotation.set(0, b.rot, 0);
const s = 0.88 + Math.random() * 0.24;
dummy.scale.set(s, 0.9 + Math.random() * 0.2, s);
dummy.updateMatrix();
bodies.setMatrixAt(i, dummy.matrix);
color.setHSL(Math.random(), 0.58, 0.38 + Math.random() * 0.3);
bodies.setColorAt(i, color);
}
const skins = [0xffdcb8, 0xf1c27d, 0xd8a273, 0xc68642, 0x8d5524, 0x6f451f];
for (let i = 0; i < headData.length; i++) {
const h = headData[i];
dummy.position.set(h.x, h.y, h.z);
dummy.rotation.set(0, h.rot, 0);
dummy.scale.set(1, 1, 1);
dummy.updateMatrix();
heads.setMatrixAt(i, dummy.matrix);
color.setHex(skins[Math.floor(h.skin * skins.length)]);
heads.setColorAt(i, color);
}
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);
scene.add(heads);
}
buildCrowd();
// ---------- obstacles ----------
const obstacles = [];
function addHill(x, z, r) {
const mat = new THREE.MeshStandardMaterial({ color: 0x5b4027, roughness: 1 });
const mesh = new THREE.Mesh(
new THREE.SphereGeometry(r, 20, 10, 0, Math.PI * 2, 0, Math.PI / 2),
mat
);
mesh.scale.y = 0.52;
mesh.position.set(x, 0, z);
scene.add(mesh);
const rockMat = new THREE.MeshStandardMaterial({ color: 0x6e5940, roughness: 1 });
for (let i = 0; i < 9; i++) {
const a = Math.random() * Math.PI * 2;
const rr = Math.random() * r * 0.8;
const rock = new THREE.Mesh(new THREE.DodecahedronGeometry(0.18 + Math.random() * 0.28, 0), rockMat);
rock.position.set(x + Math.cos(a) * rr, 0.15 + Math.random() * r * 0.18, z + Math.sin(a) * rr);
rock.rotation.set(Math.random(), Math.random(), Math.random());
scene.add(rock);
}
obstacles.push({ x: x, z: z, radius: r * 0.78, type: 'hill' });
}
function addTirePile(x, z, count) {
const g = new THREE.Group();
const tireMat = new THREE.MeshStandardMaterial({ color: 0x131313, roughness: 0.96 });
const hubMat = new THREE.MeshStandardMaterial({ color: 0x777777, metalness: 0.75, roughness: 0.35 });
for (let i = 0; i < count; i++) {
const tire = new THREE.Mesh(new THREE.TorusGeometry(0.85, 0.26, 8, 18), tireMat);
tire.rotation.x = Math.PI / 2;
tire.rotation.z = Math.random() * Math.PI;
tire.position.y = 0.32 + i * 0.34 + Math.random() * 0.03;
g.add(tire);
const hub = new THREE.Mesh(new THREE.CylinderGeometry(0.28, 0.28, 0.08, 10), hubMat);
hub.position.y = tire.position.y + 0.25;
g.add(hub);
}
g.position.set(x, 0, z);
scene.add(g);
obstacles.push({ x: x, z: z, radius: 1.25, type: 'tires' });
}
function addBarrier(x, z, rot) {
const g = new THREE.Group();
const yellow = new THREE.MeshStandardMaterial({ color: 0xe0a812, roughness: 0.65, metalness: 0.15 });
const dark = new THREE.MeshStandardMaterial({ color: 0x23262b, roughness: 0.82, metalness: 0.2 });
const base = new THREE.Mesh(new THREE.BoxGeometry(5.4, 1.15, 1.25), yellow);
base.position.y = 0.58;
g.add(base);
for (let i = -2; i <= 2; i++) {
const stripe = new THREE.Mesh(new THREE.BoxGeometry(0.55, 1.18, 1.27), dark);
stripe.position.set(i * 1.0, 0.58, 0);
g.add(stripe);
}
const top = new THREE.Mesh(new THREE.BoxGeometry(5.5, 0.22, 0.9), dark);
top.position.y = 1.27;
g.add(top);
g.position.set(x, 0, z);
g.rotation.y = rot;
scene.add(g);
const ox = Math.cos(rot) * 1.55;
const oz = -Math.sin(rot) * 1.55;
obstacles.push({ x: x + ox, z: z + oz, radius: 1.5, type: 'barrier' });
obstacles.push({ x: x - ox, z: z - oz, radius: 1.5, type: 'barrier' });
}
function addCrate(x, z, size) {
const g = new THREE.Group();
const mat = new THREE.MeshStandardMaterial({ color: 0x8a5a2c, roughness: 0.92 });
const trimMat = new THREE.MeshStandardMaterial({ color: 0x4a2b12, roughness: 0.98 });
const box = new THREE.Mesh(new THREE.BoxGeometry(size, size, size), mat);
box.position.y = size / 2;
g.add(box);
const t = size * 0.11;
const edge1 = new THREE.Mesh(new THREE.BoxGeometry(size + t, t, size + t), trimMat);
edge1.position.y = size * 0.18;
g.add(edge1);
const edge2 = edge1.clone();
edge2.position.y = size * 0.82;
g.add(edge2);
g.position.set(x, 0, z);
g.rotation.y = Math.random() * Math.PI;
scene.add(g);
obstacles.push({ x: x, z: z, radius: size * 0.72, type: 'crate' });
}
addHill(0, -1, 7.0);
addHill(-17, 12, 4.5);
addHill(18, -12, 4.8);
addHill(9, 21, 4.0);
addHill(-12, -18, 4.2);
addTirePile(-8, 9, 5);
addTirePile(10, 11, 4);
addTirePile(-9, -8, 4);
addTirePile(14, -2, 5);
addTirePile(-23, -3, 4);
addTirePile(23, 7, 4);
addTirePile(-2, 26, 3);
addTirePile(2, -27, 3);
addBarrier(-5, -13, 0.2);
addBarrier(5, -4, -0.6);
addBarrier(14, 3, 0.9);
addBarrier(-19, 1, 1.2);
addBarrier(5, 17, -0.4);
addBarrier(-13, 24, 0.1);
addBarrier(25, -14, -1.2);
addBarrier(-25, -14, 0.5);
addCrate(-24, 16, 1.3);
addCrate(22, 17, 1.4);
addCrate(-20, -22, 1.2);
addCrate(23, -20, 1.5);
addCrate(0, 27, 1.25);
addCrate(-28, 7, 1.1);
addCrate(28, 4, 1.15);
addCrate(-27, -12, 1.35);
addCrate(27, -12, 1.2);
addCrate(0, -30, 1.4);
// Loose non-colliding debris.
const debrisMat = new THREE.MeshStandardMaterial({ color: 0x2b1c10, roughness: 1 });
for (let i = 0; i < 110; i++) {
const a = Math.random() * Math.PI * 2;
const r = 3 + Math.random() * 29;
const geo = Math.random() < 0.5
? new THREE.BoxGeometry(0.18 + Math.random() * 0.7, 0.05, 0.08 + Math.random() * 0.35)
: new THREE.BoxGeometry(0.08 + Math.random() * 0.25, 0.08, 0.4 + Math.random() * 1.0);
const m = new THREE.Mesh(geo, debrisMat);
m.position.set(Math.cos(a) * r, 0.06, Math.sin(a) * r);
m.rotation.set((Math.random() - 0.5) * 0.2, Math.random() * Math.PI, (Math.random() - 0.5) * 0.2);
scene.add(m);
}
// ---------- particles ----------
const pGeo = new THREE.BufferGeometry();
const pPos = new Float32Array(MAX_PARTICLES * 3);
const pCol = new Float32Array(MAX_PARTICLES * 3);
const pVel = new Float32Array(MAX_PARTICLES * 3);
const pLife = new Float32Array(MAX_PARTICLES);
const pGrav = new Float32Array(MAX_PARTICLES);
let pCursor = 0;
for (let i = 0; i < MAX_PARTICLES; i++) {
pPos[i * 3 + 1] = -100;
}
pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
pGeo.setAttribute('color', new THREE.BufferAttribute(pCol, 3));
const pMesh = new THREE.Points(
pGeo,
new THREE.PointsMaterial({
size: 0.34,
vertexColors: true,
transparent: true,
opacity: 0.92,
depthWrite: false,
sizeAttenuation: true
})
);
pMesh.frustumCulled = false;
scene.add(pMesh);
function getParticleIndex() {
for (let i = 0; i < MAX_PARTICLES; i++) {
const idx = (pCursor + i) % MAX_PARTICLES;
if (pLife[idx] <= 0) {
pCursor = (idx + 1) % MAX_PARTICLES;
return idx;
}
}
pCursor = (pCursor + 1) % MAX_PARTICLES;
return (pCursor + MAX_PARTICLES - 1) % MAX_PARTICLES;
}
function spawnSparks(x, y, z, count, colorHex, force) {
const c = new THREE.Color(colorHex);
for (let n = 0; n < count; n++) {
const i = getParticleIndex();
const a = Math.random() * Math.PI * 2;
const sp = (2 + Math.random() * 5) * (force || 1);
pPos[i * 3] = x + (Math.random() - 0.5) * 0.4;
pPos[i * 3 + 1] = y + (Math.random() - 0.5) * 0.3;
pPos[i * 3 + 2] = z + (Math.random() - 0.5) * 0.4;
pVel[i * 3] = Math.cos(a) * sp;
pVel[i * 3 + 1] = 1.5 + Math.random() * 4.5;
pVel[i * 3 + 2] = Math.sin(a) * sp;
pLife[i] = 0.35 + Math.random() * 0.45;
pGrav[i] = 12;
const shade = 0.8 + Math.random() * 0.4;
pCol[i * 3] = Math.min(1, c.r * shade);
pCol[i * 3 + 1] = Math.min(1, c.g * shade);
pCol[i * 3 + 2] = Math.min(1, c.b * shade);
}
pGeo.attributes.position.needsUpdate = true;
pGeo.attributes.color.needsUpdate = true;
}
function spawnSmoke(x, y, z) {
const i = getParticleIndex();
pPos[i * 3] = x + (Math.random() - 0.5) * 0.8;
pPos[i * 3 + 1] = y + Math.random() * 0.4;
pPos[i * 3 + 2] = z + (Math.random() - 0.5) * 0.8;
pVel[i * 3] = (Math.random() - 0.5) * 0.8;
pVel[i * 3 + 1] = 1.2 + Math.random() * 1.8;
pVel[i * 3 + 2] = (Math.random() - 0.5) * 0.8;
pLife[i] = 1.2 + Math.random() * 1.0;
pGrav[i] = -0.2;
pCol[i * 3] = 0.31 + Math.random() * 0.2;
pCol[i * 3 + 1] = 0.31 + Math.random() * 0.2;
pCol[i * 3 + 2] = 0.34 + Math.random() * 0.2;
pGeo.attributes.position.needsUpdate = true;
pGeo.attributes.color.needsUpdate = true;
}
function updateParticles(dt) {
for (let i = 0; i < MAX_PARTICLES; i++) {
if (pLife[i] > 0) {
pLife[i] -= dt;
if (pLife[i] <= 0) {
pPos[i * 3 + 1] = -100;
continue;
}
pVel[i * 3 + 1] -= pGrav[i] * dt;
pPos[i * 3] += pVel[i * 3] * dt;
pPos[i * 3 + 1] += pVel[i * 3 + 1] * dt;
pPos[i * 3 + 2] += pVel[i * 3 + 2] * dt;
pVel[i * 3] *= 0.99;
pVel[i * 3 + 1] *= 0.995;
pVel[i * 3 + 2] *= 0.99;
}
}
pGeo.attributes.position.needsUpdate = true;
}
// ---------- trucks ----------
const trucks = [];
function createTruckModel(color) {
const group = new THREE.Group();
const bodyMat = new THREE.MeshStandardMaterial({
color: color,
metalness: 0.76,
roughness: 0.28
});
const glassMat = new THREE.MeshStandardMaterial({
color: 0x06111f,
metalness: 0.85,
roughness: 0.08,
emissive: 0x00152a,
emissiveIntensity: 0.55
});
const chromeMat = new THREE.MeshStandardMaterial({
color: 0xd9e0e8,
metalness: 0.9,
roughness: 0.18
});
const tireMat = new THREE.MeshStandardMaterial({
color: 0x121212,
roughness: 0.96
});
const shadow = new THREE.Mesh(
new THREE.CircleGeometry(2.7, 20),
new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.38, depthWrite: false })
);
shadow.rotation.x = -Math.PI / 2;
shadow.position.y = 0.025;
group.add(shadow);
const lower = new THREE.Mesh(new THREE.BoxGeometry(2.35, 0.52, 4.75), bodyMat);
lower.position.y = 1.25;
group.add(lower);
const hood = new THREE.Mesh(new THREE.BoxGeometry(2.25, 0.16, 1.45), bodyMat);
hood.position.set(0, 1.58, 1.65);
hood.rotation.x = -0.08;
group.add(hood);
const cab = new THREE.Mesh(new THREE.BoxGeometry(2.05, 0.72, 2.1), bodyMat);
cab.position.set(0, 1.87, -0.1);
cab.rotation.x = -0.12;
group.add(cab);
const bed = new THREE.Mesh(new THREE.BoxGeometry(2.05, 0.32, 1.4), bodyMat);
bed.position.set(0, 1.55, -1.75);
group.add(bed);
const roof = new THREE.Mesh(new THREE.BoxGeometry(1.65, 0.1, 1.85), bodyMat);
roof.position.set(0, 2.27, -0.22);
roof.rotation.x = -0.13;
group.add(roof);
const windshield = new THREE.Mesh(new THREE.BoxGeometry(1.6, 0.06, 0.95), glassMat);
windshield.position.set(0, 2.04, 0.73);
windshield.rotation.x = -0.58;
group.add(windshield);
const sideWinGeo = new THREE.BoxGeometry(0.04, 0.38, 0.9);
const sideWinL = new THREE.Mesh(sideWinGeo, glassMat);
sideWinL.position.set(-1.035, 1.98, -0.05);
group.add(sideWinL);
const sideWinR = sideWinL.clone();
sideWinR.position.x = 1.035;
group.add(sideWinR);
const frontLight = new THREE.Mesh(
new THREE.BoxGeometry(1.8, 0.09, 0.08),
new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0x9fd5ff, emissiveIntensity: 2.2 })
);
frontLight.position.set(0, 1.36, 2.39);
group.add(frontLight);
const tail = new THREE.Mesh(
new THREE.BoxGeometry(1.75, 0.07, 0.08),
new THREE.MeshStandardMaterial({ color: 0xff2222, emissive: 0xaa0000, emissiveIntensity: 1.4 })
);
tail.position.set(0, 1.38, -2.38);
group.add(tail);
const wheelGeo = new THREE.CylinderGeometry(0.98, 0.98, 0.7, 14);
const hubGeo = new THREE.CylinderGeometry(0.4, 0.4, 0.74, 10);
for (const sx of [-1.28, 1.28]) {
for (const sz of [-1.55, 1.55]) {
const wheel = new THREE.Mesh(wheelGeo, tireMat);
wheel.rotation.z = Math.PI / 2;
wheel.position.set(sx, 0.98, sz);
group.add(wheel);
const hub = new THREE.Mesh(hubGeo, chromeMat);
hub.rotation.z = Math.PI / 2;
hub.position.set(sx, 0.98, sz);
group.add(hub);
}
}
return { group: group, bodyMat: bodyMat };
}
function addTruck(x, z, angle, color, isPlayer) {
const model = createTruckModel(color);
model.group.position.set(x, 0, z);
model.group.rotation.y = angle;
scene.add(model.group);
const t = {
index: trucks.length,
isPlayer: isPlayer,
group: model.group,
bodyMat: model.bodyMat,
baseColor: new THREE.Color(color),
pos: new THREE.Vector2(x, z),
vel: new THREE.Vector2(0, 0),
angle: angle,
angularVel: 0,
radius: TRUCK_RADIUS,
invMass: 1,
throttle: 0,
steer: 0,
damage: 0,
wrecked: false,
hitCooldown: 0,
scoreCooldown: 0,
flash: 0,
smokeTimer: Math.random() * 0.4,
aiSlot: trucks.length
};
trucks.push(t);
return t;
}
const player = addTruck(0, -19, 0, 0xff5a1f, true);
addTruck(14, 9, Math.atan2(-14, -9), 0x3185ff, false);
addTruck(-9, 16, Math.atan2(9, -16), 0x51d857, false);
addTruck(-16, -8, Math.atan2(16, 8), 0xffc93c, false);
addTruck(20, -5, Math.atan2(-20, 5), 0xcf55ff, false);
camera.position.set(
player.pos.x - Math.sin(player.angle) * 14,
10.5,
player.pos.y - Math.cos(player.angle) * 14
);
camera.lookAt(
player.pos.x + Math.sin(player.angle) * 4,
1.8,
player.pos.y + Math.cos(player.angle) * 4
);
// ---------- input ----------
const keys = Object.create(null);
window.addEventListener('keydown', function (e) {
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space'].indexOf(e.code) !== -1) {
e.preventDefault();
}
keys[e.code] = true;
if (e.code === 'KeyP' && !e.repeat) {
togglePhoto();
}
});
window.addEventListener('keyup', function (e) {
keys[e.code] = false;
});
function setPlayerInput() {
let throttle = 0;
let steer = 0;
if (keys['KeyW'] || keys['ArrowUp']) throttle += 1;
if (keys['KeyS'] || keys['ArrowDown']) throttle -= 1;
if (keys['KeyD'] || keys['ArrowRight']) steer += 1;
if (keys['KeyA'] || keys['ArrowLeft']) steer -= 1;
player.throttle = throttle;
player.steer = steer;
}
// ---------- AI ----------
function computeAIInput(t) {
const time = game.elapsed;
const p = trucks[0];
const dxp = p.pos.x - t.pos.x;
const dzp = p.pos.y - t.pos.y;
const distP = Math.hypot(dxp, dzp);
let tx;
let tz;
if (distP < 32) {
const slotA = time * 0.45 + t.aiSlot * Math.PI / 2;
const chaseRadius = 4.5 + (t.aiSlot % 3) * 1.5;
tx = p.pos.x + Math.sin(slotA) * chaseRadius;
tz = p.pos.y + Math.cos(slotA) * chaseRadius;
} else {
const patrolA = time * 0.12 + t.aiSlot * Math.PI / 2;
const pr = 17 + (t.aiSlot % 3) * 3;
tx = Math.sin(patrolA) * pr;
tz = Math.cos(patrolA) * pr;
}
let sx = 0;
let sz = 0;
for (let i = 0; i < trucks.length; i++) {
const o = trucks[i];
if (o === t) continue;
const dx = t.pos.x - o.pos.x;
const dz = t.pos.y - o.pos.y;
const d = Math.hypot(dx, dz);
if (d < 7.5 && d > 0.001) {
const w = (7.5 - d) / 7.5;
sx += (dx / d) * w * 1.8;
sz += (dz / d) * w * 1.8;
}
}
for (let i = 0; i < obstacles.length; i++) {
const o = obstacles[i];
const dx = t.pos.x - o.x;
const dz = t.pos.y - o.z;
const d = Math.hypot(dx, dz);
const safe = o.radius + t.radius + 2.0;
if (d < safe && d > 0.001) {
const w = (safe - d) / safe;
sx += (dx / d) * w * 2.4;
sz += (dz / d) * w * 2.4;
}
}
const rr = Math.hypot(t.pos.x, t.pos.y);
if (rr > PLAY_RADIUS - 5) {
const w = (rr - (PLAY_RADIUS - 5)) / 5;
sx -= (t.pos.x / rr) * w * 3;
sz -= (t.pos.y / rr) * w * 3;
}
const desiredX = tx - t.pos.x + sx * 4.5;
const desiredZ = tz - t.pos.y + sz * 4.5;
const desiredAngle = Math.atan2(desiredX, desiredZ);
let diff = wrapAngle(desiredAngle - t.angle);
let steer = clamp(diff * 1.8, -1, 1) + Math.sin(time * 2.2 + t.aiSlot * 2.1) * 0.08;
steer = clamp(steer, -1, 1);
let throttle = clamp(0.95 - Math.max(0, Math.abs(diff) - 0.4) * 0.9, 0.15, 1.0);
if (distP < 8) throttle = 1.0;
if (Math.hypot(t.vel.x, t.vel.y) < 1.2 && Math.abs(diff) > 2.2 && Math.random() < 0.02) {
throttle = -0.7;
steer = -steer;
}
return { throttle: throttle, steer: steer };
}
// ---------- physics / collisions ----------
function updateTruck(t, dt) {
const fwdX = Math.sin(t.angle);
const fwdZ = Math.cos(t.angle);
const speedAlong = t.vel.x * fwdX + t.vel.y * fwdZ;
const engine = t.wrecked ? 12 : 23;
t.vel.x += fwdX * t.throttle * engine * dt;
t.vel.y += fwdZ * t.throttle * engine * dt;
const speedBeforeTurn = Math.hypot(t.vel.x, t.vel.y);
if (speedBeforeTurn > 0.2) {
const turn = t.steer * 2.5 * Math.min(1, speedBeforeTurn / 4.0);
t.angle += turn * dt * (speedAlong < -0.3 ? -1 : 1);
}
const rightX = Math.cos(t.angle);
const rightZ = -Math.sin(t.angle);
const lateral = t.vel.x * rightX + t.vel.y * rightZ;
const grip = Math.min(1, 7.5 * dt);
t.vel.x -= rightX * lateral * grip;
t.vel.y -= rightZ * lateral * grip;
const sp0 = Math.hypot(t.vel.x, t.vel.y);
if (sp0 > 0) {
const dragFactor = Math.max(0, 1 - 0.65 * dt);
t.vel.x *= dragFactor;
t.vel.y *= dragFactor;
}
t.angle += t.angularVel * dt;
t.angularVel *= Math.exp(-5 * dt);
t.angularVel = clamp(t.angularVel, -5, 5);
const sp = Math.hypot(t.vel.x, t.vel.y);
const maxSpeed = t.wrecked ? 11 : 20;
if (sp > maxSpeed) {
const k = maxSpeed / sp;
t.vel.x *= k;
t.vel.y *= k;
}
t.pos.x += t.vel.x * dt;
t.pos.y += t.vel.y * dt;
}
function resolveTruckCollision(a, b) {
const dx = b.pos.x - a.pos.x;
const dz = b.pos.y - a.pos.y;
let d = Math.hypot(dx, dz);
const minDist = a.radius + b.radius;
if (d >= minDist) return;
if (d < 0.0001) d = 0.0001;
const nx = dx / d;
const nz = dz / d;
const overlap = minDist - d;
const invTotal = a.invMass + b.invMass;
a.pos.x -= nx * overlap * (a.invMass / invTotal);
a.pos.y -= nz * overlap * (a.invMass / invTotal);
b.pos.x += nx * overlap * (b.invMass / invTotal);
b.pos.y += nz * overlap * (b.invMass / invTotal);
const rvx = b.vel.x - a.vel.x;
const rvz = b.vel.y - a.vel.y;
const vn = rvx * nx + rvz * nz;
if (vn < 0) {
const e = 0.35;
const j = -(1 + e) * vn / invTotal;
a.vel.x -= j * nx * a.invMass;
a.vel.y -= j * nz * a.invMass;
b.vel.x += j * nx * b.invMass;
b.vel.y += j * nz * b.invMass;
const tx = -nz;
const tz = nx;
const vt = rvx * tx + rvz * tz;
a.angularVel += clamp(vt * 0.35 + (Math.random() - 0.5) * 1.6, -4, 4);
b.angularVel -= clamp(vt * 0.35 + (Math.random() - 0.5) * 1.6, -4, 4);
const rel
Attachments
deepseek/deepseek-v4.1-flash-1017 — page