Rally

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rally Rush 3D</title>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<style>
/* ── css: base ── */
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#10262a;font-family:Arial,sans-serif;color:#f4f1dc}#game{width:100vw;height:100vh;position:relative;overflow:hidden}canvas{display:block}#hud{position:absolute;z-index:4;inset:0;pointer-events:none;padding:22px 28px;background:linear-gradient(180deg,rgba(5,14,17,.65),transparent 26%,transparent 72%,rgba(5,12,14,.5))}.brand{font-size:25px;font-weight:900;letter-spacing:4px;color:#f6d24b;text-shadow:2px 2px #172326}.brand b{color:#fff}.brand span{display:block;font-size:9px;color:#c4d0c5;letter-spacing:5px;margin-top:3px}.stats{position:absolute;top:20px;right:28px;display:flex;gap:10px}.stats>div{min-width:84px;padding:8px 12px;background:rgba(9,20,22,.72);border:1px solid rgba(255,255,255,.17);border-top:3px solid #f6c944;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}label{font-size:9px;display:block;color:#a7bab1;letter-spacing:2px}strong{font-size:27px;line-height:29px;display:block;color:white;font-variant-numeric:tabular-nums}small{font-size:9px;color:#c7d3c2;letter-spacing:1px}.tip{position:absolute;bottom:20px;left:28px;font-size:10px;letter-spacing:1px;color:#d5dece}.modal{position:absolute;z-index:10;inset:0;display:none;place-items:center;background:rgba(4,13,15,.72);backdrop-filter:blur(5px)}.panel{width:min(420px,90vw);padding:38px;text-align:center;background:#172c2e;border:1px solid #799184;box-shadow:0 18px 60px #0008;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}h1{margin:8px 0 24px;font-size:38px;letter-spacing:3px;color:#f6d24b}.eyebrow{font-size:11px;letter-spacing:4px;color:#b9d0bf}button{border:0;background:#f6cf49;color:#18282a;font-weight:900;letter-spacing:2px;padding:13px 22px;margin:5px;cursor:pointer}button:hover{background:#fff09a}#countdown{position:absolute;z-index:8;inset:0;display:grid;place-items:center;font-size:130px;font-weight:900;color:#fff;text-shadow:0 5px 0 #bd8324,0 0 35px #f6d24b;font-style:italic;pointer-events:none}#toast{position:absolute;z-index:5;top:43%;left:50%;transform:translate(-50%,-50%);font-size:18px;font-weight:bold;letter-spacing:3px;color:#f6d24b;opacity:0;transition:opacity .3s}.toast{opacity:1!important}#minimap{position:absolute;z-index:5;right:28px;bottom:23px;width:190px;padding:8px;background:rgba(9,20,22,.75);border:1px solid #78907e}#minimap span{display:block;font-size:9px;letter-spacing:2px;color:#b7cabb;text-align:right}#map{width:170px;height:130px}#touch{display:none;position:absolute;z-index:6;bottom:18px;left:15px;right:15px;justify-content:space-between;pointer-events:none}#touch button{pointer-events:auto;border-radius:50%;width:54px;height:54px;padding:0;margin:2px;background:#172e30dd;color:#f6d24b;border:1px solid #a7b79a;font-size:20px}#touch .hand{border-radius:5px;width:86px;font-size:10px}@media(max-width:700px){.stats{top:72px;left:14px;right:14px;justify-content:space-between;gap:3px}.stats>div{min-width:0;flex:1;padding:5px 7px}.stats strong{font-size:20px}.brand{font-size:19px}.tip{display:none}#minimap{transform:scale(.75);transform-origin:bottom right;bottom:80px;right:8px}#touch{display:flex}}
/* ── css: finish ── */
#result{font-size:18px;line-height:2;color:#d8e5d1;margin-bottom:15px}#result b{color:#f6d24b;font-size:25px}
</style>
</head>
<body>
<div id="game"><div id="hud"><div class="brand">RALLY <b>RUSH</b><span>PRO STAGE</span></div><div class="stats"><div><label>SPEED</label><strong id="speed">000</strong><small>KM/H</small></div><div><label>GEAR</label><strong id="gear">N</strong><small id="rpm">RPM 0000</small></div><div><label>LAP</label><strong id="lap">1/3</strong><small id="lapTime">00:00.00</small></div><div><label>BEST</label><strong id="best">--:--.--</strong><small id="total">TOTAL 00:00.00</small></div></div><div class="tip">WASD / ARROWS DRIVE　 •　 SPACE DRIFT　 •　 C CAMERA　 •　 P PAUSE</div></div><div id="minimap"><canvas id="map" width="170" height="130"></canvas><span>STAGE MAP</span></div><div id="countdown">3</div><div id="toast"></div><div id="pause" class="modal"><div class="panel"><h1>RACE PAUSED</h1><button id="resume">RESUME</button><button id="restart">RESTART</button></div></div><div id="finish" class="modal"><div class="panel"><div class="eyebrow">STAGE COMPLETE</div><h1>RALLY FINISH</h1><div id="result"></div><button id="finishRestart">RACE AGAIN</button></div></div><div id="touch"><button data-key="ArrowLeft">◀</button><button data-key="ArrowRight">▶</button><button data-key="ArrowDown">▼</button><button data-key="ArrowUp">▲</button><button data-key="Space" class="hand">DRIFT</button></div></div>
<script>
'use strict';

// ── const: Rally ──
const Rally={};

// ── const: TRACK ──
const TRACK=[[-36,0,-62],[-78,3,-28],[-72,1,24],[-34,5,55],[18,2,60],[68,6,34],[78,0,-12],[45,-3,-58],[0,1,-78]];

// ── const: TOTAL_LAPS ──
const TOTAL_LAPS=3;

// ── function: curvePoint ──
function curvePoint(t){const n=TRACK.length,u=((t%1)+1)%1*n,i=Math.floor(u),f=u-i,a=TRACK[i],b=TRACK[(i+1)%n],s=f*f*(3-2*f);return new THREE.Vector3(a[0]+(b[0]-a[0])*s,a[1]+(b[1]-a[1])*s,b[2]+(b[2]-a[2])*s)}

// ── function: tangent ──
function tangent(t){const p=curvePoint(t),q=curvePoint(t+.002);return q.sub(p).normalize()}

// ── function: makeMat ──
function makeMat(color,rough=true){return new THREE.MeshStandardMaterial({color,roughness:rough?.9:.45,metalness:rough?0:.25})}

// ── function: box ──
function box(w,h,d,color){return new THREE.Mesh(new THREE.BoxGeometry(w,h,d),makeMat(color))}

// ── function: tree ──
function tree(scene,x,z,s=1){const g=new THREE.Group();const trunk=new THREE.Mesh(new THREE.CylinderGeometry(.22*s,.34*s,2*s,6),makeMat(0x553a25));trunk.position.y=s;g.add(trunk);for(let i=0;i<3;i++){const c=new THREE.Mesh(new THREE.ConeGeometry((1.25-i*.18)*s,2.5*s,7),makeMat(i===2?0x39704a:0x28563f));c.position.y=(2.2+i*1.05)*s;g.add(c)}g.position.set(x,0,z);scene.add(g)}

// ── function: rock ──
function rock(scene,x,z,s=1){const m=new THREE.Mesh(new THREE.DodecahedronGeometry(s,0),makeMat(0x68736a));m.scale.y=.6;m.position.set(x,s*.35,z);scene.add(m)}

// ── function: buildCar ──
function buildCar(){const g=new THREE.Group();const red=makeMat(0xd74432,false),dark=makeMat(0x17282a),glass=makeMat(0x274951,false),white=makeMat(0xf4eee0);const body=box(2.25,.62,4.1,red);body.position.y=1;g.add(body);const hood=box(2.05,.3,1.3,red);hood.position.set(0,1.42,-1.15);g.add(hood);const cabin=box(1.72,.78,1.65,glass);cabin.position.set(0,1.55,.45);g.add(cabin);const spoiler=box(2.45,.12,.18,white);spoiler.position.set(0,1.82,1.75);g.add(spoiler);for(const x of[-1,1])for(const z of[-1.35,1.3]){const w=new THREE.Mesh(new THREE.CylinderGeometry(.43,.43,.28,12),makeMat(0x101719));w.rotation.z=Math.PI/2;w.position.set(x*1.12,.55,z);g.add(w)}for(const x of[-.72,.72]){const l=box(.38,.22,.08,0xff5d38);l.position.set(x,1.12,2.08);g.add(l)}for(const x of[-.72,.72]){const l=box(.38,.18,.06,0xfff5ba);l.position.set(x,1.17,-2.08);g.add(l)}return g}

// ── function: buildRoad ──
function buildRoad(scene){const verts=[],width=6;const seg=180;for(let i=0;i<seg;i++){const t=i/seg,p=curvePoint(t),tan=tangent(t),side=new THREE.Vector3(-tan.z,0,tan.x);const y=p.y-.05;verts.push(p.x-side.x*width,y,p.z-side.z*width,p.x+side.x*width,y,p.z+side.z*width)}const geo=new THREE.BufferGeometry();geo.setAttribute('position',new THREE.Float32BufferAttribute(verts,3));const idx=[];for(let i=0;i<seg;i++){const a=i*2,b=((i+1)%seg)*2;idx.push(a,b,a+1,b,b+1,a+1)}geo.setIndex(idx);geo.computeVertexNormals();scene.add(new THREE.Mesh(geo,makeMat(0x4b4b42)));for(let side of[-1,1]){for(let i=0;i<seg;i+=2){const t=i/seg,p=curvePoint(t),tan=tangent(t),s=new THREE.Vector3(-tan.z,0,tan.x);const q=p.clone().addScaledVector(s,side*6.8);const m=box(.55,.12,1.2,i%8?0xb7a66c:0xe7d7a8);m.position.copy(q);m.position.y+=.03;m.rotation.y=Math.atan2(tan.x,tan.z);scene.add(m)}}}

// ── function: buildScenery ──
function buildScenery(scene){for(let i=0;i<70;i++){const t=i/70+.013, p=curvePoint(t),tan=tangent(t),s=new THREE.Vector3(-tan.z,0,tan.x), side=(i%2?1:-1)*(8+((i*17)%13));const q=p.clone().addScaledVector(s,side);if(i%5===0)rock(scene,q.x,q.z,.6+(i%3)*.2);else tree(scene,q.x,q.z,.65+(i%4)*.18)}for(let i=0;i<10;i++){const t=i/10+.04,p=curvePoint(t),tan=tangent(t),s=new THREE.Vector3(-tan.z,0,tan.x),q=p.clone().addScaledVector(s,(i%2?1:-1)*8);const post=box(.14,2.2,.14,0xe8e3cf);post.position.set(q.x, p.y+1,q.z);scene.add(post);const banner=box(2.5, .65,.08,i%2?0xd94836:0xf2c640);banner.position.set(q.x,p.y+2,q.z);banner.rotation.y=Math.atan2(tan.x,tan.z);scene.add(banner)}}

// ── main ──
const scene=new THREE.Scene();scene.background=new THREE.Color(0x91c9c8);scene.fog=new THREE.Fog(0x91c9c8,90,245);const camera=new THREE.PerspectiveCamera(64,innerWidth/innerHeight,.1,400);const renderer=new THREE.WebGLRenderer({antialias:true});renderer.setPixelRatio(Math.min(devicePixelRatio,1.7));renderer.setSize(innerWidth,innerHeight);renderer.shadowMap.enabled=true;document.getElementById('game').prepend(renderer.domElement);scene.add(new THREE.HemisphereLight(0xbfe0d7,0x314238,1.4));const sun=new THREE.DirectionalLight(0xfff4cf,2.2);sun.position.set(-50,100,40);sun.castShadow=true;sun.shadow.mapSize.set(1024,1024);scene.add(sun);const ground=new THREE.Mesh(new THREE.PlaneGeometry(600,600),makeMat(0x526f4c));ground.rotation.x=-Math.PI/2;scene.add(ground);buildRoad(scene);buildScenery(scene);const car=buildCar();car.traverse(o=>o.castShadow=true);scene.add(car);const state={phase:0,speed:0,steer:0,lap:1,started:false,paused:false,finished:false,startAt:0,lapStart:0,best:null,total:0,cam:0,last:performance.now(),keys:{},audio:null};
function audioStart(){if(state.audio)return;const C=window.AudioContext||window.webkitAudioContext;if(!C)return;const ac=new C(),osc=ac.createOscillator(),gain=ac.createGain();osc.type='sawtooth';gain.gain.value=.001;osc.connect(gain).connect(ac.destination);osc.start();state.audio={ac,osc,gain}}
function beep(freq,dur){if(!state.audio)return;const o=state.audio.ac.createOscillator(),g=state.audio.ac.createGain();o.frequency.value=freq;o.connect(g).connect(state.audio.ac.destination);g.gain.setValueAtTime(.12,state.audio.ac.currentTime);g.gain.exponentialRampToValueAtTime(.001,state.audio.ac.currentTime+dur);o.start();o.stop(state.audio.ac.currentTime+dur)}
function fmt(v){let m=Math.floor(v/60),s=(v%60).toFixed(2).padStart(5,'0');return String(m).padStart(2,'0')+':'+s}
function reset(){state.phase=0;state.speed=0;state.steer=0;state.lap=1;state.started=false;state.paused=false;state.finished=false;state.startAt=performance.now()+3200;state.lapStart=0;state.total=0;document.getElementById('finish').style.display='none';document.getElementById('pause').style.display='none';document.getElementById('countdown').textContent='3';document.getElementById('countdown').style.display='grid';audioStart()}
function finish(){state.finished=true;state.speed=0;beep(880,.25);setTimeout(()=>beep(1175,.45),260);document.getElementById('result').innerHTML='TOTAL TIME<br><b>'+fmt(state.total)+'</b><br>BEST LAP　<b>'+fmt(state.best||0)+'</b>';document.getElementById('finish').style.display='grid'}
function updateCar(dt){const k=state.keys,gas=k.ArrowUp||k.KeyW,brake=k.ArrowDown||k.KeyS,hand=k.Space;const off=Math.abs(state.steer)>5;let grip=off?.55:1;if(gas)state.speed+=dt*24*grip;if(brake)state.speed-=dt*34;if(!gas&&!brake)state.speed-=Math.sign(state.speed)*dt*6;state.speed=Math.max(-7,Math.min(43,state.speed));if(hand)state.speed-=Math.sign(state.speed||1)*dt*4;const turn=(k.ArrowLeft||k.KeyA?-1:0)+(k.ArrowRight||k.KeyD?1:0);state.steer+=((turn*1.85*(.35+Math.min(Math.abs(state.speed)/28,1)))-state.steer)*dt*7;state.phase+=state.speed*dt/170;const p=curvePoint(state.phase),tan=tangent(state.phase),side=new THREE.Vector3(-tan.z,0,tan.x);const desired=state.steer*1.15;car.position.copy(p).addScaledVector(side,desired);car.position.y=p.y+.08;car.rotation.y=Math.atan2(tan.x,tan.z)+state.steer*.12;const edge=Math.abs(desired)>5.4;if(edge){state.speed*=.985;document.getElementById('toast').textContent='OFF TRACK — GRIP REDUCED';document.getElementById('toast').classList.add('toast')}else document.getElementById('toast').classList.remove('toast');if(state.started&&!state.finished){state.total=(performance.now()-state.startAt)/1000;const newLap=Math.floor(state.phase)+1;if(newLap>state.lap){const lt=state.total-state.lapStart;state.best=state.best?Math.min(state.best,lt):lt;state.lapStart=state.total;state.lap=newLap;beep(660,.12);if(state.lap>TOTAL_LAPS){finish();return}}}if(state.audio){state.audio.osc.frequency.setTargetAtTime(65+Math.abs(state.speed)*7,state.audio.ac.currentTime,.05);state.audio.gain.gain.setTargetAtTime(.008+Math.abs(state.speed)/350,state.audio.ac.currentTime,.05)}}
function updateHUD(){document.getElementById('speed').textContent=String(Math.round(Math.abs(state.speed)*5.1)).padStart(3,'0');document.getElementById('gear').textContent=state.speed<1?'N':state.speed<12?'1':state.speed<22?'2':state.speed<32?'3':'4';document.getElementById('rpm').textContent='RPM '+String(Math.round(1200+Math.abs(state.speed)*170%5200)).padStart(4,'0');document.getElementById('lap').textContent=Math.min(state.lap,TOTAL_LAPS)+'/'+TOTAL_LAPS;document.getElementById('lapTime').textContent=fmt(Math.max(0,state.total-state.lapStart));document.getElementById('best').textContent=state.best?fmt(state.best):'--:--.--';document.getElementById('total').textContent='TOTAL '+fmt(state.total)}
function drawMap(){const c=document.getElementById('map'),x=c.getContext('2d');x.clearRect(0,0,170,130);x.strokeStyle='#6f886e';x.lineWidth=9;x.beginPath();TRACK.forEach((p,i)=>{const X=p[0]*1.25+85,Y=p[2]*.75+62;i?x.lineTo(X,Y):x.moveTo(X,Y)});x.closePath();x.stroke();x.strokeStyle='#f5d14c';x.lineWidth=2;x.stroke();const p=curvePoint(state.phase);x.fillStyle='#f34c35';x.beginPath();x.arc(p.x*1.25+85,p.z*.75+62,5,0,7);x.fill()}
function render(){const p=curvePoint(state.phase),tan=tangent(state.phase),back=tan.clone().multiplyScalar(-1);let camPos=p.clone().addScaledVector(back,state.cam?15:10);camPos.y+=state.cam?13:6;camera.position.lerp(camPos,.075);const look=p.clone();look.y+=1;camera.lookAt(look);renderer.render(scene,camera);drawMap()}
function tick(now){const dt=Math.min(.04,(now-state.last)/1000);state.last=now;if(!state.paused&&!state.finished){if(!state.started){const left=state.startAt-now;const n=Math.ceil(left/1000);document.getElementById('countdown').textContent=n>0?n:'GO!';if(n!==state._n){state._n=n;beep(n>0?440:880,.13)}if(left<=0){state.started=true;state.startAt=now;state.lapStart=0;document.getElementById('countdown').style.display='none'}}else updateCar(dt)}updateHUD();render();requestAnimationFrame(tick)}
window.addEventListener('keydown',e=>{state.keys[e.code]=true;if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Space'].includes(e.code))e.preventDefault();if(e.code==='KeyP'&&!state.finished){state.paused=!state.paused;document.getElementById('pause').style.display=state.paused?'grid':'none'}if(e.code==='KeyR')reset();if(e.code==='KeyC')state.cam=1-state.cam;if(e.code==='Enter'&&state.paused){state.paused=false;document.getElementById('pause').style.display='none'}audioStart()});window.addEventListener('keyup',e=>state.keys[e.code]=false);window.addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)});document.querySelectorAll('#touch button').forEach(b=>{const k=b.dataset.key;b.addEventListener('pointerdown',e=>{e.preventDefault();state.keys[k]=true;audioStart()});b.addEventListener('pointerup',()=>state.keys[k]=false);b.addEventListener('pointerleave',()=>state.keys[k]=false)});document.getElementById('resume').onclick=()=>{state.paused=false;document.getElementById('pause').style.display='none'};document.getElementById('restart').onclick=reset;document.getElementById('finishRestart').onclick=reset;reset();requestAnimationFrame(tick);
</script>
</body>
</html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna","provider":"openrouter","persona":"composer","sessionId":"024f33ba-04c2-422e-b658-e95994de1e4f","tokensIn":135455,"tokensOut":8740,"tokensTotal":144195,"turns":13,"toolCalls":15,"failedToolCalls":0,"timestamp":"2026-07-14T03:34:44.046Z"} -->