Spaces:

bbc123321
/

battle-zone-royale

Running

App Files Files Community

bbc123321 commited on Oct 14, 2025

Commit

bb226c2

verified ·

1 Parent(s): beadbb6

Manual changes saved

Browse files

Files changed (1) hide show

index.html +163 -271

index.html CHANGED Viewed

@@ -3,24 +3,18 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>BattleZone Royale - Collisions, AI & Minimap (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%; }
-    /* Minimap moved to top-right and won't block input */
-    #minimap { position: absolute; top:12px; right:12px; width:220px; height:140px; border-radius:8px; background: rgba(0,0,0,0.45); padding:6px; z-index:40; box-shadow: 0 6px 30px rgba(0,0,0,0.6); pointer-events: none; }
-    /* allow visuals (but pointer-events stays off for whole minimap so it doesn't capture mouse) */
-    #minimapCanvas { width:100%; height:100%; display:block; image-rendering: pixelated; border-radius:6px; background:transparent; }
     /* 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; pointer-events:auto; }
-    .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; pointer-events:auto; }
     .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; }
@@ -97,11 +91,6 @@
       <div id="canvasContainer" class="relative bg-gray-900 border-4 border-gray-700 rounded-xl max-w-full max-h-full">
         <canvas id="gameCanvas"></canvas>
-        <!-- Minimap (top-right) -->
-        <div id="minimap">
-          <canvas id="minimapCanvas" width="220" height="140"></canvas>
-        </div>
         <div id="stormWarning" class="hidden absolute top-6 left-1/2 transform -translate-x-1/2 bg-red-900 bg-opacity-80 text-white px-6 py-3 rounded-lg flex items-center">
           <i data-feather="alert-circle" class="mr-2"></i>
           <span>STORM APPROACHING! MOVE TO SAFE ZONE!</span>
@@ -160,9 +149,6 @@
     const continueBtn = document.getElementById('continueBtn');
     const biomeGrid = document.getElementById('biomeGrid');
-    const minimapCanvas = document.getElementById('minimapCanvas');
-    const miniCtx = minimapCanvas.getContext('2d');
     // World
     const WORLD = { width: 6000, height: 4000 };
     let camera = { x:0, y:0 };
@@ -171,12 +157,7 @@
       const ctn = document.getElementById('canvasContainer');
       canvas.width = Math.max(900, Math.floor(ctn.clientWidth));
       canvas.height = Math.max(560, Math.floor(ctn.clientHeight));
-      // keep minimap internal pixel buffer consistent
-      minimapCanvas.width = 220;
-      minimapCanvas.height = 140;
       cameraUpdate();
-      // invalidate minimap terrain cache to adjust if world/scale changed
-      miniTerrainCache = null;
     }
     window.addEventListener('resize', resizeCanvas);
@@ -273,7 +254,7 @@
     function generateLootForBiome(b){
       const roll = Math.random();
       if (roll < 0.35) return { type:'medkit', amount:1 };
-      if (roll < 0.7) return { type:'materials', amount: 10 };
       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 },
@@ -284,60 +265,17 @@
     }
     // Behaviour tuning
-    const VIEW_RANGE = 1200;
-    const SPAWN_PROTECT_MS = 1200;
-    // collision helpers
-    function getObjectRadius(obj){
-      if (!obj) return 18;
-      if (obj.type === 'wall') return 28;
-      if (obj.type === 'stone') return 18;
-      if (obj.type === 'wood') return 18;
-      return 16;
-    }
-    function chestRadius(){ return 18; }
-    function circleOverlap(x1,y1,r1,x2,y2,r2){
-      return Math.hypot(x1-x2,y1-y2) < (r1 + r2);
-    }
-    function isCollidingSolid(x,y,r){
-      for (const o of objects){
-        if (o.dead) continue;
-        const rr = getObjectRadius(o);
-        if (circleOverlap(x,y,r,o.x,o.y,rr)) return true;
-      }
-      for (const c of chests){
-        if (c.opened) continue;
-        if (circleOverlap(x,y,r,c.x,c.y,chestRadius())) return true;
-      }
-      return false;
-    }
-    function moveEntityWithCollision(entity, dx, dy, radius){
-      const oldX = entity.x, oldY = entity.y;
-      let nx = entity.x + dx;
-      entity.x = nx;
-      if (entity.x < radius) entity.x = radius;
-      if (entity.x > WORLD.width - radius) entity.x = WORLD.width - radius;
-      if (isCollidingSolid(entity.x, entity.y, radius)){
-        entity.x = oldX;
-      }
-      let ny = entity.y + dy;
-      entity.y = ny;
-      if (entity.y < radius) entity.y = radius;
-      if (entity.y > WORLD.height - radius) entity.y = WORLD.height - radius;
-      if (isCollidingSolid(entity.x, entity.y, radius)){
-        entity.y = oldY;
-      }
-    }
     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);
         const loot = generateLootForBiome(biomeAt(x,y));
-        if (loot.type === 'materials') loot.amount = 10;
         chests.push({ x,y, opened:false, loot });
       }
       for (let i=0;i<700;i++){
@@ -349,6 +287,7 @@
         const hp = type==='wood'?40 : (type==='stone'?80:160);
         objects.push({ x,y, type, hp, maxHp:hp, dead:false });
       }
       const now = performance.now();
       for (let i=0;i<49;i++){
         const ex = rand(300, WORLD.width-300);
@@ -357,7 +296,7 @@
           id:'e'+i, x:ex, y:ey, radius:14, angle:rand(0,Math.PI*2), speed:110+rand(-20,20),
           health: 80 + randInt(0,40), lastMelee:0, meleeRate:800 + randInt(-200,200),
           roamTimer: rand(0,3),
-          inventory: [null,null,null,null,null],
           selectedSlot: 0,
           equippedIndex: -1,
           materials: 0,
@@ -365,12 +304,11 @@
           reloadingUntil: 0,
           reloadPending: false,
           lastAttackedTime: 0,
-          lastAttackerId: null,
           state: 'gather',
           gatherTimeLeft: rand(8,16),
           target: null,
           nextHealTime: 0,
-          spawnSafeUntil: now + SPAWN_PROTECT_MS
         });
       }
       updatePlayerCount();
@@ -667,11 +605,6 @@
       return closest;
     }
-    function findEnemyById(id){
-      if (!id) return null;
-      return enemies.find(en => en.id === id) || null;
-    }
     // Bullets update
     function bulletsUpdate(dt){
       for (let i=bullets.length-1;i>=0;i--){
@@ -693,7 +626,6 @@
             if (Math.hypot(e.x - b.x, e.y - b.y) < 14){
               e.health -= b.dmg;
               e.lastAttackedTime = performance.now();
-              e.lastAttackerId = b.shooter;
               if (e.health <= 0){ e.health = 0; if (b.shooter === 'player'){ player.kills++; player.materials += 2; updatePlayerCount(); } }
               bullets.splice(i,1); break;
             }
@@ -746,29 +678,39 @@
     // Enemy AI with gather-first + separation + reload with delay
     function updateEnemies(dt, now){
-      const minSeparation = 20;
       for (const e of enemies){
         if (e.health <= 0) continue;
         if (!e.spawnSafeUntil) e.spawnSafeUntil = performance.now() + SPAWN_PROTECT_MS;
-        // storm handling (move to safe zone)
         if (storm.active){
           const distToSafeCenter = Math.hypot(e.x - storm.centerX, e.y - storm.centerY);
           if (distToSafeCenter > storm.radius){
             e.state = 'toSafe';
             e.angle = Math.atan2(storm.centerY - e.y, storm.centerX - e.x);
-            const speedMult = 0.95;
-            const dx = Math.cos(e.angle) * e.speed * dt * speedMult;
-            const dy = Math.sin(e.angle) * e.speed * dt * speedMult;
-            moveEntityWithCollision(e, dx, dy, e.radius);
             if (Math.random() < 0.02) e.angle += (Math.random()-0.5)*0.5;
-            continue;
           }
         }
         if (now - e.lastAttackedTime < 4000) e.state = 'combat';
         if (e.state === 'gather') e.gatherTimeLeft -= dt;
         if (e.health < 60 && now >= (e.nextHealTime || 0)){
           let medIdx = -1;
           for (let s=0;s<5;s++){
@@ -785,18 +727,20 @@
           }
         }
         const hasUsefulWeapon = e.inventory.some(it => it && it.type === 'weapon' && (it.ammoInMag > 0 || it.ammoReserve > 0));
         if ((e.gatherTimeLeft <= 0 || e.materials >= 20 || hasUsefulWeapon) && e.state === 'gather') e.state = 'combat';
         if (e.state === 'gather'){
           if (now >= (e.spawnSafeUntil || 0)){
             let p = findNearestPickup(e, 240);
             if (p){
               const angle = Math.atan2(p.y - e.y, p.x - e.x);
               e.angle = angle;
-              const dx = Math.cos(e.angle) * e.speed * dt * 0.9;
-              const dy = Math.sin(e.angle) * e.speed * dt * 0.9;
-              moveEntityWithCollision(e, dx, dy, e.radius);
               if (Math.hypot(p.x - e.x, p.y - e.y) < 18){
                 enemyPickupCollect(e, p);
                 const idx = pickups.indexOf(p);
@@ -811,9 +755,8 @@
             const d = Math.hypot(chestTarget.x - e.x, chestTarget.y - e.y);
             if (d > 20){
               e.angle = Math.atan2(chestTarget.y - e.y, chestTarget.x - e.x);
-              const dx = Math.cos(e.angle) * e.speed * dt * 0.9;
-              const dy = Math.sin(e.angle) * e.speed * dt * 0.9;
-              moveEntityWithCollision(e, dx, dy, e.radius);
             } else {
               chestTarget.opened = true;
               const loot = chestTarget.loot;
@@ -829,9 +772,8 @@
             const d = Math.hypot(objTarget.x - e.x, objTarget.y - e.y);
             if (d > 26){
               e.angle = Math.atan2(objTarget.y - e.y, objTarget.x - e.x);
-              const dx = Math.cos(e.angle) * e.speed * dt * 0.8;
-              const dy = Math.sin(e.angle) * e.speed * dt * 0.8;
-              moveEntityWithCollision(e, dx, dy, e.radius);
             } else {
               objTarget.hp -= 40 * dt;
               if (objTarget.hp <= 0 && !objTarget.dead){
@@ -848,15 +790,17 @@
             continue;
           }
-          const dx = Math.cos(e.angle) * e.speed * dt * 0.25;
-          const dy = Math.sin(e.angle) * e.speed * dt * 0.25;
-          moveEntityWithCollision(e, dx, dy, e.radius);
           if (Math.random() < 0.01) e.angle += (Math.random()-0.5)*2;
           continue;
         }
         if (e.equippedIndex === -1) enemyEquipBestWeapon(e);
         if (e.reloadPending){
           if (now >= e.reloadingUntil){
             const eq = e.inventory[e.equippedIndex];
@@ -866,56 +810,92 @@
           }
         }
         if (e.equippedIndex >= 0){
           const eq = e.inventory[e.equippedIndex];
           if (eq && eq.type === 'weapon' && eq.ammoInMag <= 0 && eq.ammoReserve > 0 && !e.reloadPending && now >= e.reloadingUntil){
             e.reloadPending = true;
-            e.reloadingUntil = now + 600 + rand(-100,100);
           }
         }
-        let target = null;
-        if (e.lastAttackerId && e.lastAttackerId !== 'player'){
-          const attacker = findEnemyById(e.lastAttackerId);
-          if (attacker && attacker.health > 0){ target = attacker; }
-          else { e.lastAttackerId = null; }
-        }
-        if (!target){
-          const distToPlayer = Math.hypot(player.x - e.x, player.y - e.y);
-          if (distToPlayer <= VIEW_RANGE){
-            target = player;
           } else {
-            const p = findNearestPickup(e, 1200);
-            const c = findNearestChest(e, 1200);
-            const h = findNearestHarvestable(e, 1200);
-            let candidate = null, cd = Infinity;
-            if (p){ const d=Math.hypot(p.x-e.x,p.y-e.y); if (d<cd){ candidate=p; cd=d; } }
-            if (c){ const d=Math.hypot(c.x-e.x,c.y-e.y); if (d<cd){ candidate=c; cd=d; } }
-            if (h){ const d=Math.hypot(h.x-e.x,h.y-e.y); if (d<cd){ candidate=h; cd=d; } }
-            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 < cd && d <= 800){
-                if (Math.random() < 0.6 || e.state === 'combat'){
-                  candidate = other; cd = d;
-                }
-              }
-            }
-            if (candidate) target = candidate;
           }
         }
         if (!target){
           e.x += Math.cos(e.angle) * e.speed * dt * 0.7;
           e.y += Math.sin(e.angle) * e.speed * dt * 0.7;
           if (Math.random() < 0.02) e.angle += (Math.random()-0.5)*1.5;
-          moveEntityWithCollision(e, 0, 0, e.radius);
           continue;
         }
         if (target === player){
-          const distToPlayer = Math.hypot(player.x - e.x, player.y - e.y);
           if (distToPlayer < 36 && now - e.lastMelee > e.meleeRate){
             e.lastMelee = now;
             const dmg = 10 + randInt(0,8);
@@ -926,7 +906,7 @@
             const eq = e.inventory[e.equippedIndex];
             if (eq && eq.type === 'weapon' && !e.reloadPending && now - (e.lastShot||0) > (eq.weapon.rate || 300)){
               if (eq.ammoInMag <= 0){
-                // reload handled above
               } else {
                 if (hasLineOfSight(e.x, e.y, target.x, target.y)){
                   e.lastShot = now;
@@ -935,44 +915,43 @@
                   shootBullet(e.x + Math.cos(angle)*12, e.y + Math.sin(angle)*12, target.x + (Math.random()-0.5)*6, target.y + (Math.random()-0.5)*6, eq, e.id);
                   e.lastAttackedTime = now;
                 } else {
                   e.angle = Math.atan2(target.y - e.y, target.x - e.x);
-                  const dx = Math.cos(e.angle) * e.speed * dt * 0.6;
-                  const dy = Math.sin(e.angle) * e.speed * dt * 0.6;
-                  moveEntityWithCollision(e, dx, dy, e.radius);
                 }
               }
             } else {
               e.angle = Math.atan2(target.y - e.y, target.x - e.x);
-              const dx = Math.cos(e.angle) * e.speed * dt * 0.9;
-              const dy = Math.sin(e.angle) * e.speed * dt * 0.9;
-              moveEntityWithCollision(e, dx, dy, e.radius);
             }
           } else {
             e.angle = Math.atan2(target.y - e.y, target.x - e.x);
-            const dx = Math.cos(e.angle) * e.speed * dt * 0.9;
-            const dy = Math.sin(e.angle) * e.speed * dt * 0.9;
-            moveEntityWithCollision(e, dx, dy, e.radius);
           }
         } else {
           const td = Math.hypot(target.x - e.x, target.y - e.y);
-          if (target.type === 'weapon' || target.type === 'medkit' || target.type === 'materials' || target.type === 'ammo'){
             if (td > 20){
               e.angle = Math.atan2(target.y - e.y, target.x - e.x);
-              const dx = Math.cos(e.angle) * e.speed * dt * 0.9;
-              const dy = Math.sin(e.angle) * e.speed * dt * 0.9;
-              moveEntityWithCollision(e, dx, dy, e.radius);
             } else {
               enemyPickupCollect(e, target);
               const idx = pickups.indexOf(target);
               if (idx >= 0) pickups.splice(idx,1);
               e.state = 'gather';
             }
-          } else if (target.hasOwnProperty('loot')){
             if (td > 20){
               e.angle = Math.atan2(target.y - e.y, target.x - e.x);
-              const dx = Math.cos(e.angle) * e.speed * dt * 0.9;
-              const dy = Math.sin(e.angle) * e.speed * dt * 0.9;
-              moveEntityWithCollision(e, dx, dy, e.radius);
             } else {
               target.opened = true;
               const loot = target.loot;
@@ -981,12 +960,11 @@
               else if (loot.type === 'materials') enemyPickupCollect(e, { type:'materials', amount: loot.amount || 10 });
               e.state = 'gather';
             }
-          } else if (target.hasOwnProperty('type') && (target.type === 'wood' || target.type === 'stone')){
             if (td > 26){
               e.angle = Math.atan2(target.y - e.y, target.x - e.x);
-              const dx = Math.cos(e.angle) * e.speed * dt * 0.8;
-              const dy = Math.sin(e.angle) * e.speed * dt * 0.8;
-              moveEntityWithCollision(e, dx, dy, e.radius);
             } else {
               target.hp -= 40 * dt;
               if (target.hp <= 0 && !target.dead){
@@ -996,27 +974,20 @@
               e.state = 'gather';
             }
           } else {
             if (td > 40){
               e.angle = Math.atan2(target.y - e.y, target.x - e.x);
-              const dx = Math.cos(e.angle) * e.speed * dt * 0.7;
-              const dy = Math.sin(e.angle) * e.speed * dt * 0.7;
-              moveEntityWithCollision(e, dx, dy, e.radius);
             } else {
-              if (now - e.lastMelee > e.meleeRate){
-                e.lastMelee = now;
-                if (target && target.health > 0){
-                  target.health -= 8 + randInt(0,6);
-                  target.lastAttackedTime = now;
-                  target.lastAttackerId = e.id;
-                  if (target.health <= 0) target.health = 0;
-                }
-              }
             }
           }
         }
       }
-      // Separation and simple repulsion
       for (let i = 0; i < enemies.length; i++){
         const a = enemies[i];
         if (!a || a.health <= 0) continue;
@@ -1029,12 +1000,14 @@
           if (d < minD){
             const overlap = (minD - d) * 0.5;
             const nx = dx / d, ny = dy / d;
             b.x += nx * overlap;
             b.y += ny * overlap;
             a.x -= nx * overlap;
             a.y -= ny * overlap;
           }
         }
         const pdx = a.x - player.x, pdy = a.y - player.y;
         const pd = Math.hypot(pdx,pdy) || 0.0001;
         const avoidDist = 24;
@@ -1044,6 +1017,7 @@
           a.x += nx * overlap;
           a.y += ny * overlap;
         }
         a.x = Math.max(12, Math.min(WORLD.width-12, a.x));
         a.y = Math.max(12, Math.min(WORLD.height-12, a.y));
       }
@@ -1107,20 +1081,12 @@
         }
       }
       if (storm.active){
-        ctx.save();
-        ctx.fillStyle = 'rgba(10,30,80,0.45)';
-        ctx.fillRect(0,0,canvas.width,canvas.height);
         const sc = worldToScreen(storm.centerX, storm.centerY);
-        ctx.globalCompositeOperation = 'destination-out';
-        ctx.beginPath();
-        ctx.arc(sc.x, sc.y, storm.radius, 0, Math.PI*2);
-        ctx.fill();
-        ctx.globalCompositeOperation = 'source-over';
-        ctx.strokeStyle = 'rgba(255,200,80,0.9)';
-        ctx.lineWidth = 3;
-        ctx.beginPath();
-        ctx.arc(sc.x, sc.y, storm.radius, 0, Math.PI*2);
-        ctx.stroke();
         ctx.restore();
       }
     }
@@ -1195,6 +1161,7 @@
         const hpPct = Math.max(0, Math.min(1, e.health/120));
         ctx.fillStyle='#ff6b6b'; ctx.fillRect(-18,-22,36*hpPct,6);
         if (e.equippedIndex >= 0 && e.inventory[e.equippedIndex] && e.inventory[e.equippedIndex].type === 'weapon'){
           const we = e.inventory[e.equippedIndex];
           const color = we.weapon.color || '#ddd';
@@ -1224,6 +1191,7 @@
           }
         }
         ctx.fillStyle = e.state === 'gather' ? 'rgba(0,200,200,0.9)' : (e.state === 'combat' ? 'rgba(255,80,80,0.95)' : 'rgba(255,200,80,0.9)');
         ctx.beginPath(); ctx.arc(18, -18, 5, 0, Math.PI*2); ctx.fill();
         ctx.restore();
@@ -1288,79 +1256,7 @@
       ctx.restore();
     }
-    // Minimap caching to avoid heavy per-frame terrain rebuild
-    let miniTerrainCache = null;
-    function buildMiniTerrainCache(){
-      const mw = minimapCanvas.width;
-      const mh = minimapCanvas.height;
-      const scaleX = WORLD.width / mw;
-      const scaleY = WORLD.height / mh;
-      const img = miniCtx.createImageData(mw, mh);
-      for (let my=0; my<mh; my++){
-        for (let mx=0; mx<mw; mx++){
-          const wx = Math.floor(mx * scaleX + scaleX/2);
-          const wy = Math.floor(my * scaleY + scaleY/2);
-          const b = biomeAt(wx, wy);
-          let col = [32,58,43];
-          if (b==='desert') col = [203,183,139];
-          else if (b==='forest') col = [22,65,31];
-          else if (b==='oasis') col = [39,75,82];
-          else if (b==='ruins') col = [74,59,59];
-          const idx = (my*mw + mx)*4;
-          img.data[idx] = col[0];
-          img.data[idx+1] = col[1];
-          img.data[idx+2] = col[2];
-          img.data[idx+3] = 255;
-        }
-      }
-      miniTerrainCache = img;
-    }
-    function drawMinimap(){
-      const mw = minimapCanvas.width;
-      const mh = minimapCanvas.height;
-      if (!miniTerrainCache) buildMiniTerrainCache();
-      miniCtx.putImageData(miniTerrainCache, 0, 0);
-      // draw storm overlay: color outside safe zone, leave inside transparent
-      if (storm.active){
-        miniCtx.save();
-        miniCtx.fillStyle = 'rgba(10,30,80,0.55)';
-        miniCtx.fillRect(0,0,mw,mh);
-        miniCtx.globalCompositeOperation = 'destination-out';
-        const cx = (storm.centerX) / WORLD.width * mw;
-        const cy = (storm.centerY) / WORLD.height * mh;
-        const r = storm.radius / WORLD.width * mw;
-        miniCtx.beginPath();
-        miniCtx.arc(cx, cy, r, 0, Math.PI*2);
-        miniCtx.fill();
-        miniCtx.globalCompositeOperation = 'source-over';
-        miniCtx.strokeStyle = 'rgba(255,200,80,0.9)';
-        miniCtx.lineWidth = 2;
-        miniCtx.beginPath();
-        miniCtx.arc(cx, cy, r, 0, Math.PI*2);
-        miniCtx.stroke();
-        miniCtx.restore();
-      }
-      // draw player dot
-      const px = player.x / WORLD.width * mw;
-      const py = player.y / WORLD.height * mh;
-      miniCtx.fillStyle = '#ffff66';
-      miniCtx.beginPath();
-      miniCtx.arc(px, py, 3, 0, Math.PI*2);
-      miniCtx.fill();
-      // draw safe-zone center dot
-      if (storm.active){
-        const cx = (storm.centerX) / WORLD.width * mw;
-        const cy = (storm.centerY) / WORLD.height * mh;
-        miniCtx.fillStyle = 'rgba(255,200,80,0.9)';
-        miniCtx.beginPath();
-        miniCtx.arc(cx, cy, 2, 0, Math.PI*2);
-        miniCtx.fill();
-      }
-    }
     // Main loop
     let lastTime = 0;
@@ -1370,25 +1266,13 @@
       const dt = Math.min(0.05, (ts - lastTime)/1000);
       lastTime = ts;
       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;
-        const mvx = (dx/len) * player.speed * dt;
-        const mvy = (dy/len) * player.speed * dt;
-        const oldX = player.x, oldY = player.y;
-        player.x += mvx;
-        if (player.x < player.radius) player.x = player.radius;
-        if (player.x > WORLD.width - player.radius) player.x = WORLD.width - player.radius;
-        if (isCollidingSolid(player.x, player.y, player.radius)){
-          player.x = oldX;
-        }
-        player.y += mvy;
-        if (player.y < player.radius) player.y = player.radius;
-        if (player.y > WORLD.height - player.radius) player.y = WORLD.height - player.radius;
-        if (isCollidingSolid(player.x, player.y, player.radius)){
-          player.y = oldY;
-        }
       }
       player.x = Math.max(16, Math.min(WORLD.width-16, player.x));
       player.y = Math.max(16, Math.min(WORLD.height-16, player.y));
@@ -1405,6 +1289,7 @@
         if (selected && selected.type === 'weapon') activeWeaponItem = selected;
       }
       if (mouse.down){
         if (player.equippedIndex === -1) playerMeleeHit();
         else if (activeWeaponItem && activeWeaponItem.type === 'weapon'){
@@ -1423,26 +1308,27 @@
       if (keys.e){ interactNearby(); keys.e = false; }
       if (keys.q){ tryBuild(); keys.q = false; }
       updateEnemies(dt, performance.now());
       bulletsUpdate(dt);
       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(); }
       }
       for (let i=objects.length-1;i>=0;i--) if (objects[i].dead) objects.splice(i,1);
       updatePlayerCount();
       updateStorm(dt);
       ctx.clearRect(0,0,canvas.width,canvas.height);
-      drawWorld(); drawObjects(); drawChests(); drawPickups(); drawEnemies(); drawBullets(); drawPlayer();
       updateHUD();
-      // minimap draw (cached terrain + overlays) - cheap each frame now
-      drawMinimap();
       if (storm.active && playerInStorm()) stormWarning.classList.remove('hidden'); else stormWarning.classList.add('hidden');
       requestAnimationFrame(gameLoop);
@@ -1451,6 +1337,7 @@
     // Landing -> spawn selection
     let selectedBiome = null;
     function getSpawnForBiome(b){
       if (!b) return { x: WORLD.width/2 + (Math.random()-0.5)*400, y: WORLD.height/2 + (Math.random()-0.5)*400 };
       if (b === 'desert') return { x: rand(200, WORLD.width*0.3), y: rand(200, WORLD.height*0.3) };
       if (b === 'forest') return { x: rand(WORLD.width*0.7, WORLD.width-200), y: rand(200, WORLD.height*0.3) };
@@ -1465,6 +1352,7 @@
     let gameActive = false;
     function startGame(biome){
       selectedBiome = biome || selectedBiome;
       const spawn = getSpawnForBiome(selectedBiome);
       document.getElementById('currentBiome').textContent = selectedBiome ? selectedBiome.toUpperCase() : 'CENTER';
@@ -1487,16 +1375,17 @@
       initHUD();
       cameraUpdate();
       for (const e of enemies){
         if (Math.hypot(e.x - player.x, e.y - player.y) < 180){
           e.x += (Math.random()<0.5? -1:1) * rand(160,260);
           e.y += (Math.random()<0.5? -1:1) * rand(160,260);
         }
         e.inventory = [null,null,null,null,null];
         e.equippedIndex = -1;
         e.spawnSafeUntil = performance.now() + SPAWN_PROTECT_MS;
         e.state = 'gather';
-        e.nextHealTime = 0;
       }
       gameTime = 300; storm.active = false; storm.radius = storm.maxRadius;
@@ -1529,17 +1418,20 @@
     goHomeBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); gameScreen.classList.add('hidden'); landingScreen.classList.remove('hidden'); });
     continueBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); startGame(selectedBiome); });
     document.querySelectorAll('.biome-selector').forEach(el => {
       el.addEventListener('click', (ev)=>{
         document.querySelectorAll('.biome-selector').forEach(x=>x.classList.remove('biome-selected'));
         el.classList.add('biome-selected');
         const biome = el.dataset.biome;
         selectedBiome = biome;
         startGame(biome);
       });
     });
-    // initialization
     resizeCanvas();
     populateWorld();
     feather.replace();

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>BattleZone Royale - Spawn & AI Fixes</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%; }
     /* 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; }
       <div id="canvasContainer" class="relative bg-gray-900 border-4 border-gray-700 rounded-xl max-w-full max-h-full">
         <canvas id="gameCanvas"></canvas>
         <div id="stormWarning" class="hidden absolute top-6 left-1/2 transform -translate-x-1/2 bg-red-900 bg-opacity-80 text-white px-6 py-3 rounded-lg flex items-center">
           <i data-feather="alert-circle" class="mr-2"></i>
           <span>STORM APPROACHING! MOVE TO SAFE ZONE!</span>
     const continueBtn = document.getElementById('continueBtn');
     const biomeGrid = document.getElementById('biomeGrid');
     // World
     const WORLD = { width: 6000, height: 4000 };
     let camera = { x:0, y:0 };
       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);
     function generateLootForBiome(b){
       const roll = Math.random();
       if (roll < 0.35) return { type:'medkit', amount:1 };
+      if (roll < 0.7) return { type:'materials', amount: 10 }; // always 10
       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 },
     }
     // Behaviour tuning
+    const VIEW_RANGE = 1200;          // if player is farther than this, enemies switch target
+    const SPAWN_PROTECT_MS = 1200;    // time after spawn they ignore ground pickups to avoid instant pickup
+    // Populate world - spawn many objects and enemies
     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);
         const loot = generateLootForBiome(biomeAt(x,y));
+        if (loot.type === 'materials') loot.amount = 10; // ensure 10
         chests.push({ x,y, opened:false, loot });
       }
       for (let i=0;i<700;i++){
         const hp = type==='wood'?40 : (type==='stone'?80:160);
         objects.push({ x,y, type, hp, maxHp:hp, dead:false });
       }
+      // spawn enemies - ensure they start unarmed and must loot to obtain weapons
       const now = performance.now();
       for (let i=0;i<49;i++){
         const ex = rand(300, WORLD.width-300);
           id:'e'+i, x:ex, y:ey, radius:14, angle:rand(0,Math.PI*2), speed:110+rand(-20,20),
           health: 80 + randInt(0,40), lastMelee:0, meleeRate:800 + randInt(-200,200),
           roamTimer: rand(0,3),
+          inventory: [null,null,null,null,null], // explicitly no weapons at spawn
           selectedSlot: 0,
           equippedIndex: -1,
           materials: 0,
           reloadingUntil: 0,
           reloadPending: false,
           lastAttackedTime: 0,
           state: 'gather',
           gatherTimeLeft: rand(8,16),
           target: null,
           nextHealTime: 0,
+          spawnSafeUntil: now + SPAWN_PROTECT_MS // cooldown: ignore nearby ground pickups for short time
         });
       }
       updatePlayerCount();
       return closest;
     }
     // Bullets update
     function bulletsUpdate(dt){
       for (let i=bullets.length-1;i>=0;i--){
             if (Math.hypot(e.x - b.x, e.y - b.y) < 14){
               e.health -= b.dmg;
               e.lastAttackedTime = performance.now();
               if (e.health <= 0){ e.health = 0; if (b.shooter === 'player'){ player.kills++; player.materials += 2; updatePlayerCount(); } }
               bullets.splice(i,1); break;
             }
     // Enemy AI with gather-first + separation + reload with delay
     function updateEnemies(dt, now){
+      // basic separation step variables
+      const minSeparation = 20; // minimal distance between enemies
+      // Update each enemy movement and actions
       for (const e of enemies){
         if (e.health <= 0) continue;
+        // ensure spawn protection exists
         if (!e.spawnSafeUntil) e.spawnSafeUntil = performance.now() + SPAWN_PROTECT_MS;
+        // If storm is active and enemy is outside safe zone, move to safe zone first
         if (storm.active){
           const distToSafeCenter = Math.hypot(e.x - storm.centerX, e.y - storm.centerY);
           if (distToSafeCenter > storm.radius){
+            // move towards safe zone center
             e.state = 'toSafe';
             e.angle = Math.atan2(storm.centerY - e.y, storm.centerX - e.x);
+            e.x += Math.cos(e.angle) * e.speed * dt * 0.95;
+            e.y += Math.sin(e.angle) * e.speed * dt * 0.95;
+            // avoid getting stuck: allow minor wandering
             if (Math.random() < 0.02) e.angle += (Math.random()-0.5)*0.5;
+            // 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));
+            continue; // priority movement to safe zone
           }
         }
+        // if recently attacked go combat
         if (now - e.lastAttackedTime < 4000) e.state = 'combat';
         if (e.state === 'gather') e.gatherTimeLeft -= dt;
+        // Medkit-only heal (consume medkit, with cooldown)
         if (e.health < 60 && now >= (e.nextHealTime || 0)){
           let medIdx = -1;
           for (let s=0;s<5;s++){
           }
         }
+        // Transition gather->combat only if they actually have weapons/ammo or enough materials or time expired
         const hasUsefulWeapon = e.inventory.some(it => it && it.type === 'weapon' && (it.ammoInMag > 0 || it.ammoReserve > 0));
         if ((e.gatherTimeLeft <= 0 || e.materials >= 20 || hasUsefulWeapon) && e.state === 'gather') e.state = 'combat';
         if (e.state === 'gather'){
+          // Prioritize pickup -> chest -> harvest -> roam
+          // Respect spawn protection so they don't instantly pick up something they spawned on
           if (now >= (e.spawnSafeUntil || 0)){
             let p = findNearestPickup(e, 240);
             if (p){
               const angle = Math.atan2(p.y - e.y, p.x - e.x);
               e.angle = angle;
+              e.x += Math.cos(e.angle) * e.speed * dt * 0.9;
+              e.y += Math.sin(e.angle) * e.speed * dt * 0.9;
               if (Math.hypot(p.x - e.x, p.y - e.y) < 18){
                 enemyPickupCollect(e, p);
                 const idx = pickups.indexOf(p);
             const d = Math.hypot(chestTarget.x - e.x, chestTarget.y - e.y);
             if (d > 20){
               e.angle = Math.atan2(chestTarget.y - e.y, chestTarget.x - e.x);
+              e.x += Math.cos(e.angle) * e.speed * dt * 0.9;
+              e.y += Math.sin(e.angle) * e.speed * dt * 0.9;
             } else {
               chestTarget.opened = true;
               const loot = chestTarget.loot;
             const d = Math.hypot(objTarget.x - e.x, objTarget.y - e.y);
             if (d > 26){
               e.angle = Math.atan2(objTarget.y - e.y, objTarget.x - e.x);
+              e.x += Math.cos(e.angle) * e.speed * dt * 0.8;
+              e.y += Math.sin(e.angle) * e.speed * dt * 0.8;
             } else {
               objTarget.hp -= 40 * dt;
               if (objTarget.hp <= 0 && !objTarget.dead){
             continue;
           }
+          // 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;
           continue;
         }
+        // Combat state
         if (e.equippedIndex === -1) enemyEquipBestWeapon(e);
+        // Handle reload pending (delayed reload to simulate player reload)
         if (e.reloadPending){
           if (now >= e.reloadingUntil){
             const eq = e.inventory[e.equippedIndex];
           }
         }
+        // If equipped weapon empty and reserve present, start reload (delayed)
         if (e.equippedIndex >= 0){
           const eq = e.inventory[e.equippedIndex];
           if (eq && eq.type === 'weapon' && eq.ammoInMag <= 0 && eq.ammoReserve > 0 && !e.reloadPending && now >= e.reloadingUntil){
             e.reloadPending = true;
+            e.reloadingUntil = now + 600 + rand(-100,100); // ~600ms reload time
           }
         }
+        // choose a target: prefer player if within view range, otherwise pick something else (pickup/chest/harvest/nearest enemy)
+        let target = player;
+        let bestDist = Math.hypot(player.x - e.x, player.y - e.y);
+        if (bestDist > VIEW_RANGE){
+          // player is too far: find the nearest meaningful target
+          const p = findNearestPickup(e, 1200);
+          const c = findNearestChest(e, 1200);
+          const h = findNearestHarvestable(e, 1200);
+          let candidate = null, cd = Infinity;
+          if (p){ const d=Math.hypot(p.x-e.x,p.y-e.y); if (d<cd){ candidate=p; cd=d; } }
+          if (c){ const d=Math.hypot(c.x-e.x,c.y-e.y); if (d<cd){ candidate=c; cd=d; } }
+          if (h){ const d=Math.hypot(h.x-e.x,h.y-e.y); if (d<cd){ candidate=h; cd=d; } }
+          // try target nearest enemy (tend to form small groups) but don't go after a dead one
+          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 < cd && d <= 800){ candidate = other; cd = d; }
+          }
+          if (candidate){
+            target = candidate;
+            bestDist = cd;
           } else {
+            target = null; bestDist = Infinity; // no specific target - roam
           }
+        } else {
+          // still consider switching to another close enemy sometimes
+          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; }
+          }
+        }
+        // retreat/build if low HP and has materials
+        const distToPlayer = Math.hypot(player.x - e.x, player.y - e.y);
+        if (distToPlayer < 160 && e.health < 35 && e.materials >= 10 && Math.random() < 0.5){
+          enemyTryBuild(e);
         }
+        // If no target (roaming), do simple roam
         if (!target){
           e.x += Math.cos(e.angle) * e.speed * dt * 0.7;
           e.y += Math.sin(e.angle) * e.speed * dt * 0.7;
           if (Math.random() < 0.02) e.angle += (Math.random()-0.5)*1.5;
           continue;
         }
+        const blocked = !hasLineOfSight(e.x, e.y, target.x, target.y);
+        if (blocked){
+          const blocker = findBlockingObject(e.x, e.y, target.x, target.y);
+          if (blocker){
+            const db = Math.hypot(blocker.x - e.x, blocker.y - e.y);
+            if (db < 36){
+              blocker.hp -= 18 * dt * 2;
+              if (blocker.hp <= 0){ blocker.dead = true; e.materials += (blocker.type === 'wood' ? 3 : 6); }
+            } else {
+              if (e.equippedIndex >= 0){
+                const eq = e.inventory[e.equippedIndex];
+                if (eq && eq.type === 'weapon' && eq.ammoInMag > 0 && !e.reloadPending && now - e.lastShot > (eq.weapon.rate || 300)){
+                  e.lastShot = now;
+                  eq.ammoInMag -= 1;
+                  const angle = Math.atan2(blocker.y - e.y, blocker.x - e.x);
+                  shootBullet(e.x + Math.cos(angle)*12, e.y + Math.sin(angle)*12, blocker.x + (Math.random()-0.5)*6, blocker.y + (Math.random()-0.5)*6, eq, e.id);
+                }
+              } else {
+                e.angle = Math.atan2(blocker.y - e.y, blocker.x - e.x);
+                e.x += Math.cos(e.angle) * e.speed * dt * 0.8;
+                e.y += Math.sin(e.angle) * e.speed * dt * 0.8;
+              }
+            }
+            continue;
+          }
+        }
+        // If target is player, perform attack logic; if target is other entity/object, adapt accordingly
         if (target === player){
+          // Attack: if melee range
           if (distToPlayer < 36 && now - e.lastMelee > e.meleeRate){
             e.lastMelee = now;
             const dmg = 10 + randInt(0,8);
             const eq = e.inventory[e.equippedIndex];
             if (eq && eq.type === 'weapon' && !e.reloadPending && now - (e.lastShot||0) > (eq.weapon.rate || 300)){
               if (eq.ammoInMag <= 0){
+                // reload will be handled above
               } else {
                 if (hasLineOfSight(e.x, e.y, target.x, target.y)){
                   e.lastShot = now;
                   shootBullet(e.x + Math.cos(angle)*12, e.y + Math.sin(angle)*12, target.x + (Math.random()-0.5)*6, target.y + (Math.random()-0.5)*6, eq, e.id);
                   e.lastAttackedTime = now;
                 } else {
+                  // move to get LOS
                   e.angle = Math.atan2(target.y - e.y, target.x - e.x);
+                  e.x += Math.cos(e.angle) * e.speed * dt * 0.6;
+                  e.y += Math.sin(e.angle) * e.speed * dt * 0.6;
                 }
               }
             } else {
+              // unarmed behavior: rush to melee
               e.angle = Math.atan2(target.y - e.y, target.x - e.x);
+              e.x += Math.cos(e.angle) * e.speed * dt * 0.9;
+              e.y += Math.sin(e.angle) * e.speed * dt * 0.9;
             }
           } else {
+            // no weapon: rush in
             e.angle = Math.atan2(target.y - e.y, target.x - e.x);
+            e.x += Math.cos(e.angle) * e.speed * dt * 0.9;
+            e.y += Math.sin(e.angle) * e.speed * dt * 0.9;
           }
         } else {
+          // Target is a chest/pickup/harvestable/other enemy
           const td = Math.hypot(target.x - e.x, target.y - e.y);
+          if (target.type === 'weapon' || target.type === 'medkit' || target.type === 'materials' || target.type === 'ammo'){ // a pickup
             if (td > 20){
               e.angle = Math.atan2(target.y - e.y, target.x - e.x);
+              e.x += Math.cos(e.angle) * e.speed * dt * 0.9;
+              e.y += Math.sin(e.angle) * e.speed * dt * 0.9;
             } else {
               enemyPickupCollect(e, target);
               const idx = pickups.indexOf(target);
               if (idx >= 0) pickups.splice(idx,1);
               e.state = 'gather';
             }
+          } else if (target.hasOwnProperty('loot')){ // chest
             if (td > 20){
               e.angle = Math.atan2(target.y - e.y, target.x - e.x);
+              e.x += Math.cos(e.angle) * e.speed * dt * 0.9;
+              e.y += Math.sin(e.angle) * e.speed * dt * 0.9;
             } else {
               target.opened = true;
               const loot = target.loot;
               else if (loot.type === 'materials') enemyPickupCollect(e, { type:'materials', amount: loot.amount || 10 });
               e.state = 'gather';
             }
+          } else if (target.hasOwnProperty('type') && (target.type === 'wood' || target.type === 'stone')){ // harvestable object
             if (td > 26){
               e.angle = Math.atan2(target.y - e.y, target.x - e.x);
+              e.x += Math.cos(e.angle) * e.speed * dt * 0.8;
+              e.y += Math.sin(e.angle) * e.speed * dt * 0.8;
             } else {
               target.hp -= 40 * dt;
               if (target.hp <= 0 && !target.dead){
               e.state = 'gather';
             }
           } else {
+            // target is another enemy (group up / follow)
             if (td > 40){
               e.angle = Math.atan2(target.y - e.y, target.x - e.x);
+              e.x += Math.cos(e.angle) * e.speed * dt * 0.7;
+              e.y += Math.sin(e.angle) * e.speed * dt * 0.7;
             } else {
+              // stay near ally
+              if (Math.random() < 0.02) e.angle += (Math.random()-0.5)*0.5;
             }
           }
         }
       }
+      // Separation pass to avoid clumping (simple repulsion)
       for (let i = 0; i < enemies.length; i++){
         const a = enemies[i];
         if (!a || a.health <= 0) continue;
           if (d < minD){
             const overlap = (minD - d) * 0.5;
             const nx = dx / d, ny = dy / d;
+            // push both away proportional to overlap
             b.x += nx * overlap;
             b.y += ny * overlap;
             a.x -= nx * overlap;
             a.y -= ny * overlap;
           }
         }
+        // also avoid getting on top of player
         const pdx = a.x - player.x, pdy = a.y - player.y;
         const pd = Math.hypot(pdx,pdy) || 0.0001;
         const avoidDist = 24;
           a.x += nx * overlap;
           a.y += ny * overlap;
         }
+        // clamp to world
         a.x = Math.max(12, Math.min(WORLD.width-12, a.x));
         a.y = Math.max(12, Math.min(WORLD.height-12, a.y));
       }
         }
       }
       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();
       }
     }
         const hpPct = Math.max(0, Math.min(1, e.health/120));
         ctx.fillStyle='#ff6b6b'; ctx.fillRect(-18,-22,36*hpPct,6);
+        // visible equipped weapon
         if (e.equippedIndex >= 0 && e.inventory[e.equippedIndex] && e.inventory[e.equippedIndex].type === 'weapon'){
           const we = e.inventory[e.equippedIndex];
           const color = we.weapon.color || '#ddd';
           }
         }
+        // state marker
         ctx.fillStyle = e.state === 'gather' ? 'rgba(0,200,200,0.9)' : (e.state === 'combat' ? 'rgba(255,80,80,0.95)' : 'rgba(255,200,80,0.9)');
         ctx.beginPath(); ctx.arc(18, -18, 5, 0, Math.PI*2); ctx.fill();
         ctx.restore();
       ctx.restore();
     }
+    function drawCrosshair(){}
     // Main loop
     let lastTime = 0;
       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.y += (dy/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));
         if (selected && selected.type === 'weapon') activeWeaponItem = selected;
       }
+      // player attack
       if (mouse.down){
         if (player.equippedIndex === -1) playerMeleeHit();
         else if (activeWeaponItem && activeWeaponItem.type === 'weapon'){
       if (keys.e){ interactNearby(); keys.e = false; }
       if (keys.q){ tryBuild(); keys.q = false; }
+      // update
       updateEnemies(dt, performance.now());
       bulletsUpdate(dt);
+      // player pickup auto-collect
       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();
       if (storm.active && playerInStorm()) stormWarning.classList.remove('hidden'); else stormWarning.classList.add('hidden');
       requestAnimationFrame(gameLoop);
     // Landing -> spawn selection
     let selectedBiome = null;
     function getSpawnForBiome(b){
+      // choose a spawn area region for each biome
       if (!b) return { x: WORLD.width/2 + (Math.random()-0.5)*400, y: WORLD.height/2 + (Math.random()-0.5)*400 };
       if (b === 'desert') return { x: rand(200, WORLD.width*0.3), y: rand(200, WORLD.height*0.3) };
       if (b === 'forest') return { x: rand(WORLD.width*0.7, WORLD.width-200), y: rand(200, WORLD.height*0.3) };
     let gameActive = false;
     function startGame(biome){
+      // set current biome & spawn where selected
       selectedBiome = biome || selectedBiome;
       const spawn = getSpawnForBiome(selectedBiome);
       document.getElementById('currentBiome').textContent = selectedBiome ? selectedBiome.toUpperCase() : 'CENTER';
       initHUD();
       cameraUpdate();
+      // small safety: ensure enemies don't spawn right on player
       for (const e of enemies){
         if (Math.hypot(e.x - player.x, e.y - player.y) < 180){
           e.x += (Math.random()<0.5? -1:1) * rand(160,260);
           e.y += (Math.random()<0.5? -1:1) * rand(160,260);
         }
+        // ensure they are unarmed at start
         e.inventory = [null,null,null,null,null];
         e.equippedIndex = -1;
         e.spawnSafeUntil = performance.now() + SPAWN_PROTECT_MS;
         e.state = 'gather';
       }
       gameTime = 300; storm.active = false; storm.radius = storm.maxRadius;
     goHomeBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); gameScreen.classList.add('hidden'); landingScreen.classList.remove('hidden'); });
     continueBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); startGame(selectedBiome); });
+    // Biome click behavior: select & start spawn there
     document.querySelectorAll('.biome-selector').forEach(el => {
       el.addEventListener('click', (ev)=>{
+        // visual selection feedback
         document.querySelectorAll('.biome-selector').forEach(x=>x.classList.remove('biome-selected'));
         el.classList.add('biome-selected');
         const biome = el.dataset.biome;
         selectedBiome = biome;
+        // start game immediately with the selected biome spawn region
         startGame(biome);
       });
     });
+    // initialisation
     resizeCanvas();
     populateWorld();
     feather.replace();