Canyon Run

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CANYON//VECTOR — High-Speed Canyon Racer</title>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<style>
/* ── css: base ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');*{box-sizing:border-box}html,body,#app,#game{margin:0;width:100%;height:100%;overflow:hidden;background:#090711;color:#f5ead8}body{font-family:'Barlow Condensed',Arial,sans-serif}#scene{position:absolute;inset:0;width:100%;height:100%;display:block}#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 42%,rgba(6,4,15,.4) 100%),linear-gradient(180deg,rgba(255,176,86,.08),transparent 35%)}#hud{position:absolute;inset:0;pointer-events:none;padding:34px 42px}.brand{letter-spacing:4px;font-weight:800;font-size:18px}.brand span{color:#ff714f}.brand i{font:11px 'Space Mono';color:#aa8ab7;margin-left:8px;font-style:normal}.readout{position:absolute;left:42px;top:85px;width:178px}.label{font:12px 'Space Mono';letter-spacing:1px;color:#d5bfd0}.label b{font:700 29px 'Barlow Condensed';color:#fff;margin-left:8px}.label small{font-size:9px;color:#9c86a7}.speedline,.energyTrack{height:3px;background:rgba(255,255,255,.16);margin-top:8px;position:relative}.speedline em,.energyTrack em{display:block;height:100%;width:50%;background:#ffbc75;box-shadow:0 0 12px #ff713f;transition:width .15s}.score{position:absolute;right:42px;top:32px;text-align:right}.score small{display:block;color:#b697b7;font:10px 'Space Mono';letter-spacing:2px}.score strong{display:block;font:700 46px 'Space Mono';letter-spacing:-3px}.mult{font:700 19px 'Space Mono';color:#ff9b61;margin-top:-3px}.mult b{color:#fff}.energy{position:absolute;left:42px;bottom:40px;width:210px}.energy .label{font-size:10px}.energy .label b{font-size:18px;color:#ffb26b}.energyTrack{height:5px;margin-top:9px}.hint{position:absolute;right:42px;bottom:39px;text-align:right;color:rgba(232,213,224,.55);font:10px 'Space Mono';line-height:1.8;letter-spacing:.5px}.hint span{color:#ffb16d}.kicker{font:11px 'Space Mono';letter-spacing:3px;color:#ff9b61;margin-bottom:22px}#start,#gameover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(90deg,rgba(10,6,19,.35),transparent,rgba(10,6,19,.35));transition:opacity .4s}#start h1,#gameover h2{font-size:clamp(58px,9vw,128px);line-height:.75;margin:0;font-weight:900;letter-spacing:-3px;text-shadow:5px 7px 0 rgba(89,31,65,.45)}#start h1 span,#gameover h2 span{color:#ff7958}#start p{font:12px 'Space Mono';color:#d5b5c2;margin:30px 0}button{pointer-events:auto;border:1px solid #ff9467;background:rgba(255,110,73,.08);color:#ffe8d5;padding:15px 28px;font:700 13px 'Space Mono';letter-spacing:1px;cursor:pointer;transition:.2s}button:hover{background:#ff7958;color:#170b18;box-shadow:0 0 25px #ff7958}button b{font-size:17px;margin-left:15px}#gameover{display:none;background:rgba(10,6,18,.74)}#gameover h2{font-size:72px}.stats{display:flex;gap:60px;margin:35px 0 28px;font:10px 'Space Mono';letter-spacing:1px;color:#bda1b8}.stats div{text-align:left}.stats strong{display:block;color:#fff;font-size:24px;margin-top:8px}.toast{position:absolute}#toast{position:absolute;top:37%;left:50%;transform:translate(-50%,-50%) scale(.8);opacity:0;color:#ffc084;font:700 22px 'Space Mono';letter-spacing:2px;text-shadow:0 0 15px #ff6b4c;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
</style>
</head>
<body>
<div id="game"><canvas id="scene"></canvas><div id="vignette"></div><div id="hud"><div class="brand">CANYON<span>//</span>VECTOR <i>09</i></div><div class="readout"><div class="label">VELOCITY <b id="speed">000</b><small> KM/H</small></div><div class="speedline"><em id="speedFill"></em></div></div><div class="score"><small>SCORE</small><strong id="score">000000</strong><div class="mult">×<b id="mult">1.0</b></div></div><div class="energy"><div class="label">ENERGY <b id="energyText">100</b>%</div><div class="energyTrack"><em id="energyFill"></em></div></div><div class="hint">A / D or ← / → &nbsp; BANK &nbsp; • &nbsp; W / S &nbsp; PITCH<br><span>SPACE&nbsp; TURBO</span></div></div><div id="start"><div class="kicker">PROCEDURAL FLIGHT SECTOR 09</div><h1>RUN THE<br><span>CANYON</span></h1><p>Stay low. Stay fast. Read the gaps.</p><button id="launch">LAUNCH FLIGHT <b>↗</b></button></div><div id="gameover"><div class="kicker">SIGNAL LOST / RUN COMPLETE</div><h2>FLIGHT<br><span>TERMINATED</span></h2><div class="stats"><div>FINAL SCORE<strong id="finalScore">000000</strong></div><div>MAX VELOCITY<strong id="finalSpeed">000 KM/H</strong></div></div><button id="restart">RE-ENTER CANYON <b>↗</b></button></div><div id="toast">NEAR MISS <b>+250</b></div></div>
<script>
'use strict';

// ── const: CANYON_COLORS ──
const CANYON_COLORS={sky:0x160d2b,fog:0x20112d,rock:0x6b3c58,rock2:0x9b5a58,edge:0xff8b5c,orb:0xffd27b};

// ── const: clamp ──
const clamp=(v,a,b)=>Math.max(a,Math.min(b,v));

// ── function: makeRock ──
function makeRock(w,h,d,color){const g=new THREE.DodecahedronGeometry(1,0);g.scale(w,h,d);const m=new THREE.MeshStandardMaterial({color,flatShading:true,roughness:.95});return new THREE.Mesh(g,m)}

// ── function: makeOrb ──
function makeOrb(){const g=new THREE.IcosahedronGeometry(.55,1),m=new THREE.MeshBasicMaterial({color:CANYON_COLORS.orb});const o=new THREE.Mesh(g,m);o.userData.orb=true;return o}

// ── function: makeCraft ──
function makeCraft(){const group=new THREE.Group();const body=new THREE.Mesh(new THREE.ConeGeometry(.8,3.5,4),new THREE.MeshStandardMaterial({color:0xdce5e7,metalness:.6,roughness:.3,flatShading:true}));body.rotation.x=-Math.PI/2;group.add(body);const wing=new THREE.Mesh(new THREE.ConeGeometry(1.3,2.2,3),new THREE.MeshStandardMaterial({color:0xff7958,flatShading:true}));wing.rotation.x=-Math.PI/2;wing.scale.set(1,.7,.3);wing.position.z=.45;group.add(wing);const glow=new THREE.Mesh(new THREE.SphereGeometry(.32,8,8),new THREE.MeshBasicMaterial({color:0xffd17a}));glow.position.z=1.6;group.add(glow);return group}

// ── function: addChunk ──
function addChunk(scene,chunk,z,difficulty){const group=new THREE.Group();group.position.z=z;const width=13-Math.min(3.5,difficulty*.018);const left=makeRock(4+Math.random()*3,4+Math.random()*5,8,CANYON_COLORS.rock);left.position.set(-width-Math.random()*2,0,0);group.add(left);const right=makeRock(4+Math.random()*3,4+Math.random()*5,8,CANYON_COLORS.rock2);right.position.set(width+Math.random()*2,0,0);group.add(right);if(Math.random()<.72){const x=(Math.random()>.5?1:-1)*(3+Math.random()*Math.max(2,width-3));const mon=makeRock(1.2+Math.random()*1.3,3+Math.random()*3,1.4,0x8a596b);mon.position.set(x,-1+Math.random()*3,Math.random()*8-3);mon.userData.obstacle=true;group.add(mon)}if(Math.random()<.82){const orb=makeOrb();orb.position.set((Math.random()*2-1)*(width-2),Math.random()*3-1,Math.random()*8-3);group.add(orb)}group.userData={chunk:true,near:false};scene.add(group);return group}

// ── function: initAudio ──
function initAudio(){try{const A=window.AudioContext||window.webkitAudioContext;const ctx=new A(),osc=ctx.createOscillator(),gain=ctx.createGain();osc.type='sawtooth';osc.frequency.value=62;gain.gain.value=.018;osc.connect(gain).connect(ctx.destination);osc.start();return {ctx,gain}}catch(e){return null}}

// ── function: ping ──
function ping(audio,near=false){if(!audio)return;const o=audio.ctx.createOscillator(),g=audio.ctx.createGain();o.type='sine';o.frequency.setValueAtTime(near?180:620,audio.ctx.currentTime);o.frequency.exponentialRampToValueAtTime(near?900:1000,audio.ctx.currentTime+.16);g.gain.setValueAtTime(.08,audio.ctx.currentTime);g.gain.exponentialRampToValueAtTime(.001,audio.ctx.currentTime+.2);o.connect(g).connect(audio.ctx.destination);o.start();o.stop(audio.ctx.currentTime+.22)}

// ── function: formatScore ──
function formatScore(n){return Math.floor(n).toString().padStart(6,'0')}

// ── main ──
const canvas=document.querySelector('#scene'),renderer=new THREE.WebGLRenderer({canvas,antialias:true,powerPreference:'high-performance'});renderer.setPixelRatio(Math.min(devicePixelRatio,1.7));renderer.setSize(innerWidth,innerHeight);renderer.shadowMap.enabled=true;renderer.toneMapping=THREE.ACESFilmicToneMapping;renderer.toneMappingExposure=1.25;const scene=new THREE.Scene();scene.background=new THREE.Color(CANYON_COLORS.sky);scene.fog=new THREE.FogExp2(CANYON_COLORS.fog,.012);const camera=new THREE.PerspectiveCamera(62,innerWidth/innerHeight,.1,300);camera.position.set(0,3.5,8);const hemi=new THREE.HemisphereLight(0xffbf91,0x171024,2);scene.add(hemi);const sun=new THREE.DirectionalLight(0xffa267,4);sun.position.set(-30,35,20);sun.castShadow=true;scene.add(sun);const ground=new THREE.Mesh(new THREE.PlaneGeometry(160,500),new THREE.MeshStandardMaterial({color:0x291a32,roughness:1,flatShading:true}));ground.rotation.x=-Math.PI/2;ground.position.set(0,-5,-180);scene.add(ground);const craft=makeCraft();scene.add(craft);const trail=[];for(let i=0;i<14;i++){const t=new THREE.Mesh(new THREE.TetrahedronGeometry(.16,0),new THREE.MeshBasicMaterial({color:0xff8a5c,transparent:true,opacity:.65}));t.position.set(0,0,1+i*.7);trail.push(t);scene.add(t)}
const state={active:false,x:0,y:0,vx:0,vy:0,speed:25,score:0,mult:1,energy:100,turbo:0,boost:false,maxSpeed:0,last:performance.now(),shake:0,chunks:[],keys:{},nearCooldown:0};for(let i=0;i<18;i++)state.chunks.push(addChunk(scene,-i*18,.1));const audio=initAudio();function begin(){state.active=true;state.last=performance.now();document.querySelector('#start').style.opacity='0';setTimeout(()=>document.querySelector('#start').style.display='none',400);if(audio)audio.ctx.resume()}function reset(){location.reload()}document.querySelector('#launch').onclick=begin;document.querySelector('#restart').onclick=reset;addEventListener('keydown',e=>{state.keys[e.code]=true;if(['Space','ArrowLeft','ArrowRight','ArrowUp','ArrowDown'].includes(e.code))e.preventDefault();if(e.code==='Space'&&state.active)state.boost=true});addEventListener('keyup',e=>{state.keys[e.code]=false;if(e.code==='Space')state.boost=false});addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)});
function endGame(){state.active=false;document.querySelector('#finalScore').textContent=formatScore(state.score);document.querySelector('#finalSpeed').textContent=Math.floor(state.maxSpeed*6)+' KM/H';document.querySelector('#gameover').style.display='flex';setTimeout(()=>document.querySelector('#gameover').style.opacity='1',20)}
function frame(now){requestAnimationFrame(frame);const dt=Math.min(.035,(now-state.last)/1000);state.last=now;if(state.active){const k=state.keys,ax=(k.ArrowRight||k.KeyD?1:0)-(k.ArrowLeft||k.KeyA?1:0),ay=(k.ArrowUp||k.KeyW?1:0)-(k.ArrowDown||k.KeyS?1:0);state.vx+=(ax*34-state.vx*4.8)*dt;state.vy+=(ay*22-state.vy*4.8)*dt;state.x=clamp(state.x+state.vx*dt,-10,10);state.y=clamp(state.y+state.vy*dt,-3.3,5);const diff=state.score/900;state.speed+=((25+diff*3+(state.boost?25:0))-state.speed)*dt*1.3;state.maxSpeed=Math.max(state.maxSpeed,state.speed);state.energy-=dt*(2.2+diff*.08);state.turbo=clamp(state.turbo+dt*(Math.abs(ax)<.2?3:0),0,100);if(state.boost&&state.turbo>2)state.turbo-=dt*28;else if(state.turbo<=0)state.boost=false;craft.position.x=state.x;craft.position.y=state.y;craft.rotation.z=-state.vx*.035;craft.rotation.x=state.vy*.018;camera.position.x+=(state.x*.22-camera.position.x)*dt*4;camera.position.y+=(3.5+state.y*.08-camera.position.y)*dt*3;camera.fov+=(62+(state.boost?14:0)-camera.fov)*dt*3;camera.updateProjectionMatrix();state.nearCooldown-=dt;for(const c of state.chunks){c.position.z+=state.speed*dt;for(const o of c.children){if(o.userData.orb){o.rotation.y+=dt*3;o.rotation.x+=dt*2}const dx=Math.abs(state.x-(c.position.x+o.position.x)),dy=Math.abs(state.y-(c.position.y+o.position.y));if(o.userData.orb&&Math.abs(c.position.z+o.position.z)<2&&dx<1.5&&dy<1.5){o.visible=false;state.energy=clamp(state.energy+27,0,100);state.turbo=clamp(state.turbo+26,0,100);state.score+=150*state.mult;ping(audio)}}if(Math.abs(c.position.z)<3){const tight=13-Math.min(3.5,diff*.018);if(Math.abs(state.x)>tight-2.1&&state.nearCooldown<=0){state.mult=clamp(state.mult+.25,1,8);state.score+=250*state.mult;state.shake=.18;state.nearCooldown=.5;document.querySelector('#toast').classList.add('show');setTimeout(()=>document.querySelector('#toast').classList.remove('show'),350);ping(audio,true)}if(Math.abs(state.x)>tight+1.3||state.y<-4.6||state.y>6)endGame()}if(c.position.z>28){c.position.z=-324-Math.random()*20;for(const o of c.children){o.visible=true;if(o.userData.orb)o.position.set((Math.random()*2-1)*8,Math.random()*3-1,Math.random()*8-3)}}}state.score+=dt*state.speed*state.mult;state.mult=Math.max(1,state.mult-dt*.035);if(state.energy<=0)endGame();document.querySelector('#speed').textContent=String(Math.floor(state.speed*6)).padStart(3,'0');document.querySelector('#speedFill').style.width=clamp(state.speed/60*100,0,100)+'%';document.querySelector('#score').textContent=formatScore(state.score);document.querySelector('#mult').textContent=state.mult.toFixed(1);document.querySelector('#energyText').textContent=Math.ceil(state.energy);document.querySelector('#energyFill').style.width=state.energy+'%';for(let i=0;i<trail.length;i++){trail[i].position.set(craft.position.x*.7,craft.position.y*.7,1+i*.65);trail[i].material.opacity=(1-i/trail.length)*.55}}if(state.shake>0){state.shake-=.012;camera.position.x+=(Math.random()-.5)*state.shake;camera.position.y+=(Math.random()-.5)*state.shake}renderer.render(scene,camera)}requestAnimationFrame(frame);
</script>
</body>
</html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna","provider":"openrouter","persona":"composer","sessionId":"e8b868d9-4a3c-4efb-a0a0-5efb316189e8","tokensIn":102127,"tokensOut":7420,"tokensTotal":109547,"turns":13,"toolCalls":12,"failedToolCalls":1,"timestamp":"2026-07-14T03:30:29.793Z"} -->