Update index.html

index.html

@@ -160,3 +160,227 @@ for(let z=40; z<=1600; ){
 }
 
 // ---------- Paper glider ----------
+function makeGlider(){
+  const g=new THREE.Group();
+  const paper=new THREE.MeshLambertMaterial({color:0xf4f6f8, side:THREE.DoubleSide});
+  const bodyS=new THREE.Shape(); bodyS.moveTo(0,0); bodyS.lineTo(-.22,.55); bodyS.lineTo(-.42,1.05); bodyS.lineTo(.42,1.05); bodyS.lineTo(.22,.55); bodyS.lineTo(0,0);
+  const body=new THREE.Mesh(new THREE.ExtrudeGeometry(bodyS,{depth:.03,bevelEnabled:false}),paper);
+  const wing=(d)=>{const s=new THREE.Shape(); s.moveTo(0,.2); s.lineTo(d*.32,.85); s.lineTo(d*1.0,.52); s.lineTo(0,.2); return new THREE.Mesh(new THREE.ExtrudeGeometry(s,{depth:.02,bevelEnabled:false}),paper);};
+  const L=wing(-1), Rg=wing(1); L.position.y=.01; Rg.position.y=.015; L.rotation.x=.18; Rg.rotation.x=.18;
+  const crease=new THREE.Line(new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0,.03,0),new THREE.Vector3(0,.03,1.05)]),
+                              new THREE.LineBasicMaterial({color:0xdedede}));
+  g.add(body,L,Rg,crease); g.rotation.order="ZXY"; g.rotation.x=-Math.PI/2; return g;
+}
+const glider=makeGlider(); scene.add(glider);
+
+// ---------- State & physics ----------
+let state='aim'; // aim | fly | end
+let power=0, maxPower=16, charging=false;
+let stam=100, maxStam=100, combo=1, comboTimer=0, comboWindow=2.6;
+let dist=0, score=0, best= Number(localStorage.getItem('zen_sky_best')||0);
+const vel=new THREE.Vector3(0,0,0); const forward={cur:0};
+const gravity=5.2, drag=.013;
+let pitch=0, bank=0;
+let slowMo=1.0; // 1 normal, <1 in bubbles
+let showBubbles=false;
+
+// UI refs
+const $=id=>document.getElementById(id);
+const elDist=$('dist'), elScore=$('score'), elPow=$('pBar'), elStam=$('sBar'), center=$('center');
+const headline=$('headline'), details=$('details'), badges=$('badges');
+$('btnRestart').onclick=()=>reset(); $('btnScreenshot').onclick=()=>photo();
+
+function setBar(el,v){ el.style.width = `${THREE.MathUtils.clamp(v,0,100)}%`; }
+
+// Controls
+let key={L:false,R:false,U:false,D:false,B:false}, tL=false,tR=false;
+addEventListener('keydown',e=>{
+  if(e.code==='Space'){ if(state==='aim'){charging=true;e.preventDefault();} else if(state==='end'){reset();}}
+  if(e.code==='ArrowLeft') key.L=true;
+  if(e.code==='ArrowRight') key.R=true;
+  if(e.code==='ArrowUp') key.U=true;
+  if(e.code==='ArrowDown') key.D=true;
+  if(e.code==='ShiftLeft'||e.code==='ShiftRight') key.B=true;
+  if(e.code==='KeyT') showBubbles = !showBubbles;
+  if(e.code==='KeyP') photo();
+  if(e.code==='Escape') reset();
+  if(e.code==='KeyR'){ // reroll seed
+    const newSeed=Math.floor(Math.random()*1e9).toString(36);
+    location.search='?seed='+newSeed;
+  }
+});
+addEventListener('keyup',e=>{
+  if(e.code==='Space' && state==='aim'){ launch(); e.preventDefault(); }
+  if(e.code==='ArrowLeft') key.L=false;
+  if(e.code==='ArrowRight') key.R=false;
+  if(e.code==='ArrowUp') key.U=false;
+  if(e.code==='ArrowDown') key.D=false;
+  if(e.code==='ShiftLeft'||e.code==='ShiftRight') key.B=false;
+});
+$('touchL').addEventListener('touchstart',()=>tL=true,{passive:true});
+$('touchL').addEventListener('touchend',()=>tL=false,{passive:true});
+$('touchR').addEventListener('touchstart',()=>tR=true,{passive:true});
+$('touchR').addEventListener('touchend',()=>tR=false,{passive:true});
+addEventListener('mousedown',()=>{ if(state==='aim')charging=true; });
+addEventListener('mouseup',()=>{ if(state==='aim'&&charging)launch(); });
+
+function reset(){
+  state='aim'; power=0; charging=false; stam=maxStam; combo=1; comboTimer=0; dist=0; score=0; forward.cur=0; vel.set(0,0,0); pitch=0; bank=0; slowMo=1.0;
+  glider.position.set(0, 2.5, 0); glider.rotation.set(-Math.PI/2,0,0);
+  camera.position.set(0, glider.position.y+4, glider.position.z-10);
+  center.style.display='none'; badges.innerHTML='';
+}
+function launch(){
+  forward.cur = THREE.MathUtils.mapLinear(power,0,maxPower,9,28);
+  vel.y = Math.sin(Math.PI/4)*(power*.68);
+  state='fly'; power=0; charging=false;
+}
+reset();
+
+// ---------- Helpers ----------
+const clock=new THREE.Clock();
+function photo(){
+  const was= center.style.display;
+  center.style.display='none';
+  const d=renderer.domElement.toDataURL('image/png');
+  const a=document.createElement('a'); a.href=d; a.download=`zen-skylines-${Date.now()}.png`; a.click();
+  center.style.display=was;
+}
+function endRun(reason, earned=[]){
+  state='end';
+  if(score>best){ best=score; localStorage.setItem('zen_sky_best', String(Math.floor(best))); }
+  headline.textContent = reason||'Run Ended';
+  details.textContent = `Distance: ${dist.toFixed(1)} m • Score: ${Math.floor(score)} • Combo ×${combo} • Best ${Math.floor(best)}`;
+  badges.innerHTML = earned.map(t=>`<span class="badge">${t}</span>`).join(' ');
+  center.style.display='grid';
+}
+
+// ---------- Gameplay loop ----------
+function animate(){
+  requestAnimationFrame(animate);
+  const rawDt = Math.min(.033, clock.getDelta());
+  const dt = rawDt * slowMo;
+
+  // sky parallax
+  skyTex.rotation = Math.min(1, dist/1600) * Math.PI * .42; skyTex.needsUpdate=true;
+
+  // UI
+  setBar(elPow, state==='aim' ? (power/maxPower)*100 : 0);
+  setBar(elStam, (stam/maxStam)*100);
+  elDist.textContent = `Distance: ${dist.toFixed(1)} m`;
+  elScore.textContent = `Score: ${Math.floor(score)} | Combo ×${combo} | Best ${Math.floor(best)}`;
+
+  // aim charging
+  if(state==='aim' && charging){ power=Math.min(maxPower, power + 26*rawDt); }
+
+  if(state==='fly'){
+    // flow-field wind force at glider
+    const f = flowVector(glider.position.x, glider.position.y, glider.position.z, performance.now()/1000);
+    // steering
+    const steerL = key.L||tL, steerR = key.R||tR;
+    const bankT = (steerL?-1:0)+(steerR?1:0); bank = THREE.MathUtils.lerp(bank, bankT*Math.PI/5, .1);
+    const pitchT = (key.U?.35:0) + (key.D?-.35:0); pitch = THREE.MathUtils.lerp(pitch, pitchT, .12);
+
+    // forward speed & drag
+    forward.cur *= (1 - drag);
+    if((key.B||key.D) && stam>0){ forward.cur += 8*dt; vel.y += 5.5*dt; stam -= 18*dt; } else { stam += 4*dt; }
+    stam = THREE.MathUtils.clamp(stam, 0, maxStam);
+
+    // lift vs gravity
+    const lift=(Math.sin(pitch)*(forward.cur+6))*0.95 + f.y*0.8;
+    vel.y += (lift - gravity) * dt;
+
+    // lateral control + wind push
+    const lateral = (steerR?-1:0)+(steerL?1:0);
+    glider.position.x += (lateral*3.6 + f.x*0.9) * dt;
+
+    // forward + wind bias
+    glider.position.z += (forward.cur + 10 + f.z*1.3) * dt;
+
+    // vertical integrate
+    glider.position.y += vel.y * dt;
+    // clamp vertical play space
+    if(glider.position.y<0.5){ glider.position.y=0.5; vel.y=Math.max(0,vel.y); }
+    if(glider.position.y>18){ glider.position.y=18; vel.y=Math.min(0,vel.y); }
+
+    // orientation
+    glider.rotation.x = -Math.PI/2 + (-pitch*.6);
+    glider.rotation.z = bank*.8;
+
+    // move flow ribbons
+    for(const rb of ribbons){
+      rb.position.y += Math.sin((performance.now()+rb.position.z*40)/7000)*0.02;
+      rb.position.x += Math.sin((performance.now()+rb.position.z*55)/6000)*0.02;
+    }
+
+    // walls motion & collisions (graze bonus if within 0.6..1.2 of surface)
+    let earned=[];
+    for(const w of walls){
+      w.position.x += w.userData.vx*dt;
+      w.position.y += w.userData.vy*dt;
+      if(w.position.x<-12||w.position.x>12) w.userData.vx*=-1;
+      if(w.position.y<0.5||w.position.y>8) w.userData.vy*=-1;
+
+      // AABB approx
+      const dx=Math.abs(glider.position.x - w.position.x);
+      const dy=Math.abs(glider.position.y - w.position.y);
+      const dz=Math.abs(glider.position.z - w.position.z);
+      const hx=w.geometry.parameters.width/2, hy=w.geometry.parameters.height/2, hz=0.7;
+      if(dx<hx && dy<hy && dz<hz){
+        return endRun('Storm wall impact', ['Risk-taker']);
+      }
+      // graze
+      if(dz<hz*1.25){
+        const gx = Math.abs(dx-hx), gy=Math.abs(dy-hy);
+        if((gx<1.0||gy<1.0) && rand()<0.02){ score += 6*combo; earned.push('Graze +6'); }
+      }
+    }
+
+    // rings
+    for(let i=rings.length-1;i>=0;i--){
+      const t=rings[i]; const d=glider.position.distanceTo(t.position);
+      if(d<1.55){ // collect
+        scene.remove(t); rings.splice(i,1);
+        stam = Math.min(maxStam, stam+34); combo = Math.min(12, combo+1); comboTimer = comboWindow; score += 160*combo;
+        earned.push('Ring +160×'+combo);
+      } else {
+        t.rotation.x += .6*dt; t.rotation.z += .4*dt; const s=1+.08*Math.sin(performance.now()/260+i); t.scale.set(s,s,s);
+      }
+    }
+
+    // slow-time bubbles (affect slowMo and scoring drip)
+    let inBubble=false;
+    for(const b of bubbles){
+      const d=glider.position.distanceTo(b.position);
+      if(d < b.userData.r){ inBubble=true; score += 4*combo*dt; }
+    }
+    slowMo = THREE.MathUtils.lerp(slowMo, inBubble ? 0.6 : 1.0, 0.15);
+
+    // combo decay
+    comboTimer -= dt; if(comboTimer<=0 && combo>1){ combo=Math.max(1, combo-1); comboTimer=.35; }
+
+    // progress + score drip
+    const dz=(forward.cur + 10 + f.z*1.3) * dt;
+    dist += dz; score += dz*(.9*combo);
+
+    // out-of-corridor fail
+    if(Math.abs(glider.position.x)>14) return endRun('You left the jetstream corridor', []);
+    if(glider.position.z>1650) return endRun('Finish line reached!', ['Course Clear']);
+  }
+
+  // camera chase
+  const camTarget=new THREE.Vector3(glider.position.x, glider.position.y+3.4, glider.position.z-10.5);
+  camera.position.lerp(camTarget,.12); camera.lookAt(glider.position);
+
+  // bubble view toggle visuals
+  for(const b of bubbles){ b.material.opacity = showBubbles? .28 : .18; }
+
+  renderer.render(scene,camera);
+}
+animate();
+
+// resize
+addEventListener('resize',()=>{ camera.aspect=innerWidth/innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth,innerHeight); });
+</script>
+</body>
+</html>