Canyon Run

<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>NEON CANYON // FLIGHT RUN</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{--cyan:#6df7ff;--hot:#ff7a4c;--gold:#ffd27a;--violet:#261941}*{box-sizing:border-box}html,body{margin:0;overflow:hidden;background:#100b22;color:#fff;font-family:Rajdhani,Arial,sans-serif}canvas{display:block}.hud{position:fixed;inset:0;pointer-events:none;padding:25px 30px;letter-spacing:2px;text-transform:uppercase}.brand{font-size:13px;color:var(--cyan);font-weight:700;display:flex;gap:12px;align-items:center}.brand i{display:block;width:30px;height:2px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.top{position:absolute;top:24px;right:30px;text-align:right}.label{font:10px 'Space Mono';letter-spacing:1.5px;color:#a89cbf}.score{font-size:29px;font-weight:700;letter-spacing:4px}.mid{position:absolute;top:90px;right:30px;text-align:right}.mult{font-size:49px;line-height:.85;color:var(--gold);text-shadow:0 0 20px #ff9b47;transition:transform .12s}.mult.flash{transform:scale(1.2);color:#fff}.speed{position:absolute;bottom:32px;left:30px;width:210px}.speednum{font-size:23px;margin-bottom:6px}.line{height:3px;background:#3e3550;position:relative}.line b{display:block;height:100%;width:45%;background:linear-gradient(90deg,var(--cyan),var(--hot));box-shadow:0 0 10px var(--cyan)}.energy{position:absolute;bottom:32px;right:30px;width:220px}.energybar{height:8px;border:1px solid #6b5876;padding:1px;margin-top:7px}.energybar b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#b7fffd,var(--cyan),#8569ff);box-shadow:0 0 12px var(--cyan)}.hint{position:absolute;bottom:95px;left:50%;transform:translateX(-50%);color:#b5a8c7;font:10px 'Space Mono';letter-spacing:1px}.cross{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);opacity:.55}.cross:before,.cross:after{content:"";position:absolute;background:#fff}.cross:before{width:18px;height:1px;top:8px}.cross:after{height:18px;width:1px;left:8px}.overlay{position:fixed;inset:0;background:linear-gradient(135deg,rgba(11,7,26,.88),rgba(45,12,42,.68));display:flex;align-items:center;justify-content:center;text-align:center;z-index:4}.panel{border-left:2px solid var(--cyan);padding:15px 40px 20px;background:rgba(9,7,22,.65);box-shadow:0 0 80px #ff5f3822}.panel h1{margin:0;color:var(--cyan);font-size:48px;letter-spacing:8px}.panel p{color:#b8a9c6;letter-spacing:3px}.stats{display:flex;gap:45px;justify-content:center;margin:28px 0}.stats strong{display:block;font-size:28px;color:var(--gold)}button{pointer-events:auto;background:transparent;color:#fff;border:1px solid var(--cyan);padding:13px 32px;font:700 13px Rajdhani;letter-spacing:3px;cursor:pointer}button:hover{background:var(--cyan);color:#150b25}.hidden{display:none}
</style></head><body>
<div id="hud" class="hud"><div class="brand"><i></i>NEON CANYON / FLIGHT RUN</div><div class="top"><div class="label">RUN SCORE</div><div id="score" class="score">000000</div></div><div class="mid"><div class="label">NEAR-MISS CHAIN</div><div id="mult" class="mult">x1</div></div><div class="cross"></div><div class="hint">A / D OR ← / → TO BANK &nbsp; • &nbsp; W / S PITCH &nbsp; • &nbsp; SPACE TURBO</div><div class="speed"><div class="label">VELOCITY // <span id="speedText">240</span> KM/H</div><div class="line"><b id="speedbar"></b></div></div><div class="energy"><div class="label">CORE ENERGY // <span id="energyText">100</span>%</div><div class="energybar"><b id="energybar"></b></div></div></div>
<div id="gameover" class="overlay hidden"><div class="panel"><div class="label">SIGNAL LOST // RUN TERMINATED</div><h1>DESCENT ENDED</h1><p>THE CANYON REMEMBERS YOUR LINE</p><div class="stats"><div><div class="label">FINAL SCORE</div><strong id="finalScore">000000</strong></div><div><div class="label">MAX VELOCITY</div><strong id="finalSpeed">000</strong></div></div><button id="restart">RE-ENTER CANYON</button></div></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script>
(()=>{
const scene=new THREE.Scene(); scene.fog=new THREE.Fog(0x120d28,55,340); scene.background=new THREE.Color(0x120d28);
const camera=new THREE.PerspectiveCamera(68,innerWidth/innerHeight,.1,700); camera.position.set(0,4,10);
const renderer=new THREE.WebGLRenderer({antialias:true,powerPreference:'high-performance'});renderer.setSize(innerWidth,innerHeight);renderer.setPixelRatio(Math.min(devicePixelRatio,1.7));renderer.shadowMap.enabled=true;renderer.shadowMap.type=THREE.PCFSoftShadowMap;document.body.prepend(renderer.domElement);
scene.add(new THREE.HemisphereLight(0x9b76d0,0x160c28,1.5)); const sun=new THREE.DirectionalLight(0xff9a65,2.8);sun.position.set(-40,80,80);sun.castShadow=true;scene.add(sun);
const world=new THREE.Group();scene.add(world); const chunks=[]; const orbs=[]; const rocks=[]; let craft,engine,trail=[];
const mat=(c,e=0)=>new THREE.MeshStandardMaterial({color:c,flatShading:true,roughness:.82,emissive:e?c:0,emissiveIntensity:e});
const canyonMat=mat(0x382346), canyonHi=mat(0x71384b), rockMat=mat(0x57354e), orbMat=mat(0x42e6ec,1), silver=mat(0xb9bed8);
function box(x,y,z,sx,sy,sz,m,parent=world){let o=new THREE.Mesh(new THREE.BoxGeometry(sx,sy,sz),m);o.position.set(x,y,z);o.castShadow=true;o.receiveShadow=true;parent.add(o);rocks.push(o);return o}
function makeChunk(z,idx){let g=new THREE.Group();g.position.z=z;world.add(g);chunks.push(g);let spread=29+Math.min(idx*.15,7), wave=Math.sin(idx*.77)*3;
 let l=new THREE.Mesh(new THREE.ConeGeometry(8+Math.random()*4,30,5),canyonMat);l.position.set(-spread+wave,3,-18);l.rotation.z=-.12;l.castShadow=true;g.add(l);
 let r=new THREE.Mesh(new THREE.ConeGeometry(8+Math.random()*4,30,5),canyonHi);r.position.set(spread+wave,3,-18);r.rotation.z=.12;r.castShadow=true;g.add(r);
 let tight=idx%4===0, ox=(Math.random()*2-1)*(tight?4:9); if(idx%3===0||tight){let p=box(ox,4+Math.random()*4,z-18,3.2,9,3.2,rockMat,g);p.userData.chunk=g;p.userData.r=2.8;}
 if(idx%2===0||tight){let o=new THREE.Mesh(new THREE.IcosahedronGeometry(1.25,1),orbMat);o.position.set((tight?ox+(Math.random()>.5?4.7:-4.7):ox+(Math.random()*5-2.5)),2.8+(Math.random()*3),z-23);o.userData.r=.0;o.userData.chunk=g;o.userData.collected=false;world.add(o);orbs.push(o);}
 // ledges create silhouette
 for(let j=0;j<3;j++){let d=new THREE.Mesh(new THREE.TetrahedronGeometry(1.5+Math.random()*2),silver);d.position.set((Math.random()>.5?1:-1)*(spread+4+Math.random()*7),Math.random()*12-1,z-8-j*12);d.rotation.set(Math.random(),Math.random(),Math.random());d.userData.chunk=g;g.add(d)}
}
function makeCraft(){craft=new THREE.Group();let body=new THREE.Mesh(new THREE.ConeGeometry(1.05,4.8,4),silver);body.rotation.x=Math.PI/2;body.scale.set(.7,.45,1);body.castShadow=true;craft.add(body);let wing=new THREE.Mesh(new THREE.BufferGeometry(),mat(0x70e5ea,1));let v=new Float32Array([-2,0,1,2,0,1,0,0,-1.8]);wing.geometry.setAttribute('position',new THREE.BufferAttribute(v,3));wing.geometry.computeVertexNormals();craft.add(wing);engine=new THREE.PointLight(0x43f4ff,3,12);engine.position.z=2.2;craft.add(engine);craft.position.set(0,2,3);scene.add(craft);for(let i=0;i<18;i++){let q=new THREE.Mesh(new THREE.SphereGeometry(.12,5,5),orbMat);scene.add(q);trail.push(q)}}
makeCraft(); for(let i=0;i<18;i++)makeChunk(-i*27,i);
let keys={},last=performance.now(),running=true,score=0,energy=100,multiplier=1,velocity=28,boost=0,maxSpeed=0,shake=0,audio;
addEventListener('keydown',e=>{keys[e.code]=true;if(e.code==='Space')boost=Math.max(boost,2.8);initAudio()});addEventListener('keyup',e=>keys[e.code]=false);document.getElementById('restart').onclick=reset;
function initAudio(){if(audio)return;audio=new (AudioContext||webkitAudioContext)();let o=audio.createOscillator(),g=audio.createGain();o.frequency.value=70;o.type='sawtooth';g.gain.value=.025;o.connect(g).connect(audio.destination);o.start()}
function ping(freq=700){if(!audio)return;let o=audio.createOscillator(),g=audio.createGain();o.frequency.value=freq;o.type='sine';g.gain.setValueAtTime(.12,audio.currentTime);g.gain.exponentialRampToValueAtTime(.001,audio.currentTime+.25);o.connect(g).connect(audio.destination);o.start();o.stop(audio.currentTime+.25)}
function reset(){location.reload()}
function end(){running=false;document.getElementById('finalScore').textContent=Math.floor(score).toString().padStart(6,'0');document.getElementById('finalSpeed').textContent=Math.floor(maxSpeed*8.7);document.getElementById('gameover').classList.remove('hidden')}
function tick(now){requestAnimationFrame(tick);let dt=Math.min((now-last)/1000,.035);last=now;if(!running){renderer.render(scene,camera);return}
 let steer=(keys.ArrowLeft||keys.KeyA?-1:0)+(keys.ArrowRight||keys.KeyD?1:0), pitch=(keys.ArrowUp||keys.KeyW?1:0)+(keys.ArrowDown||keys.KeyS?-1:0);let turbo=keys.Space&&boost>0;boost=Math.max(0,boost-(turbo?dt:0));velocity=Math.min(49,velocity+dt*(.8+score/100000));if(turbo)velocity+=dt*18;maxSpeed=Math.max(maxSpeed,velocity);craft.position.x+=steer*dt*(7+velocity*.12);craft.position.y+=pitch*dt*4;craft.position.x*=.998;craft.position.y=THREE.MathUtils.clamp(craft.position.y,.7,9);craft.rotation.z=THREE.MathUtils.lerp(craft.rotation.z,-steer*.48,dt*8);craft.rotation.x=THREE.MathUtils.lerp(craft.rotation.x,pitch*.18,dt*6);
 let dz=velocity*dt;score+=dz*2*(1+multiplier*.18);energy-=dt*(3.1+velocity*.035);if(energy<=0)return end();
 world.children.forEach(o=>{if(o!==craft)o.position.z+=dz}); // recycle chunks
 chunks.forEach(g=>{if(g.position.z>38){g.position.z-=18*27;}}); while(chunks.length&&false){};
 // collectibles and collisions, with proximity sweep against rocks
 let near=false;orbs.forEach(o=>{if(o.userData.collected)return;let dx=o.position.x-craft.position.x,dy=o.position.y-craft.position.y,dz2=o.position.z-craft.position.z;o.rotation.y+=dt*3;if(Math.hypot(dx,dy,dz2)<2){o.userData.collected=true;o.visible=false;energy=Math.min(100,energy+29);boost=Math.min(5,boost+1.2);score+=220*multiplier;ping(850);}});
 rocks.forEach(o=>{if(!o.parent)return;let dx=Math.abs(o.position.x-craft.position.x),dy=Math.abs(o.position.y-craft.position.y),zz=Math.abs(o.position.z-craft.position.z);if(zz<3&&dx<2.2&&dy<3.2)return end();if(zz<4&&dx<5&&dy<5){near=true;shake=Math.min(.25,shake+.025)}});if(near){multiplier=Math.min(12,multiplier+dt*1.8);if(Math.random()<dt*.5){ping(260);document.getElementById('mult').classList.add('flash');setTimeout(()=>document.getElementById('mult').classList.remove('flash'),120)}}else multiplier=Math.max(1,multiplier-dt*.22);
 trail.forEach((q,i)=>{q.position.set(craft.position.x,craft.position.y,craft.position.z+2+i*.55);q.material.opacity=(1-i/trail.length)*.45;q.material.transparent=true;q.scale.setScalar((1-i/trail.length)*.8)});shake=Math.max(0,shake-dt);camera.position.x=THREE.MathUtils.lerp(camera.position.x,craft.position.x*.32,dt*3);camera.position.y=THREE.MathUtils.lerp(camera.position.y,craft.position.y+2.5,dt*3);camera.position.z=THREE.MathUtils.lerp(camera.position.z,10-(turbo?1.4:0),dt*4);camera.fov=THREE.MathUtils.lerp(camera.fov,turbo?83:68,dt*4);camera.updateProjectionMatrix();camera.position.x+=(Math.random()-.5)*shake;camera.position.y+=(Math.random()-.5)*shake;
 document.getElementById('score').textContent=Math.floor(score).toString().padStart(6,'0');document.getElementById('mult').textContent='x'+multiplier.toFixed(1);document.getElementById('energyText').textContent=Math.ceil(energy);document.getElementById('energybar').style.width=energy+'%';document.getElementById('speedText').textContent=Math.floor(velocity*8.7);document.getElementById('speedbar').style.width=Math.min(100,velocity/49*100)+'%';renderer.render(scene,camera)}tick(last);
addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)});
})();</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna","provider":"openrouter","persona":"full","sessionId":"7e81e83d-2b34-46d4-9182-f53abe5a4f2f","tokensIn":116556,"tokensOut":6582,"tokensTotal":123138,"cost":0.00687773,"turns":12,"toolCalls":15,"failedToolCalls":0,"timestamp":"2026-08-06T14:23:22.254Z"} -->