Run Detail
completedqwen3.8-27bRecorded 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
159.7s
Total Tokens
7,869
Input Tokens
767
Output Tokens
7,102
Reasoning Tokens
2,321
Reasoning Effort
medium
Est. Cost
$0.0000
Started
8/27/2026, 3:17:33 PM
OR Provider
Alibaba
Finish Reason
error
Generation ID
gen-1787843853-xlJAy5lmQJl0UhMzszOU
Turns (1)
Turn #1
767 in7,102 out2,321 reasoning7,869 total159.7s
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
VOLT RIDGE RALLY — five angular Cybertrucks tearing up a dirt bowl packed with mounds, boulders and barrels, ringed on all four sides by a roaring crowd, while you ram your rivals for points under a countdown clock.
The game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VOLT RIDGE RALLY</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#0a0a0f;font-family:Arial,Helvetica,sans-serif;color:#fff;}
#c{display:block;width:100%;height:100%;}
.hud{position:fixed;top:14px;left:14px;z-index:5;background:rgba(10,12,20,.6);
border:1px solid #2f6df0;border-radius:8px;padding:10px 14px;backdrop-filter:blur(2px);}
.hud .name{font-size:20px;font-weight:800;letter-spacing:2px;color:#7fd0ff;text-shadow:0 0 8px #2f6df0;}
.hud .row{display:flex;gap:18px;margin-top:6px;font-size:16px;font-weight:700;}
.hud .lbl{color:#8aa;} .hud .val{color:#fff;}
#score{color:#ffd24a;} #clock{color:#ff6b6b;}
.ctrl{position:fixed;bottom:14px;left:14px;z-index:5;font-size:13px;color:#bcd;
background:rgba(10,12,20,.55);border-radius:6px;padding:8px 12px;line-height:1.5;}
.ctrl b{color:#7fd0ff;}
.card{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;
background:rgba(5,6,12,.55);}
.card .box{background:rgba(12,16,28,.92);border:2px solid #2f6df0;border-radius:14px;
padding:34px 54px;text-align:center;box-shadow:0 0 40px rgba(47,109,240,.5);}
.card h1{margin:0 0 6px;font-size:34px;letter-spacing:3px;color:#7fd0ff;}
.card .s{font-size:22px;font-weight:800;color:#ffd24a;margin-top:8px;}
.card .hint{margin-top:16px;font-size:13px;color:#8aa;}
#over{position:fixed;inset:0;z-index:9;display:none;align-items:center;justify-content:center;
background:rgba(5,6,12,.6);}
#over .box{text-align:center;background:rgba(12,16,28,.9);border:2px solid #ff6b6b;border-radius:14px;padding:30px 50px;}
#over h1{margin:0;color:#ff6b6b;letter-spacing:3px;}
#over .s{font-size:24px;font-weight:800;color:#ffd24a;margin-top:10px;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div class="hud">
<div class="name">VOLT RIDGE ARENA</div>
<div class="row">
<span><span class="lbl">SCORE</span> <span class="val" id="score">0</span></span>
<span><span class="lbl">CLOCK</span> <span class="val" id="clock">60</span></span>
</div>
</div>
<div class="ctrl">
<b>DRIVE:</b> W A S D or ARROW KEYS<br>
<b>P</b> photo mode · Ram rivals for points
</div>
<div class="card" id="photoCard">
<div class="box">
<h1>VOLT RIDGE ARENA</h1>
<div class="s">SCORE <span id="photoScore">0</span></div>
<div class="hint">Photo mode — press <b>P</b> to resume</div>
</div>
</div>
<div id="over">
<div class="box">
<h1>RALLY OVER</h1>
<div class="s">FINAL SCORE <span id="finalScore">0</span></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(function(){
"use strict";
// ---- Renderer / scene -------------------------------------------------------
var canvas = document.getElementById('c');
var renderer = new THREE.WebGLRenderer({canvas:canvas, antialias:true});
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x0b1020);
scene.fog = new THREE.Fog(0x0b1020, 60, 160);
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 400);
// ---- Lights -----------------------------------------------------------------
scene.add(new THREE.HemisphereLight(0x88aaff, 0x2a1a10, 0.7));
var sun = new THREE.DirectionalLight(0xfff2d0, 1.0);
sun.position.set(30, 50, 20);
sun.castShadow = true;
sun.shadow.mapSize.set(2048,2048);
sun.shadow.camera.left=-50; sun.shadow.camera.right=50;
sun.shadow.camera.top=50; sun.shadow.camera.bottom=-50;
sun.shadow.camera.far=150;
scene.add(sun);
// floodlights
[[-34,-24],[34,-24],[-34,24],[34,24]].forEach(function(p){
var f=new THREE.PointLight(0xbfe0ff,0.6,80); f.position.set(p[0],22,p[1]); scene.add(f);
});
// ---- Arena dimensions -------------------------------------------------------
var FX = 30, FY = 20; // half extents of play floor
// ---- Floor ------------------------------------------------------------------
var floor = new THREE.Mesh(
new THREE.PlaneGeometry(FX*2+8, FY*2+8),
new THREE.MeshStandardMaterial({color:0x6b4a2b, roughness:1})
);
floor.rotation.x = -Math.PI/2; floor.receiveShadow = true; scene.add(floor);
// dirt texture via vertex jitter is overkill; add scattered dark patches
for(var i=0;i<40;i++){
var patch = new THREE.Mesh(new THREE.CircleGeometry(1+Math.random()*2,10),
new THREE.MeshStandardMaterial({color:0x553a20, roughness:1}));
patch.rotation.x=-Math.PI/2; patch.position.set((Math.random()*2-1)*(FX-2),0.02,(Math.random()*2-1)*(FY-2));
scene.add(patch);
}
// ---- Obstacles (3 distinct types) ------------------------------------------
// Type A: mounds (artificial hills)
var mounds=[];
function addMound(x,z,r,h){
var m=new THREE.Mesh(new THREE.ConeGeometry(r,h,7),
new THREE.MeshStandardMaterial({color:0x7a5230,roughness:1,flatShading:true}));
m.position.set(x,h/2,z); m.castShadow=true; m.receiveShadow=true; scene.add(m);
mounds.push({x:x,z:z,r:r*0.7});
}
addMound(-16,-8,6,5); addMound(14,9,7,6); addMound(-4,12,5,4); addMound(18,-12,5,4); addMound(-20,6,4,3.5);
// Type B: boulders (rocks)
var rocks=[];
function addRock(x,z,s){
var m=new THREE.Mesh(new THREE.DodecahedronGeometry(s,0),
new THREE.MeshStandardMaterial({color:0x8a8a92,roughness:1,flatShading:true}));
m.position.set(x,s*0.6,z); m.rotation.set(Math.random(),Math.random(),Math.random());
m.castShadow=true; m.receiveShadow=true; scene.add(m);
rocks.push({x:x,z:z,r:s*0.9});
}
[[8,-4,1.6],[-10,2,1.4],[2,14,1.8],[-22,-10,1.5],[12,15,1.4],[-2, -14,1.6]].forEach(function(a){addRock(a[0],a[1],a[2]);});
// Type C: barrels (debris)
var barrels=[];
function addBarrel(x,z){
var m=new THREE.Mesh(new THREE.CylinderGeometry(0.9,0.9,2.2,12),
new THREE.MeshStandardMaterial({color:0xc0392b,roughness:0.6,metalness:0.3}));
m.position.set(x,1.1,z); m.castShadow=true; m.receiveShadow=true; scene.add(m);
barrels.push({x:x,z:z,r:1.0,mesh:m,spin:0});
}
for(var b=0;b<10;b++){ addBarrel((Math.random()*2-1)*(FX-4),(Math.random()*2-1)*(FY-4)); }
// ---- Stands + crowd (all the way round) ------------------------------------
// low retaining walls
var wallMat = new THREE.MeshStandardMaterial({color:0x2b3346,roughness:0.9});
function wall(w,h,d,x,z){var m=new THREE.Mesh(new THREE.BoxGeometry(w,h,d),wallMat);m.position.set(x,h/2,z);m.receiveShadow=true;scene.add(m);}
wall(FX*2+12,3,2,0,-(FY+3)); wall(FX*2+12,3,2,0,FY+3);
wall(2,3,FY*2+12,-(FX+3),0); wall(2,3,FY*2+12,FX+3,0);
var crowdData=[];
var palette=[0xd94f4f,0x4f8fd9,0xf0c040,0x6fd06f,0xc06fd0,0xf0f0f0,0xff8c42];
function crowdRow(x0,z0,x1,z1,y,n){
for(var i=0;i<n;i++){
var t=n>1?i/(n-1):0;
var x=x0+(x1-x0)*t+(Math.random()-0.5)*0.6;
var z=z0+(z1-z0)*t+(Math.random()-0.5)*0.6;
crowdData.push({x:x,y:y+(Math.random()-0.5)*0.3,z:z,c:palette[(Math.random()*palette.length)|0]});
}
}
var tiers=[2.2,4.2,6.2,8.2];
tiers.forEach(function(y,ti){
var off=FY+4+ti*0.4;
crowdRow(-(FX+4),-off, FX+4,-off, y, 52); // north
crowdRow(-(FX+4), off, FX+4, off, y, 52); // south
crowdRow(-(FX+4),-off, -(FX+4),off, y, 34); // west
crowdRow( (FX+4),-off, (FX+4),off, y, 34); // east
});
var crowdGeo=new THREE.SphereGeometry(0.42,6,6);
var crowdMat=new THREE.MeshStandardMaterial({roughness:1});
var crowd=new THREE.InstancedMesh(crowdGeo,crowdMat,crowdData.length);
var dummy=new THREE.Object3D(); var col=new THREE.Color();
crowdData.forEach(function(p,i){
dummy.position.set(p.x,p.y,p.z); dummy.updateMatrix();
crowd.setMatrixAt(i,dummy.matrix);
crowd.setColorAt(i,col.setHex(p.c));
});
crowd.instanceMatrix.needsUpdate=true;
if(crowd.instanceColor) crowd.instanceColor.needsUpdate=true;
scene.add(crowd);
// ---- Trucks -----------------------------------------------------------------
function buildTruck(color){
var g=new THREE.Group();
var bodyMat=new THREE.MeshStandardMaterial({color:color,roughness:0.4,metalness:0.5,flatShading:true});
var body=new THREE.Mesh(new THREE.BoxGeometry(2.2,1.1,4.2),bodyMat);
body.position.y=1.1; body.castShadow=true; g.add(body);
// angular cab wedge
var cab=new THREE.Mesh(new THREE.BoxGeometry(2.0,0.9,1.8),bodyMat);
cab.position.set(0,1.9,0.6); cab.castShadow=true; g.add(cab);
// windshield
var glass=new THREE.Mesh(new THREE.BoxGeometry(1.9,0.6,0.1),
new THREE.MeshStandardMaterial({color:0x111820,roughness:0.2,metalness:0.6}));
glass.position.set(0,1.95,1.55); g.add(glass);
// wheels
var wgeo=new THREE.CylinderGeometry(0.6,0.6,0.5,10);
var wmat=new THREE.MeshStandardMaterial({color:0x111111,roughness:0.9});
[[-1.1,1.5],[1.1,1.5],[-1.1,-1.5],[1.1,-1.5]].forEach(function(w){
var wh=new THREE.Mesh(wgeo,wmat); wh.rotation.z=Math.PI/2;
wh.position.set(w[0],0.6,w[1]); wh.castShadow=true; g.add(wh);
});
scene.add(g);
return g;
}
var TRUCK_R=2.4;
var trucks=[];
function makeTruck(color,isPlayer,x,z){
var t={
mesh:buildTruck(color), isPlayer:isPlayer,
pos:new THREE.Vector3(x,0,z), heading:Math.random()*Math.PI*2,
speed:0, spin:0, flash:0, color:color,
wp:new THREE.Vector3((Math.random()*2-1)*(FX-4),(Math.random()*2-1)*(FY-4)),
wpTimer:0, ramTimer:0
};
trucks.push(t);
return t;
}
var player=makeTruck(0x2f6df0,true,0,0);
makeTruck(0xe0483e,false,-12,-8);
makeTruck(0x3ecf6a,false, 12,-8);
makeTruck(0xf0b429,false,-12, 8);
makeTruck(0xb04fe0,false, 12, 8);
// ---- Input ------------------------------------------------------------------
var keys={};
window.addEventListener('keydown',function(e){
var k=e.key.toLowerCase();
keys[k]=true;
if(k==='p'){ togglePhoto(); }
if(['arrowup','arrowdown','arrowleft','arrowright',' '].indexOf(k)>=0) e.preventDefault();
});
window.addEventListener('keyup',function(e){ keys[e.key.toLowerCase()]=false; });
// ---- Game state -------------------------------------------------------------
var score=0, clock=60, gameOver=false, photoMode=false;
// #demo: real game state, not an overlay
if(location.hash==='#demo'){ clock=20; score=5000; }
var elScore=document.getElementById('score');
var elClock=document.getElementById('clock');
var photoCard=document.getElementById('photoCard');
var photoScore=document.getElementById('photoScore');
var overEl=document.getElementById('over');
var finalScore=document.getElementById('finalScore');
function togglePhoto(){
if(gameOver) return;
photoMode=!photoMode;
if(photoMode){
photoScore.textContent=score;
photoCard.style.display='flex';
} else {
photoCard.style.display='none';
}
}
function endGame(){
gameOver=true;
finalScore.textContent=score;
overEl.style.display='flex';
}
// ---- Physics helpers --------------------------------------------------------
function forwardOf(t){ return new THREE.Vector3(Math.sin(t.heading),0,Math.cos(t.heading)); }
function steerPlayer(t,dt){
var acc=26, maxS=20, fric=8, turn=2.4;
var up=keys['w']||keys['arrowup'], down=keys['s']||keys['arrowdown'];
var left=keys['a']||keys['arrowleft'], right=keys['d']||keys['arrowright'];
if(up) t.speed+=acc*dt;
if(down) t.speed-=acc*dt;
t.speed-=Math.sign(t.speed)*Math.min(Math.abs(t.speed),fric*dt);
t.speed=Math.max(-maxS*0.5,Math.min(maxS,t.speed));
var sf=Math.max(-1,Math.min(1,t.speed/(maxS*0.4)));
if(left) t.heading+=turn*dt*sf;
if(right) t.heading-=turn*dt*sf;
}
function steerAI(t,dt){
// pick / refresh waypoint
t.wpTimer-=dt;
var toWp=t.wp.clone().sub(t.pos);
if(t.wpTimer<=0 || toWp.length()<4){
t.wp.set((Math.random()*2-1)*(FX-4),(Math.random()*2-1)*(FY-4));
t.wpTimer=2+Math.random()*3;
// sometimes hunt a rival to ram
t.ramTimer-=1;
if(t.ramTimer<=0){
var best=null,bd=1e9;
trucks.forEach(function(o){ if(o!==t){var d=o.pos.distanceTo(t.pos); if(d<bd){bd=d;best=o;}}});
if(best && Math.random()<0.5){ t.wp.copy(best.pos); t.ramTimer=3+Math.random()*2; }
}
}
var desired=t.wp.clone().sub(t.pos);
// separation: repel from every other truck so rivals never clump
var sep=new THREE.Vector3();
trucks.forEach(function(o){
if(o===t) return;
var d=o.pos.clone().sub(t.pos); var L=d.length();
if(L<7 && L>0.001){ d.multiplyScalar((7-L)/L); sep.add(d); }
});
desired.add(sep.multiplyScalar(2.2));
var want=Math.atan2(desired.x,desired.z);
var diff=want-t.heading;
while(diff>Math.PI)diff-=Math.PI*2; while(diff<-Math.PI)diff+=Math.PI*2;
t.heading+=Math.max(-2.2*dt,Math.min(2.2*dt,diff));
var target=15;
t.speed+=Math.sign(target-t.speed)*Math.min(Math.abs(target-t.speed),22*dt);
}
function integrate(t,dt){
var f=forwardOf(t);
t.pos.addScaledVector(f,t.speed*dt);
// bounds
var m=2.5;
if(t.pos.x>FX-m){t.pos.x=FX-m; t.speed*=-0.3;}
if(t.pos.x<-(FX-m)){t.pos.x=-(FX-m); t.speed*=-0.3;}
if(t.pos.z>FY-m){t.pos.z=FY-m; t.speed*=-0.3;}
if(t.pos.z<-(FY-m)){t.pos.z=-(FY-m); t.speed*=-0.3;}
// obstacle collisions (push out + slow)
var obs=mounds.concat(rocks,barrels);
obs.forEach(function(o){
var d=t.pos.clone().sub(new THREE.Vector3(o.x,0,o.z));
var L=Math.hypot(d.x,d.z); var min=TRUCK_R+o.r;
if(L<min && L>0.001){
d.multiplyScalar(1/L);
t.pos.set(o.x+d.x*min,0,o.z+d.z*min);
t.speed*=0.55;
if(t.isPlayer) t.flash=Math.max(t.flash,0.4);
if(o.mesh){ o.spin+=0.4; } // barrels tumble
}
});
// apply spin (wreck reaction)
if(Math.abs(t.spin)>0.01){ t.heading+=t.spin*dt; t.spin*=Math.pow(0.02,dt); }
t.flash=Math.max(0,t.flash-dt*2);
// write to mesh
t.mesh.position.copy(t.pos); t.mesh.rotation.y=t.heading;
var s=1+t.flash*0.25;
t.mesh.scale.set(s,s,s);
t.mesh.traverse(function(ch){ if(ch.material&&ch.material.emissive){ ch.material.emissive.setHex(t.flash>0?0xff5500:0x000000); ch.material.emissiveIntensity=t.flash; }});
}
function collideTrucks(){
for(var i=0;i<trucks.length;i++){
for(var j=i+1;j<trucks.length;j++){
var a=trucks[i], b=trucks[j];
var d=b.pos.clone().sub(a.pos); var L=d.length();
var min=TRUCK_R*2;
if(L<min && L>0.001){
d.multiplyScalar(1/L);
// positional separation
var push=(min-L)/2;
a.pos.addScaledVector(d,-push); b.pos.addScaledVector(d,push);
// relative closing speed along normal
var va=forwardOf(a).multiplyScalar(a.speed);
var vb=forwardOf(b).multiplyScalar(b.speed);
var rel=va.clone().sub(vb).dot(d);
var impact=Math.abs(rel);
// impulse: exchange a fraction of momentum, both slow
a.speed*=0.45; b.speed*=0.45;
// wreck spin proportional to impact
var spin=Math.min(6,impact*0.25);
a.spin+=spin*(Math.random()<0.5?1:-1);
b.spin-=spin*(Math.random()<0.5?1:-1);
a.flash=1; b.flash=1;
// scoring: player ramming a rival
if((a.isPlayer||b.isPlayer) && impact>4){
var pts=Math.round(50+impact*8);
score+=pts;
if(a.isPlayer) cameraShake=Math.min(1.2,cameraShake+impact*0.05);
}
}
}
}
}
// ---- Camera -----------------------------------------------------------------
var camPos=new THREE.Vector3(0,18,-20);
var cameraShake=0;
function updateCamera(dt){
var f=forwardOf(player);
var target=player.pos.clone().addScaledVector(f,-9).add(new THREE.Vector3(0,6,0));
camPos.lerp(target,Math.min(1,dt*4));
if(cameraShake>0.01){
camPos.x+=(Math.random()-0.5)*cameraShake;
camPos.y+=(Math.random()-0.5)*cameraShake;
cameraShake*=Math.pow(0.01,dt);
}
camera.position.copy(camPos);
camera.lookAt(player.pos.clone().add(new THREE.Vector3(0,1,0)));
}
// ---- Barrel tumble visual ---------------------------------------------------
function updateBarrels(dt){
barrels.forEach(function(o){
if(Math.abs(o.spin)>0.01){ o.mesh.rotation.x+=o.spin*dt; o.spin*=Math.pow(0.05,dt); }
});
}
// ---- Main loop --------------------------------------------------------------
var last=performance.now();
function loop(now){
requestAnimationFrame(loop);
var dt=Math.min(0.05,(now-last)/1000); last=now;
if(!photoMode && !gameOver){
clock-=dt;
if(clock<=0){ clock=0; endGame(); }
steerPlayer(player,dt);
trucks.forEach(function(t){ if(!t.isPlayer) steerAI(t,dt); });
trucks.forEach(function(t){ integrate(t,dt); });
collideTrucks();
updateBarrels(dt);
}
// render always (photo mode keeps the same frozen frame on screen)
updateCamera(dt);
renderer.render(scene,camera);
elScore.textContent=score;
elClock.textContent=Math.ceil(clock);
}
requestAnimationFrame(loop);
window.addEventListener('resize',function(){
camera.aspect=window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
});
})();
</script>
</body>
</html>
The notes
- Five trucks: the player plus four
makeTruck(...,false)rivals, each holding its ownwpwaypoint andramTimer. They never form one wall because every AI adds a per-frame separation vector that repels it from any truck within 7 units, and each picks a fresh random waypoint on its own timer (with an independent chance to hunt a rival), so their headings and targets stay desynchronized rather than converging. - Demo mode: the single line is
if(location.hash==='#demo'){ clock=20; score=5000; }, executed once at init before the loop starts. It is not an overlay because it mutates the two real state variables the HUD, the countdown, and the end-game all read from — the clock genuinely ticks down from 20 and the score genuinely begins at 5000 and can still be added to by ramming. - Photo mode: pressing
PsetsphotoMode=true, which makes the loop skip the physics step and the clock decrement (no steering, no integration, no collisions, no countdown) while the render loop keeps running so the card sits over a perfectly still frozen frame instead of the arena quietly playing behind it. - Collisions: each frame I do an O(n²) circle-circle test between trucks using a shared radius; on overlap I push both apart along the contact normal by
Attachments
qwen/qwen3.8-27b — page