Spaces:

bbc123321
/

battle-zone-royale

Running

App Files Files Community

bbc123321 commited on Oct 13, 2025

Commit

55b31c9

verified ·

1 Parent(s): a018dc0

Manual changes saved

Browse files

Files changed (1) hide show

index.html +379 -403

index.html CHANGED Viewed

@@ -3,28 +3,32 @@
 <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
@@ -54,22 +58,20 @@
       </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>
@@ -98,78 +100,74 @@
           </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') {
-        // Toggle equip/unequip
-        player.equippedIndex = (player.equippedIndex === -1) ? player.selectedSlot : -1;
-        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;
@@ -177,21 +175,20 @@
       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';
@@ -200,32 +197,33 @@
       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';
@@ -235,276 +233,194 @@
         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;
             }
           }
@@ -512,35 +428,34 @@
           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;
@@ -548,133 +463,204 @@
           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; no change
-        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 if within 30px AND LOS or within 50px (ignore LOS)
-        const distToTarget = Math.hypot(target.x - e.x, target.y - e.y);
-        // Determine if enemy can see player within 50 pixels or LOS
-        const canSeePlayer = distToTarget < 50 || hasLineOfSight(e.x, e.y, target.x, target.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)){
-          // Shoot if within 30 but only if has ammo
-          if (hasLineOfSight(e.x, e.y, target.x, target.y) && e.weaponPickup.ammoInMag > 0){
-            e.lastShot = now;
-            shootBullet(e.x + Math.cos(e.angle)*12, e.y + Math.sin(e.angle)*12, target.x, target.y, e.weaponPickup, e.id);
-          }
         }
       }
-      // After updating enemies, check if all are dead
-      checkWinCondition();
     }
-    function checkWinCondition() {
-      const aliveEnemies = enemies.filter(e => e.health > 0);
-      if (aliveEnemies.length === 0){
-        alert('You Win! Returning to home screen.');
-        endGame();
       }
     }
-    // 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 = `${alive}/20`;
-    }
-    // Drawing functions (unchanged, omitted here for brevity, assume they are same as before, unchanged)
-    function drawWorld(){ /*...*/ }
-    function drawObjects(){ /*...*/ }
-    function drawChests(){ /*...*/ }
-    function drawPickups(){ /*...*/ }
-    function drawEnemies(){ /*...*/ }
-    function drawBullets(){ /*...*/ }
-    function drawPlayer(){ /*...*/ }
-    function drawCrosshair(){ /*...*/ }
-    // 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;
@@ -683,92 +669,81 @@
       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
-      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
       if (mouse.down){
-        if (player.equippedIndex === -1){
-          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();
-            }
-          }
         }
       }
-      // reload
-      if (keys.r) { reloadEquipped(); keys.r = false; }
-      // interact
       if (keys.e){ interactNearby(); keys.e = false; }
-      // build
       if (keys.q){ tryBuild(); keys.q = false; }
-      // update enemies
       updateEnemies(dt, performance.now());
-      bulletsUpdate(dt);
-      // auto-pickup
-      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();
       // 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
-      gameTime = 300; storm.active = false; storm.radius = storm.maxRadius;
       document.getElementById('gameTimer').textContent = '5:00';
       timerInterval && clearInterval(timerInterval);
       timerInterval = setInterval(()=>{
@@ -776,13 +751,14 @@
         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);
@@ -791,40 +767,40 @@
       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') {
-        // Toggle equip/unequip
-        player.equippedIndex = (player.equippedIndex === -1) ? player.selectedSlot : -1;
-        updateHUD();
-      }
-      if (k==='r') keys.r = true;
     });
-    // init
     resizeCanvas();
     populateWorld();
     feather.replace();
   </script>
 </body>
 </html>

 <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
       </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>
           </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;
       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';
       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';
         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;
             }
           }
           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;
           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();
+      }
+    }
+    function drawObjects(){
+      for (const obj of objects){
+        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();
+      }
+    }
+    function drawChests(){
+      const now = performance.now();
+      for (const chest of chests){
+        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;
       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(()=>{
         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);
       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();
   </script>
 </body>
 </html>