Canyon Run

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>CANYON//RUN</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap');
:root{--hot:#ffb649;--pink:#ff5d74;--ice:#8ce8e2;--ink:#120e27}*{box-sizing:border-box}html,body{margin:0;overflow:hidden;background:#0d0b1e;color:#fff;font-family:Rajdhani,Arial,sans-serif;user-select:none}#game{position:fixed;inset:0}canvas{display:block}#hud{position:fixed;inset:0;pointer-events:none;text-transform:uppercase;letter-spacing:.13em}.brand{position:absolute;top:25px;left:32px;font-weight:700;font-size:18px;color:#fff}.brand i{color:var(--hot);font-style:normal}.readout{position:absolute;top:25px;right:32px;text-align:right;color:#b9b5ce;font-size:12px}.readout strong{font-size:28px;color:white;display:block;line-height:.9}.readout em{color:var(--hot);font-style:normal}.meters{position:absolute;left:32px;bottom:32px;width:255px}.meter{margin-top:13px;color:#aaa5c3;font-size:11px}.track{height:4px;margin-top:6px;background:#ffffff22;transform:skewX(-22deg);overflow:hidden}.fill{height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,var(--pink),var(--hot));box-shadow:0 0 12px var(--hot)}#turboFill{background:linear-gradient(90deg,#9a5cff,#8ce8e2);box-shadow:0 0 12px #8ce8e2}.center{position:absolute;top:31px;left:50%;transform:translateX(-50%);text-align:center}.center small{font-size:10px;color:#aaa5c3}.center b{display:block;font-size:25px;line-height:1;color:var(--hot);text-shadow:0 0 15px #ff7848}.center.pulse b{animation:pop .38s ease-out}@keyframes pop{50%{transform:scale(1.55);color:#fff}}#hint{position:absolute;bottom:31px;right:32px;text-align:right;color:#aaa5c3;font-size:11px;line-height:1.8}#hint b{color:#fff}.vignette{position:absolute;inset:0;box-shadow:inset 0 0 150px #080718,inset 0 -100px 180px #27132d;pointer-events:none}.speedlines{position:absolute;inset:0;opacity:0;transition:opacity .2s;background:repeating-linear-gradient(100deg,transparent 0 8%,#fff1 8.1% 8.25%,transparent 8.35% 16%);mix-blend-mode:screen}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#090718bb;backdrop-filter:blur(5px);z-index:4}.card{text-align:center;border-top:1px solid var(--hot);border-bottom:1px solid #ffffff33;padding:30px 70px;background:linear-gradient(110deg,#1c1230dd,#120d24dd);box-shadow:0 0 80px #e74f3822}.card h1{margin:0;color:var(--hot);font-size:54px;letter-spacing:.14em}.card p{color:#aaa5c3;letter-spacing:.18em}.stats{display:flex;gap:45px;justify-content:center;margin:28px 0}.stats span{display:block;color:#88849e;font-size:11px}.stats strong{font-size:28px;color:white}.button{border:1px solid var(--hot);background:#ffad3918;color:#fff;padding:12px 35px;font:600 14px Rajdhani;letter-spacing:.2em;cursor:pointer}.button:hover{background:#ffad3960}.hidden{display:none}
</style>
</head><body>
<div id="game"></div><div class="speedlines" id="speedlines"></div>
<div id="hud"><div class="brand">CANYON<i>//</i>RUN</div><div class="readout"><strong id="score">000000</strong>SCORE <em id="best">· SECTOR 01</em></div><div class="center"><small>MULTIPLIER</small><b id="mult">x1.0</b></div><div class="meters"><div class="meter">ENERGY <span id="energyText">100%</span><div class="track"><div class="fill" id="energyFill"></div></div></div><div class="meter">TURBO <span id="turboText">0%</span><div class="track"><div class="fill" id="turboFill"></div></div></div></div><div id="hint"><b>ARROW KEYS / A D</b> BANK &nbsp; <b>W / S</b> PITCH<br>SPACE &nbsp; ENGAGE TURBO</div><div class="vignette"></div></div>
<div class="overlay" id="over"><div class="card"><h1 id="overTitle">CANYON//RUN</h1><p id="overSub">PILOT THE SUNSET</p><div class="stats"><div><span>FINAL SCORE</span><strong id="finalScore">000000</strong></div><div><span>MAX SPEED</span><strong id="maxSpeed">0</strong></div></div><button class="button" id="start">LAUNCH RUN</button><p style="font-size:10px;margin-top:22px">COLLECT ENERGY · SKIM THE CLIFFS · NEVER LOOK BACK</p></div></div>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script>
(()=>{
let scene,camera,renderer,craft,clock=new THREE.Clock(),running=false,score=0,energy=100,turbo=0,mult=1,maxSpeed=0,shake=0,spawnZ=10,segments=[],items=[],particles=[],keys={},audio,humOsc,humGain;
const $=id=>document.getElementById(id), rand=(a,b)=>a+Math.random()*(b-a), clamp=(v,a,b)=>Math.max(a,Math.min(b,v));
const mat=(c,e=0)=>new THREE.MeshStandardMaterial({color:c,flatShading:true,roughness:.9,emissive:e?c:0,emissiveIntensity:e?1.8:0});
function init(){scene=new THREE.Scene();scene.background=new THREE.Color(0x120c29);scene.fog=new THREE.Fog(0x120c29,45,250);camera=new THREE.PerspectiveCamera(72,innerWidth/innerHeight,.1,500);camera.position.set(0,5,12);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;renderer.toneMapping=THREE.ACESFilmicToneMapping;renderer.toneMappingExposure=1.35;$('game').appendChild(renderer.domElement);
scene.add(new THREE.HemisphereLight(0xff9b69,0x100c27,2));let sun=new THREE.DirectionalLight(0xffd09a,4);sun.position.set(-45,65,35);sun.castShadow=true;sun.shadow.mapSize.set(1024,1024);scene.add(sun);let rim=new THREE.PointLight(0x7b51ff,18,90);rim.position.set(0,8,25);scene.add(rim);
craft=new THREE.Group();let body=new THREE.Mesh(new THREE.ConeGeometry(1.05,3.8,4),mat(0xdde5ed));body.rotation.x=-Math.PI/2;body.scale.set(1,.45,1);body.castShadow=true;craft.add(body);let wing=new THREE.Mesh(new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(-.1,0,0),new THREE.Vector3(-2.2,-.05,.7),new THREE.Vector3(2.2,-.05,.7),new THREE.Vector3(-.1,0,0)]),mat(0x565b80));wing.rotation.x=0;craft.add(wing);let glow=new THREE.Mesh(new THREE.SphereGeometry(.35,8,6),mat(0xff663d,1));glow.position.z=1.4;craft.add(glow);scene.add(craft);resetWorld();window.addEventListener('resize',resize);window.addEventListener('keydown',e=>{keys[e.code]=true;if(['Space','ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.code))e.preventDefault();if(e.code==='Space'&&running)turbo=Math.max(turbo,12)});window.addEventListener('keyup',e=>keys[e.code]=false);$('start').onclick=start;}
function resetWorld(){segments.forEach(x=>scene.remove(x));items.forEach(x=>scene.remove(x));segments=[];items=[];for(let z=-210;z<30;z+=20)makeChunk(z);spawnZ=30;craft.position.set(0,3,8)}
function makeChunk(z){let g=new THREE.Group();let difficulty=clamp(score/12000,0,1);let wobble=Math.sin(z*.035)*10;let width=20-difficulty*6+Math.sin(z*.11)*3;let ground=new THREE.Mesh(new THREE.PlaneGeometry(80,22),mat(0x2a1732));ground.rotation.x=-Math.PI/2;ground.position.set(wobble,0,z-10);ground.receiveShadow=true;g.add(ground);
// sweeping canyon walls
for(let side of [-1,1]){let h=rand(8,18)+difficulty*8, x=wobble+side*(width+rand(3,8));let wall=new THREE.Mesh(new THREE.ConeGeometry(h*.9,h,5),mat(side<0?0x552e3e:0x402b52));wall.position.set(x,h/2-1,z-10);wall.scale.z=rand(1,2.8);wall.rotation.y=rand(0,6);wall.castShadow=true;g.add(wall);}
let type=Math.random(); if(type<.55){let x=wobble+rand(-width*.7,width*.7), y=rand(3.2,7.5);let rock=new THREE.Mesh(new THREE.IcosahedronGeometry(rand(1.5,2.5)+difficulty*1.2,0),mat(0x6a4056));rock.position.set(x,y,z-10);rock.rotation.set(rand(0,3),rand(0,3),rand(0,3));rock.castShadow=true;g.add(rock);segments.push(g);}
else {let gap=rand(4.8,7.5)-difficulty*2.5;for(let side of [-1,1]){let p=new THREE.Mesh(new THREE.BoxGeometry(3,rand(10,17),7),mat(0x623850));p.position.set(wobble+side*(gap+3),rand(5,7),z-10);p.rotation.z=side*.08;g.add(p)}}
scene.add(g);segments.push(g);if(Math.random()<.8){let orb=new THREE.Mesh(new THREE.OctahedronGeometry(.58,0),mat(0x8ce8e2,1));orb.position.set(wobble+rand(-width*.72,width*.72),rand(2,6),z-10);orb.userData={kind:'orb'};scene.add(orb);items.push(orb)} }
function burst(pos,color){for(let i=0;i<12;i++){let p=new THREE.Mesh(new THREE.TetrahedronGeometry(.07),mat(color,1));p.position.copy(pos);p.userData.v=new THREE.Vector3(rand(-2,2),rand(-2,2),rand(-5,2));scene.add(p);particles.push(p)}}
function start(){audio=audio||new (window.AudioContext||window.webkitAudioContext)();audio.resume();if(!humOsc){humOsc=audio.createOscillator();humGain=audio.createGain();humOsc.type='sine';humOsc.frequency.value=72;humGain.gain.value=.018;humOsc.connect(humGain);humGain.connect(audio.destination);humOsc.start()}humGain.gain.value=.018;$('over').classList.add('hidden');running=true;score=0;energy=100;turbo=0;mult=1;maxSpeed=0;resetWorld();clock.start();requestAnimationFrame(loop)}
function tone(freq,dur,type='sine',vol=.035){if(!audio)return;let o=audio.createOscillator(),g=audio.createGain();o.type=type;o.frequency.value=freq;g.gain.setValueAtTime(vol,audio.currentTime);g.gain.exponentialRampToValueAtTime(.001,audio.currentTime+dur);o.connect(g);g.connect(audio.destination);o.start();o.stop(audio.currentTime+dur)}
function gameOver(){running=false;if(humGain)humGain.gain.value=0;tone(90,.5,'sawtooth',.08);$('finalScore').textContent=Math.floor(score).toString().padStart(6,'0');$('maxSpeed').textContent=Math.floor(maxSpeed);$('overTitle').textContent='RUN TERMINATED';$('overSub').textContent='THE CANYON CLAIMS ANOTHER';$('start').textContent='RESTART';$('over').classList.remove('hidden')}
function loop(){if(!running)return;requestAnimationFrame(loop);let dt=Math.min(clock.getDelta(),.04),d=score/30000, speed=22+d*16+(turbo>0?25:0);maxSpeed=Math.max(maxSpeed,speed);let steer=((keys.ArrowRight||keys.KeyD)?1:0)-((keys.ArrowLeft||keys.KeyA)?1:0),pitch=((keys.ArrowUp||keys.KeyW)?1:0)-((keys.ArrowDown||keys.KeyS)?1:0);craft.position.x+=steer*dt*(8+speed*.18);craft.position.y+=pitch*dt*5;craft.position.x=clamp(craft.position.x,-15,15);craft.position.y=clamp(craft.position.y,1.4,11);craft.rotation.z=THREE.MathUtils.lerp(craft.rotation.z,-steer*.48,dt*7);craft.rotation.x=THREE.MathUtils.lerp(craft.rotation.x,pitch*.16,dt*5);let dz=speed*dt;score+=dz*mult*.7;energy-=dt*(4.3+d*2.5);if(humOsc){humOsc.frequency.setTargetAtTime(58+speed*2,audio.currentTime,.08)}if(Math.random()<.7){let trail=new THREE.Mesh(new THREE.TetrahedronGeometry(.09,0),mat(0xff7044,1));trail.position.set(craft.position.x+rand(-.18,.18),craft.position.y+rand(-.12,.12),craft.position.z+1.5);trail.userData.v=new THREE.Vector3(rand(-.2,.2),rand(-.2,.2),rand(2,7));trail.userData.life=.35;scene.add(trail);particles.push(trail)}if(keys.Space&&turbo>0){turbo-=dt*17;$('speedlines').style.opacity='.75'}else{$('speedlines').style.opacity='0';turbo=Math.max(0,turbo-dt*1.4)}
segments.forEach(g=>g.position.z+=dz);items.forEach(o=>{o.position.z+=dz;o.rotation.x+=dt*3;o.rotation.y+=dt*4});while(spawnZ<45){makeChunk(spawnZ);spawnZ+=20}while(segments.length&&segments[0].position.z>35)scene.remove(segments.shift());while(items.length&&items[0].position.z>35)scene.remove(items.shift());
// proximity / collection / collision against compact obstacle bounds
let near=false;for(let g of segments){for(let o of g.children){if(!o.geometry||o.geometry.type==='PlaneGeometry')continue;let dx=Math.abs(craft.position.x-(o.position.x+g.position.x)),dy=Math.abs(craft.position.y-(o.position.y+g.position.y)),zz=Math.abs(craft.position.z-(o.position.z+g.position.z));let r=o.geometry.parameters?.radius||2.4;if(zz<4&&dx<r+1.3&&dy<r+1.1){if(dx<r*.7&&dy<r*.75){gameOver();return}if(dx<r+3&&dy<r+3)near=true}}}if(near){mult=clamp(mult+dt*1.8,1,9.9);score+=dt*18*mult;shake=.12;if(Math.random()<dt*2)tone(420,.08,'triangle',.04)}else mult=Math.max(1,mult-dt*.18);
for(let i=items.length-1;i>=0;i--){let o=items[i];if(o.position.distanceTo(craft.position)<2){energy=clamp(energy+27,0,100);turbo=clamp(turbo+28,0,100);score+=250*mult;burst(o.position,0x8ce8e2);tone(720,.16,'sine',.07);scene.remove(o);items.splice(i,1)}}if(energy<=0){gameOver();return}if(craft.position.y<1.45){energy-=dt*20}
shake=Math.max(0,shake-dt);camera.position.z=12+shake*rand(-3,3);camera.position.x=THREE.MathUtils.lerp(camera.position.x,craft.position.x*.25,dt*4);camera.position.y=THREE.MathUtils.lerp(camera.position.y,craft.position.y+2,dt*4);camera.fov=THREE.MathUtils.lerp(camera.fov,turbo>0?91:72,dt*4);camera.updateProjectionMatrix();particles.forEach((p,i)=>{p.position.addScaledVector(p.userData.v,dt);p.userData.v.y-=dt*2;if(p.position.z>25){scene.remove(p);particles.splice(i,1)}});$('score').textContent=Math.floor(score).toString().padStart(6,'0');$('mult').textContent='x'+mult.toFixed(1);$('energyText').textContent=Math.ceil(energy)+'%';$('energyFill').style.width=energy+'%';$('turboText').textContent=Math.ceil(turbo)+'%';$('turboFill').style.width=turbo+'%';if(near){$('mult').parentElement.classList.add('pulse');setTimeout(()=>$('mult').parentElement.classList.remove('pulse'),350)}renderer.render(scene,camera)}
function resize(){camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)}init();
})();
</script></body></html>