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>RALLY//WILD — Procedural Hill Sprint</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;800;900&family=Space+Mono:wght@400;700&display=swap');
:root{--lime:#d7ff3f;--orange:#ff7047;--ink:#10151c;--glass:rgba(8,14,20,.72)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#90b8b1;font-family:'Barlow Condensed',Arial,sans-serif;color:white}#game{position:fixed;inset:0}canvas{display:block}
#hud{position:fixed;inset:0;pointer-events:none;text-transform:uppercase;text-shadow:0 2px 3px #0008}.topbar{position:absolute;top:18px;left:24px;right:24px;display:flex;align-items:flex-start;justify-content:space-between}.brand{font-size:28px;font-weight:900;letter-spacing:2px;line-height:.8}.brand b{color:var(--lime)}.sub{font:10px 'Space Mono',monospace;color:#d7ff3f;letter-spacing:3px;margin-top:7px}.stats{display:flex;gap:10px}.chip{background:var(--glass);border:1px solid #ffffff30;border-left:3px solid var(--lime);padding:8px 13px;min-width:92px}.label{display:block;font:10px 'Space Mono',monospace;color:#b7c4c8;letter-spacing:1px}.value{font-size:23px;font-weight:800;letter-spacing:1px}.value small{font-size:12px;color:#aab6b8}.bottom{position:absolute;bottom:22px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:end}.telemetry{display:flex;align-items:end;gap:14px}.speed{background:var(--glass);border-bottom:3px solid var(--lime);padding:9px 18px 7px}.speed .num{font-size:62px;line-height:.82;font-weight:900;font-style:italic}.speed .unit{font:11px 'Space Mono',monospace;color:var(--lime);letter-spacing:2px}.gear{background:var(--glass);padding:10px 15px;text-align:center}.gear b{font-size:32px;color:var(--orange);line-height:1}.rpm{width:126px;height:8px;background:#25313a;margin-top:7px}.rpm i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lime),#ffc83d,var(--orange))}.controls{font:11px 'Space Mono',monospace;letter-spacing:1px;color:#d3dddd;text-align:right}.controls kbd{border:1px solid #fff6;border-radius:3px;padding:3px 5px;margin-left:4px;color:white}.minimap{position:absolute;right:24px;top:105px;width:148px;height:132px;background:#091217b8;border:1px solid #ffffff35;border-radius:4px;padding:7px}.minimap canvas{width:100%;height:100%}.minimap .mcaption{position:absolute;top:5px;left:8px;font:9px 'Space Mono';color:#d7ff3f}.overlay{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background:#07101699;pointer-events:auto;opacity:0;visibility:hidden;transition:.25s}.overlay.show{opacity:1;visibility:visible}.panel{text-align:center;background:linear-gradient(145deg,#101c24f2,#16242bf2);border:1px solid #ffffff32;border-top:3px solid var(--lime);padding:31px 46px;min-width:310px;box-shadow:0 20px 60px #0008}.panel h1{font-size:48px;line-height:.9;margin:0 0 8px;font-weight:900;font-style:italic;letter-spacing:2px}.panel p{font:11px 'Space Mono';color:#b7c6c9;letter-spacing:1px}.btn{font:800 17px 'Barlow Condensed';letter-spacing:2px;color:#10151c;background:var(--lime);border:0;padding:12px 30px;margin:8px;cursor:pointer;text-transform:uppercase}.btn.alt{background:#ffffff1c;color:#fff;border:1px solid #fff5}.count{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:130px;font-weight:900;font-style:italic;color:var(--lime);text-shadow:0 7px 0 #121c21,0 0 30px #d7ff3f88;pointer-events:none;opacity:0}.count.show{animation:count .9s ease-out}.toast{position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);font:14px 'Space Mono';letter-spacing:2px;color:var(--lime);opacity:0}.toast.show{animation:toast 1.2s ease-out}@keyframes count{0%{opacity:0;transform:scale(1.8)}35%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes toast{0%,100%{opacity:0;transform:translate(-50%,-40%)}20%,75%{opacity:1;transform:translate(-50%,-50%)}}
#touch{display:none;position:fixed;inset:auto 0 15px;justify-content:space-between;padding:0 18px;pointer-events:none}.touchCluster{display:flex;gap:8px;align-items:end;pointer-events:auto}.touchBtn{width:53px;height:53px;border-radius:9px;border:1px solid #fff5;background:#071016bb;color:#fff;font:700 19px Arial}.touchBtn.big{width:70px;height:70px;border-radius:50%;background:#d7ff3fdd;color:#111;font-size:14px}.touchBtn:active{transform:scale(.92);background:var(--orange)}@media(max-width:700px){.topbar{top:10px;left:12px;right:12px}.brand{font-size:20px}.stats{gap:4px}.chip{min-width:65px;padding:5px 7px}.chip:nth-child(2){display:none}.value{font-size:17px}.minimap{top:73px;right:12px;width:112px;height:100px}.bottom{left:12px;right:12px;bottom:102px}.controls{display:none}.speed .num{font-size:46px}.gear{padding:7px 10px}.panel{padding:25px 25px}.panel h1{font-size:38px}#touch{display:flex}}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<div id="game"></div><div id="hud"><div class="topbar"><div><div class="brand">RALLY<b>//WILD</b></div><div class="sub">HILL SPRINT / STAGE 01</div></div><div class="stats"><div class="chip"><span class="label">LAP</span><span class="value" id="lap">1 <small>/ 3</small></span></div><div class="chip"><span class="label">TIME</span><span class="value" id="time">00:00.00</span></div><div class="chip"><span class="label">BEST LAP</span><span class="value" id="best">--:--.--</span></div></div></div><div class="minimap"><span class="mcaption">STAGE MAP</span><canvas id="map" width="260" height="220"></canvas></div><div class="bottom"><div class="telemetry"><div class="speed"><span class="num" id="speed">0</span><span class="unit">KM/H</span></div><div class="gear"><span class="label">GEAR</span><b id="gear">N</b><div class="rpm"><i id="rpm"></i></div></div></div><div class="controls"><kbd>W</kbd> GAS &nbsp; <kbd>A</kbd><kbd>D</kbd> STEER &nbsp; <kbd>SPACE</kbd> DRIFT &nbsp; <kbd>P</kbd> PAUSE</div></div></div>
<div id="count" class="count">3</div><div id="toast" class="toast">CAMERA: CINEMATIC</div>
<div id="pause" class="overlay"><div class="panel"><h1>RACE PAUSED</h1><p>THE STAGE IS WAITING</p><button class="btn" id="resume">RESUME</button><button class="btn alt" id="restartA">RESTART</button></div></div>
<div id="finish" class="overlay"><div class="panel"><h1>STAGE CLEAR</h1><p id="finishText">FINAL TIME — 00:00.00</p><p id="finishBest">BEST LAP — 00:00.00</p><button class="btn" id="restartB">RUN IT AGAIN</button></div></div>
<div id="touch"><div class="touchCluster"><button class="touchBtn" data-key="left">◀</button><button class="touchBtn" data-key="right">▶</button></div><div class="touchCluster"><button class="touchBtn" data-key="brake">BRAKE</button><button class="touchBtn big" data-key="gas">GAS</button><button class="touchBtn" data-key="hand">DRIFT</button></div></div>
<script>
(()=>{
'use strict';
const T=THREE, root=document.getElementById('game');
let scene,camera,renderer,car,clock=new T.Clock(), last=0, state='countdown', countdown=3, raceTime=0, lapTime=0, bestLap=Infinity, lap=1, distance=0, speed=0, steer=0, camMode=0, audio;
const keys={}; const W=62, N=480, points=[]; const trackGroup=new T.Group(), scenery=new T.Group(), fx=new T.Group();
const mat=(c,rough=1)=>new T.MeshStandardMaterial({color:c,roughness:rough});
const roadMat=mat(0x343b3b), edgeMat=mat(0x9d8663), grassMat=mat(0x57765a), dirtMat=mat(0x705b48);
function path(a){let r=300+32*Math.sin(a*3+1)+22*Math.sin(a*7), x=Math.sin(a)*r, z=Math.cos(a)*r; return new T.Vector3(x, 9*Math.sin(a*2.2)+4*Math.sin(a*5),z)}
function init(){
 scene=new T.Scene();scene.background=new T.Color(0x9bc8c7);scene.fog=new T.Fog(0x9bc8c7,270,850);camera=new T.PerspectiveCamera(61,innerWidth/innerHeight,.1,1200);renderer=new T.WebGLRenderer({antialias:true,powerPreference:'high-performance'});renderer.setPixelRatio(Math.min(devicePixelRatio,1.7));renderer.setSize(innerWidth,innerHeight);renderer.shadowMap.enabled=true;renderer.shadowMap.type=T.PCFSoftShadowMap;root.appendChild(renderer.domElement);
 scene.add(new T.HemisphereLight(0xbce8e2,0x385145,1.7));let sun=new T.DirectionalLight(0xfff1c5,2.2);sun.position.set(-150,250,100);sun.castShadow=true;sun.shadow.mapSize.set(1024,1024);sun.shadow.camera.left=-500;sun.shadow.camera.right=500;sun.shadow.camera.top=500;sun.shadow.camera.bottom=-500;scene.add(sun);
 const ground=new T.Mesh(new T.PlaneGeometry(1800,1800),grassMat);ground.rotation.x=-Math.PI/2;ground.receiveShadow=true;scene.add(ground);
 for(let i=0;i<N;i++)points.push(path(i/N*Math.PI*2)); buildRoad(); buildScenery(); buildCar(); drawMap(); bind(); reset(); requestAnimationFrame(loop);
}
function buildRoad(){for(let i=0;i<N;i++){let a=points[i], b=points[(i+1)%N], tangent=b.clone().sub(a).normalize(), side=new T.Vector3(-tangent.z,0,tangent.x);let w= W/2;let verts=[a.clone().add(side.clone().multiplyScalar(-w)),a.clone().add(side.clone().multiplyScalar(w)),b.clone().add(side.clone().multiplyScalar(w)),b.clone().add(side.clone().multiplyScalar(-w))];let geo=new T.BufferGeometry().setFromPoints(verts);geo.setIndex([0,1,2,0,2,3]);geo.computeVertexNormals();let m=new T.Mesh(geo,roadMat);m.receiveShadow=true;trackGroup.add(m);
  if(i%4===0){let e1=new T.Mesh(new T.BoxGeometry(3,.18,8),edgeMat),e2=e1.clone();e1.position.copy(a).add(side.clone().multiplyScalar(w+2));e2.position.copy(a).add(side.clone().multiplyScalar(-w-2));e1.position.y+=.3;e2.position.y+=.3;e1.rotation.y=Math.atan2(tangent.x,tangent.z);e2.rotation.y=e1.rotation.y;trackGroup.add(e1,e2)} }
 scene.add(trackGroup);
}
function tree(x,z,y,scale=1){let g=new T.Group();let trunk=new T.Mesh(new T.CylinderGeometry(1.5,2,10,6),mat(0x4b3528));trunk.position.y=5;let crown=new T.Mesh(new T.ConeGeometry(9,25,7),mat(0x1f503d));crown.position.y=18;g.add(trunk,crown);g.position.set(x,y,z);g.scale.setScalar(scale);g.traverse(o=>o.castShadow=true);scenery.add(g)}
function rock(p){let r=new T.Mesh(new T.DodecahedronGeometry(4+Math.random()*4,0),mat(0x69736c));r.position.copy(p);r.position.y+=3;r.scale.y=.7;r.castShadow=true;scenery.add(r)}
function buildScenery(){for(let i=0;i<125;i++){let a=Math.random()*Math.PI*2, idx=Math.floor(a/(Math.PI*2)*N),p=points[idx], next=points[(idx+2)%N],side=next.clone().sub(p).normalize(), off=(W/2+18+Math.random()*100)*(Math.random()<.5?-1:1);let q=p.clone().add(new T.Vector3(-side.z,0,side.x).multiplyScalar(off));q.y-=1; if(i%5===0)rock(q);else tree(q.x,q.z,q.y,.6+Math.random()*.75)}
 for(let i=0;i<8;i++){let idx=i*60,p=points[idx],n=points[(idx+2)%N].clone().sub(p).normalize(),q=p.clone().add(new T.Vector3(-n.z,0,n.x).multiplyScalar(46));let post=new T.Mesh(new T.BoxGeometry(.7,8,.7),mat(0x393a35));post.position.copy(q);post.position.y+=4;let board=new T.Mesh(new T.BoxGeometry(18,6,.5),mat(i%2?0xff7047:0xd7ff3f));board.position.copy(q);board.position.y+=8;board.rotation.y=Math.atan2(n.x,n.z);scenery.add(post,board)}scene.add(scenery)}
function buildCar(){car=new T.Group();let red=mat(0xe64c37), dark=mat(0x182127), glass=mat(0x82b5bd), white=mat(0xe5e1d2);let body=new T.Mesh(new T.BoxGeometry(11,3.3,18),red);body.position.y=4;body.castShadow=true;let hood=new T.Mesh(new T.BoxGeometry(9,2.3,8),red);hood.position.set(0,5.1,-4);let cabin=new T.Mesh(new T.BoxGeometry(8.5,3.3,7),glass);cabin.position.set(0,6.6,3);cabin.castShadow=true;let spoiler=new T.Mesh(new T.BoxGeometry(12,.7,1),dark);spoiler.position.set(0,8.1,9);let bars=new T.Mesh(new T.BoxGeometry(1,1,1),dark);bars.scale.set(5,.3,.4);bars.position.set(0,7,9);car.add(body,hood,cabin,spoiler,bars);
 for(let s of [-1,1])for(let z of [-6,6]){let wh=new T.Mesh(new T.CylinderGeometry(2.2,2.2,1.3,10),dark);wh.rotation.z=Math.PI/2;wh.position.set(s*5.4,2.8,z);wh.castShadow=true;car.add(wh)}for(let s of [-1,1]){let tail=new T.Mesh(new T.BoxGeometry(2.5,.6,.3),mat(0xff251c));tail.position.set(s*3,4.4,9.1);car.add(tail)}let stripe=new T.Mesh(new T.BoxGeometry(1.4,.12,17),white);stripe.position.y=5.68;car.add(stripe);scene.add(car)}
function closest(){let best=0,bd=1e9;for(let i=0;i<N;i++){let d=points[i].distanceToSquared(car.position);if(d<bd){bd=d;best=i}}return {i:best,d:Math.sqrt(bd)}}
function reset(){distance=0;speed=0;lap=1;raceTime=0;lapTime=0;state='countdown';countdown=3;document.getElementById('pause').classList.remove('show');document.getElementById('finish').classList.remove('show');positionCar();flash('3')}
function positionCar(){let p=points[0],n=points[2].clone().sub(p).normalize();car.position.copy(p);car.position.y+=1;car.rotation.y=Math.atan2(n.x,n.z)}
function input(){return{gas:keys.ArrowUp||keys.KeyW||keys.gas,brake:keys.ArrowDown||keys.KeyS||keys.brake,left:keys.ArrowLeft||keys.KeyA||keys.left,right:keys.ArrowRight||keys.KeyD||keys.right,hand:keys.Space||keys.hand}}
function update(dt){let k=input();if(state==='countdown'){countdown-=dt;if(countdown<=0){state='race';flash('GO!');beep(660,.18)}return}if(state!=='race')return;raceTime+=dt;lapTime+=dt;let steerInput=(k.right?1:0)-(k.left?1:0);steer+=(steerInput-steer)*Math.min(1,dt*8);let off=closest().d;let surface=off>W/2? (off>W/2+22?.52:.75):1;let grip=k.hand?.35:surface<1?.68: .92;let accel=k.gas?72:0; if(k.brake)accel-=95; if(!k.gas&&!k.brake)accel-=speed*.22;speed+=accel*dt;speed=Math.max(-18,Math.min(108*surface,speed));let turn=steer*dt*(.8+Math.min(speed,80)/85)*grip;car.rotation.y+=turn;let forward=new T.Vector3(Math.sin(car.rotation.y),0,Math.cos(car.rotation.y));car.position.addScaledVector(forward,speed*dt);let c=closest();if(c.d>W/2+15){speed*=.965;car.position.y-=0.1}else if(c.d>W/2+4){speed*=.992}car.position.y+=(points[c.i].y+1-car.position.y)*Math.min(1,dt*7);if(Math.abs(steer)>0.6&&speed>55)spawnDust();if(speed>30&&surface<1)spawnDust();let prog=c.i/N;if(distance>.9&&prog<.1){lap++;bestLap=Math.min(bestLap,lapTime);lapTime=0;flash(lap>3?'FINISH':'LAP '+lap);if(lap>3){state='finish';document.getElementById('finishText').textContent='FINAL TIME — '+fmt(raceTime);document.getElementById('finishBest').textContent='BEST LAP — '+fmt(bestLap);document.getElementById('finish').classList.add('show');beep(880,.5)}}distance=prog;hud();updateFx(dt);}
function spawnDust(){if(Math.random()>.35)return;let m=new T.Mesh(new T.SphereGeometry(1.5+Math.random()*2,6,5),new T.MeshBasicMaterial({color:0xc7a77b,transparent:true,opacity:.42}));m.position.copy(car.position);m.position.y+=1;m.position.x+=(Math.random()-.5)*6;m.position.z+=(Math.random()-.5)*6;m.userData.life=1;fx.add(m)}function updateFx(dt){fx.children.forEach(o=>{o.userData.life-=dt;o.scale.multiplyScalar(1+dt*1.8);o.material.opacity=Math.max(0,o.userData.life*.4);if(o.userData.life<=0)fx.remove(o)});scene.add(fx)}
function hud(){document.getElementById('speed').textContent=Math.round(Math.abs(speed)*1.22);document.getElementById('lap').innerHTML=Math.min(lap,3)+' <small>/ 3</small>';document.getElementById('time').textContent=fmt(raceTime);document.getElementById('best').textContent=bestLap<Infinity?fmt(bestLap):'--:--.--';document.getElementById('gear').textContent=speed<2?'N':Math.min(6,Math.floor(Math.abs(speed)/17)+1);document.getElementById('rpm').style.width=(Math.min(1,(Math.abs(speed)%17)/17)*100)+'%'}function fmt(t){let m=Math.floor(t/60),s=Math.floor(t%60),h=Math.floor(t*100%100);return String(m).padStart(2,'0')+':'+String(s).padStart(2,'0')+'.'+String(h).padStart(2,'0')}
function flash(text){let e=document.getElementById('count');e.textContent=text;e.classList.remove('show');void e.offsetWidth;e.classList.add('show')}function toast(text){let e=document.getElementById('toast');e.textContent=text;e.classList.remove('show');void e.offsetWidth;e.classList.add('show')}
function drawMap(){let c=document.getElementById('map'),x=c.getContext('2d');x.strokeStyle='#526c68';x.lineWidth=18;x.beginPath();points.forEach((p,i)=>{let px=130+p.x*.29,py=110+p.z*.29;i?x.lineTo(px,py):x.moveTo(px,py)});x.closePath();x.stroke();x.strokeStyle='#e6e3bd';x.lineWidth=5;x.stroke();x.fillStyle='#d7ff3f';x.beginPath();x.arc(130,110,7,0,7);x.fill();}
function loop(t){let dt=Math.min(.04,(t-last)/1000||.016);last=t;update(dt);let p=car.position.clone(),forward=new T.Vector3(Math.sin(car.rotation.y),0,Math.cos(car.rotation.y));let desired=p.clone().addScaledVector(forward,-38);desired.y+=18+(camMode?28:0);camera.position.lerp(desired,1-Math.pow(.001,dt));let look=p.clone().addScaledVector(forward,25);look.y+=4;camera.lookAt(look);renderer.render(scene,camera);requestAnimationFrame(loop)}
function beep(freq,dur){try{audio=audio||new AudioContext();let o=audio.createOscillator(),g=audio.createGain();o.frequency.value=freq;o.type='square';g.gain.setValueAtTime(.04,audio.currentTime);g.gain.exponentialRampToValueAtTime(.001,audio.currentTime+dur);o.connect(g).connect(audio.destination);o.start();o.stop(audio.currentTime+dur)}catch(e){}}
function bind(){addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)});addEventListener('keydown',e=>{keys[e.code]=true;if(e.code==='KeyP'){state=state==='paused'?'race':state==='race'?'paused':state;document.getElementById('pause').classList.toggle('show',state==='paused')}if(e.code==='KeyR')reset();if(e.code==='KeyC'){camMode=1-camMode;toast(camMode?'CAMERA: CINEMATIC':'CAMERA: CHASE')}if(['Space','ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.code))e.preventDefault();beep(e.code==='Space'?120:220,.035)});addEventListener('keyup',e=>keys[e.code]=false);document.getElementById('resume').onclick=()=>{state='race';document.getElementById('pause').classList.remove('show')};document.getElementById('restartA').onclick=reset;document.getElementById('restartB').onclick=reset;document.querySelectorAll('.touchBtn').forEach(b=>{let q=()=>keys[b.dataset.key]=true,r=()=>keys[b.dataset.key]=false;b.addEventListener('touchstart',e=>{e.preventDefault();q()},{passive:false});b.addEventListener('touchend',r);b.addEventListener('mousedown',q);b.addEventListener('mouseup',r)})}
init();
})();
</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"full","sessionId":"be8c5f68-771d-4ee0-a696-2677e450d699","tokensIn":176213,"tokensOut":10445,"tokensTotal":186658,"turns":5,"toolCalls":4,"failedToolCalls":1,"timestamp":"2026-07-30T23:48:02.929Z"} -->