Race the Sun

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>SOLAR//RUNNER</title>
<style>
:root{--cyan:#7cf7ff;--gold:#ffc857;--pink:#ff4f79;--ink:#081329}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071126;color:#effcff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}canvas{display:block;width:100vw;height:100vh}#hud{position:fixed;inset:0;pointer-events:none;padding:24px 28px;display:none}.top{display:flex;justify-content:space-between;align-items:start}.brand{font-size:12px;letter-spacing:.28em;color:var(--cyan);text-shadow:0 0 14px #48eaff}.stats{display:flex;gap:24px;text-align:right}.stat b{display:block;color:#fff;font:700 22px system-ui}.stat small{font-size:10px;letter-spacing:.16em;color:#9bb4ca}.meter{position:fixed;left:28px;bottom:28px;width:238px}.meter label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;color:#b8e8ef;margin-bottom:7px}.bar{height:9px;border:1px solid #83eaf4;background:#10263c;box-shadow:0 0 15px #52eaf855}.fill{height:100%;width:100%;background:linear-gradient(90deg,#ffe45c,#64f9dc);transition:width .1s}.hint{position:fixed;right:28px;bottom:28px;text-align:right;font-size:10px;line-height:1.8;color:#9bb4ca}.overlay{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 52%,#132d52aa,#050b18dd 65%);text-align:center}.panel{padding:40px 54px;border:1px solid #7cf7ff66;background:#08172ad9;box-shadow:0 0 70px #27d8ff18,inset 0 0 35px #fff1;max-width:590px}.kicker{color:var(--cyan);letter-spacing:.32em;font-size:11px}.title{font:900 clamp(44px,8vw,92px)/.9 system-ui,sans-serif;letter-spacing:-.08em;margin:13px 0;color:#fff;text-shadow:4px 5px 0 #fa5278,0 0 32px #5ef7ff}.sub{color:#bbd0e2;line-height:1.7;font-size:12px;max-width:430px;margin:22px auto}.cta{color:#071126;background:var(--cyan);padding:13px 22px;display:inline-block;font-weight:bold;letter-spacing:.16em;font-size:12px;box-shadow:0 0 25px #7cf7ff88;animation:pulse 1.6s infinite;cursor:pointer}.keys{margin-top:22px;color:#7893ac;font-size:10px;letter-spacing:.08em}.danger{color:var(--pink);text-shadow:0 0 15px #ff4f79}.hidden{display:none!important}@keyframes pulse{50%{box-shadow:0 0 42px #7cf7ffdd;transform:translateY(-2px)}}
</style></head><body>
<canvas id="c"></canvas>
<div id="hud"><div class="top"><div class="brand">SOLAR//RUNNER <span id="seed"></span></div><div class="stats"><div class="stat"><small>DISTANCE</small><b id="dist">0m</b></div><div class="stat"><small>SCORE</small><b id="score">000000</b></div><div class="stat"><small>MULTIPLIER</small><b id="mult">x1</b></div><div class="stat"><small>SPEED</small><b id="speed">0</b></div></div></div><div class="meter"><label><span>SOLAR CHARGE</span><span id="energyText">100%</span></label><div class="bar"><div class="fill" id="energy"></div></div></div><div class="hint">A / D or ← / → &nbsp; STEER<br>W / S or ↑ / ↓ &nbsp; PITCH<br>SPACE &nbsp; BOOST</div></div>
<div class="overlay" id="title"><div class="panel"><div class="kicker">A PROCEDURAL FLIGHT EXPERIENCE</div><div class="title">SOLAR<br>RUNNER</div><div class="sub">The sun is falling. The horizon is closing. Thread the light, harvest the current, and outrun the night.</div><div class="cta" id="start">PRESS ENTER TO LAUNCH</div><div class="keys">DODGE ◆ COLLECT ⚡ ✦ ◆ SURVIVE</div></div></div>
<div class="overlay hidden" id="gameover"><div class="panel"><div class="kicker danger">SIGNAL LOST // SUNSET</div><div class="title danger">FLIGHT<br>ENDED</div><div class="sub" id="result">DISTANCE 0m · SCORE 0</div><div class="cta" id="restart">PRESS R TO RELAUNCH</div><div class="keys" id="record"></div></div></div>
<script>
// === SETUP / TUNING ===
const C={BASE:18,MAX:42,ACC:.8,STRAFE:19,PITCH:8,FRICTION:.78,ENERGY_DRAIN:.72,SHADOW_DRAIN:2.5,SUNSET:0.00042,SPAWN:1.1,BOOST:30,BOOST_COST:18,LANES:3,COLORS:{sky1:'#102b55',sky2:'#f36d72',sun:'#ffe9a0',ground:'#071628',cyan:'#66f4f0',gold:'#ffc857',pink:'#ff4f79'}};
const canvas=document.getElementById('c'),ctx=canvas.getContext('2d');let W,H,DPR;function resize(){DPR=devicePixelRatio||1;W=innerWidth;H=innerHeight;canvas.width=W*DPR;canvas.height=H*DPR;ctx.setTransform(DPR,0,0,DPR,0,0)}addEventListener('resize',resize);resize();
const $=id=>document.getElementById(id);let mode='title',keys={},world=[],particles=[],stars=[],rng,seed=0,last=0,runTime=0,score=0,dist=0,energy=100,mult=1,combo=0,boost=0,shake=0,flash=0,player={x:0,y:0,vx:0,vy:0,tilt:0};
// === AUDIO ===
let audio,master,drone;function sound(type){if(!audio)return;let o=audio.createOscillator(),g=audio.createGain(),now=audio.currentTime;o.connect(g);g.connect(master);let f=type==='pick'?620:type==='token'?880:type==='crash'?75:220;o.frequency.setValueAtTime(f,now);o.frequency.exponentialRampToValueAtTime(f*(type==='crash'?.45:1.7),now+.16);g.gain.setValueAtTime(type==='crash'?.16:.07,now);g.gain.exponentialRampToValueAtTime(.001,now+.2);o.start();o.stop(now+.22)}function audioStart(){audio=audio||new (AudioContext||webkitAudioContext)();master=master||audio.createGain();master.gain.value=.24;master.connect(audio.destination);if(!drone){drone=audio.createOscillator();let g=audio.createGain();drone.type='sawtooth';drone.frequency.value=55;g.gain.value=.018;drone.connect(g);g.connect(master);drone.start()}}
// === RNG / WORLD ===
function random(){rng=(rng*1664525+1013904223)>>>0;return rng/4294967296}function reset(){seed=Math.floor(Math.random()*999999);rng=seed;world=[];particles=[];runTime=0;score=0;dist=0;energy=100;mult=1;combo=0;boost=0;shake=0;flash=0;player={x:0,y:0,vx:0,vy:0,tilt:0};for(let i=0;i<18;i++)spawn(i*22+55);$('seed').textContent='// '+seed;$('hud').style.display='block';$('title').classList.add('hidden');$('gameover').classList.add('hidden');mode='play';audioStart()}
function spawn(z){let wave=random();let type=wave<.55?'rock':wave<.76?'tower':wave<.9?'cell':'token';let lane=Math.floor(random()*3)-1;let x=lane*7+(random()-.5)*3;world.push({z,x,y:(random()-.5)*5,type,w: type==='tower'?4.5:3.2,h:type==='tower'?12:3.5,hit:false,near:false,spin:random()*6});if(type==='rock'&&random()<.22)world.push({z:z+5,x:x+(random()>.5?5:-5),y:0,type:'rock',w:3,h:3,hit:false,near:false})}
// === INPUT ===
addEventListener('keydown',e=>{keys[e.key.toLowerCase()]=true;if(['arrowleft','arrowright','arrowup','arrowdown',' '].includes(e.key.toLowerCase()))e.preventDefault();if(mode==='title'&&e.key==='Enter')reset();if(mode==='over'&&(e.key.toLowerCase()==='r'||e.key==='Enter'))reset();if(mode==='play'&&e.key===' '&&!e.repeat&&energy>C.BOOST_COST){boost=.7;energy-=C.BOOST_COST;sound('boost');burst(player.x,player.y,0,'#b9ffff',14)}});addEventListener('keyup',e=>keys[e.key.toLowerCase()]=false);$('start').onclick=reset;$('restart').onclick=reset;
// === FX ===
function burst(x,y,z,color,n=10){for(let i=0;i<n;i++)particles.push({x:x,y:y,z:z,vx:(random()-.5)*12,vy:(random()-.5)*12,vz:(random()-.5)*10-5,life:.35+random()*.5,color})}function flashHit(big=false){shake=big?.45:.18;flash=big?.45:.16}
// === UPDATE ===
function update(dt){if(mode!=='play')return;runTime+=dt;let speed=Math.min(C.MAX,C.BASE+C.ACC*runTime)+(boost?C.BOOST:0);dist+=speed*dt;let ix=(keys.d||keys.arrowright?1:0)-(keys.a||keys.arrowleft?1:0),iy=(keys.s||keys.arrowdown?1:0)-(keys.w||keys.arrowup?1:0);player.vx+=(ix*C.STRAFE-player.vx)*Math.min(1,dt/.1);player.vy+=(iy*C.PITCH-player.vy)*Math.min(1,dt/.1);player.x+=player.vx*dt;player.y+=player.vy*dt;player.x=Math.max(-14,Math.min(14,player.x));player.y=Math.max(-6,Math.min(6,player.y));player.tilt+=(player.vx*.035-player.tilt)*Math.min(1,dt/.11);boost=Math.max(0,boost-dt);energy-=C.ENERGY_DRAIN*dt;let sun=1-runTime*C.SUNSET;let lit=Math.max(0,1-Math.abs(player.x)/15);energy-=C.SHADOW_DRAIN*dt*(1-lit*.65);if(sun<.03||energy<=0){end('THE LIGHT RAN OUT');return}let gap=speed*dt;for(let o of world)o.z-=gap;let far=world[world.length-1]?.z||60;if(far<180)spawn(far+18+random()*18);for(let o of world){let dx=Math.abs(player.x-o.x),dy=Math.abs(player.y-o.y);if((o.type==='rock'||o.type==='tower')&&o.z<8&&o.z>-5&&!o.hit){if(dx<o.w/2+1.15&&dy<o.h/2+1){o.hit=true;burst(player.x,player.y,o.z,C.COLORS.pink,28);sound('crash');flashHit(true);end('IMPACT DETECTED');return}if(!o.near&&o.z<4&&dx<o.w/2+3){o.near=true;score+=180*mult;combo++;mult=Math.min(9,1+Math.floor(combo/3));shake=.12;burst(o.x,player.y,o.z,C.COLORS.cyan,9);sound('token')}}if((o.type==='cell'||o.type==='token')&&o.z<3&&o.z>-3&&dx<o.w/2+1.5&&dy<o.h/2+2&&!o.collected){o.collected=true;if(o.type==='cell'){energy=Math.min(100,energy+25);score+=80*mult;sound('pick');burst(o.x,o.y,o.z,C.COLORS.gold,16)}if(o.type==='token'){score+=350*mult;combo++;mult=Math.min(9,1+Math.floor(combo/3));sound('token');burst(o.x,o.y,o.z,C.COLORS.cyan,18)}}}world=world.filter(o=>o.z>-24&&!o.collected);for(let p of particles){p.x+=p.vx*dt;p.y+=p.vy*dt;p.z+=p.vz*dt;p.life-=dt}particles=particles.filter(p=>p.life>0);shake=Math.max(0,shake-dt);flash=Math.max(0,flash-dt);$('dist').textContent=Math.floor(dist)+'m';$('score').textContent=String(Math.floor(score)).padStart(6,'0');$('mult').textContent='x'+mult;$('speed').textContent=Math.floor(speed);$('energy').style.width=energy+'%';$('energyText').textContent=Math.ceil(energy)+'%'}
function end(reason){mode='over';$('hud').style.display='none';$('gameover').classList.remove('hidden');$('result').textContent=reason+' · DISTANCE '+Math.floor(dist)+'m · SCORE '+Math.floor(score);let hi=+localStorage.solarHigh||0;if(score>hi){localStorage.solarHigh=Math.floor(score);$('record').textContent='NEW RECORD // '+Math.floor(score)}else $('record').textContent='BEST // '+hi;sound('crash')}
// === RENDER ===
function project(x,y,z){let horizon=H*.43,scale=420/(z+28);return{x:W/2+x*scale,y:horizon-y*scale+(z<0?0:0),s:scale}}function poly(points,fill,stroke){ctx.beginPath();points.forEach((p,i)=>i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y));ctx.closePath();ctx.fillStyle=fill;ctx.fill();if(stroke){ctx.strokeStyle=stroke;ctx.stroke()}}
function render(){let t=performance.now()/1000;let sunY=H*.38+runTime*H*.00042;let g=ctx.createLinearGradient(0,0,0,H);g.addColorStop(0,'#08142f');g.addColorStop(.42,'#263e72');g.addColorStop(.7,'#e26b72');g.addColorStop(1,'#160f27');ctx.fillStyle=g;ctx.fillRect(0,0,W,H);let sx=W*.5,sy=Math.min(H*.52,sunY);ctx.shadowBlur=45;ctx.shadowColor=C.COLORS.sun;ctx.fillStyle=C.COLORS.sun;ctx.beginPath();ctx.arc(sx,sy,Math.max(24,W*.045),0,7);ctx.fill();ctx.shadowBlur=0;for(let i=0;i<30;i++){let x=(i*97+seed)%W,y=(i*53+seed*.2)%(H*.38);ctx.fillStyle='#ffffff55';ctx.fillRect(x,y,1.5,1.5)}let horizon=H*.43;ctx.fillStyle='#081426';ctx.fillRect(0,horizon,W,H-horizon);ctx.strokeStyle='#28718a55';ctx.lineWidth=1;for(let z=10;z<190;z+=13){let a=project(-16,0,z),b=project(16,0,z);ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke()}for(let x=-14;x<=14;x+=7){let a=project(x,0,4),b=project(x,0,190);ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke()}let sorted=[...world].sort((a,b)=>b.z-a.z);for(let o of sorted){if(o.z<0)continue;let p=project(o.x,o.y,o.z),q=project(o.x,o.y+o.h,o.z),w=o.w*p.s/2;let col=o.type==='tower'?'#352c55':'#1a334f';poly([{x:p.x-w,y:p.y},{x:p.x+w,y:p.y},{x:q.x+w,qy:0,y:q.y},{x:q.x-w,y:q.y}],col,'#6df0e855');if(o.type==='cell'||o.type==='token'){ctx.fillStyle=o.type==='cell'?C.COLORS.gold:C.COLORS.cyan;ctx.shadowBlur=18;ctx.shadowColor=ctx.fillStyle;ctx.beginPath();ctx.arc(p.x,p.y-p.s*1.5,Math.max(4,p.s*.8),0,7);ctx.fill();ctx.shadowBlur=0}}for(let p of particles){let q=project(p.x,p.y,p.z+8);ctx.globalAlpha=Math.max(0,p.life*2);ctx.fillStyle=p.color;ctx.fillRect(q.x,q.y,3+p.life*5,3+p.life*5)}ctx.globalAlpha=1;let pp=project(player.x,player.y,0);ctx.save();ctx.translate(pp.x,pp.y);ctx.rotate(player.tilt);ctx.shadowBlur=22;ctx.shadowColor=C.COLORS.cyan;poly([{x:0,y:-27},{x:12,y:15},{x:0,y:10},{x:-12,y:15}],C.COLORS.cyan,'#fff');poly([{x:-7,y:11},{x:-24,y:20},{x:-5,y:18}],C.COLORS.pink);poly([{x:7,y:11},{x:24,y:20},{x:5,y:18}],C.COLORS.pink);ctx.shadowBlur=0;ctx.fillStyle='#fff8a8';ctx.fillRect(-3,17,6,10);ctx.restore();if(boost){ctx.fillStyle='#fff';ctx.globalAlpha=.55;ctx.fillRect(pp.x-70,pp.y+20,140,2)}if(speedLines()){ctx.strokeStyle='#b8ffff88';for(let i=0;i<20;i++){let x=random()*W,y=H*.45+random()*H*.5;ctx.beginPath();ctx.moveTo(x,y);ctx.lineTo(x+(x-W/2)*.08,y+40);ctx.stroke()}}if(shake){ctx.fillStyle='#fff';ctx.globalAlpha=shake*1.4;ctx.fillRect(0,0,W,H)}if(flash){ctx.fillStyle='#ffefff';ctx.globalAlpha=flash;ctx.fillRect(0,0,W,H)}ctx.globalAlpha=1}function speedLines(){return mode==='play'&&runTime>12}
// === LOOP ===
function loop(now){let dt=Math.min(.033,(now-last)/1000||.016);last=now;update(dt);ctx.save();if(shake)ctx.translate((Math.random()-.5)*shake*22,(Math.random()-.5)*shake*22);render();ctx.restore();requestAnimationFrame(loop)}requestAnimationFrame(loop);
</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"full","sessionId":"3dece532-1789-466e-99a3-f834db79e400","tokensIn":188958,"tokensOut":8683,"tokensTotal":197641,"turns":6,"toolCalls":5,"failedToolCalls":0,"timestamp":"2026-07-31T01:16:11.184Z"} -->