Spaces:

bbc123321
/

battle-zone-royale

Running

App Files Files Community

bbc123321 commited on Oct 13, 2025

Commit

7185738

verified ·

1 Parent(s): 6a80455

Manual changes saved

Browse files

Files changed (1) hide show

index.html +457 -347

index.html CHANGED Viewed

@@ -3,32 +3,28 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>BattleZone Royale - Updated</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
     html,body { height:100%; margin:0; background:#0b1220; color:#fff; font-family:monospace; }
     #canvasContainer { position:relative; flex:1; display:flex; justify-content:center; align-items:center; height:100vh; overflow:hidden; }
     #gameCanvas { display:block; user-select:none; cursor:crosshair; box-shadow:0 0 20px rgba(0,0,0,.5); width:100%; height:100%; }
-    .biome-selector { transition:all .25s ease; }
-    .biome-selector:hover { transform:scale(1.03); box-shadow:0 0 10px rgba(255,215,0,.15); }
     #stormWarning { z-index:10; }
     #deathScreen { z-index:20; }
-    /* HUD positions - small */
     #hudHealth { position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,0.55); padding:6px 8px; border-radius:8px; font-weight:700; font-size:13px; display:flex; align-items:center; gap:8px; z-index:30; }
-    #hudGear { position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,0.0); padding:6px; border-radius:8px; z-index:30; display:flex; gap:6px; }
-    .gear-slot { width:44px; height:36px; background: rgba(255,255,255,0.03); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#ddd; }
-    /* Chest glow pulse */
-    @keyframes chestGlow {
-      0% { box-shadow: 0 0 0px rgba(255,215,0,0.0); }
-      50% { box-shadow: 0 0 18px rgba(255,215,0,0.35); }
-      100% { box-shadow: 0 0 0px rgba(255,215,0,0.0); }
-    }
   </style>
 </head>
 <body>
-  <!-- Landing / Instructions screen -->
   <div id="landingScreen" class="flex flex-col items-center justify-center h-screen p-6">
     <h1 class="text-5xl font-bold text-yellow-400 mb-6 flex items-center">
       <i data-feather="target" class="mr-2"></i> BattleZone Royale
@@ -58,20 +54,22 @@
       </div>
     </div>
-    <!-- Instructions -->
     <div class="bg-gray-800 p-4 rounded-lg max-w-xl w-full text-sm">
       <h3 class="font-bold text-yellow-400 mb-2">Controls</h3>
       <ul class="list-disc pl-5 space-y-1">
         <li><strong>WASD</strong> — Move</li>
-        <li><strong>Mouse</strong> — Aim & Shoot</li>
-        <li><strong>E</strong> — Interact / Loot / Harvest</li>
         <li><strong>Q</strong> — Build (costs 10 materials)</li>
-        <li><strong>1-5</strong> — Switch weapons</li>
       </ul>
     </div>
   </div>
-  <!-- Game screen -->
   <div id="gameScreen" class="hidden h-screen flex flex-col">
     <header class="flex justify-between items-center border-b border-yellow-500 px-6 py-4" style="flex-shrink:0;">
       <h1 class="text-3xl font-bold text-yellow-400 flex items-center"><i data-feather="target" class="mr-2"></i>BattleZone Royale</h1>
@@ -100,74 +98,74 @@
           </button>
         </div>
-        <!-- Small health at bottom-left -->
         <div id="hudHealth" class="hidden">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffd86b" stroke-width="1.6"><path d="M20.8 8.6a5.5 5.5 0 0 0-7.8 0L12 10.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 22l7.8-3.6 1-1a5.5 5.5 0 0 0 0-7.8z"></path></svg>
           <span id="hudHealthText">100%</span>
         </div>
-        <!-- Gear / small inventory at bottom-right -->
-        <div id="hudGear" class="hidden" aria-label="gear"></div>
       </div>
-      <!-- NOTE: Sidebar removed per request -->
     </div>
   </div>
   <script>
-    // --- Globals & DOM ---
-    let gameActive = false;
-    let selectedBiome = 'forest';
-    const landingScreenEl = document.getElementById('landingScreen');
-    const gameScreenEl = document.getElementById('gameScreen');
     const canvas = document.getElementById('gameCanvas');
     const ctx = canvas.getContext('2d');
-    const hudHealthEl = document.getElementById('hudHealth');
     const hudHealthText = document.getElementById('hudHealthText');
-    const hudGearEl = document.getElementById('hudGear');
-    const stormWarningEl = document.getElementById('stormWarning');
-    const deathScreenEl = document.getElementById('deathScreen');
-    // --- Make world bigger per request ---
-    const WORLD = { width: 6000, height: 4000 }; // enlarged world
     let camera = { x:0, y:0 };
     function resizeCanvas(){
-      const container = document.getElementById('canvasContainer');
-      canvas.width = Math.max(600, Math.floor(container.clientWidth));
-      canvas.height = Math.max(400, Math.floor(container.clientHeight));
       cameraUpdate();
     }
     window.addEventListener('resize', resizeCanvas);
-    // --- Player ---
     const player = {
-      id: 'player', x: WORLD.width/2, y: WORLD.height/2, radius: 16, angle:0, speed:220,
-      health:100, armor:0, kills:0, materials:0, weapons:[], currentWeaponIndex:0, lastShot:0
     };
-    // --- Input ---
-    const keys = { w:false,a:false,s:false,d:false,e:false,q:false };
     const mouse = { canvasX:0, canvasY:0, worldX:0, worldY:0, down:false };
-    window.addEventListener('keydown', (e)=>{
       const k = e.key.toLowerCase();
-      if (!gameActive) return;
       if (k in keys) keys[k] = true;
-      if (['1','2','3','4','5'].includes(k)){
-        const idx = parseInt(k)-1;
-        if (player.weapons[idx]) player.currentWeaponIndex = idx;
-      }
     });
-    window.addEventListener('keyup', (e)=>{
       const k = e.key.toLowerCase();
-      if (!gameActive) return;
       if (k in keys) keys[k] = false;
-      if (k === 'e') keys.e = true;
       if (k === 'q') keys.q = true;
     });
-    canvas.addEventListener('mousemove', (e)=>{
       const rect = canvas.getBoundingClientRect();
       mouse.canvasX = e.clientX - rect.left;
       mouse.canvasY = e.clientY - rect.top;
@@ -175,20 +173,21 @@
       mouse.worldY = mouse.canvasY + camera.y;
       player.angle = Math.atan2(mouse.worldY - player.y, mouse.worldX - player.x);
     });
-    canvas.addEventListener('mousedown', ()=> { if (gameActive) mouse.down = true; });
     window.addEventListener('mouseup', ()=> mouse.down = false);
-    // --- Entities ---
     const bullets = [];
     const chests = [];
     const objects = []; // harvestables & walls
-    const enemies = []; // 19 NPCs
     function rand(min,max){ return Math.random()*(max-min)+min; }
     function randInt(min,max){ return Math.floor(Math.random()*(max-min))+min; }
     function biomeAt(x,y){
-      const bx = Math.floor(x / 400), by = Math.floor(y / 400);
       const seed = (bx*73856093) ^ (by*19349663);
       const r = Math.abs(Math.sin(seed)) % 1;
       if (r < 0.25) return 'desert';
@@ -197,33 +196,32 @@
       return 'ruins';
     }
     function generateLootForBiome(b){
       const roll = Math.random();
-      if (roll < 0.4) return { type:'medkit', heal:25 };
-      if (roll < 0.75) return { type:'materials', amount: randInt(5,20) };
       const weapons = [
-        { name:'Pistol', dmg:12, rate:320, color:'#ffd86b' },
-        { name:'SMG', dmg:6, rate:120, color:'#8ef0ff' },
-        { name:'Shotgun', dmg:22, rate:800, color:'#ff9fb8' },
-        { name:'Rifle', dmg:18, rate:400, color:'#c7ff9a' }
       ];
       return { type:'weapon', weapon: weapons[randInt(0, weapons.length)] };
     }
-    // Populate world with more content (scaled to bigger map)
     function populateWorld(){
-      chests.length = 0;
-      objects.length = 0;
-      enemies.length = 0;
-      // chests
-      for (let i=0;i<250;i++){
         const x = rand(150, WORLD.width-150);
         const y = rand(150, WORLD.height-150);
         chests.push({ x,y, opened:false, loot: generateLootForBiome(biomeAt(x,y)) });
       }
-      // breakable objects and some walls
       for (let i=0;i<700;i++){
         const t = Math.random();
         let type='wood';
@@ -233,194 +231,276 @@
         const hp = type==='wood'?40 : (type==='stone'?80:160);
         objects.push({ x,y, type, hp, maxHp:hp, dead:false });
       }
-      // enemies (19)
       for (let i=0;i<19;i++){
         const ex = rand(300, WORLD.width-300);
         const ey = rand(300, WORLD.height-300);
-        const weaponPool = [
-          { name:'Pistol', dmg:12, rate:320, color:'#ffd86b' },
-          { name:'SMG', dmg:6, rate:140, color:'#8ef0ff' },
-          { name:'Rifle', dmg:16, rate:380, color:'#c7ff9a' }
-        ];
         enemies.push({
-          id: 'e'+i, x:ex, y:ey, radius:14, angle:0, speed:120 + rand(-20,20),
-          health: 80 + randInt(0,40), lastShot:0, weapon: weaponPool[randInt(0,weaponPool.length)],
-          target: null, roamTimer: rand(0,3)
         });
       }
       updatePlayerCount();
     }
-    // HUD: small health + gear slots bottom corners
     function initHUD(){
-      hudHealthEl.classList.remove('hidden');
-      hudGearEl.classList.remove('hidden');
-      hudGearEl.innerHTML = '';
-      for (let i=0;i<6;i++){
         const slot = document.createElement('div');
         slot.className = 'gear-slot';
         slot.dataset.index = i;
-        slot.innerHTML = 'Empty';
-        hudGearEl.appendChild(slot);
       }
       updateHUD();
     }
     function updateHUD(){
       hudHealthText.textContent = `${Math.max(0,Math.floor(player.health))}%`;
-      const slots = hudGearEl.querySelectorAll('.gear-slot');
       slots.forEach(s => {
         const idx = parseInt(s.dataset.index);
-        const w = player.weapons[idx];
-        s.innerHTML = w ? `<div style="text-align:center;"><div style="font-size:11px">${w.name}</div><div style="color:${w.color}">●</div></div>` : 'Empty';
       });
       feather.replace();
     }
-    // Camera centering
     function cameraUpdate(){
       if (!canvas.width || !canvas.height) return;
-      if (WORLD.width <= canvas.width) camera.x = (WORLD.width - canvas.width)/2;
-      else {
-        camera.x = player.x - canvas.width/2;
-        camera.x = Math.max(0, Math.min(camera.x, WORLD.width - canvas.width));
-      }
-      if (WORLD.height <= canvas.height) camera.y = (WORLD.height - canvas.height)/2;
-      else {
-        camera.y = player.y - canvas.height/2;
-        camera.y = Math.max(0, Math.min(camera.y, WORLD.height - canvas.height));
-      }
     }
     function worldToScreen(wx,wy){ return { x: Math.round(wx - camera.x), y: Math.round(wy - camera.y) }; }
-    // Shooting bullets
-    function shootBullet(originX, originY, targetX, targetY, weapon, shooterId){
       const speed = 1100;
       const angle = Math.atan2(targetY-originY, targetX-originX);
       bullets.push({
         x: originX, y: originY, vx: Math.cos(angle)*speed, vy: Math.sin(angle)*speed,
-        dmg: weapon ? weapon.dmg : 8, color: weapon ? weapon.color : '#fff', life: 1.6, traveled:0,
         shooter: shooterId, born: performance.now(), tracer:false
       });
     }
-    // Interaction: loot & harvest
     function interactNearby(){
       const range = 56;
       for (const chest of chests){
         if (chest.opened) continue;
         const d = Math.hypot(chest.x - player.x, chest.y - player.y);
         if (d < range){
           chest.opened = true;
           const loot = chest.loot;
-          if (loot.type === 'medkit') player.health = Math.min(100, player.health + loot.heal);
-          else if (loot.type === 'materials') player.materials += loot.amount;
-          else if (loot.type === 'weapon') {
-            let placed=false;
-            for (let i=0;i<6;i++){ if (!player.weapons[i]) { player.weapons[i] = loot.weapon; player.currentWeaponIndex = i; placed=true; break; } }
-            if (!placed) player.weapons[player.currentWeaponIndex] = loot.weapon;
           }
-          // glow pop tracers
-          for (let i=0;i<6;i++) bullets.push({ x:chest.x, y:chest.y, vx:(Math.random()-0.5)*200, vy:(Math.random()-0.5)*200, dmg:0, color:'#ffd86b', life:0.6, traveled:0, shooter:null, tracer:true, born:performance.now() });
           updateHUD();
           return;
         }
       }
       for (const obj of objects){
         if (obj.dead) continue;
         const d = Math.hypot(obj.x - player.x, obj.y - player.y);
         if (d < range){
-          const gain = obj.type === 'wood' ? 2 : 5;
-          player.materials += gain;
-          obj.dead = true;
           updateHUD();
           return;
         }
       }
     }
-    // Build with Q: place wall in front if have >=10 materials
     function tryBuild(){
       if (player.materials < 10) return;
       player.materials -= 10;
-      const bx = player.x + Math.cos(player.angle)*48;
-      const by = player.y + Math.sin(player.angle)*48;
       objects.push({ x:bx, y:by, type:'wall', hp:160, maxHp:160, dead:false });
       updateHUD();
     }
-    // Visibility / Line of Sight: returns true if unobstructed
     function hasLineOfSight(x1,y1,x2,y2){
-      // For each blocking object, treat as circle/box and check distance to segment
       const vx = x2 - x1, vy = y2 - y1;
       const vlen2 = vx*vx + vy*vy;
       for (const obj of objects){
         if (obj.dead) continue;
-        // consider blocking types: wall and stone primarily; wood also blocks a little
-        let blockRadius = 0;
-        if (obj.type === 'wall') blockRadius = 28;
-        else if (obj.type === 'stone') blockRadius = 22;
-        else if (obj.type === 'wood') blockRadius = 16;
-        else continue;
         const wx = obj.x - x1, wy = obj.y - y1;
         const c1 = vx*wx + vy*wy;
-        const t = vlen2 > 0 ? c1 / vlen2 : 0;
         if (t < 0 || t > 1) continue;
         const projx = x1 + vx * t, projy = y1 + vy * t;
         const dist = Math.hypot(projx - obj.x, projy - obj.y);
-        if (dist < blockRadius) return false;
       }
-      // world bounds not considered blocking
       return true;
     }
-    // Bullets update & collisions
     function bulletsUpdate(dt){
       for (let i=bullets.length-1;i>=0;i--){
         const b = bullets[i];
         b.x += b.vx * dt; b.y += b.vy * dt;
         b.traveled += Math.hypot(b.vx*dt, b.vy*dt);
         b.life -= dt;
-        const bornAgo = performance.now() - (b.born || performance.now());
-        // Bullet hit player
         if (b.dmg > 0 && b.shooter !== 'player'){
-          if (Math.hypot(player.x - b.x, player.y - b.y) < 16 && bornAgo > 30){
             player.health -= b.dmg;
             if (player.health <= 0){ player.health = 0; playerDeath(); }
             bullets.splice(i,1); continue;
           }
         }
-        // Bullet hits enemies
         if (b.dmg > 0){
           for (const e of enemies){
             if (e.health <= 0) continue;
-            if (b.shooter === e.id) continue; // don't hit shooter
-            if (Math.hypot(e.x - b.x, e.y - b.y) < 14 && bornAgo > 30){
               e.health -= b.dmg;
-              if (e.health <= 0){
-                e.health = 0;
-                if (b.shooter === 'player') player.kills++;
-                // small material reward for kills if player shot
-                if (b.shooter === 'player') player.materials += 2;
-              }
               bullets.splice(i,1); break;
             }
           }
           if (!bullets[i]) continue;
         }
         // collision with objects & chests
         if (!b.tracer && b.dmg > 0){
           for (const obj of objects){
             if (obj.dead) continue;
-            if (Math.hypot(obj.x - b.x, obj.y - b.y) < 18){
               obj.hp -= b.dmg;
-              if (obj.hp <= 0 && !obj.dead){
-                obj.dead = true;
-                if (b.shooter === 'player') player.materials += (obj.type==='wood'?3:6);
-              }
               bullets.splice(i,1); break;
             }
           }
@@ -428,34 +508,35 @@
           for (const chest of chests){
             if (!chest.opened && Math.hypot(chest.x - b.x, chest.y - b.y) < 18){
               chest.opened = true;
               bullets.splice(i,1); break;
             }
           }
           if (!bullets[i]) continue;
         }
-        if (b.life <= 0 || b.traveled > 2400) bullets.splice(i,1);
       }
     }
-    // Enemy AI: choose nearby visible targets; only shoot if target in visible range
     function updateEnemies(dt, now){
       for (const e of enemies){
         if (e.health <= 0) continue;
         e.roamTimer -= dt;
-        // choose limited set of potential targets: player and a few nearby enemies
         let target = player;
         let bestDist = Math.hypot(player.x - e.x, player.y - e.y);
         for (const other of enemies){
           if (other === e || other.health <= 0) continue;
           const d = Math.hypot(other.x - e.x, other.y - e.y);
-          // prefer closer opponents sometimes
-          if (d < bestDist && Math.random() < 0.65) { bestDist = d; target = other; }
         }
-        // movement: move toward target if reasonably close, else roam
         if (bestDist < 900 || e.roamTimer <= 0){
           e.angle = Math.atan2(target.y - e.y, target.x - e.x);
           const avoid = e.health < 20 && Math.random() < 0.6;
@@ -463,71 +544,124 @@
           e.x += Math.cos(e.angle) * e.speed * dt * moveDir;
           e.y += Math.sin(e.angle) * e.speed * dt * moveDir;
         } else {
-          // slow roam
           e.x += Math.cos(e.angle) * e.speed * dt * 0.25;
           e.y += Math.sin(e.angle) * e.speed * dt * 0.25;
           if (Math.random() < 0.01) e.angle += (Math.random()-0.5)*2;
         }
-        // clamp
         e.x = Math.max(12, Math.min(WORLD.width-12, e.x));
         e.y = Math.max(12, Math.min(WORLD.height-12, e.y));
-        // Shooting logic: only if within distance threshold and hasLineOfSight to the chosen target
         const distToTarget = Math.hypot(target.x - e.x, target.y - e.y);
-        const shootRange = 650; // visible range threshold
-        if (distToTarget < shootRange && now - e.lastShot > e.weapon.rate){
-          // check line of sight (blocks by objects)
-          if (hasLineOfSight(e.x, e.y, target.x, target.y)){
             e.lastShot = now;
-            // fire slightly lead/randomness
-            const aimX = target.x + (Math.random()-0.5)*8;
-            const aimY = target.y + (Math.random()-0.5)*8;
-            shootBullet(e.x + Math.cos(e.angle)*12, e.y + Math.sin(e.angle)*12, aimX, aimY, e.weapon, e.id);
           }
         }
       }
     }
-    // Utility: update player count
     function updatePlayerCount(){
-      const aliveEnemies = enemies.filter(e => e.health > 0).length;
-      document.getElementById('playerCount').textContent = `${1 + aliveEnemies}/20`;
     }
-    // Drawing functions (chests glow gold)
     function drawWorld(){
-      const TILE = 600; // slightly larger tiles to reduce draw calls in big world
       const cols = Math.ceil(WORLD.width / TILE);
       const rows = Math.ceil(WORLD.height / TILE);
-      for (let by=0; by<rows; by++){
-        for (let bx=0; bx<cols; bx++){
-          const x = bx*TILE, y = by*TILE;
-          const b = biomeAt(x+1,y+1);
-          let color = '#203a2b';
-          if (b === 'desert') color = '#cbb78b';
-          else if (b === 'forest') color = '#16411f';
-          else if (b === 'oasis') color = '#274b52';
-          else if (b === 'ruins') color = '#4a3b3b';
           const s = worldToScreen(x,y);
-          ctx.fillStyle = color; ctx.fillRect(s.x, s.y, TILE, TILE);
-          ctx.strokeStyle = 'rgba(0,0,0,0.08)'; ctx.strokeRect(s.x, s.y, TILE, TILE);
         }
       }
-      // storm overlay (big shrinking circle)
       if (storm.active){
-        const screenCenter = worldToScreen(storm.centerX, storm.centerY);
         ctx.save();
-        // outer shading
-        const grad = ctx.createRadialGradient(screenCenter.x, screenCenter.y, storm.radius*0.15, screenCenter.x, screenCenter.y, storm.radius);
-        grad.addColorStop(0, 'rgba(100,149,237,0.02)'); grad.addColorStop(1, 'rgba(100,149,237,0.45)');
-        ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(screenCenter.x, screenCenter.y, storm.radius, 0, Math.PI*2); ctx.fill();
-        // visible circle outline
-        ctx.strokeStyle = 'rgba(255,200,80,0.9)';
-        ctx.lineWidth = 4;
-        ctx.beginPath();
-        ctx.arc(screenCenter.x, screenCenter.y, storm.radius, 0, Math.PI*2);
-        ctx.stroke();
         ctx.restore();
       }
     }
@@ -537,12 +671,9 @@
         if (obj.dead) continue;
         const s = worldToScreen(obj.x, obj.y);
         ctx.save();
-        const h = obj.type === 'wood' ? 18 : (obj.type==='stone'?12:28);
-        // shadow
-        ctx.fillStyle = 'rgba(0,0,0,0.18)';
-        ctx.beginPath(); ctx.ellipse(s.x, s.y+8, 18, 8, 0,0,Math.PI*2); ctx.fill();
-        // body
-        ctx.fillStyle = obj.type === 'wood' ? '#6b3b1a' : (obj.type==='stone' ? '#6b6b6b' : '#8b5a32');
         ctx.fillRect(s.x-12, s.y-h, 24, h);
         ctx.restore();
       }
@@ -554,113 +685,100 @@
         if (chest.opened) continue;
         const s = worldToScreen(chest.x, chest.y);
         ctx.save();
-        // glowing halo
-        const glowRadius = 30 + Math.sin(now/300 + chest.x*0.001)*6;
         const g = ctx.createRadialGradient(s.x, s.y-6, 6, s.x, s.y-6, glowRadius);
-        g.addColorStop(0, 'rgba(255,215,0,0.95)');
-        g.addColorStop(0.6, 'rgba(255,215,0,0.25)');
-        g.addColorStop(1, 'rgba(255,215,0,0.00)');
-        ctx.fillStyle = g;
-        ctx.beginPath(); ctx.arc(s.x, s.y-6, glowRadius, 0, Math.PI*2); ctx.fill();
-        // chest base
-        ctx.fillStyle = '#a56b2a'; ctx.fillRect(s.x-18, s.y-12, 36, 20);
-        // lid
-        ctx.fillStyle = '#caa15e';
         ctx.save();
-        ctx.translate(s.x, s.y-12);
-        ctx.fillRect(-18, -16, 36, 8);
         ctx.restore();
         ctx.restore();
       }
     }
     function drawBullets(){
       for (const b of bullets){
-        const s = worldToScreen(b.x, b.y);
         ctx.save();
-        if (b.tracer){
-          ctx.fillStyle = b.color; ctx.globalAlpha = 0.9; ctx.beginPath(); ctx.arc(s.x, s.y, 3, 0, Math.PI*2); ctx.fill();
-        } else {
           const backX = s.x - (b.vx * 0.02);
           const backY = s.y - (b.vy * 0.02);
-          const grad = ctx.createLinearGradient(backX, backY, s.x, s.y);
-          grad.addColorStop(0, 'rgba(255,255,255,0)'); grad.addColorStop(0.7, b.color); grad.addColorStop(1, '#fff');
-          ctx.strokeStyle = grad; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(backX, backY); ctx.lineTo(s.x, s.y); ctx.stroke();
-          ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(s.x, s.y, 2.5, 0, Math.PI*2); ctx.fill();
         }
         ctx.restore();
       }
     }
     function drawPlayer(){
-      const s = worldToScreen(player.x, player.y);
       ctx.save();
-      ctx.translate(s.x, s.y); ctx.rotate(player.angle);
-      ctx.fillStyle = 'rgba(0,0,0,0.25)'; ctx.beginPath(); ctx.ellipse(0, 14, 18, 8, 0,0,Math.PI*2); ctx.fill();
-      ctx.fillStyle = 'yellow'; ctx.beginPath(); ctx.moveTo(18,0); ctx.lineTo(-12,-10); ctx.lineTo(-12,10); ctx.closePath(); ctx.fill();
       ctx.restore();
     }
-    function drawEnemies(){
-      for (const e of enemies){
-        if (e.health <= 0) continue;
-        const s = worldToScreen(e.x, e.y);
-        ctx.save();
-        ctx.translate(s.x, s.y); ctx.rotate(e.angle);
-        ctx.fillStyle = 'rgba(0,0,0,0.18)'; ctx.beginPath(); ctx.ellipse(0, 12, 14, 6, 0,0,Math.PI*2); ctx.fill();
-        ctx.fillStyle = '#ff6b6b'; ctx.beginPath(); ctx.moveTo(12,0); ctx.lineTo(-10,-8); ctx.lineTo(-10,8); ctx.closePath(); ctx.fill();
-        // small health bar above
-        ctx.fillStyle = 'rgba(0,0,0,0.6)'; ctx.fillRect(-18, -22, 36, 6);
-        const hpPct = Math.max(0, e.health / 120);
-        ctx.fillStyle = '#ff6b6b'; ctx.fillRect(-18, -22, 36*hpPct, 6);
-        ctx.restore();
-      }
-    }
     function drawCrosshair(){
       const screenX = mouse.canvasX, screenY = mouse.canvasY;
-      ctx.save(); ctx.strokeStyle = 'yellow'; ctx.lineWidth = 2; ctx.beginPath();
-      ctx.moveTo(screenX-8, screenY); ctx.lineTo(screenX+8, screenY);
-      ctx.moveTo(screenX, screenY-8); ctx.lineTo(screenX, screenY+8); ctx.stroke(); ctx.restore();
     }
-    // --- Storm mechanics: random center when activated ---
-    const storm = { maxRadius: 2200, radius: 2200, centerX: WORLD.width/2, centerY: WORLD.height/2, damagePerSecond:1, closingSpeed: 6, active:false };
-    let stormDamageAccumulator = 0;
-    function playerInStorm(){
-      return Math.hypot(player.x - storm.centerX, player.y - storm.centerY) > storm.radius;
-    }
-    function updateStorm(dt){
-      if (!storm.active) return;
-      storm.radius -= storm.closingSpeed * dt * 60; // shrink noticeably
-      if (storm.radius < 120) storm.radius = 120;
-      if (playerInStorm()){
-        const progress = 1 - storm.radius / storm.maxRadius;
-        const rate = storm.damagePerSecond * (1 + progress*4);
-        stormDamageAccumulator += rate * dt;
-        while (stormDamageAccumulator >= 1){
-          stormDamageAccumulator -= 1;
-          player.health -= 1;
-          if (player.health <= 0){ player.health = 0; playerDeath(); }
-        }
-      } else stormDamageAccumulator = 0;
-    }
-    // --- Main loop & game logic ---
     let lastTime = 0;
     function gameLoop(ts){
       if (!gameActive) return;
       if (!lastTime) lastTime = ts;
-      const dt = Math.min(0.05, (ts - lastTime) / 1000);
       lastTime = ts;
-      // Player movement
       let dx=0, dy=0;
-      if (keys.w) dy -= 1;
-      if (keys.s) dy += 1;
-      if (keys.a) dx -= 1;
-      if (keys.d) dx += 1;
       if (dx !== 0 || dy !== 0){
         const len = Math.hypot(dx,dy) || 1;
         player.x += (dx/len) * player.speed * dt;
@@ -669,81 +787,96 @@
       player.x = Math.max(16, Math.min(WORLD.width-16, player.x));
       player.y = Math.max(16, Math.min(WORLD.height-16, player.y));
-      // camera & mouse world mapping
       cameraUpdate();
       mouse.worldX = mouse.canvasX + camera.x;
       mouse.worldY = mouse.canvasY + camera.y;
-      // player shooting
       if (mouse.down){
-        const weapon = player.weapons[player.currentWeaponIndex] || { dmg:10, rate:300, color:'#fff' };
-        if (performance.now() - player.lastShot > (weapon.rate || 300)){
-          player.lastShot = performance.now();
-          shootBullet(player.x + Math.cos(player.angle)*18, player.y + Math.sin(player.angle)*18, mouse.worldX, mouse.worldY, weapon, 'player');
         }
       }
-      // interactions
       if (keys.e){ interactNearby(); keys.e = false; }
       if (keys.q){ tryBuild(); keys.q = false; }
-      // enemy AI
       updateEnemies(dt, performance.now());
-      // bullets & collisions
       bulletsUpdate(dt);
-      // cleanup dead objects
       for (let i=objects.length-1;i>=0;i--) if (objects[i].dead) objects.splice(i,1);
       updatePlayerCount();
-      // storm
       updateStorm(dt);
       // render
       ctx.clearRect(0,0,canvas.width,canvas.height);
-      drawWorld();
-      drawObjects();
-      drawChests();
-      drawEnemies();
-      drawBullets();
-      drawPlayer();
-      drawCrosshair();
-      // HUD
       updateHUD();
       // storm warning
-      if (storm.active && playerInStorm()) stormWarningEl.classList.remove('hidden'); else stormWarningEl.classList.add('hidden');
       requestAnimationFrame(gameLoop);
     }
-    // --- Game start / end ---
     let timerInterval = null;
     let gameTime = 300;
     function startGame(){
       gameActive = true;
-      landingScreenEl.classList.add('hidden');
-      gameScreenEl.classList.remove('hidden');
       resizeCanvas();
-      // reset player & world
       player.x = WORLD.width/2 + (Math.random()-0.5)*400;
       player.y = WORLD.height/2 + (Math.random()-0.5)*400;
       player.health = 100; player.armor = 0; player.kills = 0; player.materials = 0;
-      player.weapons = []; player.weapons[0] = { name:'Pistol', dmg:12, rate:320, color:'#ffd86b' };
-      player.currentWeaponIndex = 0;
       populateWorld();
       initHUD();
       cameraUpdate();
-      // timer + storm schedule: when storm activates, pick random center on map
-      gameTime = 300;
-      storm.active = false;
-      storm.radius = storm.maxRadius;
       document.getElementById('gameTimer').textContent = '5:00';
       timerInterval && clearInterval(timerInterval);
       timerInterval = setInterval(()=>{
@@ -751,14 +884,13 @@
         gameTime--;
         const m = Math.floor(gameTime/60), s = gameTime%60;
         document.getElementById('gameTimer').textContent = `${m}:${s<10?'0'+s:s}`;
-        // start storm at 4 minutes left: pick a random center inside world margin
         if (gameTime === 240 && !storm.active){
           storm.active = true;
           storm.centerX = rand(400, WORLD.width-400);
           storm.centerY = rand(400, WORLD.height-400);
           storm.radius = storm.maxRadius;
-          stormWarningEl.classList.remove('hidden');
-          setTimeout(()=>stormWarningEl.classList.add('hidden'),4000);
         }
         if (gameTime <= 0){ clearInterval(timerInterval); endGame(); }
       }, 1000);
@@ -767,37 +899,15 @@
       requestAnimationFrame(gameLoop);
     }
-    function endGame(){
-      gameActive = false;
-      alert('Match over!');
-    }
-    function playerDeath(){
-      gameActive = false;
-      deathScreenEl.classList.remove('hidden');
-    }
-    document.getElementById('respawnBtn').addEventListener('click', ()=>{
-      deathScreenEl.classList.add('hidden');
-      landingScreenEl.classList.remove('hidden');
-    });
-    // Biome selectors start the game
-    document.querySelectorAll('.biome-selector').forEach(el=>{
-      el.addEventListener('click', ()=>{
-        selectedBiome = el.getAttribute('data-biome');
-        startGame();
-      });
-    });
-    // allow E/Q from anywhere
-    window.addEventListener('keydown', (e)=>{
-      const k = e.key.toLowerCase();
-      if (k === 'e' && gameActive) keys.e = true;
-      if (k === 'q' && gameActive) keys.q = true;
-    });
-    // Initialize
     resizeCanvas();
     populateWorld();
     feather.replace();

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>BattleZone Royale - Fixed</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
     html,body { height:100%; margin:0; background:#0b1220; color:#fff; font-family:monospace; }
     #canvasContainer { position:relative; flex:1; display:flex; justify-content:center; align-items:center; height:100vh; overflow:hidden; }
     #gameCanvas { display:block; user-select:none; cursor:crosshair; box-shadow:0 0 20px rgba(0,0,0,.5); width:100%; height:100%; }
     #stormWarning { z-index:10; }
     #deathScreen { z-index:20; }
+    /* HUD */
     #hudHealth { position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,0.55); padding:6px 8px; border-radius:8px; font-weight:700; font-size:13px; display:flex; align-items:center; gap:8px; z-index:30; }
+    #hudGearWrap { position:absolute; right:12px; bottom:12px; display:flex; gap:8px; align-items:center; z-index:30; }
+    .pickaxe-slot { width:46px; height:46px; background: rgba(255,255,255,0.03); border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
+    .gear-slot { min-width:46px; height:36px; background: rgba(255,255,255,0.03); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#ddd; padding:4px; position:relative; cursor:pointer; }
+    .selected { outline: 2px solid rgba(255,215,0,0.9); box-shadow: 0 0 6px rgba(255,215,0,0.12); }
+    .equipped { box-shadow: inset 0 -6px 14px rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); }
+    .medkit-count { position:absolute; right:4px; bottom:2px; font-size:10px; color:#ffd; }
   </style>
 </head>
 <body>
+  <!-- Landing -->
   <div id="landingScreen" class="flex flex-col items-center justify-center h-screen p-6">
     <h1 class="text-5xl font-bold text-yellow-400 mb-6 flex items-center">
       <i data-feather="target" class="mr-2"></i> BattleZone Royale
       </div>
     </div>
     <div class="bg-gray-800 p-4 rounded-lg max-w-xl w-full text-sm">
       <h3 class="font-bold text-yellow-400 mb-2">Controls</h3>
       <ul class="list-disc pl-5 space-y-1">
         <li><strong>WASD</strong> — Move</li>
+        <li><strong>Mouse</strong> — Aim</li>
+        <li><strong>Left Click</strong> — Shoot (if weapon equipped or in selected slot) or pickaxe melee</li>
+        <li><strong>E</strong> — Use medkit in selected slot OR Interact / Loot / Harvest</li>
         <li><strong>Q</strong> — Build (costs 10 materials)</li>
+        <li><strong>R</strong> — Reload selected weapon</li>
+        <li><strong>1-5</strong> — Select inventory slot</li>
+        <li><strong>F</strong> — Equip / Unequip selected slot (pickaxe is the default)</li>
       </ul>
     </div>
   </div>
+  <!-- Game -->
   <div id="gameScreen" class="hidden h-screen flex flex-col">
     <header class="flex justify-between items-center border-b border-yellow-500 px-6 py-4" style="flex-shrink:0;">
       <h1 class="text-3xl font-bold text-yellow-400 flex items-center"><i data-feather="target" class="mr-2"></i>BattleZone Royale</h1>
           </button>
         </div>
         <div id="hudHealth" class="hidden">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffd86b" stroke-width="1.6"><path d="M20.8 8.6a5.5 5.5 0 0 0-7.8 0L12 10.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 22l7.8-3.6 1-1a5.5 5.5 0 0 0 0-7.8z"></path></svg>
           <span id="hudHealthText">100%</span>
         </div>
+        <div id="hudGearWrap" class="hidden">
+          <div id="pickaxeSlot" class="pickaxe-slot" title="Pickaxe (press F to equip)">⛏️</div>
+          <div id="hudGear" aria-label="gear"></div>
+        </div>
       </div>
     </div>
   </div>
   <script>
+    // DOM
+    const landingScreen = document.getElementById('landingScreen');
+    const gameScreen = document.getElementById('gameScreen');
     const canvas = document.getElementById('gameCanvas');
     const ctx = canvas.getContext('2d');
+    const hudHealth = document.getElementById('hudHealth');
     const hudHealthText = document.getElementById('hudHealthText');
+    const hudGearWrap = document.getElementById('hudGearWrap');
+    const hudGear = document.getElementById('hudGear');
+    const pickaxeSlot = document.getElementById('pickaxeSlot');
+    const stormWarning = document.getElementById('stormWarning');
+    const deathScreen = document.getElementById('deathScreen');
+    // World (bigger)
+    const WORLD = { width: 6000, height: 4000 };
     let camera = { x:0, y:0 };
     function resizeCanvas(){
+      const ctn = document.getElementById('canvasContainer');
+      canvas.width = Math.max(900, Math.floor(ctn.clientWidth));
+      canvas.height = Math.max(560, Math.floor(ctn.clientHeight));
       cameraUpdate();
     }
     window.addEventListener('resize', resizeCanvas);
+    // Player (pickaxe separate from 5 inventory slots)
     const player = {
+      id:'player', x: WORLD.width/2, y: WORLD.height/2, radius:16, angle:0, speed:220,
+      health:100, armor:0, kills:0, materials:0,
+      inventory: [null,null,null,null,null], // 5 slots
+      selectedSlot:0,
+      equippedIndex: -1, // -1 = pickaxe equipped, >=0 = inventory slot equipped
+      lastShot:0, lastMelee:0
     };
+    // Input
+    const keys = { w:false,a:false,s:false,d:false,e:false,q:false,r:false,f:false };
     const mouse = { canvasX:0, canvasY:0, worldX:0, worldY:0, down:false };
+    window.addEventListener('keydown',(e)=>{
       const k = e.key.toLowerCase();
       if (k in keys) keys[k] = true;
+      if (['1','2','3','4','5'].includes(k)) { player.selectedSlot = parseInt(k)-1; updateHUD(); }
+      if (k === 'f') { player.equippedIndex = (player.equippedIndex === player.selectedSlot) ? -1 : player.selectedSlot; updateHUD(); }
+      if (k === 'r') keys.r = true;
     });
+    window.addEventListener('keyup',(e)=>{
       const k = e.key.toLowerCase();
       if (k in keys) keys[k] = false;
+      if (k === 'e') keys.e = true; // single-use flag
       if (k === 'q') keys.q = true;
     });
+    canvas.addEventListener('mousemove',(e)=>{
       const rect = canvas.getBoundingClientRect();
       mouse.canvasX = e.clientX - rect.left;
       mouse.canvasY = e.clientY - rect.top;
       mouse.worldY = mouse.canvasY + camera.y;
       player.angle = Math.atan2(mouse.worldY - player.y, mouse.worldX - player.x);
     });
+    canvas.addEventListener('mousedown', ()=> mouse.down = true);
     window.addEventListener('mouseup', ()=> mouse.down = false);
+    // Entities
     const bullets = [];
     const chests = [];
     const objects = []; // harvestables & walls
+    const enemies = [];
+    const pickups = []; // visible ground pickups
     function rand(min,max){ return Math.random()*(max-min)+min; }
     function randInt(min,max){ return Math.floor(Math.random()*(max-min))+min; }
     function biomeAt(x,y){
+      const bx = Math.floor(x / 500), by = Math.floor(y / 500);
       const seed = (bx*73856093) ^ (by*19349663);
       const r = Math.abs(Math.sin(seed)) % 1;
       if (r < 0.25) return 'desert';
       return 'ruins';
     }
+    // Weapon factory
+    function makeWeaponProto(w){
+      return { name:w.name, dmg:w.dmg, rate:w.rate, color:w.color, magSize:w.magSize || 12, startReserve:w.startReserve || (w.magSize*2 || 24) };
+    }
     function generateLootForBiome(b){
       const roll = Math.random();
+      if (roll < 0.35) return { type:'medkit', amount:1 };
+      if (roll < 0.7) return { type:'materials', amount: randInt(5,20) };
       const weapons = [
+        { name:'Pistol', dmg:12, rate:320, color:'#ffd86b', magSize:12, startReserve:24 },
+        { name:'SMG', dmg:6, rate:120, color:'#8ef0ff', magSize:30, startReserve:90 },
+        { name:'Shotgun', dmg:22, rate:800, color:'#ff9fb8', magSize:6, startReserve:18 },
+        { name:'Rifle', dmg:18, rate:400, color:'#c7ff9a', magSize:20, startReserve:60 }
       ];
       return { type:'weapon', weapon: weapons[randInt(0, weapons.length)] };
     }
+    // Populate world
     function populateWorld(){
+      chests.length = 0; objects.length = 0; enemies.length = 0; pickups.length = 0;
+      for (let i=0;i<260;i++){
         const x = rand(150, WORLD.width-150);
         const y = rand(150, WORLD.height-150);
         chests.push({ x,y, opened:false, loot: generateLootForBiome(biomeAt(x,y)) });
       }
       for (let i=0;i<700;i++){
         const t = Math.random();
         let type='wood';
         const hp = type==='wood'?40 : (type==='stone'?80:160);
         objects.push({ x,y, type, hp, maxHp:hp, dead:false });
       }
       for (let i=0;i<19;i++){
         const ex = rand(300, WORLD.width-300);
         const ey = rand(300, WORLD.height-300);
         enemies.push({
+          id:'e'+i, x:ex, y:ey, radius:14, angle:0, speed:110+rand(-20,20),
+          health: 80 + randInt(0,40), lastMelee:0, meleeRate:800 + randInt(-200,200),
+          roamTimer: rand(0,3), weaponPickup:null
         });
       }
       updatePlayerCount();
     }
+    // HUD init (pickaxe left of inventory)
     function initHUD(){
+      hudHealth.classList.remove('hidden');
+      hudGearWrap.classList.remove('hidden');
+      hudGear.innerHTML = '';
+      for (let i=0;i<5;i++){
         const slot = document.createElement('div');
         slot.className = 'gear-slot';
         slot.dataset.index = i;
+        slot.addEventListener('click', ()=> { player.selectedSlot = i; updateHUD(); });
+        hudGear.appendChild(slot);
       }
+      // pickaxe click toggles equip
+      pickaxeSlot.onclick = () => { player.equippedIndex = (player.equippedIndex === -1) ? player.selectedSlot : -1; updateHUD(); };
       updateHUD();
     }
     function updateHUD(){
       hudHealthText.textContent = `${Math.max(0,Math.floor(player.health))}%`;
+      const slots = hudGear.querySelectorAll('.gear-slot');
       slots.forEach(s => {
         const idx = parseInt(s.dataset.index);
+        const it = player.inventory[idx];
+        s.classList.toggle('selected', idx === player.selectedSlot);
+        s.classList.toggle('equipped', player.equippedIndex === idx);
+        if (!it) s.innerHTML = 'Empty';
+        else if (it.type === 'weapon') s.innerHTML = `<div style="text-align:center;"><div style="font-size:11px">${it.weapon.name}</div><div style="color:${it.weapon.color}">${it.ammoInMag}/${it.ammoReserve}</div></div>`;
+        else if (it.type === 'medkit') s.innerHTML = `<div style="font-size:12px">Med</div><div class="medkit-count">x${it.amount}</div>`;
+        else if (it.type === 'materials') s.innerHTML = `<div style="font-size:11px">Mat</div><div class="medkit-count">x${it.amount}</div>`;
+        else s.innerHTML = 'Item';
       });
+      // pickaxe highlight when equipped
+      pickaxeSlot.classList.toggle('selected', player.equippedIndex === -1);
+      // also indicate pickaxe equipped visually
+      pickaxeSlot.title = (player.equippedIndex === -1) ? 'Pickaxe (equipped)' : 'Pickaxe (click or press F to equip)';
       feather.replace();
     }
+    // Camera
     function cameraUpdate(){
       if (!canvas.width || !canvas.height) return;
+      camera.x = player.x - canvas.width/2;
+      camera.y = player.y - canvas.height/2;
+      camera.x = Math.max(0, Math.min(camera.x, WORLD.width - canvas.width));
+      camera.y = Math.max(0, Math.min(camera.y, WORLD.height - canvas.height));
     }
     function worldToScreen(wx,wy){ return { x: Math.round(wx - camera.x), y: Math.round(wy - camera.y) }; }
+    // Shooting, reload, melee
+    function shootBullet(originX, originY, targetX, targetY, weaponObj, shooterId){
+      if (!weaponObj || weaponObj.ammoInMag <= 0) return false;
       const speed = 1100;
       const angle = Math.atan2(targetY-originY, targetX-originX);
+      weaponObj.ammoInMag -= 1;
       bullets.push({
         x: originX, y: originY, vx: Math.cos(angle)*speed, vy: Math.sin(angle)*speed,
+        dmg: weaponObj.weapon.dmg, color: weaponObj.weapon.color, life:1.6, traveled:0,
         shooter: shooterId, born: performance.now(), tracer:false
       });
+      return true;
+    }
+    function reloadEquipped(){
+      let item = null;
+      if (player.equippedIndex >= 0) item = player.inventory[player.equippedIndex];
+      else item = player.inventory[player.selectedSlot];
+      if (!item || item.type !== 'weapon') return;
+      const need = item.weapon.magSize - item.ammoInMag;
+      if (need <= 0 || item.ammoReserve <= 0) return;
+      const take = Math.min(need, item.ammoReserve);
+      item.ammoInMag += take;
+      item.ammoReserve -= take;
+      updateHUD();
     }
+    function playerMeleeHit(){
+      const now = performance.now();
+      if (now - player.lastMelee < 350) return;
+      player.lastMelee = now;
+      // damage enemies and objects (pickaxe)
+      for (const e of enemies){
+        if (e.health <= 0) continue;
+        const d = Math.hypot(e.x - player.x, e.y - player.y);
+        if (d < 36){ e.health -= 18; if (e.health <= 0) { e.health = 0; player.kills++; player.materials += 2; updatePlayerCount(); } }
+      }
+      for (const obj of objects){
+        if (obj.dead) continue;
+        const d = Math.hypot(obj.x - player.x, obj.y - player.y);
+        if (d < 36){
+          obj.hp -= 20;
+          if (obj.hp <= 0){ obj.dead = true; player.materials += (obj.type === 'wood' ? 3 : 6); }
+        }
+      }
+    }
+    // Interact: use medkit in selected slot OR loot chests / harvest (pickups)
     function interactNearby(){
+      // use medkit in selected slot
+      const sel = player.selectedSlot;
+      const selItem = player.inventory[sel];
+      if (selItem && selItem.type === 'medkit'){
+        selItem.amount -= 1;
+        player.health = Math.min(100, player.health + 50);
+        if (selItem.amount <= 0) player.inventory[sel] = null;
+        updateHUD();
+        return;
+      }
       const range = 56;
+      // chests
       for (const chest of chests){
         if (chest.opened) continue;
         const d = Math.hypot(chest.x - player.x, chest.y - player.y);
         if (d < range){
           chest.opened = true;
+          // spawn pickup on ground (weapon/medkit/materials/ammo)
           const loot = chest.loot;
+          const px = chest.x + rand(-20,20), py = chest.y + rand(-20,20);
+          if (loot.type === 'weapon'){
+            pickups.push({ x:px, y:py, type:'weapon', weapon: makeWeaponProto(loot.weapon), ammoInMag: loot.weapon.magSize || 12, ammoReserve: loot.weapon.startReserve || (loot.weapon.magSize*2 || 24) });
+          } else if (loot.type === 'medkit') {
+            pickups.push({ x:px, y:py, type:'medkit', amount: loot.amount || 1 });
+          } else if (loot.type === 'materials'){
+            pickups.push({ x:px, y:py, type:'materials', amount: loot.amount || 5 });
+          }
+          // some chests drop ammo too sometimes
+          if (Math.random() < 0.25){
+            pickups.push({ x:px+8, y:py+8, type:'ammo', forWeapon: null, amount: randInt(6,30) });
           }
           updateHUD();
           return;
         }
       }
+      // harvest objects (only via pickaxe)
       for (const obj of objects){
         if (obj.dead) continue;
         const d = Math.hypot(obj.x - player.x, obj.y - player.y);
         if (d < range){
+          // only harvest (break) if using pickaxe (equippedIndex === -1) AND clicking E triggers same as swing
+          if (player.equippedIndex === -1){
+            const gain = obj.type === 'wood' ? 2 : 5;
+            player.materials += gain;
+            obj.dead = true;
+            updateHUD();
+            return;
+          }
+        }
+      }
+      // pick up ground pickups if near
+      for (let i=pickups.length-1;i>=0;i--){
+        const p = pickups[i];
+        const d = Math.hypot(p.x - player.x, p.y - player.y);
+        if (d < range){
+          pickupCollect(p);
+          pickups.splice(i,1);
           updateHUD();
           return;
         }
       }
     }
+    function pickupCollect(p){
+      if (p.type === 'weapon'){
+        // place in first empty or merge ammo
+        let merged=false;
+        for (let s=0;s<5;s++){
+          const it = player.inventory[s];
+          if (it && it.type==='weapon' && it.weapon.name === p.weapon.name){
+            it.ammoReserve += p.ammoReserve;
+            it.ammoInMag = Math.min(it.weapon.magSize, it.ammoInMag + p.ammoInMag);
+            merged=true; break;
+          }
+        }
+        if (!merged){
+          let placed=false;
+          for (let s=0;s<5;s++){ if (!player.inventory[s]) { player.inventory[s] = { type:'weapon', weapon:p.weapon, ammoInMag:p.ammoInMag, ammoReserve:p.ammoReserve }; placed=true; break; } }
+          if (!placed) player.inventory[player.selectedSlot] = { type:'weapon', weapon:p.weapon, ammoInMag:p.ammoInMag, ammoReserve:p.ammoReserve };
+        }
+      } else if (p.type === 'medkit'){
+        let stacked=false;
+        for (let s=0;s<5;s++){ const it=player.inventory[s]; if (it && it.type==='medkit'){ it.amount += p.amount; stacked=true; break; } }
+        if (!stacked){ let placed=false; for (let s=0;s<5;s++){ if (!player.inventory[s]) { player.inventory[s] = { type:'medkit', amount:p.amount }; placed=true; break; } } if (!placed) player.materials += 5; }
+      } else if (p.type === 'materials'){
+        player.materials += p.amount;
+      } else if (p.type === 'ammo'){
+        // add ammo to any weapon or to materials as fallback
+        let added=false;
+        for (let s=0;s<5;s++){ const it=player.inventory[s]; if (it && it.type==='weapon'){ it.ammoReserve += p.amount; added=true; break; } }
+        if (!added) player.materials += p.amount;
+      }
+    }
+    // Build Q
     function tryBuild(){
       if (player.materials < 10) return;
       player.materials -= 10;
+      const bx = player.x + Math.cos(player.angle) * 48;
+      const by = player.y + Math.sin(player.angle) * 48;
       objects.push({ x:bx, y:by, type:'wall', hp:160, maxHp:160, dead:false });
       updateHUD();
     }
+    // LOS helper
     function hasLineOfSight(x1,y1,x2,y2){
       const vx = x2 - x1, vy = y2 - y1;
       const vlen2 = vx*vx + vy*vy;
       for (const obj of objects){
         if (obj.dead) continue;
+        let br=0;
+        if (obj.type==='wall') br=28; else if (obj.type==='stone') br=22; else if (obj.type==='wood') br=16; else continue;
         const wx = obj.x - x1, wy = obj.y - y1;
         const c1 = vx*wx + vy*wy;
+        const t = vlen2>0 ? c1/vlen2 : 0;
         if (t < 0 || t > 1) continue;
         const projx = x1 + vx * t, projy = y1 + vy * t;
         const dist = Math.hypot(projx - obj.x, projy - obj.y);
+        if (dist < br) return false;
       }
       return true;
     }
+    // Bullets update: bullets do NOT break wood/stone (only walls)
     function bulletsUpdate(dt){
       for (let i=bullets.length-1;i>=0;i--){
         const b = bullets[i];
         b.x += b.vx * dt; b.y += b.vy * dt;
         b.traveled += Math.hypot(b.vx*dt, b.vy*dt);
         b.life -= dt;
+        // hit player
         if (b.dmg > 0 && b.shooter !== 'player'){
+          if (Math.hypot(player.x - b.x, player.y - b.y) < 16){
             player.health -= b.dmg;
             if (player.health <= 0){ player.health = 0; playerDeath(); }
             bullets.splice(i,1); continue;
           }
         }
+        // hit enemies
         if (b.dmg > 0){
           for (const e of enemies){
             if (e.health <= 0) continue;
+            if (b.shooter === e.id) continue;
+            if (Math.hypot(e.x - b.x, e.y - b.y) < 14){
               e.health -= b.dmg;
+              if (e.health <= 0){ e.health = 0; if (b.shooter === 'player'){ player.kills++; player.materials += 2; updatePlayerCount(); } }
               bullets.splice(i,1); break;
             }
           }
           if (!bullets[i]) continue;
         }
         // collision with objects & chests
         if (!b.tracer && b.dmg > 0){
           for (const obj of objects){
             if (obj.dead) continue;
+            if (obj.type === 'wall' && Math.hypot(obj.x - b.x, obj.y - b.y) < 18){
               obj.hp -= b.dmg;
+              if (obj.hp <= 0 && !obj.dead){ obj.dead = true; if (b.shooter === 'player') player.materials += 6; }
               bullets.splice(i,1); break;
             }
           }
           for (const chest of chests){
             if (!chest.opened && Math.hypot(chest.x - b.x, chest.y - b.y) < 18){
               chest.opened = true;
+              // spawn pickup from chest
+              const loot = chest.loot;
+              const px = chest.x + rand(-20,20), py = chest.y + rand(-20,20);
+              if (loot.type === 'weapon') pickups.push({ x:px, y:py, type:'weapon', weapon: makeWeaponProto(loot.weapon), ammoInMag: loot.weapon.magSize || 12, ammoReserve: loot.weapon.startReserve || (loot.weapon.magSize*2 || 24) });
+              else if (loot.type === 'medkit') pickups.push({ x:px, y:py, type:'medkit', amount: loot.amount || 1 });
+              else if (loot.type === 'materials') pickups.push({ x:px, y:py, type:'materials', amount: loot.amount || 5 });
               bullets.splice(i,1); break;
             }
           }
           if (!bullets[i]) continue;
         }
+        if (b.life <= 0 || b.traveled > 2600) bullets.splice(i,1);
       }
     }
+    // Enemies: can loot chests; shooting only when within 30px and LOS; they can pick up weapons and use them.
     function updateEnemies(dt, now){
       for (const e of enemies){
         if (e.health <= 0) continue;
         e.roamTimer -= dt;
+        // choose target (player or nearby enemy)
         let target = player;
         let bestDist = Math.hypot(player.x - e.x, player.y - e.y);
         for (const other of enemies){
           if (other === e || other.health <= 0) continue;
           const d = Math.hypot(other.x - e.x, other.y - e.y);
+          if (d < bestDist && Math.random() < 0.6){ bestDist = d; target = other; }
         }
+        // move
         if (bestDist < 900 || e.roamTimer <= 0){
           e.angle = Math.atan2(target.y - e.y, target.x - e.x);
           const avoid = e.health < 20 && Math.random() < 0.6;
           e.x += Math.cos(e.angle) * e.speed * dt * moveDir;
           e.y += Math.sin(e.angle) * e.speed * dt * moveDir;
         } else {
           e.x += Math.cos(e.angle) * e.speed * dt * 0.25;
           e.y += Math.sin(e.angle) * e.speed * dt * 0.25;
           if (Math.random() < 0.01) e.angle += (Math.random()-0.5)*2;
         }
         e.x = Math.max(12, Math.min(WORLD.width-12, e.x));
         e.y = Math.max(12, Math.min(WORLD.height-12, e.y));
+        // enemy loot chests if close
+        for (const chest of chests){
+          if (chest.opened) continue;
+          const d = Math.hypot(chest.x - e.x, chest.y - e.y);
+          if (d < 24){
+            chest.opened = true;
+            const loot = chest.loot;
+            const px = chest.x + rand(-12,12), py = chest.y + rand(-12,12);
+            if (loot.type === 'weapon') pickups.push({ x:px, y:py, type:'weapon', weapon: makeWeaponProto(loot.weapon), ammoInMag: loot.weapon.magSize || 12, ammoReserve: loot.weapon.startReserve || (loot.weapon.magSize*2 || 24) });
+            else if (loot.type === 'medkit') pickups.push({ x:px, y:py, type:'medkit', amount: loot.amount || 1 });
+            else if (loot.type === 'materials') pickups.push({ x:px, y:py, type:'materials', amount: loot.amount || 5 });
+          }
+        }
+        // enemies pick up nearby pickups automatically
+        for (let i=pickups.length-1;i>=0;i--){
+          const p = pickups[i];
+          if (Math.hypot(p.x - e.x, p.y - e.y) < 18){
+            if (p.type === 'weapon' && !e.weaponPickup){
+              e.weaponPickup = { weapon:p.weapon, ammoInMag:p.ammoInMag, ammoReserve:p.ammoReserve };
+              pickups.splice(i,1);
+            } else if (p.type === 'medkit'){
+              if (e.health < 60) e.health = Math.min(120, e.health + 50);
+              pickups.splice(i,1);
+            } else pickups.splice(i,1);
+          }
+        }
+        // attack: melee if close; ranged only if they have weapon and within 30px AND LOS
         const distToTarget = Math.hypot(target.x - e.x, target.y - e.y);
+        if (distToTarget < 34 && now - e.lastMelee > e.meleeRate){
+          e.lastMelee = now;
+          const dmg = 10 + randInt(0,8);
+          if (target === player){
+            player.health -= dmg;
+            if (player.health <= 0) { player.health = 0; playerDeath(); }
+          } else {
+            target.health -= dmg;
+            if (target.health <= 0) target.health = 0;
+          }
+        } else if (e.weaponPickup && distToTarget <= 30 && now - (e.lastShot||0) > (e.weaponPickup.weapon.rate || 300)){
+          if (hasLineOfSight(e.x, e.y, target.x, target.y) && e.weaponPickup.ammoInMag > 0){
             e.lastShot = now;
+            e.weaponPickup.ammoInMag -= 1;
+            shootBullet(e.x + Math.cos(e.angle)*12, e.y + Math.sin(e.angle)*12, target.x + (Math.random()-0.5)*6, target.y + (Math.random()-0.5)*6, e.weaponPickup, e.id);
           }
         }
       }
     }
+    // Storm: slower, damages enemies too
+    const storm = { maxRadius: 2400, radius:2400, centerX: WORLD.width/2, centerY: WORLD.height/2, damagePerSecond:1, closingSpeed: 0.6, active:false };
+    let stormDamageAccumulator = 0;
+    function playerInStorm(){ return Math.hypot(player.x - storm.centerX, player.y - storm.centerY) > storm.radius; }
+    function updateStorm(dt){
+      if (!storm.active) return;
+      storm.radius -= storm.closingSpeed * dt * 60;
+      if (storm.radius < 120) storm.radius = 120;
+      // damage player
+      if (playerInStorm()){
+        const prog = 1 - storm.radius / storm.maxRadius;
+        const rate = storm.damagePerSecond * (1 + prog*4);
+        stormDamageAccumulator += rate * dt;
+        while (stormDamageAccumulator >= 1){
+          stormDamageAccumulator -=1;
+          player.health -= 1;
+          if (player.health <= 0){ player.health = 0; playerDeath(); }
+        }
+      } else stormDamageAccumulator = 0;
+      // damage enemies
+      for (const e of enemies){
+        if (e.health <= 0) continue;
+        const d = Math.hypot(e.x - storm.centerX, e.y - storm.centerY);
+        if (d > storm.radius){
+          e.health -= 8 * dt;
+          if (e.health <= 0){ e.health = 0; updatePlayerCount(); }
+        }
+      }
+    }
+    // Utility
     function updatePlayerCount(){
+      const alive = enemies.filter(e => e.health > 0).length;
+      document.getElementById('playerCount').textContent = `${1 + alive}/20`;
     }
+    // Drawing (chests no text; glow; pickups visible)
     function drawWorld(){
+      const TILE = 600;
       const cols = Math.ceil(WORLD.width / TILE);
       const rows = Math.ceil(WORLD.height / TILE);
+      for (let by=0;by<rows;by++){
+        for (let bx=0;bx<cols;bx++){
+          const x=bx*TILE,y=by*TILE; const b=biomeAt(x+1,y+1);
+          let color='#203a2b';
+          if (b==='desert') color='#cbb78b';
+          else if (b==='forest') color='#16411f';
+          else if (b==='oasis') color='#274b52';
+          else if (b==='ruins') color='#4a3b3b';
           const s = worldToScreen(x,y);
+          ctx.fillStyle = color; ctx.fillRect(s.x,s.y,TILE,TILE);
+          ctx.strokeStyle = 'rgba(0,0,0,0.08)'; ctx.strokeRect(s.x,s.y,TILE,TILE);
         }
       }
       if (storm.active){
+        const sc = worldToScreen(storm.centerX, storm.centerY);
         ctx.save();
+        const grad = ctx.createRadialGradient(sc.x, sc.y, storm.radius*0.15, sc.x, sc.y, storm.radius);
+        grad.addColorStop(0,'rgba(100,149,237,0.02)'); grad.addColorStop(1,'rgba(100,149,237,0.45)');
+        ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(sc.x, sc.y, storm.radius, 0, Math.PI*2); ctx.fill();
+        ctx.strokeStyle = 'rgba(255,200,80,0.9)'; ctx.lineWidth=4; ctx.beginPath(); ctx.arc(sc.x, sc.y, storm.radius, 0, Math.PI*2); ctx.stroke();
         ctx.restore();
       }
     }
         if (obj.dead) continue;
         const s = worldToScreen(obj.x, obj.y);
         ctx.save();
+        const h = obj.type==='wood'?18:(obj.type==='stone'?12:28);
+        ctx.fillStyle='rgba(0,0,0,0.18)'; ctx.beginPath(); ctx.ellipse(s.x,s.y+8,18,8,0,0,Math.PI*2); ctx.fill();
+        ctx.fillStyle = obj.type==='wood'? '#6b3b1a' : (obj.type==='stone'? '#6b6b6b' : '#8b5a32');
         ctx.fillRect(s.x-12, s.y-h, 24, h);
         ctx.restore();
       }
         if (chest.opened) continue;
         const s = worldToScreen(chest.x, chest.y);
         ctx.save();
+        const glowRadius = 28 + Math.sin(now/300 + chest.x*0.001)*6;
         const g = ctx.createRadialGradient(s.x, s.y-6, 6, s.x, s.y-6, glowRadius);
+        g.addColorStop(0,'rgba(255,215,0,0.95)'); g.addColorStop(0.6,'rgba(255,215,0,0.25)'); g.addColorStop(1,'rgba(255,215,0,0.00)');
+        ctx.fillStyle = g; ctx.beginPath(); ctx.arc(s.x, s.y-6, glowRadius, 0, Math.PI*2); ctx.fill();
+        ctx.fillStyle='#a56b2a'; ctx.fillRect(s.x-18,s.y-12,36,20);
+        ctx.fillStyle='#caa15e'; ctx.fillRect(s.x-18,s.y-20,36,8);
+        ctx.restore();
+      }
+    }
+    function drawPickups(){
+      for (const p of pickups){
+        const s = worldToScreen(p.x,p.y);
         ctx.save();
+        const glowRadius = 14 + Math.sin(performance.now()/250 + p.x*0.001)*4;
+        if (p.type === 'weapon'){
+          const g = ctx.createRadialGradient(s.x,s.y,2,s.x,s.y,glowRadius);
+          g.addColorStop(0,'rgba(255,255,255,0.95)'); g.addColorStop(0.6, `${p.weapon.color}33`); g.addColorStop(1,'rgba(255,255,255,0)');
+          ctx.fillStyle = g; ctx.beginPath(); ctx.arc(s.x,s.y,glowRadius,0,Math.PI*2); ctx.fill();
+          ctx.fillStyle = p.weapon.color || '#ffd86b'; ctx.fillRect(s.x-10,s.y-6,20,12);
+        } else if (p.type === 'medkit'){
+          ctx.fillStyle = '#ff6b6b'; ctx.beginPath(); ctx.arc(s.x,s.y,10,0,Math.PI*2); ctx.fill();
+          ctx.fillStyle = '#fff'; ctx.font='10px monospace'; ctx.textAlign='center'; ctx.fillText('MED', s.x, s.y+2);
+        } else if (p.type === 'materials'){
+          ctx.fillStyle = '#cfe0a6'; ctx.fillRect(s.x-8,s.y-8,16,16);
+          ctx.fillStyle = '#000'; ctx.font='10px monospace'; ctx.textAlign='center'; ctx.fillText('MAT', s.x, s.y+2);
+        } else if (p.type === 'ammo'){
+          ctx.fillStyle = '#e6e6e6'; ctx.fillRect(s.x-6,s.y-6,12,12);
+          ctx.fillStyle = '#000'; ctx.font='9px monospace'; ctx.textAlign='center'; ctx.fillText('AM', s.x, s.y+2);
+        }
         ctx.restore();
+      }
+    }
+    function drawEnemies(){
+      for (const e of enemies){
+        if (e.health <= 0) continue;
+        const s = worldToScreen(e.x,e.y);
+        ctx.save();
+        ctx.translate(s.x,s.y); ctx.rotate(e.angle);
+        ctx.fillStyle='rgba(0,0,0,0.18)'; ctx.beginPath(); ctx.ellipse(0,12,14,6,0,0,Math.PI*2); ctx.fill();
+        ctx.fillStyle='#ff6b6b'; ctx.beginPath(); ctx.moveTo(12,0); ctx.lineTo(-10,-8); ctx.lineTo(-10,8); ctx.closePath(); ctx.fill();
+        ctx.fillStyle='rgba(0,0,0,0.6)'; ctx.fillRect(-18,-22,36,6);
+        const hpPct = Math.max(0, e.health/120);
+        ctx.fillStyle='#ff6b6b'; ctx.fillRect(-18,-22,36*hpPct,6);
+        if (e.weaponPickup) { ctx.fillStyle = e.weaponPickup.weapon.color || '#fff'; ctx.fillRect(-10,12,8,6); }
         ctx.restore();
       }
     }
     function drawBullets(){
       for (const b of bullets){
+        const s = worldToScreen(b.x,b.y);
         ctx.save();
+        if (b.tracer){ ctx.fillStyle = b.color; ctx.globalAlpha=0.9; ctx.beginPath(); ctx.arc(s.x,s.y,3,0,Math.PI*2); ctx.fill(); }
+        else {
           const backX = s.x - (b.vx * 0.02);
           const backY = s.y - (b.vy * 0.02);
+          const grad = ctx.createLinearGradient(backX,backY,s.x,s.y);
+          grad.addColorStop(0,'rgba(255,255,255,0)'); grad.addColorStop(0.7,b.color); grad.addColorStop(1,'#fff');
+          ctx.strokeStyle = grad; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(backX,backY); ctx.lineTo(s.x,s.y); ctx.stroke();
+          ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(s.x,s.y,2.5,0,Math.PI*2); ctx.fill();
         }
         ctx.restore();
       }
     }
     function drawPlayer(){
+      const s = worldToScreen(player.x,player.y);
       ctx.save();
+      ctx.translate(s.x,s.y); ctx.rotate(player.angle);
+      ctx.fillStyle='rgba(0,0,0,0.25)'; ctx.beginPath(); ctx.ellipse(0,14,18,8,0,0,Math.PI*2); ctx.fill();
+      ctx.fillStyle='yellow'; ctx.beginPath(); ctx.moveTo(18,0); ctx.lineTo(-12,-10); ctx.lineTo(-12,10); ctx.closePath(); ctx.fill();
       ctx.restore();
     }
     function drawCrosshair(){
       const screenX = mouse.canvasX, screenY = mouse.canvasY;
+      ctx.save(); ctx.strokeStyle='yellow'; ctx.lineWidth=2; ctx.beginPath();
+      ctx.moveTo(screenX-8,screenY); ctx.lineTo(screenX+8,screenY);
+      ctx.moveTo(screenX,screenY-8); ctx.lineTo(screenX,screenY+8); ctx.stroke(); ctx.restore();
     }
+    // Main loop
     let lastTime = 0;
     function gameLoop(ts){
       if (!gameActive) return;
       if (!lastTime) lastTime = ts;
+      const dt = Math.min(0.05, (ts - lastTime)/1000);
       lastTime = ts;
+      // movement
       let dx=0, dy=0;
+      if (keys.w) dy -= 1; if (keys.s) dy += 1; if (keys.a) dx -= 1; if (keys.d) dx += 1;
       if (dx !== 0 || dy !== 0){
         const len = Math.hypot(dx,dy) || 1;
         player.x += (dx/len) * player.speed * dt;
       player.x = Math.max(16, Math.min(WORLD.width-16, player.x));
       player.y = Math.max(16, Math.min(WORLD.height-16, player.y));
       cameraUpdate();
       mouse.worldX = mouse.canvasX + camera.x;
       mouse.worldY = mouse.canvasY + camera.y;
+      // determine active weapon: prefer equipped slot if >=0; else if selectedSlot has weapon allow firing from selected slot; if equippedIndex === -1 it's pickaxe
+      let activeWeaponItem = null;
+      if (player.equippedIndex >= 0) activeWeaponItem = player.inventory[player.equippedIndex];
+      else {
+        const selected = player.inventory[player.selectedSlot];
+        if (selected && selected.type === 'weapon') activeWeaponItem = selected;
+      }
+      // shooting or melee on mouse down
       if (mouse.down){
+        if (player.equippedIndex === -1){
+          // pickaxe melee
+          playerMeleeHit();
+        } else if (activeWeaponItem && activeWeaponItem.type === 'weapon'){
+          const now = performance.now();
+          if (now - player.lastShot > (activeWeaponItem.weapon.rate || 300)){
+            if (activeWeaponItem.ammoInMag > 0){
+              player.lastShot = now;
+              shootBullet(player.x + Math.cos(player.angle)*18, player.y + Math.sin(player.angle)*18, mouse.worldX, mouse.worldY, activeWeaponItem, 'player');
+              updateHUD();
+            } else {
+              // out of mag - do nothing until reload with R
+            }
+          }
         }
       }
+      // reload
+      if (keys.r) { reloadEquipped(); keys.r = false; }
+      // interact/use
       if (keys.e){ interactNearby(); keys.e = false; }
+      // build
       if (keys.q){ tryBuild(); keys.q = false; }
+      // enemy AI and bullets
       updateEnemies(dt, performance.now());
       bulletsUpdate(dt);
+      // pickup auto-collect when standing on them
+      for (let i=pickups.length-1;i>=0;i--){
+        const p = pickups[i];
+        if (Math.hypot(p.x - player.x, p.y - player.y) < 18){ pickupCollect(p); pickups.splice(i,1); updateHUD(); }
+      }
+      // clean dead objects
       for (let i=objects.length-1;i>=0;i--) if (objects[i].dead) objects.splice(i,1);
       updatePlayerCount();
       updateStorm(dt);
       // render
       ctx.clearRect(0,0,canvas.width,canvas.height);
+      drawWorld(); drawObjects(); drawChests(); drawPickups(); drawEnemies(); drawBullets(); drawPlayer(); drawCrosshair();
       updateHUD();
       // storm warning
+      if (storm.active && playerInStorm()) stormWarning.classList.remove('hidden'); else stormWarning.classList.add('hidden');
       requestAnimationFrame(gameLoop);
     }
+    // Start/end
     let timerInterval = null;
     let gameTime = 300;
+    let gameActive = false;
     function startGame(){
       gameActive = true;
+      landingScreen.classList.add('hidden');
+      gameScreen.classList.remove('hidden');
       resizeCanvas();
       player.x = WORLD.width/2 + (Math.random()-0.5)*400;
       player.y = WORLD.height/2 + (Math.random()-0.5)*400;
       player.health = 100; player.armor = 0; player.kills = 0; player.materials = 0;
+      player.inventory = [null,null,null,null,null];
+      player.selectedSlot = 0; player.equippedIndex = -1; player.lastShot = 0; player.lastMelee = 0;
       populateWorld();
       initHUD();
       cameraUpdate();
+      // timer & storm: pick random center at activation
+      gameTime = 300; storm.active = false; storm.radius = storm.maxRadius;
       document.getElementById('gameTimer').textContent = '5:00';
       timerInterval && clearInterval(timerInterval);
       timerInterval = setInterval(()=>{
         gameTime--;
         const m = Math.floor(gameTime/60), s = gameTime%60;
         document.getElementById('gameTimer').textContent = `${m}:${s<10?'0'+s:s}`;
         if (gameTime === 240 && !storm.active){
           storm.active = true;
           storm.centerX = rand(400, WORLD.width-400);
           storm.centerY = rand(400, WORLD.height-400);
           storm.radius = storm.maxRadius;
+          stormWarning.classList.remove('hidden');
+          setTimeout(()=>stormWarning.classList.add('hidden'),4000);
         }
         if (gameTime <= 0){ clearInterval(timerInterval); endGame(); }
       }, 1000);
       requestAnimationFrame(gameLoop);
     }
+    function endGame(){ gameActive = false; alert('Match over!'); }
+    function playerDeath(){ gameActive = false; deathScreen.classList.remove('hidden'); }
+    document.getElementById('respawnBtn').addEventListener('click', ()=>{ deathScreen.classList.add('hidden'); landingScreen.classList.remove('hidden'); });
+    document.querySelectorAll('.biome-selector').forEach(el => el.addEventListener('click', ()=> startGame()));
+    window.addEventListener('keydown', (e)=>{ const k = e.key.toLowerCase(); if (!gameActive) return; if (k==='e') keys.e = true; if (k==='q') keys.q = true; if (k==='f') { player.equippedIndex = (player.equippedIndex === player.selectedSlot) ? -1 : player.selectedSlot; updateHUD(); } if (k==='r') keys.r = true; });
+    // init
     resizeCanvas();
     populateWorld();
     feather.replace();