Rally

<!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 Rally</title>
<style>
  :root{--ink:#10251e;--cream:#f6e6bd;--orange:#ff5c2b;--lime:#d8f268}*{box-sizing:border-box}html,body{margin:0;overflow:hidden;background:#a7dbe2;font-family:Impact,"Arial Narrow",sans-serif;color:var(--cream)}canvas{display:block}#hud{position:fixed;inset:0;pointer-events:none;text-shadow:2px 2px 0 #18251b,0 0 8px #18251b}.logo{position:absolute;left:24px;top:18px;font-size:29px;letter-spacing:1px;line-height:.76;transform:skew(-8deg);color:var(--cream)}.logo small{font:11px monospace;letter-spacing:3px;color:var(--lime)}.top{position:absolute;right:24px;top:18px;display:flex;gap:10px}.panel{background:rgba(12,33,27,.72);border-left:4px solid var(--orange);padding:7px 12px;min-width:108px}.panel b{display:block;font-size:20px;line-height:18px}.panel span{font:10px monospace;letter-spacing:1px;color:#d5ddbd}.bottom{position:absolute;left:24px;bottom:23px;display:flex;align-items:end;gap:14px}.speed{font-size:66px;line-height:.7;letter-spacing:-2px}.speed small{font:12px monospace;letter-spacing:2px}.gear{font-size:42px;color:var(--orange);line-height:.8}.tach{height:7px;width:180px;background:#16332a;transform:skew(-16deg);margin-top:8px}.tach i{display:block;height:100%;background:linear-gradient(90deg,var(--lime) 65%,#ffbd38 65%,var(--orange) 84%);width:0}.mini{position:absolute;right:22px;bottom:20px;width:160px;height:120px;background:rgba(10,28,24,.65);border:2px solid rgba(246,230,189,.7);clip-path:polygon(8% 0,100% 0,100% 87%,92% 100%,0 100%,0 12%)}#map{width:100%;height:100%}.prompt,.finish{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(9,25,20,.24)}.card{padding:25px 38px;border:2px solid var(--cream);background:rgba(13,37,30,.82);box-shadow:10px 10px 0 rgba(0,0,0,.22);transform:skew(-3deg)}.card h1{margin:0;font-size:56px;letter-spacing:2px;color:var(--orange)}.card p{font:13px monospace;letter-spacing:2px}.count{font-size:104px;color:var(--cream);text-shadow:7px 7px 0 var(--orange)}button{pointer-events:auto;border:0;background:var(--orange);color:#17261f;font:22px Impact,sans-serif;padding:10px 24px;cursor:pointer;box-shadow:4px 4px 0 #f6e6bd}.hidden{display:none!important}.controls{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font:11px monospace;letter-spacing:1px;text-align:center;color:#fff7d9;opacity:.85}.touch{display:none;pointer-events:auto;position:absolute;inset:0}.touch button{position:absolute;width:64px;height:64px;padding:0;border-radius:50%;font-size:18px;background:rgba(246,230,189,.76)}.touch .l{left:20px;bottom:46px}.touch .r{left:94px;bottom:46px}.touch .g{right:25px;bottom:45px}.touch .b{right:102px;bottom:25px;width:52px;height:52px;font-size:12px}@media(max-width:700px){.touch{display:block}.logo{left:14px;top:12px}.top{right:12px;top:10px}.panel{min-width:76px;padding:5px 8px}.panel b{font-size:15px}.speed{font-size:48px}.bottom{left:15px;bottom:15px}.controls{display:none}.mini{width:116px;height:88px;right:12px;bottom:12px}.count{font-size:80px}}
</style>
</head>
<body>
<div id="hud"><div class="logo">DUSTLINE<br><small>RALLY // 26</small></div><div class="top"><div class="panel"><span>RACE TIME</span><b id="time">00:00.000</b></div><div class="panel"><span>LAP</span><b id="lap">1 / 3</b></div><div class="panel"><span>BEST</span><b id="best">--:--.---</b></div></div><div class="bottom"><div><div class="speed" id="speed">000 <small>KM/H</small></div><div class="tach"><i id="rpm"></i></div></div><div class="gear" id="gear">N</div></div><div class="mini"><canvas id="map"></canvas></div><div class="controls">WASD / ARROWS — DRIVE &nbsp; SPACE — HANDBRAKE &nbsp; C — CAMERA &nbsp; P — PAUSE &nbsp; R — RESTART</div><div id="countdown" class="prompt"><div class="count" id="count">3</div></div><div id="pause" class="prompt hidden"><div class="card"><h1>PAUSED</h1><p>TAKE A BREATH. THE DUST WILL SETTLE.</p><button id="resume">RESUME</button> <button id="restart">RESTART</button></div></div><div id="finish" class="finish hidden"><div class="card"><h1>STAGE COMPLETE</h1><p id="result"></p><button id="again">RUN IT BACK</button></div></div><div class="touch"><button class="l" data-k="left">◀</button><button class="r" data-k="right">▶</button><button class="b" data-k="brake">BRAKE</button><button class="g" data-k="gas">GAS</button></div></div>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.1/build/three.min.js"></script>
<script>
(()=>{'use strict';
const T=THREE, $=id=>document.getElementById(id), V=(x=0,y=0,z=0)=>new T.Vector3(x,y,z);
const game={scene:null,cam:null,renderer:null,clock:new T.Clock(),car:null,track:[],lengths:[],total:0,progress:0,lap:1,lapStart:0,start:0,best:null,state:'count',countStart:performance.now(),cinema:false,particles:[],skids:[],obstacles:[],audio:null};
const input={up:0,down:0,left:0,right:0,hand:0}; let car={pos:V(),vel:V(),heading:0,speed:0,steer:0,lastP:0,drift:0,hit:0};
function init(){
 game.scene=new T.Scene();game.scene.background=new T.Color(0x9bd5da);game.scene.fog=new T.FogExp2(0x9bd5da,.006);
 game.cam=new T.PerspectiveCamera(62,innerWidth/innerHeight,.1,900);game.renderer=new T.WebGLRenderer({antialias:true});game.renderer.setSize(innerWidth,innerHeight);game.renderer.setPixelRatio(Math.min(devicePixelRatio,1.7));game.renderer.shadowMap.enabled=true;game.renderer.shadowMap.type=T.PCFSoftShadowMap;document.body.appendChild(game.renderer.domElement);
 game.scene.add(new T.HemisphereLight(0xd6f4ff,0x415e27,2.1));let sun=new T.DirectionalLight(0xffe3ab,2.5);sun.position.set(-80,110,45);sun.castShadow=true;sun.shadow.mapSize.set(1024,1024);sun.shadow.camera.left=-130;sun.shadow.camera.right=130;sun.shadow.camera.top=130;sun.shadow.camera.bottom=-130;game.scene.add(sun);
 buildTrack(); buildWorld(); game.car=buildCar();game.scene.add(game.car); reset(); bind(); requestAnimationFrame(loop);
}
function pt(i){return game.track[(i+game.track.length)%game.track.length]}
function buildTrack(){
 const raw=[[0,0,52],[42,5,46],[72,10,13],[67,4,-28],[35,0,-57],[-8,-5,-61],[-51,1,-46],[-72,8,-6],[-58,13,32],[-23,7,48]];
 for(let i=0;i<raw.length;i++){let a=raw[i],b=raw[(i+1)%raw.length];for(let j=0;j<10;j++){let t=j/10, s=t*t*(3-2*t);game.track.push(V(a[0]+(b[0]-a[0])*s,a[1]+(b[1]-a[1])*s,a[2]+(b[2]-a[2])*s));}}
 game.lengths=[0];for(let i=1;i<game.track.length;i++)game.lengths[i]=game.lengths[i-1]+game.track[i].distanceTo(game.track[i-1]);game.total=game.lengths.at(-1)+pt(0).distanceTo(pt(-1));
 const road=new T.Group(), shoulder=new T.Group();let asphalt=new T.MeshStandardMaterial({color:0x453d32,roughness:.92}), edge=new T.MeshStandardMaterial({color:0xa8814d,roughness:1});
 for(let i=0;i<game.track.length;i++){let a=pt(i),b=pt(i+1),d=b.clone().sub(a),len=d.length(),mid=a.clone().add(b).multiplyScalar(.5),ang=Math.atan2(d.x,d.z);[ [shoulder,15,edge],[road,10,asphalt] ].forEach(([g,w,m])=>{let mesh=new T.Mesh(new T.BoxGeometry(w,.25,len+1),m);mesh.position.copy(mid);mesh.position.y-=.1;mesh.rotation.y=ang;mesh.receiveShadow=true;g.add(mesh)});}
 game.scene.add(shoulder,road);
 // striped start gate
 let p=pt(0),q=pt(1),dir=q.clone().sub(p).normalize(),side=V(-dir.z,0,dir.x);for(let s of [-1,1]){let post=new T.Mesh(new T.BoxGeometry(.35,4,.35),new T.MeshStandardMaterial({color:0xff5c2b,emissive:0x441200}));post.position.copy(p).addScaledVector(side,s*5).setY(p.y+2);game.scene.add(post)}let arch=new T.Mesh(new T.BoxGeometry(10,.45,.45),new T.MeshStandardMaterial({color:0xf6e6bd}));arch.position.copy(p).setY(p.y+4);arch.rotation.y=Math.atan2(dir.x,dir.z);game.scene.add(arch);
}
function buildWorld(){
 let ground=new T.Mesh(new T.PlaneGeometry(600,600,24,24),new T.MeshStandardMaterial({color:0x4c7137,roughness:1,flatShading:true}));ground.rotation.x=-Math.PI/2;ground.receiveShadow=true;let a=ground.geometry.attributes.position;for(let i=0;i<a.count;i++){let x=a.getX(i),z=a.getY(i);a.setZ(i,Math.sin(x*.035)*3+Math.cos(z*.045)*2)}ground.geometry.computeVertexNormals();game.scene.add(ground);
 const trunk=new T.MeshStandardMaterial({color:0x533821,flatShading:true}), pine=new T.MeshStandardMaterial({color:0x1e5436,flatShading:true}), rock=new T.MeshStandardMaterial({color:0x69705b,flatShading:true});
 function nearTrack(x,z){return game.track.some(p=>Math.hypot(x-p.x,z-p.z)<15)}
 for(let i=0;i<175;i++){let x=(Math.random()-.5)*230,z=(Math.random()-.5)*220;if(nearTrack(x,z))continue;let g=new T.Group(),h=3+Math.random()*7;let tr=new T.Mesh(new T.CylinderGeometry(.22,.36,h*.45,5),trunk);tr.position.y=h*.22;g.add(tr);for(let j=0;j<3;j++){let c=new T.Mesh(new T.ConeGeometry(h*(.22-j*.04),h*.42,6),pine);c.position.y=h*.38+j*h*.19;g.add(c)}g.position.set(x,0,z);g.rotation.y=Math.random()*6;g.traverse(o=>o.castShadow=true);game.scene.add(g);if(Math.random()<.26)game.obstacles.push({p:V(x,0,z),r:1.5});}
 for(let i=0;i<35;i++){let k=(i*7)%game.track.length,p=pt(k),d=pt(k+1).clone().sub(p).normalize(),s=V(-d.z,0,d.x),pos=p.clone().addScaledVector(s,(i%2?1:-1)*(12+Math.random()*5));let r=new T.Mesh(new T.DodecahedronGeometry(1+Math.random()*1.8,0),rock);r.position.copy(pos);r.position.y=.7;r.scale.y=.65;r.rotation.set(Math.random(),Math.random(),0);r.castShadow=true;game.scene.add(r);game.obstacles.push({p:pos,r:1.8});}
 // banners
 for(let i=12;i<game.track.length;i+=25){let p=pt(i),d=pt(i+1).clone().sub(p).normalize(),s=V(-d.z,0,d.x),g=new T.Group();for(let n of[-1,1]){let pole=new T.Mesh(new T.CylinderGeometry(.08,.08,3,5),new T.MeshStandardMaterial({color:0xeeeecc}));pole.position.copy(p).addScaledVector(s,n*8).setY(1.5);g.add(pole)}let ban=new T.Mesh(new T.BoxGeometry(16,1.25,.08),new T.MeshStandardMaterial({color:0xff5c2b,emissive:0x551000}));ban.position.copy(p).setY(2.7);ban.rotation.y=Math.atan2(d.x,d.z);g.add(ban);game.scene.add(g)}
}
function buildCar(){let g=new T.Group(),body=new T.MeshStandardMaterial({color:0xe8432c,metalness:.25,roughness:.42}),dark=new T.MeshStandardMaterial({color:0x16232a,roughness:.35}),light=new T.MeshStandardMaterial({color:0xff3c22,emissive:0xff1900});let base=new T.Mesh(new T.BoxGeometry(2.25,.55,4.35),body);base.position.y=.65;base.castShadow=true;g.add(base);let cabin=new T.Mesh(new T.BoxGeometry(1.75,.65,2.05),dark);cabin.position.set(0,1.15,-.2);cabin.castShadow=true;g.add(cabin);let hood=new T.Mesh(new T.BoxGeometry(1.92,.18,1.1),body);hood.position.set(0,1.03,1.38);g.add(hood);for(let x of[-.86,.86]){let l=new T.Mesh(new T.BoxGeometry(.34,.18,.08),light);l.position.set(x,.78,-2.2);g.add(l);let w=new T.Mesh(new T.CylinderGeometry(.48,.48,.38,12),dark);w.rotation.z=Math.PI/2;w.position.set(x,.48,x>0?1.34:1.34);g.add(w);let w2=w.clone();w2.position.z=-1.32;g.add(w2)}let spoiler=new T.Mesh(new T.BoxGeometry(2.1,.12,.32),dark);spoiler.position.set(0,1.35,-2.02);g.add(spoiler);for(let x of[-.75,.75]){let st=new T.Mesh(new T.BoxGeometry(.08,.38,.08),dark);st.position.set(x,1.18,-1.94);g.add(st)}return g}
function closest(pos){let best=1e9,ix=0,t=0;for(let i=0;i<game.track.length;i++){let a=pt(i),b=pt(i+1),ab=b.clone().sub(a),u=Math.max(0,Math.min(1,pos.clone().sub(a).dot(ab)/ab.lengthSq())),q=a.clone().addScaledVector(ab,u),d=q.distanceToSquared(pos);if(d<best){best=d;ix=i;t=u}}return {d:Math.sqrt(best),i:ix,progress:(game.lengths[ix]+(game.lengths[(ix+1)%game.track.length]||game.total-game.lengths[ix])*t)%game.total};}
function reset(){let a=pt(0),b=pt(1),d=b.clone().sub(a).normalize();car.pos.copy(a).addScaledVector(d,3);car.pos.y+=.5;car.vel.set(0,0,0);car.heading=Math.atan2(d.x,d.z);car.speed=0;car.lastP=0;game.progress=0;game.cp=0;game.lap=1;game.start=0;game.lapStart=0;game.state='count';game.countStart=performance.now();$('countdown').classList.remove('hidden');$('pause').classList.add('hidden');$('finish').classList.add('hidden');}
function bind(){addEventListener('keydown',e=>{let k=e.key.toLowerCase();if(k==='r')reset();if(k==='p'&&game.state!=='finish'){game.state=game.state==='pause'?'run':'pause';$('pause').classList.toggle('hidden',game.state!=='pause')}if(k==='c')game.cinema=!game.cinema;if(k===' ')input.hand=1;setKey(k,1);audioInit()});addEventListener('keyup',e=>{setKey(e.key.toLowerCase(),0);if(e.key===' ')input.hand=0});function setKey(k,v){if(k==='w'||k==='arrowup')input.up=v;if(k==='s'||k==='arrowdown')input.down=v;if(k==='a'||k==='arrowleft')input.left=v;if(k==='d'||k==='arrowright')input.right=v}document.querySelectorAll('[data-k]').forEach(b=>{let k=b.dataset.k;b.addEventListener('pointerdown',e=>{e.preventDefault();input[k==='gas'?'up':k==='brake'?'down':k]=1;audioInit()});['pointerup','pointercancel','pointerleave'].forEach(x=>b.addEventListener(x,()=>input[k==='gas'?'up':k==='brake'?'down':k]=0))});$('resume').onclick=()=>{game.state='run';$('pause').classList.add('hidden')};$('restart').onclick=$('again').onclick=reset;addEventListener('resize',()=>{game.cam.aspect=innerWidth/innerHeight;game.cam.updateProjectionMatrix();game.renderer.setSize(innerWidth,innerHeight)})}
function physics(dt){if(game.state==='count'){let n=(performance.now()-game.countStart)/1000, v=n<1?'3':n<2?'2':n<3?'1':'GO!';$('count').textContent=v;if(n>3){game.state='run';game.start=performance.now();game.lapStart=game.start;$('countdown').classList.add('hidden');beep(740,.12)}else if(Math.floor(n*10)%10===0)beep(480,.03);return}if(game.state!=='run')return;
 let c=closest(car.pos),off=c.d>5.4, surface=off?(.5):1, accel=(input.up?16:0)-(input.down?18:0),max=off?15:34;if(input.down&&car.speed<1)accel=-9;car.speed+=accel*dt;car.speed*=Math.pow(input.up?.993:.975,dt*60);car.speed=Math.max(-8,Math.min(max,car.speed));let steer=(input.left-input.right)*(1.65/(1+Math.abs(car.speed)*.055));car.steer+=(steer-car.steer)*Math.min(1,dt*8);let drifting=Math.abs(car.speed)>12&&Math.abs(car.steer)>.18 || input.hand;car.heading+=car.steer*car.speed*dt*(drifting?1.18:.72);car.drift+=((drifting?1:0)-car.drift)*dt*5;let f=V(Math.sin(car.heading),0,Math.cos(car.heading)),side=V(f.z,0,-f.x);car.vel.lerp(f.multiplyScalar(car.speed),dt*(drifting?.75:3.4)*surface);if(drifting)car.vel.addScaledVector(side,car.steer*car.speed*.015);car.pos.addScaledVector(car.vel,dt);car.pos.y=.45+Math.sin(car.pos.x*.035)*.12;
 for(let o of game.obstacles){let d=car.pos.distanceTo(o.p);if(d<o.r+1){let n=car.pos.clone().sub(o.p).normalize();car.pos.addScaledVector(n,.25);car.vel.addScaledVector(n,12);car.speed*=.38;if(!car.hit){car.hit=.35;crash();spawn(car.pos,0xffc15a,14)}}}car.hit-=dt;if((drifting||off)&&Math.random()<dt*24)spawn(car.pos,off?0xc7a56c:0x75634d,1);
 if(game.cp<3&&c.i>=[25,50,75][game.cp])game.cp++;if(c.progress<15&&car.lastP>game.total-18&&car.speed>4&&game.cp===3){game.cp=0;game.lap++;let lap=(performance.now()-game.lapStart)/1000;game.best=game.best===null?lap:Math.min(game.best,lap);game.lapStart=performance.now();beep(880,.14);if(game.lap>3){game.state='finish';$('result').textContent='FINAL '+fmt((performance.now()-game.start)/1000)+'  //  BEST '+fmt(game.best);$('finish').classList.remove('hidden');beep(1040,.45)}}car.lastP=c.progress;engine();}
function spawn(pos,color,n){for(let i=0;i<n;i++){let m=new T.Mesh(new T.SphereGeometry(.12+Math.random()*.23,5,4),new T.MeshBasicMaterial({color,transparent:true,opacity:.65}));m.position.copy(pos).add(V((Math.random()-.5)*1,.2,(Math.random()-.5)*1));game.scene.add(m);game.particles.push({m,v:V((Math.random()-.5)*4,1+Math.random()*3,(Math.random()-.5)*4),life:.5+Math.random()*.5})}}
function updateEffects(dt){for(let i=game.particles.length-1;i>=0;i--){let p=game.particles[i];p.life-=dt;p.m.position.addScaledVector(p.v,dt);p.v.y-=dt*3;p.m.scale.multiplyScalar(1.015);p.m.material.opacity=Math.max(0,p.life);if(p.life<0){game.scene.remove(p.m);game.particles.splice(i,1)}}}
function camera(dt){game.car.position.copy(car.pos);game.car.rotation.y=car.heading;let f=V(Math.sin(car.heading),0,Math.cos(car.heading)),target=car.pos.clone().addScaledVector(f,game.cinema?-2:4);let desired=car.pos.clone().addScaledVector(f,game.cinema?-20:-10).add(V(0,game.cinema?12:5.2,0));game.cam.position.lerp(desired,1-Math.pow(.001,dt));game.cam.lookAt(target)}
function fmt(s){let m=Math.floor(s/60),q=s%60;return String(m).padStart(2,'0')+':'+q.toFixed(3).padStart(6,'0')}
function hud(){let now=performance.now();$('speed').innerHTML=String(Math.round(Math.abs(car.speed)*7.2)).padStart(3,'0')+' <small>KM/H</small>';$('gear').textContent=car.speed<0?'R':car.speed<1?'N':Math.min(5,Math.floor(car.speed/7)+1);$('rpm').style.width=Math.min(100,Math.abs(car.speed)/34*100)+'%';$('lap').textContent=Math.min(game.lap,3)+' / 3';$('best').textContent=game.best===null?'--:--.---':fmt(game.best);$('time').textContent=game.start?fmt((now-game.start)/1000):'00:00.000';drawMap()}
function drawMap(){let c=$('map'),x=c.getContext('2d'),w=c.width=c.clientWidth*devicePixelRatio,h=c.height=c.clientHeight*devicePixelRatio,pts=game.track, minx=-80,maxx=80,minz=-70,maxz=60;let cv=p=>[(p.x-minx)/(maxx-minx)*w,(p.z-minz)/(maxz-minz)*h];x.clearRect(0,0,w,h);x.strokeStyle='#d8f268';x.lineWidth=3*devicePixelRatio;x.beginPath();pts.forEach((p,i)=>{let q=cv(p);i?x.lineTo(...q):x.moveTo(...q)});x.closePath();x.stroke();let q=cv(car.pos);x.fillStyle='#ff5c2b';x.beginPath();x.arc(q[0],q[1],4*devicePixelRatio,0,7);x.fill()}
function loop(){let dt=Math.min(game.clock.getDelta(),.045);physics(dt);updateEffects(dt);camera(dt);hud();game.renderer.render(game.scene,game.cam);requestAnimationFrame(loop)}
function audioInit(){if(game.audio)return;let A=window.AudioContext||window.webkitAudioContext;if(!A)return;let a=game.audio=new A(),o=a.createOscillator(),g=a.createGain();o.type='sawtooth';g.gain.value=0;o.connect(g).connect(a.destination);o.start();game.osc=o;game.gain=g}
function engine(){if(!game.audio)return;let t=game.audio.currentTime,r=Math.abs(car.speed)/34;game.osc.frequency.setTargetAtTime(55+r*190,t,.04);game.gain.gain.setTargetAtTime(game.state==='run'?.018+r*.04:0,t,.06)}function beep(f,d){if(!game.audio)return;let o=game.audio.createOscillator(),g=game.audio.createGain();o.frequency.value=f;g.gain.value=.06;o.connect(g).connect(game.audio.destination);o.start();g.gain.exponentialRampToValueAtTime(.001,game.audio.currentTime+d);o.stop(game.audio.currentTime+d)}function crash(){beep(85,.18)}
init();
})();
</script>
</body></html>