Spaces:

dwishank
/

VOIDDASH

Sleeping

App Files Files Community

dwishank commited on 19 days ago

Commit

70d5bf5

verified ·

1 Parent(s): e60ea2c

Update app.py

Browse files

Files changed (1) hide show

app.py +304 -58

app.py CHANGED Viewed

@@ -1,8 +1,6 @@
 import streamlit as st
 import streamlit.components.v1 as components
 st.set_page_config(page_title="Void Dash", page_icon="⚡", layout="wide")
 st.markdown("""
 <style>
 body, .stApp { background:#05070f !important; }
@@ -12,7 +10,6 @@ h1 { color:#a99ff7; font-family:monospace; text-align:center; margin:0; }
 p  { color:#7a7f94; text-align:center; font-family:monospace; font-size:13px; }
 </style>
 """, unsafe_allow_html=True)
 st.markdown("<h1>⚡ VOID DASH</h1>", unsafe_allow_html=True)
 st.markdown("<p>Tap / Space = jump &nbsp;|&nbsp; Hold = glide &nbsp;|&nbsp; Grab cyan boost &nbsp;|&nbsp; Dodge alien bullets!</p>", unsafe_allow_html=True)
@@ -26,7 +23,7 @@ body { background:#05070f; display:flex; flex-direction:column; align-items:cent
 canvas { display:block; border-radius:12px; cursor:pointer; }
 #hud {
   display:flex; justify-content:space-between; align-items:center;
-  width:600px; padding:6px 10px; font-family:monospace; font-size:13px;
   color:#ccc; background:#0a0c14; border-radius:0 0 10px 10px;
 }
 #lives-bar span { display:inline-block; width:10px; height:10px; border-radius:50%; background:#f76464; margin:0 2px; }
@@ -35,25 +32,66 @@ canvas { display:block; border-radius:12px; cursor:pointer; }
 #wrap { position:relative; }
 #msg {
   position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
-  color:#fff; text-align:center; pointer-events:none; min-width:220px;
   font-family:monospace;
 }
 #msg h2 { font-size:22px; font-weight:500; margin:0 0 6px; }
 #msg p  { font-size:12px; color:#888; margin:2px 0; }
 .tag { display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px; margin:2px; }
 </style>
 </head>
 <body>
-<div id="wrap">
-  <canvas id="gc" width="600" height="360"></canvas>
-  <div id="msg">
-    <h2 style="color:#a99ff7">VOID DASH</h2>
-    <p>Tap / Space = jump &nbsp;|&nbsp; Hold = glide</p>
-    <p style="margin-top:8px;">
-      <span class="tag" style="background:#1a3a1a;color:#3ecf8e">BOOST = speed + shield</span>
-      <span class="tag" style="background:#3a1a1a;color:#f76464">ALIENS fire bullets!</span>
-    </p>
-    <p style="margin-top:6px;color:#7c6af7;font-size:13px;">Tap to start</p>
   </div>
 </div>
 <div id="hud">
@@ -64,16 +102,50 @@ canvas { display:block; border-radius:12px; cursor:pointer; }
   </span>
   <span id="boost-txt" style="color:#3ecf8e;font-size:12px;min-width:60px;text-align:right;"></span>
 </div>
 <script>
 const C=document.getElementById('gc'), ctx=C.getContext('2d');
 const W=C.width, H=C.height;
 const GRAV=0.38,JUMP=-7.2,GLIDE=0.14,PIPE_W=44,GAP=128,PIPE_SPD=2.8,PIPE_INT=185;
 const MAX_LIVES=3;
 let state='idle',frame=0,score=0,best=0,held=false;
-let bird,pipes,enemies,bullets,particles,powerups;
-let lives,shield,boostTimer,invTimer;
 function initLivesUI(){
   const b=document.getElementById('lives-bar'); b.innerHTML='';
   for(let i=0;i<MAX_LIVES;i++) b.appendChild(Object.assign(document.createElement('span'),{id:'life'+i}));
@@ -81,15 +153,26 @@ function initLivesUI(){
 function updateLivesUI(){ for(let i=0;i<MAX_LIVES;i++){ const s=document.getElementById('life'+i); if(s) s.style.background=i<lives?'#f76464':'#333'; } }
 function updateShieldUI(){ document.getElementById('shield-fill').style.width=Math.round(shield)+'%'; }
 function updateBoostUI(){ document.getElementById('boost-txt').textContent=boostTimer>0?'BOOST '+Math.ceil(boostTimer/60)+'s':''; }
 function init(){
-  bird={x:110,y:H/2,vy:0,r:10,trail:[]};
-  pipes=[];enemies=[];bullets=[];particles=[];powerups=[];
-  frame=0;score=0;lives=MAX_LIVES;shield=0;boostTimer=0;invTimer=0;
   document.getElementById('sc').textContent=0;
-  updateLivesUI();updateShieldUI();updateBoostUI();
 }
 function jump(){
   if(state==='idle'||state==='dead'){state='play';document.getElementById('msg').style.display='none';init();}
   if(state==='play') bird.vy=JUMP;
@@ -102,14 +185,28 @@ C.addEventListener('touchend',e=>{e.preventDefault();release();},{passive:false}
 window.addEventListener('keydown',e=>{if(e.code==='Space'){e.preventDefault();jump();}});
 window.addEventListener('keyup',e=>{if(e.code==='Space')release();});
 function rnd(a,b){return a+Math.random()*(b-a);}
 function hsl(h,s,l){return `hsl(${h},${s}%,${l}%)`;}
 function spawnPipe(){ const top=55+Math.random()*(H-GAP-95); pipes.push({x:W+10,top,scored:false}); }
 function spawnEnemy(){ enemies.push({x:W+20,y:rnd(30,H-30),vy:rnd(-0.6,0.6),r:14,shootTimer:rnd(40,100),hp:2,frame:0}); }
-function spawnPowerup(){ powerups.push({x:W+10,y:rnd(50,H-50),type:Math.random()<0.6?'boost':'heart',r:12,bob:Math.random()*Math.PI*2}); }
 function spawnParticles(x,y,color,n=8){ for(let i=0;i<n;i++){ const a=Math.random()*Math.PI*2,spd=rnd(1.5,4.5); particles.push({x,y,vx:Math.cos(a)*spd,vy:Math.sin(a)*spd,life:1,color}); } }
 function drawBird(b,t){
   for(let i=0;i<b.trail.length;i++){
     const pt=b.trail[i],a=(i/b.trail.length)*0.3;
@@ -117,26 +214,48 @@ function drawBird(b,t){
     ctx.fillStyle=`hsla(${(t*1.5+i*5)%360},90%,65%,${a})`;ctx.fill();
   }
   if(boostTimer>0){ctx.beginPath();ctx.arc(b.x,b.y,b.r*2.2,0,Math.PI*2);ctx.fillStyle=`rgba(62,207,207,${0.15+0.1*Math.sin(t*0.3)})`;ctx.fill();}
   if(invTimer>0&&Math.floor(invTimer/4)%2===0) return;
-  ctx.beginPath();ctx.arc(b.x,b.y,b.r,0,Math.PI*2);ctx.fillStyle=boostTimer>0?'#3ecfcf':'#fff';ctx.fill();
   ctx.beginPath();ctx.arc(b.x-3,b.y-3,b.r*0.38,0,Math.PI*2);ctx.fillStyle='rgba(0,0,0,0.25)';ctx.fill();
 }
 function drawEnemy(e,t){
   e.frame++;
   const bob=Math.sin(e.frame*0.05)*3,bx=e.x,by=e.y+bob;
   ctx.save();ctx.translate(bx,by);
   ctx.beginPath();ctx.ellipse(0,0,e.r*1.3,e.r,0,0,Math.PI*2);
-  ctx.fillStyle=hsl((t*0.8)%360,80,35);ctx.fill();
-  ctx.strokeStyle=hsl((t*0.8+30)%360,90,60);ctx.lineWidth=1.5;ctx.stroke();
-  ctx.fillStyle=hsl((t*1.2)%360,100,70);
-  for(let i=-1;i<=1;i+=2){ctx.beginPath();ctx.arc(i*5,-3,3,0,Math.PI*2);ctx.fill();}
-  ctx.strokeStyle='#f76464';ctx.lineWidth=1;
-  for(let i=0;i<3;i++){ctx.beginPath();ctx.moveTo(-e.r*1.3+i*e.r*0.7,-e.r);ctx.lineTo(-e.r*1.3+i*e.r*0.7+3,-e.r-6);ctx.stroke();}
   ctx.restore();
-  for(let h=0;h<2;h++){ctx.fillStyle=h<e.hp?'#f76464':'#333';ctx.fillRect(e.x-10+h*12,e.y+bob-e.r-10,10,4);}
 }
 function drawPowerup(p,t){
   p.bob+=0.06;const y=p.y+Math.sin(p.bob)*5;
   ctx.save();ctx.translate(p.x,y);
@@ -144,20 +263,56 @@ function drawPowerup(p,t){
     ctx.beginPath();ctx.moveTo(0,-p.r);ctx.lineTo(p.r*0.8,p.r*0.5);ctx.lineTo(-p.r*0.8,p.r*0.5);ctx.closePath();
     ctx.fillStyle='rgba(62,207,207,0.9)';ctx.fill();ctx.strokeStyle='#fff';ctx.lineWidth=1;ctx.stroke();
     ctx.fillStyle='#fff';ctx.font='bold 9px monospace';ctx.textAlign='center';ctx.fillText('B',0,4);
-  } else {
     ctx.beginPath();ctx.arc(0,0,p.r,0,Math.PI*2);ctx.fillStyle='rgba(247,100,100,0.85)';ctx.fill();
     ctx.strokeStyle='#fff';ctx.lineWidth=1;ctx.stroke();
     ctx.fillStyle='#fff';ctx.font='bold 11px monospace';ctx.textAlign='center';ctx.fillText('+',0,4);
   }
   ctx.restore();
 }
 function drawBullet(bl){
-  ctx.beginPath();ctx.ellipse(bl.x,bl.y,6,3,Math.atan2(bl.vy,bl.vx),0,Math.PI*2);
-  ctx.fillStyle='#f7c948';ctx.fill();
-  ctx.beginPath();ctx.arc(bl.x,bl.y,2,0,Math.PI*2);ctx.fillStyle='#fff';ctx.fill();
 }
 function drawPipe(p,t){
   const g1=ctx.createLinearGradient(p.x,0,p.x+PIPE_W,0);
   g1.addColorStop(0,hsl((t*0.6)%360,60,25));g1.addColorStop(1,hsl((t*0.6+40)%360,60,40));
@@ -167,11 +322,18 @@ function drawPipe(p,t){
   ctx.strokeStyle=hsl((t*1.1)%360,90,60);ctx.lineWidth=1.2;ctx.stroke();
 }
 function drawGrid(t){
-  ctx.strokeStyle='rgba(80,60,200,0.06)';ctx.lineWidth=0.5;
   const spd=boostTimer>0?PIPE_SPD*2:PIPE_SPD,off=(t*spd*0.35)%40;
   for(let x=-off;x<W;x+=40){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke();}
   for(let y=0;y<H;y+=40){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke();}
 }
 function drawStars(t){
   for(let i=0;i<55;i++){
@@ -179,6 +341,8 @@ function drawStars(t){
     ctx.fillStyle=`rgba(255,255,255,${a})`;ctx.fillRect(sx,sy,1.5,1.5);
   }
 }
 function drawParticles(){
   for(let i=particles.length-1;i>=0;i--){
     const p=particles[i];
@@ -189,22 +353,31 @@ function drawParticles(){
   }
 }
-function circle(ax,ay,ar,bx,by,br){return Math.hypot(ax-bx,ay-by)<ar+br;}
-function collidesPipe(b,p){return b.x+b.r>p.x&&b.x-b.r<p.x+PIPE_W&&(b.y-b.r<p.top||b.y+b.r>p.top+GAP);}
 function takeDamage(x,y){
   if(invTimer>0) return;
   if(shield>=30){shield=Math.max(0,shield-30);updateShieldUI();spawnParticles(bird.x,bird.y,'#3ecfcf',6);return;}
   lives--;updateLivesUI();invTimer=90;spawnParticles(x,y,'#f76464',10);
   if(lives<=0) die();
 }
 function die(){
   state='dead';
   const msg=document.getElementById('msg');msg.style.display='';
-  msg.innerHTML=`<h2 style="color:#f76464">DESTROYED</h2><p>Score: ${score} &nbsp;|&nbsp; Best: ${best}</p><p style="margin-top:6px;color:#7c6af7;font-size:13px;">Tap / Space to retry</p>`;
 }
 function loop(){
   requestAnimationFrame(loop);
   const t=frame;
@@ -223,19 +396,31 @@ function loop(){
   if(state==='play'){
     frame++;
     const spd=boostTimer>0?PIPE_SPD*1.8:PIPE_SPD;
-    if(boostTimer>0){boostTimer--;if(frame%60===0||boostTimer===0) updateBoostUI();}
     if(invTimer>0) invTimer--;
     bird.vy+=held?GRAV-GLIDE:GRAV;
     bird.vy=Math.max(-10,Math.min(bird.vy,12));
     bird.y+=bird.vy;
     bird.trail.push({x:bird.x,y:bird.y});
     if(bird.trail.length>16) bird.trail.shift();
     if(frame%PIPE_INT===0) spawnPipe();
     if(frame%220===0) spawnEnemy();
-    if(frame%300===0) spawnPowerup();
     for(let i=pipes.length-1;i>=0;i--){
       pipes[i].x-=spd;
       if(!pipes[i].scored&&pipes[i].x+PIPE_W<bird.x){
@@ -248,69 +433,130 @@ function loop(){
       if(collidesPipe(bird,pipes[i])) takeDamage(bird.x,bird.y);
     }
     for(let i=enemies.length-1;i>=0;i--){
       const e=enemies[i];
-      e.x-=spd*0.55;e.y+=e.vy;
       if(e.y<20||e.y>H-20) e.vy*=-1;
-      e.shootTimer--;
-      if(e.shootTimer<=0){
-        const dx=bird.x-e.x,dy=bird.y-e.y,dist=Math.hypot(dx,dy),s2=4.5;
-        bullets.push({x:e.x-e.r,y:e.y,vx:(dx/dist)*s2,vy:(dy/dist)*s2});
-        e.shootTimer=rnd(60,110);spawnParticles(e.x,e.y,'#f7c948',3);
       }
       if(e.x<-30){enemies.splice(i,1);continue;}
       drawEnemy(e,t);
       if(circle(bird.x,bird.y,bird.r,e.x,e.y,e.r*1.2)) takeDamage(e.x,e.y);
     }
     for(let i=bullets.length-1;i>=0;i--){
-      const bl=bullets[i];bl.x+=bl.vx;bl.y+=bl.vy;
       if(bl.x<-10||bl.x>W+10||bl.y<-10||bl.y>H+10){bullets.splice(i,1);continue;}
       drawBullet(bl);
-      if(circle(bird.x,bird.y,bird.r,bl.x,bl.y,5)){bullets.splice(i,1);takeDamage(bl.x,bl.y);}
     }
     for(let i=powerups.length-1;i>=0;i--){
       const p=powerups[i];p.x-=spd*0.5;
       if(p.x<-20){powerups.splice(i,1);continue;}
       drawPowerup(p,t);
       if(circle(bird.x,bird.y,bird.r,p.x,p.y+Math.sin(p.bob)*5,p.r)){
-        if(p.type==='boost'){boostTimer=300;shield=Math.min(100,shield+40);spawnParticles(p.x,p.y,'#3ecfcf',12);updateShieldUI();updateBoostUI();}
-        else{lives=Math.min(MAX_LIVES,lives+1);spawnParticles(p.x,p.y,'#f76464',10);updateLivesUI();}
         powerups.splice(i,1);
       }
     }
-    drawParticles();drawBird(bird,t);
     if(bird.y-bird.r<0||bird.y+bird.r>H){takeDamage(bird.x,bird.y);bird.vy*=-0.5;bird.y=Math.max(bird.r,Math.min(H-bird.r,bird.y));}
     ctx.fillStyle=`hsla(${t%360},80%,80%,0.85)`;
     ctx.font='500 26px monospace';ctx.textAlign='center';
     ctx.fillText(score,W/2,40);ctx.textAlign='left';
     if(boostTimer>0){ctx.fillStyle='rgba(62,207,207,0.7)';ctx.font='bold 11px monospace';ctx.textAlign='right';ctx.fillText('BOOST',W-12,20);ctx.textAlign='left';}
   }
 }
-initLivesUI();init();loop();
 </script>
 </body>
 </html>
 """
-components.html(GAME_HTML, height=430, scrolling=False)
 st.markdown("""
 <div style="text-align:center;margin-top:8px;">
   <span style="background:#1a3a1a;color:#3ecf8e;padding:3px 10px;border-radius:10px;font-size:12px;font-family:monospace;margin:4px;">
-    Cyan triangle = BOOST (speed + shield)
   </span>
   <span style="background:#3a1a1a;color:#f76464;padding:3px 10px;border-radius:10px;font-size:12px;font-family:monospace;margin:4px;">
-    Red circle = +1 Life
   </span>
   <span style="background:#1a1a3a;color:#a99ff7;padding:3px 10px;border-radius:10px;font-size:12px;font-family:monospace;margin:4px;">
-    Aliens fire aimed bullets!
   </span>
 </div>
 """, unsafe_allow_html=True)

 import streamlit as st
 import streamlit.components.v1 as components
 st.set_page_config(page_title="Void Dash", page_icon="⚡", layout="wide")
 st.markdown("""
 <style>
 body, .stApp { background:#05070f !important; }
 p  { color:#7a7f94; text-align:center; font-family:monospace; font-size:13px; }
 </style>
 """, unsafe_allow_html=True)
 st.markdown("<h1>⚡ VOID DASH</h1>", unsafe_allow_html=True)
 st.markdown("<p>Tap / Space = jump &nbsp;|&nbsp; Hold = glide &nbsp;|&nbsp; Grab cyan boost &nbsp;|&nbsp; Dodge alien bullets!</p>", unsafe_allow_html=True)
 canvas { display:block; border-radius:12px; cursor:pointer; }
 #hud {
   display:flex; justify-content:space-between; align-items:center;
+  width:760px; padding:6px 10px; font-family:monospace; font-size:13px;
   color:#ccc; background:#0a0c14; border-radius:0 0 10px 10px;
 }
 #lives-bar span { display:inline-block; width:10px; height:10px; border-radius:50%; background:#f76464; margin:0 2px; }
 #wrap { position:relative; }
 #msg {
   position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
+  color:#fff; text-align:center; pointer-events:none; min-width:260px;
   font-family:monospace;
 }
 #msg h2 { font-size:22px; font-weight:500; margin:0 0 6px; }
 #msg p  { font-size:12px; color:#888; margin:2px 0; }
 .tag { display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px; margin:2px; }
+/* Leaderboard panel */
+#lb-panel {
+  position:absolute; top:0; right:-210px; width:200px; height:100%;
+  background:#08091a; border-radius:12px; border:1px solid #1e1f3a;
+  font-family:monospace; padding:10px 8px; overflow:hidden;
+}
+#lb-panel h3 { color:#a99ff7; font-size:13px; text-align:center; margin-bottom:8px; letter-spacing:2px; }
+.lb-row { display:flex; justify-content:space-between; align-items:center;
+  padding:3px 6px; border-radius:6px; margin:2px 0; font-size:11px; }
+.lb-row.gold { background:#2a2000; color:#f7c948; }
+.lb-row.silver { background:#1a1a28; color:#b0b8d0; }
+.lb-row.bronze { background:#1e1208; color:#cd7f32; }
+.lb-row.normal { background:#0e0f1f; color:#7a7f94; }
+.lb-row.highlight { border:1px solid #a99ff7; color:#a99ff7 !important; background:#14103a !important; }
+.lb-rank { width:20px; text-align:center; font-weight:bold; }
+.lb-score { font-weight:bold; }
+.lb-empty { color:#333; font-size:11px; text-align:center; padding:20px 0; }
+/* Power-up indicator bar */
+#powerup-bar {
+  display:flex; gap:6px; justify-content:center;
+  width:760px; padding:4px 0; font-family:monospace; font-size:11px;
+}
+.pu-slot { display:flex; align-items:center; gap:4px; padding:3px 10px;
+  border-radius:8px; background:#0a0c14; color:#555; transition:all 0.3s; }
+.pu-slot.active { color:#fff; }
+.pu-slot.freeze.active { background:#0a1a2a; color:#5bb8ff; border:1px solid #3a7acf; }
+.pu-slot.gun.active { background:#1a0a2a; color:#d46bff; border:1px solid #8a3acf; }
+.pu-slot.boost.active { background:#0a2a1a; color:#3ecf8e; border:1px solid #3acf8e; }
 </style>
 </head>
 <body>
+<div style="display:flex;align-items:flex-start;gap:0;">
+  <div id="wrap">
+    <canvas id="gc" width="760" height="400"></canvas>
+    <div id="msg">
+      <h2 style="color:#a99ff7">VOID DASH</h2>
+      <p>Tap / Space = jump &nbsp;|&nbsp; Hold = glide</p>
+      <p style="margin-top:6px;">
+        <span class="tag" style="background:#1a3a1a;color:#3ecf8e">BOOST = speed + shield</span>
+        <span class="tag" style="background:#3a1a1a;color:#f76464">ALIENS fire bullets!</span>
+      </p>
+      <p style="margin-top:4px;">
+        <span class="tag" style="background:#0a1a2a;color:#5bb8ff">❄ FREEZE = stop bullets 5s</span>
+        <span class="tag" style="background:#1a0a2a;color:#d46bff">☆ GUN = shoot aliens 5s</span>
+      </p>
+      <p style="margin-top:6px;color:#7c6af7;font-size:13px;">Tap to start</p>
+    </div>
+    <!-- Leaderboard -->
+    <div id="lb-panel">
+      <h3>🏆 TOP 10</h3>
+      <div id="lb-list"><div class="lb-empty">No scores yet</div></div>
+    </div>
   </div>
 </div>
 <div id="hud">
   </span>
   <span id="boost-txt" style="color:#3ecf8e;font-size:12px;min-width:60px;text-align:right;"></span>
 </div>
+<div id="powerup-bar">
+  <div class="pu-slot boost" id="slot-boost">⚡ BOOST <span id="txt-boost"></span></div>
+  <div class="pu-slot freeze" id="slot-freeze">❄ FREEZE <span id="txt-freeze"></span></div>
+  <div class="pu-slot gun" id="slot-gun">☆ GUN <span id="txt-gun"></span></div>
+</div>
 <script>
+// ─── Storage helpers ─────────────────────────────────────────────────────────
+const LS_KEY = 'voidDashLeaderboard_v2';
+function loadScores(){ try{ return JSON.parse(localStorage.getItem(LS_KEY))||[]; }catch(e){ return []; } }
+function saveScores(arr){ try{ localStorage.setItem(LS_KEY,JSON.stringify(arr)); }catch(e){} }
+function addScore(s){
+  const arr=loadScores();
+  arr.push(s);
+  arr.sort((a,b)=>b-a);
+  const trimmed=arr.slice(0,10);
+  saveScores(trimmed);
+  return trimmed;
+}
+function renderLeaderboard(highlight){
+  const arr=loadScores();
+  const el=document.getElementById('lb-list');
+  if(!arr.length){ el.innerHTML='<div class="lb-empty">Play to set a score!</div>'; return; }
+  el.innerHTML=arr.map((s,i)=>{
+    let cls='normal';
+    if(i===0) cls='gold'; else if(i===1) cls='silver'; else if(i===2) cls='bronze';
+    if(highlight!==undefined&&s===highlight&&i===arr.indexOf(highlight)) cls+=' highlight';
+    const medals=['🥇','🥈','🥉'];
+    const rank=i<3?medals[i]:`${i+1}.`;
+    return `<div class="lb-row ${cls}"><span class="lb-rank">${rank}</span><span class="lb-score">${s}</span></div>`;
+  }).join('');
+}
+renderLeaderboard();
+// ─── Canvas setup ─────────────────────────────────────────────────────────────
 const C=document.getElementById('gc'), ctx=C.getContext('2d');
 const W=C.width, H=C.height;
 const GRAV=0.38,JUMP=-7.2,GLIDE=0.14,PIPE_W=44,GAP=128,PIPE_SPD=2.8,PIPE_INT=185;
 const MAX_LIVES=3;
 let state='idle',frame=0,score=0,best=0,held=false;
+let bird,pipes,enemies,bullets,playerBullets,particles,powerups;
+let lives,shield,boostTimer,invTimer,freezeTimer,gunTimer;
+// ─── HUD helpers ──────────────────────────────────────────────────────────────
 function initLivesUI(){
   const b=document.getElementById('lives-bar'); b.innerHTML='';
   for(let i=0;i<MAX_LIVES;i++) b.appendChild(Object.assign(document.createElement('span'),{id:'life'+i}));
 function updateLivesUI(){ for(let i=0;i<MAX_LIVES;i++){ const s=document.getElementById('life'+i); if(s) s.style.background=i<lives?'#f76464':'#333'; } }
 function updateShieldUI(){ document.getElementById('shield-fill').style.width=Math.round(shield)+'%'; }
 function updateBoostUI(){ document.getElementById('boost-txt').textContent=boostTimer>0?'BOOST '+Math.ceil(boostTimer/60)+'s':''; }
+function updatePUSlots(){
+  const bs=document.getElementById('slot-boost'), fs=document.getElementById('slot-freeze'), gs=document.getElementById('slot-gun');
+  if(boostTimer>0){ bs.classList.add('active'); document.getElementById('txt-boost').textContent=Math.ceil(boostTimer/60)+'s'; }
+  else{ bs.classList.remove('active'); document.getElementById('txt-boost').textContent=''; }
+  if(freezeTimer>0){ fs.classList.add('active'); document.getElementById('txt-freeze').textContent=Math.ceil(freezeTimer/60)+'s'; }
+  else{ fs.classList.remove('active'); document.getElementById('txt-freeze').textContent=''; }
+  if(gunTimer>0){ gs.classList.add('active'); document.getElementById('txt-gun').textContent=Math.ceil(gunTimer/60)+'s'; }
+  else{ gs.classList.remove('active'); document.getElementById('txt-gun').textContent=''; }
+}
+// ─── Init ─────────────────────────────────────────────────────────────────────
 function init(){
+  bird={x:110,y:H/2,vy:0,r:10,trail:[],shootCooldown:0};
+  pipes=[];enemies=[];bullets=[];playerBullets=[];particles=[];powerups=[];
+  frame=0;score=0;lives=MAX_LIVES;shield=0;boostTimer=0;invTimer=0;freezeTimer=0;gunTimer=0;
   document.getElementById('sc').textContent=0;
+  updateLivesUI();updateShieldUI();updateBoostUI();updatePUSlots();
 }
+// ─── Input ────────────────────────────────────────────────────────────────────
 function jump(){
   if(state==='idle'||state==='dead'){state='play';document.getElementById('msg').style.display='none';init();}
   if(state==='play') bird.vy=JUMP;
 window.addEventListener('keydown',e=>{if(e.code==='Space'){e.preventDefault();jump();}});
 window.addEventListener('keyup',e=>{if(e.code==='Space')release();});
+// ─── Helpers ──────────────────────────────────────────────────────────────────
 function rnd(a,b){return a+Math.random()*(b-a);}
 function hsl(h,s,l){return `hsl(${h},${s}%,${l}%)`;}
+function circle(ax,ay,ar,bx,by,br){return Math.hypot(ax-bx,ay-by)<ar+br;}
+function collidesPipe(b,p){return b.x+b.r>p.x&&b.x-b.r<p.x+PIPE_W&&(b.y-b.r<p.top||b.y+b.r>p.top+GAP);}
+// ─── Spawners ─────────────────────────────────────────────────────────────────
 function spawnPipe(){ const top=55+Math.random()*(H-GAP-95); pipes.push({x:W+10,top,scored:false}); }
 function spawnEnemy(){ enemies.push({x:W+20,y:rnd(30,H-30),vy:rnd(-0.6,0.6),r:14,shootTimer:rnd(40,100),hp:2,frame:0}); }
+function spawnPowerup(){
+  // Pick from 4 types
+  const roll=Math.random();
+  let type;
+  if(roll<0.3) type='boost';
+  else if(roll<0.55) type='heart';
+  else if(roll<0.78) type='freeze';
+  else type='gun';
+  powerups.push({x:W+10,y:rnd(50,H-50),type,r:13,bob:Math.random()*Math.PI*2});
+}
 function spawnParticles(x,y,color,n=8){ for(let i=0;i<n;i++){ const a=Math.random()*Math.PI*2,spd=rnd(1.5,4.5); particles.push({x,y,vx:Math.cos(a)*spd,vy:Math.sin(a)*spd,life:1,color}); } }
+// ─── Draw bird ────────────────────────────────────────────────────────────────
 function drawBird(b,t){
   for(let i=0;i<b.trail.length;i++){
     const pt=b.trail[i],a=(i/b.trail.length)*0.3;
     ctx.fillStyle=`hsla(${(t*1.5+i*5)%360},90%,65%,${a})`;ctx.fill();
   }
   if(boostTimer>0){ctx.beginPath();ctx.arc(b.x,b.y,b.r*2.2,0,Math.PI*2);ctx.fillStyle=`rgba(62,207,207,${0.15+0.1*Math.sin(t*0.3)})`;ctx.fill();}
+  if(gunTimer>0){
+    // Gun glow
+    ctx.beginPath();ctx.arc(b.x,b.y,b.r*2.5,0,Math.PI*2);
+    ctx.fillStyle=`rgba(212,107,255,${0.18+0.1*Math.sin(t*0.4)})`;ctx.fill();
+    // Draw gun barrel
+    ctx.save();ctx.translate(b.x+b.r,b.y);
+    ctx.fillStyle='#d46bff';ctx.fillRect(0,-3,18,6);
+    ctx.fillStyle='#fff';ctx.fillRect(16,-2,6,4);
+    ctx.restore();
+  }
+  if(freezeTimer>0){ctx.beginPath();ctx.arc(b.x,b.y,b.r*2,0,Math.PI*2);ctx.fillStyle=`rgba(91,184,255,${0.15+0.1*Math.sin(t*0.3)})`;ctx.fill();}
   if(invTimer>0&&Math.floor(invTimer/4)%2===0) return;
+  ctx.beginPath();ctx.arc(b.x,b.y,b.r,0,Math.PI*2);
+  ctx.fillStyle=boostTimer>0?'#3ecfcf':(gunTimer>0?'#d46bff':(freezeTimer>0?'#5bb8ff':'#fff'));ctx.fill();
   ctx.beginPath();ctx.arc(b.x-3,b.y-3,b.r*0.38,0,Math.PI*2);ctx.fillStyle='rgba(0,0,0,0.25)';ctx.fill();
 }
+// ─── Draw enemy ───────────────────────────────────────────────────────────────
 function drawEnemy(e,t){
   e.frame++;
   const bob=Math.sin(e.frame*0.05)*3,bx=e.x,by=e.y+bob;
+  // Frozen overlay
+  const frozen=freezeTimer>0;
   ctx.save();ctx.translate(bx,by);
   ctx.beginPath();ctx.ellipse(0,0,e.r*1.3,e.r,0,0,Math.PI*2);
+  ctx.fillStyle=frozen?'#1a2a3a':hsl((t*0.8)%360,80,35);ctx.fill();
+  ctx.strokeStyle=frozen?'#5bb8ff':hsl((t*0.8+30)%360,90,60);ctx.lineWidth=1.5;ctx.stroke();
+  if(frozen){
+    // Ice crystal effect
+    ctx.strokeStyle='rgba(91,184,255,0.6)';ctx.lineWidth=1;
+    for(let a=0;a<6;a++){ctx.save();ctx.rotate(a*Math.PI/3);ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(0,e.r*1.1);ctx.stroke();ctx.restore();}
+  } else {
+    ctx.fillStyle=hsl((t*1.2)%360,100,70);
+    for(let i=-1;i<=1;i+=2){ctx.beginPath();ctx.arc(i*5,-3,3,0,Math.PI*2);ctx.fill();}
+    ctx.strokeStyle='#f76464';ctx.lineWidth=1;
+    for(let i=0;i<3;i++){ctx.beginPath();ctx.moveTo(-e.r*1.3+i*e.r*0.7,-e.r);ctx.lineTo(-e.r*1.3+i*e.r*0.7+3,-e.r-6);ctx.stroke();}
+  }
   ctx.restore();
+  for(let h=0;h<2;h++){ctx.fillStyle=h<e.hp?(frozen?'#5bb8ff':'#f76464'):'#333';ctx.fillRect(e.x-10+h*12,e.y+bob-e.r-10,10,4);}
 }
+// ─── Draw powerup ─────────────────────────────────────────────────────────────
 function drawPowerup(p,t){
   p.bob+=0.06;const y=p.y+Math.sin(p.bob)*5;
   ctx.save();ctx.translate(p.x,y);
     ctx.beginPath();ctx.moveTo(0,-p.r);ctx.lineTo(p.r*0.8,p.r*0.5);ctx.lineTo(-p.r*0.8,p.r*0.5);ctx.closePath();
     ctx.fillStyle='rgba(62,207,207,0.9)';ctx.fill();ctx.strokeStyle='#fff';ctx.lineWidth=1;ctx.stroke();
     ctx.fillStyle='#fff';ctx.font='bold 9px monospace';ctx.textAlign='center';ctx.fillText('B',0,4);
+  } else if(p.type==='heart'){
     ctx.beginPath();ctx.arc(0,0,p.r,0,Math.PI*2);ctx.fillStyle='rgba(247,100,100,0.85)';ctx.fill();
     ctx.strokeStyle='#fff';ctx.lineWidth=1;ctx.stroke();
     ctx.fillStyle='#fff';ctx.font='bold 11px monospace';ctx.textAlign='center';ctx.fillText('+',0,4);
+  } else if(p.type==='freeze'){
+    // Snowflake / ice crystal
+    ctx.beginPath();ctx.arc(0,0,p.r,0,Math.PI*2);ctx.fillStyle='rgba(91,184,255,0.85)';ctx.fill();
+    ctx.strokeStyle='#fff';ctx.lineWidth=1;ctx.stroke();
+    ctx.strokeStyle='#fff';ctx.lineWidth=1.5;
+    for(let a=0;a<6;a++){ctx.save();ctx.rotate(a*Math.PI/3);ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(0,p.r*0.75);ctx.stroke();ctx.restore();}
+    ctx.fillStyle='#fff';ctx.font='bold 9px monospace';ctx.textAlign='center';ctx.fillText('❄',0,4);
+  } else if(p.type==='gun'){
+    // Star / gun power-up
+    const sp=p.r,si=sp*0.45,pts=5;
+    ctx.beginPath();
+    for(let i=0;i<pts*2;i++){
+      const r=i%2===0?sp:si,a=i*Math.PI/pts-Math.PI/2;
+      i===0?ctx.moveTo(Math.cos(a)*r,Math.sin(a)*r):ctx.lineTo(Math.cos(a)*r,Math.sin(a)*r);
+    }
+    ctx.closePath();ctx.fillStyle='rgba(212,107,255,0.9)';ctx.fill();ctx.strokeStyle='#fff';ctx.lineWidth=1;ctx.stroke();
+    ctx.fillStyle='#fff';ctx.font='bold 9px monospace';ctx.textAlign='center';ctx.fillText('☆',0,4);
   }
   ctx.restore();
 }
+// ─── Draw player bullet ───────────────────────────────────────────────────────
+function drawPlayerBullet(bl){
+  ctx.beginPath();ctx.ellipse(bl.x,bl.y,8,3,0,0,Math.PI*2);
+  ctx.fillStyle='#d46bff';ctx.fill();
+  ctx.beginPath();ctx.arc(bl.x+5,bl.y,2.5,0,Math.PI*2);ctx.fillStyle='#fff';ctx.fill();
+  // Trail
+  ctx.beginPath();ctx.moveTo(bl.x-6,bl.y);ctx.lineTo(bl.x-20,bl.y);
+  ctx.strokeStyle='rgba(212,107,255,0.35)';ctx.lineWidth=3;ctx.stroke();
+}
+// ─── Draw enemy bullet ────────────────────────────────────────────────────────
 function drawBullet(bl){
+  if(freezeTimer>0){
+    // Frozen bullet
+    ctx.beginPath();ctx.ellipse(bl.x,bl.y,6,3,Math.atan2(bl.vy,bl.vx),0,Math.PI*2);
+    ctx.fillStyle='rgba(91,184,255,0.5)';ctx.fill();
+    ctx.strokeStyle='#5bb8ff';ctx.lineWidth=1;ctx.stroke();
+  } else {
+    ctx.beginPath();ctx.ellipse(bl.x,bl.y,6,3,Math.atan2(bl.vy,bl.vx),0,Math.PI*2);
+    ctx.fillStyle='#f7c948';ctx.fill();
+    ctx.beginPath();ctx.arc(bl.x,bl.y,2,0,Math.PI*2);ctx.fillStyle='#fff';ctx.fill();
+  }
 }
+// ─── Draw pipe ────────────────────────────────────────────────────────────────
 function drawPipe(p,t){
   const g1=ctx.createLinearGradient(p.x,0,p.x+PIPE_W,0);
   g1.addColorStop(0,hsl((t*0.6)%360,60,25));g1.addColorStop(1,hsl((t*0.6+40)%360,60,40));
   ctx.strokeStyle=hsl((t*1.1)%360,90,60);ctx.lineWidth=1.2;ctx.stroke();
 }
+// ─── Draw BG ──────────────────────────────────────────────────────────────────
 function drawGrid(t){
+  ctx.strokeStyle=freezeTimer>0?'rgba(40,80,160,0.1)':'rgba(80,60,200,0.06)';ctx.lineWidth=0.5;
   const spd=boostTimer>0?PIPE_SPD*2:PIPE_SPD,off=(t*spd*0.35)%40;
   for(let x=-off;x<W;x+=40){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke();}
   for(let y=0;y<H;y+=40){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke();}
+  if(freezeTimer>0){
+    // Frost vignette
+    const g=ctx.createRadialGradient(W/2,H/2,H*0.3,W/2,H/2,H*0.8);
+    g.addColorStop(0,'transparent');g.addColorStop(1,'rgba(91,184,255,0.07)');
+    ctx.fillStyle=g;ctx.fillRect(0,0,W,H);
+  }
 }
 function drawStars(t){
   for(let i=0;i<55;i++){
     ctx.fillStyle=`rgba(255,255,255,${a})`;ctx.fillRect(sx,sy,1.5,1.5);
   }
 }
+// ─── Draw particles ───────────────────────────────────────────────────────────
 function drawParticles(){
   for(let i=particles.length-1;i>=0;i--){
     const p=particles[i];
   }
 }
+// ─── Damage / death ───────────────────────────────────────────────────────────
 function takeDamage(x,y){
   if(invTimer>0) return;
   if(shield>=30){shield=Math.max(0,shield-30);updateShieldUI();spawnParticles(bird.x,bird.y,'#3ecfcf',6);return;}
   lives--;updateLivesUI();invTimer=90;spawnParticles(x,y,'#f76464',10);
   if(lives<=0) die();
 }
 function die(){
   state='dead';
+  // Save score to leaderboard
+  const scores=addScore(score);
+  renderLeaderboard(score);
   const msg=document.getElementById('msg');msg.style.display='';
+  msg.innerHTML=`<h2 style="color:#f76464">DESTROYED</h2><p>Score: ${score} &nbsp;|&nbsp; Best: ${best}</p><p style="color:#a99ff7;font-size:11px;margin-top:4px;">Check leaderboard →</p><p style="margin-top:6px;color:#7c6af7;font-size:13px;">Tap / Space to retry</p>`;
+}
+// ─── FREEZE power-up: freeze all bullets in place ─────────────────────────────
+// Handled in loop: bullets don't move when freezeTimer > 0
+// ─── GUN: auto-shoot player bullets ──────────────────────────────────────────
+function shootPlayerBullet(){
+  playerBullets.push({x:bird.x+bird.r+18,y:bird.y,vx:12,vy:0});
 }
+// ─── Main loop ────────────────────────────────────────────────────────────────
 function loop(){
   requestAnimationFrame(loop);
   const t=frame;
   if(state==='play'){
     frame++;
     const spd=boostTimer>0?PIPE_SPD*1.8:PIPE_SPD;
+    // Tick timers
+    if(boostTimer>0){boostTimer--;}
+    if(freezeTimer>0){freezeTimer--;}
+    if(gunTimer>0){
+      gunTimer--;
+      // Auto-shoot every 18 frames
+      if(frame%18===0) shootPlayerBullet();
+    }
     if(invTimer>0) invTimer--;
+    updatePUSlots();
+    // Bird physics
     bird.vy+=held?GRAV-GLIDE:GRAV;
     bird.vy=Math.max(-10,Math.min(bird.vy,12));
     bird.y+=bird.vy;
     bird.trail.push({x:bird.x,y:bird.y});
     if(bird.trail.length>16) bird.trail.shift();
+    // Spawn
     if(frame%PIPE_INT===0) spawnPipe();
     if(frame%220===0) spawnEnemy();
+    if(frame%280===0) spawnPowerup();
+    // ── Pipes ──
     for(let i=pipes.length-1;i>=0;i--){
       pipes[i].x-=spd;
       if(!pipes[i].scored&&pipes[i].x+PIPE_W<bird.x){
       if(collidesPipe(bird,pipes[i])) takeDamage(bird.x,bird.y);
     }
+    // ── Enemies ──
     for(let i=enemies.length-1;i>=0;i--){
       const e=enemies[i];
+      e.x-=spd*0.55;
+      if(!freezeTimer){e.y+=e.vy;}
       if(e.y<20||e.y>H-20) e.vy*=-1;
+      // Enemy shooting — suppressed when frozen
+      if(!freezeTimer){
+        e.shootTimer--;
+        if(e.shootTimer<=0){
+          const dx=bird.x-e.x,dy=bird.y-e.y,dist=Math.hypot(dx,dy),s2=4.5;
+          bullets.push({x:e.x-e.r,y:e.y,vx:(dx/dist)*s2,vy:(dy/dist)*s2});
+          e.shootTimer=rnd(60,110);spawnParticles(e.x,e.y,'#f7c948',3);
+        }
       }
       if(e.x<-30){enemies.splice(i,1);continue;}
       drawEnemy(e,t);
       if(circle(bird.x,bird.y,bird.r,e.x,e.y,e.r*1.2)) takeDamage(e.x,e.y);
     }
+    // ── Enemy bullets ──
     for(let i=bullets.length-1;i>=0;i--){
+      const bl=bullets[i];
+      // Frozen: don't move bullets
+      if(!freezeTimer){bl.x+=bl.vx;bl.y+=bl.vy;}
       if(bl.x<-10||bl.x>W+10||bl.y<-10||bl.y>H+10){bullets.splice(i,1);continue;}
       drawBullet(bl);
+      if(!freezeTimer&&circle(bird.x,bird.y,bird.r,bl.x,bl.y,5)){bullets.splice(i,1);takeDamage(bl.x,bl.y);}
     }
+    // ── Player bullets (gun power-up) ──
+    for(let i=playerBullets.length-1;i>=0;i--){
+      const bl=playerBullets[i];
+      bl.x+=bl.vx;
+      if(bl.x>W+20){playerBullets.splice(i,1);continue;}
+      drawPlayerBullet(bl);
+      // Hit enemies
+      let hit=false;
+      for(let j=enemies.length-1;j>=0;j--){
+        if(circle(bl.x,bl.y,5,enemies[j].x,enemies[j].y,enemies[j].r*1.3)){
+          spawnParticles(enemies[j].x,enemies[j].y,'#d46bff',10);
+          enemies[j].hp--;
+          if(enemies[j].hp<=0){
+            score++;document.getElementById('sc').textContent=score;
+            if(score>best){best=score;document.getElementById('hi').textContent=best;}
+            enemies.splice(j,1);
+          }
+          hit=true;break;
+        }
+      }
+      if(hit){playerBullets.splice(i,1);}
+    }
+    // ── Powerups ──
     for(let i=powerups.length-1;i>=0;i--){
       const p=powerups[i];p.x-=spd*0.5;
       if(p.x<-20){powerups.splice(i,1);continue;}
       drawPowerup(p,t);
       if(circle(bird.x,bird.y,bird.r,p.x,p.y+Math.sin(p.bob)*5,p.r)){
+        if(p.type==='boost'){boostTimer=300;shield=Math.min(100,shield+40);spawnParticles(p.x,p.y,'#3ecfcf',12);updateShieldUI();}
+        else if(p.type==='heart'){lives=Math.min(MAX_LIVES,lives+1);spawnParticles(p.x,p.y,'#f76464',10);updateLivesUI();}
+        else if(p.type==='freeze'){
+          freezeTimer=300; // 5 seconds at 60fps
+          spawnParticles(p.x,p.y,'#5bb8ff',14);
+          // Clear frozen bullets visually (they stay but are harmless)
+        }
+        else if(p.type==='gun'){
+          gunTimer=300; // 5 seconds
+          spawnParticles(p.x,p.y,'#d46bff',14);
+        }
+        updatePUSlots();
         powerups.splice(i,1);
       }
     }
+    drawParticles();
+    drawBird(bird,t);
+    // Wall bounce
     if(bird.y-bird.r<0||bird.y+bird.r>H){takeDamage(bird.x,bird.y);bird.vy*=-0.5;bird.y=Math.max(bird.r,Math.min(H-bird.r,bird.y));}
+    // Score display on canvas
     ctx.fillStyle=`hsla(${t%360},80%,80%,0.85)`;
     ctx.font='500 26px monospace';ctx.textAlign='center';
     ctx.fillText(score,W/2,40);ctx.textAlign='left';
     if(boostTimer>0){ctx.fillStyle='rgba(62,207,207,0.7)';ctx.font='bold 11px monospace';ctx.textAlign='right';ctx.fillText('BOOST',W-12,20);ctx.textAlign='left';}
+    if(freezeTimer>0){
+      ctx.fillStyle='rgba(91,184,255,0.85)';ctx.font='bold 12px monospace';ctx.textAlign='right';
+      ctx.fillText('❄ FREEZE '+Math.ceil(freezeTimer/60)+'s',W-12,36);ctx.textAlign='left';
+    }
+    if(gunTimer>0){
+      ctx.fillStyle='rgba(212,107,255,0.85)';ctx.font='bold 12px monospace';ctx.textAlign='right';
+      ctx.fillText('☆ GUN '+Math.ceil(gunTimer/60)+'s',W-12,52);ctx.textAlign='left';
+    }
   }
 }
+initLivesUI();init();renderLeaderboard();loop();
 </script>
 </body>
 </html>
 """
+components.html(GAME_HTML, height=510, scrolling=False)
 st.markdown("""
 <div style="text-align:center;margin-top:8px;">
   <span style="background:#1a3a1a;color:#3ecf8e;padding:3px 10px;border-radius:10px;font-size:12px;font-family:monospace;margin:4px;">
+    ⚡ Cyan triangle = BOOST (speed + shield)
   </span>
   <span style="background:#3a1a1a;color:#f76464;padding:3px 10px;border-radius:10px;font-size:12px;font-family:monospace;margin:4px;">
+    ❤ Red circle = +1 Life
+  </span>
+  <span style="background:#0a1a2a;color:#5bb8ff;padding:3px 10px;border-radius:10px;font-size:12px;font-family:monospace;margin:4px;">
+    ❄ Blue crystal = FREEZE (stop bullets 5s)
+  </span>
+  <span style="background:#1a0a2a;color:#d46bff;padding:3px 10px;border-radius:10px;font-size:12px;font-family:monospace;margin:4px;">
+    ☆ Purple star = GUN (shoot aliens 5s)
   </span>
   <span style="background:#1a1a3a;color:#a99ff7;padding:3px 10px;border-radius:10px;font-size:12px;font-family:monospace;margin:4px;">
+    🏆 Leaderboard saves Top 10 scores!
   </span>
 </div>
 """, unsafe_allow_html=True)