Spaces:

bbc123321
/

battle-zone-royale

Running

App Files Files Community

bbc123321 commited on Oct 13, 2025

Commit

e19e778

verified ·

1 Parent(s): a5fb081

Manual changes saved

Browse files

Files changed (1) hide show

index.html +451 -509

index.html CHANGED Viewed

@@ -1,45 +1,106 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>BattleZone Royale - Enhanced</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
-    html, body, #root { height:100%; margin:0; background:#0b1220; color:#fff; font-family:monospace; }
-    #gameCanvas { display:block; user-select:none; cursor:crosshair; box-shadow:0 0 20px rgba(0,0,0,.5); }
-    .biome-selector { transition:all .25s ease; }
-    .biome-selector:hover { transform:scale(1.03); box-shadow:0 0 10px rgba(255,215,0,.15); }
-    #canvasContainer { position:relative; flex:1; display:flex; justify-content:center; align-items:center; height:100vh; overflow:hidden; }
-    #stormWarning { z-index:10; }
-    #deathScreen { z-index:20; }
-    /* Minimal HUD tweaks */
-    .hud-pill { background:#111827; padding:.5rem .75rem; border-radius:.5rem; }
   </style>
 </head>
 <body>
-  <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
     </h1>
     <div class="grid grid-cols-2 gap-6 max-w-xl w-full">
-      <div class="biome-selector bg-gray-700 p-6 rounded-lg cursor-pointer hover:bg-yellow-800 flex flex-col items-center" data-biome="desert">
         <i data-feather="sun" class="text-yellow-300 mb-2"></i>
         <h3 class="font-bold text-lg">Golden Dunes</h3>
         <p class="text-xs">High loot, high risk</p>
       </div>
-      <div class="biome-selector bg-gray-700 p-6 rounded-lg cursor-pointer hover:bg-green-800 flex flex-col items-center" data-biome="forest">
         <i data-feather="tree" class="text-green-300 mb-2"></i>
         <h3 class="font-bold text-lg">Shadow Forest</h3>
         <p class="text-xs">Good cover, medium loot</p>
       </div>
-      <div class="biome-selector bg-gray-700 p-6 rounded-lg cursor-pointer hover:bg-blue-800 flex flex-col items-center" data-biome="oasis">
         <i data-feather="droplet" class="text-blue-300 mb-2"></i>
         <h3 class="font-bold text-lg">Crystal Oasis</h3>
         <p class="text-xs">Medium loot, low risk</p>
       </div>
-      <div class="biome-selector bg-gray-700 p-6 rounded-lg cursor-pointer hover:bg-purple-800 flex flex-col items-center" data-biome="ruins">
         <i data-feather="layers" class="text-purple-300 mb-2"></i>
         <h3 class="font-bold text-lg">Ancient Ruins</h3>
         <p class="text-xs">Legendary loot, dangerous</p>
@@ -48,57 +109,138 @@
   </div>
   <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>
-      <div class="flex space-x-4 items-center">
-        <div class="hud-pill flex items-center space-x-2"><i data-feather="map-pin"></i><span id="currentBiome">-</span></div>
-        <div class="hud-pill flex items-center space-x-2"><i data-feather="clock"></i><span id="gameTimer">5:00</span></div>
-        <div class="hud-pill flex items-center space-x-2"><i data-feather="users"></i><span id="playerCount">1/100</span></div>
       </div>
     </header>
     <div class="flex flex-1 overflow-hidden">
-      <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>
         </div>
-        <div id="deathScreen" class="hidden absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center rounded-xl">
           <i data-feather="skull" class="w-16 h-16 text-red-500 mb-4"></i>
           <h2 class="text-4xl font-bold text-red-500 mb-4">YOU DIED!</h2>
           <p class="text-xl mb-6">Better luck next time, soldier!</p>
-          <button id="respawnBtn" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-6 rounded-lg flex items-center">
             <i data-feather="refresh-cw" class="mr-2"></i> Respawn
           </button>
         </div>
       </div>
-      <aside class="w-80 bg-gray-800 rounded-xl p-6 overflow-y-auto flex-shrink-0 flex flex-col gap-6" style="max-height:100vh;">
         <section>
-          <h2 class="text-2xl font-bold text-yellow-400 mb-4 flex items-center"><i data-feather="activity" class="mr-2"></i>Player Stats</h2>
           <div class="space-y-3">
-            <div class="flex justify-between"><span>Health:</span><span id="playerHealth" class="font-bold">100%</span></div>
-            <div class="flex justify-between"><span>Armor:</span><span id="playerArmor" class="font-bold">0%</span></div>
-            <div class="flex justify-between"><span>Materials:</span><span id="playerMaterials" class="font-bold">0</span></div>
-            <div class="flex justify-between"><span>Kills:</span><span id="playerKills" class="font-bold text-red-400">0</span></div>
           </div>
         </section>
         <section>
-          <h2 class="text-2xl font-bold text-yellow-400 mb-4 flex items-center"><i data-feather="briefcase" class="mr-2"></i>Inventory</h2>
-          <div id="inventorySlots" class="grid grid-cols-3 gap-2" aria-label="Inventory slots"></div>
         </section>
         <section>
-          <h2 class="text-2xl font-bold text-yellow-400 mb-4 flex items-center"><i data-feather="command" class="mr-2"></i>Controls</h2>
           <div class="space-y-2 text-sm">
-            <div class="flex items-center"><span class="bg-gray-700 px-2 py-1 rounded mr-2">WASD</span><span>Move</span></div>
-            <div class="flex items-center"><span class="bg-gray-700 px-2 py-1 rounded mr-2">Mouse</span><span>Aim & Shoot</span></div>
-            <div class="flex items-center"><span class="bg-gray-700 px-2 py-1 rounded mr-2">E</span><span>Interact / Loot</span></div>
-            <div class="flex items-center"><span class="bg-gray-700 px-2 py-1 rounded mr-2">1-5</span><span>Switch weapons</span></div>
           </div>
         </section>
       </aside>
@@ -106,581 +248,381 @@
   </div>
   <script>
-    // --- Core setup ---
     let gameActive = false;
-    let selectedBiome = 'forest';
     const canvas = document.getElementById('gameCanvas');
     const ctx = canvas.getContext('2d');
-    const landingScreenEl = document.getElementById('landingScreen');
-    const gameScreenEl = document.getElementById('gameScreen');
     const stormWarningEl = document.getElementById('stormWarning');
     const deathScreenEl = document.getElementById('deathScreen');
     function resizeCanvas() {
       const container = document.getElementById('canvasContainer');
       canvas.width = container.clientWidth;
       canvas.height = container.clientHeight;
-      cameraUpdate();
     }
     window.addEventListener('resize', resizeCanvas);
-    // --- World & Camera (large world, camera follows player) ---
-    const WORLD = { width: 3000, height: 2000 };
-    const TILE_SIZE = 400; // coarse biome tile size
-    const camera = { x: 0, y: 0, wobble:0 };
-    function cameraUpdate() {
-      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));
     }
-    // --- Player ---
-    const player = {
-      x: 0, y: 0, radius: 16, angle: 0, speed: 220, health: 100, armor: 0, kills: 0, materials: 0,
-      currentWeaponIndex: 0, weapons: [], lastShot:0
-    };
-    // --- Input ---
-    const keys = { w:false,a:false,s:false,d:false, e:false };
-    const mouse = { canvasX:0, canvasY:0, worldX:0, worldY:0, down:false };
     window.addEventListener('keydown', (e) => {
       if (!gameActive) return;
-      const k = e.key.toLowerCase();
-      if (keys.hasOwnProperty(k)) keys[k]=true;
-      if (k === '1' || k==='2' || k==='3' || k==='4' || k==='5') {
-        const idx = parseInt(k)-1;
-        if (player.weapons[idx]) player.currentWeaponIndex = idx;
       }
     });
     window.addEventListener('keyup', (e) => {
       if (!gameActive) return;
-      const k = e.key.toLowerCase();
-      if (keys.hasOwnProperty(k)) keys[k]=false;
-      if (k==='e') {
-        // handled in loop interact
       }
     });
     canvas.addEventListener('mousemove', (e) => {
       const rect = canvas.getBoundingClientRect();
       mouse.canvasX = e.clientX - rect.left;
       mouse.canvasY = e.clientY - rect.top;
-      mouse.worldX = mouse.canvasX + camera.x;
-      mouse.worldY = mouse.canvasY + camera.y;
-      const dx = mouse.worldX - player.x;
-      const dy = mouse.worldY - player.y;
       player.angle = Math.atan2(dy, dx);
     });
-    canvas.addEventListener('mousedown', (e) => { if (gameActive) mouse.down = true; });
-    window.addEventListener('mouseup', (e) => { mouse.down = false; });
-    // --- Storm ---
-    const storm = { maxRadius: 900, radius: 900, centerX: WORLD.width/2, centerY: WORLD.height/2, damagePerSecond:1, closingSpeed: 8, active:false };
-    let gameTime = 300, timerInterval=null;
-    // --- Entities: bullets, chests, breakables ---
-    const bullets = [];
-    const chests = [];
-    const objects = []; // breakables
-    // --- Simple biome map generation ---
-    function biomeAt(x,y) {
-      const bx = Math.floor(x / TILE_SIZE);
-      const by = Math.floor(y / TILE_SIZE);
-      const seed = (bx*73856093) ^ (by*19349663);
-      const r = Math.abs(Math.sin(seed)) % 1;
-      if (r < 0.25) return 'desert';
-      if (r < 0.55) return 'forest';
-      if (r < 0.75) return 'oasis';
-      return 'ruins';
-    }
-    // --- Populate world with chests and breakables ---
-    function populateWorld() {
-      chests.length = 0;
-      objects.length = 0;
-      function rand(min,max){ return Math.random()*(max-min)+min; }
-      // Place chests randomly across the world
-      for (let i=0;i<150;i++){
-        const x = rand(100, WORLD.width-100);
-        const y = rand(100, WORLD.height-100);
-        chests.push({ x,y, opened:false, openProgress:0, loot: generateLootForBiome(biomeAt(x,y)) });
-      }
-      // Place breakable objects
-      for (let i=0;i<400;i++){
-        const typeRand = Math.random();
-        let type='wood';
-        if (typeRand>0.75) type='stone';
-        if (typeRand>0.95) type='wall';
-        const x = rand(50, WORLD.width-50);
-        const y = rand(50, WORLD.height-50);
-        const hp = type==='wood'? 40 : (type==='stone'? 80:120);
-        objects.push({ x,y, type, hp, maxHp:hp });
       }
-    }
-    function generateLootForBiome(biome) {
-      const roll = Math.random();
-      if (roll < 0.4) return { type:'medkit', heal:25 };
-      if (roll < 0.75) return { type:'materials', amount: randInt(5,20) };
-      // weapon loot
-      const weapons = [
-        { name:'Pistol', dmg:12, rate:500, 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' },
-      ];
-      const w = weapons[randInt(0,weapons.length-1)];
-      return { type:'weapon', weapon: w };
-    }
-    function randInt(min,max) { return Math.floor(Math.random()*(max-min))+min; }
-    // --- Inventory UI ---
-    function initInventory() {
-      const inventorySlots = document.getElementById('inventorySlots');
-      inventorySlots.innerHTML='';
-      for (let i=0;i<6;i++){
-        const slot = document.createElement('div');
-        slot.className='bg-gray-700 h-16 rounded-lg flex flex-col items-center justify-center text-xs';
-        slot.dataset.index = i;
-        updateSlot(slot, player.weapons[i] || null);
-        inventorySlots.appendChild(slot);
-      }
-      updatePlayerStats();
-    }
-    function updateSlot(elem, weapon) {
-      elem.innerHTML = weapon ? `<div style="font-size:10px">${weapon.name}</div><div style="color:${weapon.color}">●</div>` : '<i data-feather="box" class="text-gray-400"></i><span>Empty</span>';
-    }
-    // --- Player Stats UI update ---
-    function updatePlayerStats() {
-      document.getElementById('playerHealth').textContent = `${Math.max(0,Math.floor(player.health))}%`;
-      document.getElementById('playerArmor').textContent = `${Math.floor(player.armor)}%`;
-      document.getElementById('playerKills').textContent = player.kills;
-      document.getElementById('playerMaterials').textContent = player.materials;
-      document.getElementById('currentBiome').textContent = biomeAt(player.x, player.y);
-      // refresh inventory slots visuals
-      const slots = document.querySelectorAll('#inventorySlots > div');
-      slots.forEach(s => updateSlot(s, player.weapons[parseInt(s.dataset.index)] || null));
-      feather.replace();
     }
-    // --- Damage & interaction ---
-    function shootBullet(originX, originY, targetX, targetY, weapon) {
-      const speed = 1000; // px per sec
-      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.5, traveled:0
-      });
-    }
-    function applyDamageToObject(obj, dmg) {
-      obj.hp -= dmg;
-      if (obj.hp <= 0) {
-        // drop materials
-        const gained = obj.type==='wood'? randInt(3,10) : randInt(8,20);
-        player.materials += gained;
-        // fade out by setting hp to 0 and marking removed
-        obj.dead = true;
-      }
-    }
-    function interactNearby() {
-      // Chests in range
-      const range = 48;
-      for (const chest of chests) {
-        if (chest.opened) continue;
-        const dx = chest.x - player.x, dy = chest.y - player.y;
-        const dist = Math.hypot(dx,dy);
-        if (dist < range) {
-          chest.opened = true;
-          chest.openProgress = 1;
-          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') {
-            // put into inventory first empty slot or replace current
-            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;
-          }
-          updatePlayerStats();
-          // small effect: spawn particles (simple)
-          for (let i=0;i<8;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, tracer:true });
-          }
-          return;
-        }
-      }
-      // buildable objects: optionally harvest by 'E' if close and not shooting
-      for (const obj of objects) {
-        if (obj.dead) continue;
-        const dx = obj.x - player.x, dy = obj.y - player.y;
-        if (Math.hypot(dx,dy) < range) {
-          // harvest yields small materials and destroys object
-          const gain = obj.type==='wood'? 2 : 5;
-          player.materials += gain;
-          obj.dead = true;
-          updatePlayerStats();
-          return;
-        }
-      }
     }
-    // --- Game loop ---
-    let lastTime = 0;
-    function gameLoop(ts) {
-      if (!gameActive) return;
-      if (!lastTime) lastTime = ts;
-      const dt = Math.min(0.05, (ts - lastTime) / 1000); // clamp to avoid big jumps
-      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);
-        player.x += (dx/len) * player.speed * dt;
-        player.y += (dy/len) * player.speed * dt;
-      }
-      // confine to world
-      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
-      cameraUpdate();
-      // shooting
-      if (mouse.down) {
-        const weapon = player.weapons[player.currentWeaponIndex] || { dmg:10, rate:300, color:'#fff' };
-        if (ts - player.lastShot > (weapon.rate || 300)) {
-          player.lastShot = ts;
-          shootBullet(player.x + Math.cos(player.angle)*20, player.y + Math.sin(player.angle)*20, mouse.worldX, mouse.worldY, weapon);
-        }
-      }
-      // bullets update & collision with objects and chests (simple)
-      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;
-        // collision with breakables
-        if (!b.tracer && b.dmg > 0) {
-          for (const obj of objects) {
-            if (obj.dead) continue;
-            const d = Math.hypot(obj.x - b.x, obj.y - b.y);
-            if (d < 20) {
-              applyDamageToObject(obj, b.dmg);
-              b.life = -1;
-              break;
-            }
-          }
-          // collision with chests
-          for (const chest of chests) {
-            if (chest.opened) continue;
-            const d2 = Math.hypot(chest.x - b.x, chest.y - b.y);
-            if (d2 < 20) { chest.opened = true; chest.openProgress = 1; b.life = -1; /* chest opened early */ }
-          }
-        }
-        if (b.life <= 0 || b.traveled > 2000) bullets.splice(i,1);
-      }
-      // update objects removal
-      for (let i=objects.length-1;i>=0;i--){
-        if (objects[i].dead) objects.splice(i,1);
-      }
-      // draw
-      ctx.clearRect(0,0,canvas.width,canvas.height);
-      drawWorld();
-      drawObjects();
-      drawChests();
-      drawBullets();
-      drawPlayer();
-      drawCrosshair();
-      // storm handling and hud warnings
-      updateStorm(dt);
-      if (storm.active && playerInStorm()) stormWarningEl.classList.remove('hidden'); else stormWarningEl.classList.add('hidden');
-      // interact on E
-      if (keys.e) { interactNearby(); keys.e=false; }
-      updatePlayerStats();
-      requestAnimationFrame(gameLoop);
-    }
-    // --- Drawing helpers ---
-    function worldToScreen(wx, wy) { return { x: wx - camera.x, y: wy - camera.y }; }
-    function drawWorld() {
-      // draw simple biome tiles
-      const cols = Math.ceil(WORLD.width / TILE_SIZE);
-      const rows = Math.ceil(WORLD.height / TILE_SIZE);
-      for (let by=0; by<rows; by++) {
-        for (let bx=0; bx<cols; bx++) {
-          const x = bx * TILE_SIZE, y = by * TILE_SIZE;
-          const b = biomeAt(x+1,y+1);
-          let color = '#203a2b';
-          if (b === 'desert') color = '#cbb78b';
-          if (b === 'forest') color = '#1f4d2c';
-          if (b === 'oasis') color = '#2a4f5a';
-          if (b === 'ruins') color = '#4a3b3b';
-          const scr = worldToScreen(x,y);
-          ctx.fillStyle = color;
-          ctx.fillRect(scr.x, scr.y, TILE_SIZE, TILE_SIZE);
-          // subtle grid
-          ctx.strokeStyle = 'rgba(0,0,0,0.15)';
-          ctx.strokeRect(scr.x, scr.y, TILE_SIZE, TILE_SIZE);
         }
       }
-      // draw storm (world space)
-      ctx.save();
-      const screenCenter = worldToScreen(storm.centerX, storm.centerY);
-      const sr = storm.radius;
-      const gradient = ctx.createRadialGradient(screenCenter.x, screenCenter.y, sr*0.2, screenCenter.x, screenCenter.y, sr);
-      gradient.addColorStop(0, 'rgba(100,149,237,0.05)');
-      gradient.addColorStop(1, 'rgba(100,149,237,0.35)');
-      ctx.fillStyle = gradient;
-      ctx.beginPath();
-      ctx.arc(screenCenter.x, screenCenter.y, sr, 0, Math.PI*2);
-      ctx.fill();
-      ctx.restore();
     }
-    function drawObjects() {
-      for (const obj of objects) {
-        const s = worldToScreen(obj.x, obj.y);
-        ctx.save();
-        // simple 3D-ish block (shadow + top)
-        const h = obj.type === 'wood' ? 18 : (obj.type==='stone'? 12:24);
-        // 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
-        if (obj.type === 'wood') ctx.fillStyle = '#6b3b1a';
-        if (obj.type === 'stone') ctx.fillStyle = '#6b6b6b';
-        if (obj.type === 'wall') ctx.fillStyle = '#8b5a32';
-        ctx.fillRect(s.x-12, s.y-h, 24, h);
-        // health bar
-        ctx.fillStyle = 'black';
-        ctx.fillRect(s.x-14, s.y-h-8, 28, 5);
-        ctx.fillStyle = 'lime';
-        const hpPct = Math.max(0, obj.hp / obj.maxHp);
-        ctx.fillRect(s.x-14, s.y-h-8, 28*hpPct, 5);
-        ctx.restore();
       }
-    }
-    function drawChests() {
-      for (const chest of chests) {
-        const s = worldToScreen(chest.x, chest.y);
-        ctx.save();
-        // shadow
-        ctx.fillStyle = 'rgba(0,0,0,0.25)';
-        ctx.beginPath();
-        ctx.ellipse(s.x, s.y+10, 22, 10, 0, 0, Math.PI*2);
-        ctx.fill();
-        // base
-        ctx.fillStyle = chest.opened ? '#7b3e00' : '#a56b2a';
-        ctx.fillRect(s.x-18, s.y-12, 36, 20);
-        // lid (open animation)
-        ctx.translate(s.x, s.y-12);
-        const openAngle = chest.opened ? Math.PI*0.45 : 0;
-        ctx.save();
-        ctx.rotate(-openAngle);
-        ctx.fillStyle = chest.opened ? '#ffd86b' : '#caa15e';
-        ctx.fillRect(-18, -12-4, 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 {
-          // animated streak
-          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();
-          // tip
-          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);
-      // shadow
-      ctx.fillStyle = 'rgba(0,0,0,0.25)';
-      ctx.beginPath(); ctx.ellipse(0, 14, 18, 8, 0,0,Math.PI*2); ctx.fill();
-      // body - triangle
-      ctx.fillStyle = 'yellow';
-      ctx.beginPath();
-      ctx.moveTo(16,0); ctx.lineTo(-12,-10); ctx.lineTo(-12,10); ctx.closePath();
-      ctx.fill();
-      // small 3D 'height' effect
-      ctx.fillStyle = '#e6c04a';
-      ctx.fillRect(-6,6,4,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 ---
-    function playerInStorm() {
-      const dx = player.x - storm.centerX, dy = player.y - storm.centerY;
-      return Math.hypot(dx,dy) > storm.radius;
-    }
-    let stormDamageAccumulator = 0;
-    function updateStorm(dt) {
-      if (!storm.active) return;
-      storm.radius -= storm.closingSpeed * dt * 50; // multiplier to make it noticeable
-      if (storm.radius < 80) storm.radius = 80;
-      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;
-      }
-    }
-    // --- Game start / end ---
     function startGame() {
       gameActive = true;
       landingScreenEl.classList.add('hidden');
       gameScreenEl.classList.remove('hidden');
-      selectedBiome && console.log('Start biome:', selectedBiome);
-      // reset player & world
-      player.x = WORLD.width/2 + (Math.random()-0.5)*200;
-      player.y = WORLD.height/2 + (Math.random()-0.5)*200;
-      player.health = 100; player.armor = 0; player.kills = 0; player.materials = 0; player.weapons = [];
-      // give starter weapon
-      player.weapons[0] = { name:'Pistol', dmg:12, rate:320, color:'#ffd86b' };
-      player.currentWeaponIndex=0;
-      populateWorld();
-      initInventory();
-      cameraUpdate();
-      // timer & storm schedule
-      gameTime = 300;
-      storm.active = false;
       storm.radius = storm.maxRadius;
       document.getElementById('gameTimer').textContent = '5:00';
       timerInterval && clearInterval(timerInterval);
       timerInterval = setInterval(() => {
-        if (!gameActive) { clearInterval(timerInterval); return; }
         gameTime--;
-        const m = Math.floor(gameTime/60), s = gameTime%60;
-        document.getElementById('gameTimer').textContent = `${m}:${s<10?'0'+s:s}`;
-        // trigger storm at 4 minutes left
-        if (gameTime === 240) { storm.active = true; stormWarningEl.classList.remove('hidden'); setTimeout(()=>stormWarningEl.classList.add('hidden'),4000); }
-        if (gameTime <= 0) { clearInterval(timerInterval); endGame(); }
       }, 1000);
-      lastTime = performance.now();
       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
-    document.querySelectorAll('.biome-selector').forEach(el => {
-      el.addEventListener('click', () => {
-        selectedBiome = el.getAttribute('data-biome');
         startGame();
       });
     });
-    // Interaction key E
-    window.addEventListener('keydown', (e) => {
-      if (e.key.toLowerCase()==='e' && gameActive) keys.e = true;
-    });
-    // Initialize
     resizeCanvas();
-    populateWorld();
     initInventory();
     updatePlayerStats();
-    feather.replace();
   </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>BattleZone Royale</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
+    html,
+    body,
+    #root {
+      height: 100%;
+      margin: 0;
+      background-color: #111827; /* Tailwind gray-900 */
+      color: white;
+      font-family: monospace;
+    }
+    #gameCanvas {
+      background-image: url('http://static.photos/nature/1200x630/42');
+      background-size: cover;
+      background-position: center;
+      display: block;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+      user-select: none;
+      cursor: crosshair;
+    }
+    .biome-selector {
+      transition: all 0.3s ease;
+    }
+    .biome-selector:hover {
+      transform: scale(1.05);
+      box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
+    }
+    .storm-animation {
+      animation: stormPulse 3s infinite;
+    }
+    @keyframes stormPulse {
+      0% {
+        box-shadow: 0 0 10px rgba(100, 149, 237, 0.5);
+      }
+      50% {
+        box-shadow: 0 0 30px rgba(100, 149, 237, 0.8);
+      }
+      100% {
+        box-shadow: 0 0 10px rgba(100, 149, 237, 0.5);
+      }
+    }
+    #stormWarning {
+      z-index: 10;
+    }
+    #deathScreen {
+      z-index: 20;
+    }
+    /* Fullscreen canvas container */
+    #canvasContainer {
+      position: relative;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      overflow: hidden;
+    }
   </style>
 </head>
 <body>
+  <div id="landingScreen" class="flex flex-col items-center justify-center h-screen bg-gray-900 p-6">
+    <h1 class="text-5xl font-bold text-yellow-400 mb-8 flex items-center">
       <i data-feather="target" class="mr-2"></i> BattleZone Royale
     </h1>
+    <h2 class="text-3xl font-semibold text-yellow-400 mb-6 flex items-center">
+      <i data-feather="map-pin" class="mr-2"></i> Choose Landing Zone
+    </h2>
     <div class="grid grid-cols-2 gap-6 max-w-xl w-full">
+      <div
+        class="biome-selector bg-gray-700 p-6 rounded-lg cursor-pointer hover:bg-yellow-800 flex flex-col items-center"
+        data-biome="desert"
+      >
         <i data-feather="sun" class="text-yellow-300 mb-2"></i>
         <h3 class="font-bold text-lg">Golden Dunes</h3>
         <p class="text-xs">High loot, high risk</p>
       </div>
+      <div
+        class="biome-selector bg-gray-700 p-6 rounded-lg cursor-pointer hover:bg-green-800 flex flex-col items-center"
+        data-biome="forest"
+      >
         <i data-feather="tree" class="text-green-300 mb-2"></i>
         <h3 class="font-bold text-lg">Shadow Forest</h3>
         <p class="text-xs">Good cover, medium loot</p>
       </div>
+      <div
+        class="biome-selector bg-gray-700 p-6 rounded-lg cursor-pointer hover:bg-blue-800 flex flex-col items-center"
+        data-biome="oasis"
+      >
         <i data-feather="droplet" class="text-blue-300 mb-2"></i>
         <h3 class="font-bold text-lg">Crystal Oasis</h3>
         <p class="text-xs">Medium loot, low risk</p>
       </div>
+      <div
+        class="biome-selector bg-gray-700 p-6 rounded-lg cursor-pointer hover:bg-purple-800 flex flex-col items-center"
+        data-biome="ruins"
+      >
         <i data-feather="layers" class="text-purple-300 mb-2"></i>
         <h3 class="font-bold text-lg">Ancient Ruins</h3>
         <p class="text-xs">Legendary loot, dangerous</p>
   </div>
   <div id="gameScreen" class="hidden h-screen flex flex-col">
+    <!-- Game Header -->
+    <header
+      class="flex justify-between items-center border-b border-yellow-500 px-6 py-4"
+      style="flex-shrink: 0;"
+    >
+      <h1 class="text-4xl font-bold text-yellow-400 flex items-center">
+        <i data-feather="target" class="mr-2"></i> BattleZone Royale
+      </h1>
+      <div class="flex space-x-4 text-white">
+        <div class="bg-gray-800 px-4 py-2 rounded-lg flex items-center">
+          <i data-feather="users" class="mr-2"></i>
+          <span id="playerCount">1/100</span>
+        </div>
+        <div class="bg-gray-800 px-4 py-2 rounded-lg flex items-center">
+          <i data-feather="clock" class="mr-2"></i>
+          <span id="gameTimer">5:00</span>
+        </div>
       </div>
     </header>
     <div class="flex flex-1 overflow-hidden">
+      <!-- Main Game Canvas -->
+      <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>
+        <!-- Storm Warning -->
+        <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 storm-animation"
+        >
           <i data-feather="alert-circle" class="mr-2"></i>
           <span>STORM APPROACHING! MOVE TO SAFE ZONE!</span>
         </div>
+        <!-- Death Screen -->
+        <div
+          id="deathScreen"
+          class="hidden absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center rounded-xl"
+        >
           <i data-feather="skull" class="w-16 h-16 text-red-500 mb-4"></i>
           <h2 class="text-4xl font-bold text-red-500 mb-4">YOU DIED!</h2>
           <p class="text-xl mb-6">Better luck next time, soldier!</p>
+          <button
+            id="respawnBtn"
+            class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-6 rounded-lg flex items-center"
+          >
             <i data-feather="refresh-cw" class="mr-2"></i> Respawn
           </button>
         </div>
       </div>
+      <!-- Game Controls and Info -->
+      <aside
+        class="w-80 bg-gray-800 rounded-xl p-6 overflow-y-auto flex-shrink-0 flex flex-col gap-8"
+        style="max-height: 100vh;"
+      >
+        <!-- Player Stats -->
         <section>
+          <h2
+            class="text-2xl font-bold text-yellow-400 mb-4 flex items-center"
+          >
+            <i data-feather="activity" class="mr-2"></i> Player Stats
+          </h2>
           <div class="space-y-3">
+            <div class="flex justify-between">
+              <span>Health:</span>
+              <span id="playerHealth" class="font-bold">100%</span>
+            </div>
+            <div class="flex justify-between">
+              <span>Armor:</span>
+              <span id="playerArmor" class="font-bold">0%</span>
+            </div>
+            <div class="flex justify-between">
+              <span>Kills:</span>
+              <span id="playerKills" class="font-bold text-red-400">0</span>
+            </div>
           </div>
         </section>
+        <!-- Inventory -->
         <section>
+          <h2
+            class="text-2xl font-bold text-yellow-400 mb-4 flex items-center"
+          >
+            <i data-feather="briefcase" class="mr-2"></i> Inventory
+          </h2>
+          <div
+            id="inventorySlots"
+            class="grid grid-cols-3 gap-2"
+            aria-label="Inventory slots"
+          ></div>
         </section>
+        <!-- Controls Info -->
         <section>
+          <h2
+            class="text-2xl font-bold text-yellow-400 mb-4 flex items-center"
+          >
+            <i data-feather="command" class="mr-2"></i> Controls
+          </h2>
           <div class="space-y-2 text-sm">
+            <div class="flex items-center">
+              <span
+                class="bg-gray-700 px-2 py-1 rounded mr-2"
+                >WASD</span
+              >
+              <span>Move character</span>
+            </div>
+            <div class="flex items-center">
+              <span
+                class="bg-gray-700 px-2 py-1 rounded mr-2"
+                >Mouse</span
+              >
+              <span>Aim and shoot</span>
+            </div>
+            <div class="flex items-center">
+              <span
+                class="bg-gray-700 px-2 py-1 rounded mr-2"
+                >E</span
+              >
+              <span>Loot chests/open doors</span>
+            </div>
+            <div class="flex items-center">
+              <span
+                class="bg-gray-700 px-2 py-1 rounded mr-2"
+                >1-5</span
+              >
+              <span>Switch weapons</span>
+            </div>
           </div>
         </section>
       </aside>
   </div>
   <script>
+    // Game variables
     let gameActive = false;
+    let playerHealth = 100;
+    let playerArmor = 0;
+    let playerKills = 0;
+    let gameTime = 300; // 5 minutes in seconds
+    let stormActive = false;
+    let selectedBiome = null;
+    // Canvas and context
     const canvas = document.getElementById('gameCanvas');
     const ctx = canvas.getContext('2d');
     const stormWarningEl = document.getElementById('stormWarning');
     const deathScreenEl = document.getElementById('deathScreen');
+    const landingScreenEl = document.getElementById('landingScreen');
+    const gameScreenEl = document.getElementById('gameScreen');
+    // Player and storm state
+    const player = {
+      x: 0,
+      y: 0,
+      radius: 15,
+      angle: 0,
+      speed: 3,
+      health: 100,
+      armor: 0,
+      kills: 0,
+    };
+    const storm = {
+      maxRadius: 600,
+      radius: 600,
+      centerX: 0,
+      centerY: 0,
+      damagePerSecond: 1,
+      closingSpeed: 0.5, // radius shrink per second
+    };
+    // Movement input
+    const keys = {
+      w: false,
+      a: false,
+      s: false,
+      d: false,
+    };
+    // Mouse
+    const mouse = {
+      x: 0,
+      y: 0,
+      canvasX: 0,
+      canvasY: 0,
+    };
+    // Resize canvas to fill container
     function resizeCanvas() {
       const container = document.getElementById('canvasContainer');
       canvas.width = container.clientWidth;
       canvas.height = container.clientHeight;
+      // Reset storm center to canvas center on resize
+      storm.centerX = canvas.width / 2;
+      storm.centerY = canvas.height / 2;
     }
     window.addEventListener('resize', resizeCanvas);
+    // Initialize player position center of canvas on start
+    function initPlayerPosition() {
+      player.x = canvas.width / 2;
+      player.y = canvas.height / 2;
     }
+    // Update player stats UI
+    function updatePlayerStats() {
+      document.getElementById('playerHealth').textContent = `${playerHealth}%`;
+      document.getElementById('playerArmor').textContent = `${playerArmor}%`;
+      document.getElementById('playerKills').textContent = playerKills;
+    }
+    // Initialize inventory slots
+    function initInventory() {
+      const inventorySlots = document.getElementById('inventorySlots');
+      inventorySlots.innerHTML = '';
+      for (let i = 0; i < 6; i++) {
+        const slot = document.createElement('div');
+        slot.className =
+          'bg-gray-700 h-16 rounded-lg flex flex-col items-center justify-center text-xs';
+        slot.innerHTML = '<i data-feather="box" class="text-gray-400"></i><span>Empty</span>';
+        inventorySlots.appendChild(slot);
+      }
+    }
+    // Handle keyboard input for movement
     window.addEventListener('keydown', (e) => {
       if (!gameActive) return;
+      const key = e.key.toLowerCase();
+      if (keys.hasOwnProperty(key)) {
+        keys[key] = true;
       }
     });
     window.addEventListener('keyup', (e) => {
       if (!gameActive) return;
+      const key = e.key.toLowerCase();
+      if (keys.hasOwnProperty(key)) {
+        keys[key] = false;
       }
     });
+    // Handle mouse movement for aiming
     canvas.addEventListener('mousemove', (e) => {
       const rect = canvas.getBoundingClientRect();
       mouse.canvasX = e.clientX - rect.left;
       mouse.canvasY = e.clientY - rect.top;
+      // Calculate angle from player to mouse position
+      const dx = mouse.canvasX - player.x;
+      const dy = mouse.canvasY - player.y;
       player.angle = Math.atan2(dy, dx);
     });
+    // Move player based on keys pressed, constrained within canvas
+    function movePlayer() {
+      if (!gameActive) return;
+      let dx = 0,
+        dy = 0;
+      if (keys.w) dy -= player.speed;
+      if (keys.s) dy += player.speed;
+      if (keys.a) dx -= player.speed;
+      if (keys.d) dx += player.speed;
+      // Normalize diagonal movement
+      if (dx !== 0 && dy !== 0) {
+        dx *= Math.SQRT1_2;
+        dy *= Math.SQRT1_2;
       }
+      player.x += dx;
+      player.y += dy;
+      // Confine player inside canvas
+      player.x = Math.min(Math.max(player.radius, player.x), canvas.width - player.radius);
+      player.y = Math.min(Math.max(player.radius, player.y), canvas.height - player.radius);
     }
+    // Draw player as a triangle pointing to aim direction
+    function drawPlayer() {
+      ctx.save();
+      ctx.translate(player.x, player.y);
+      ctx.rotate(player.angle);
+      // Player body (triangle)
+      ctx.fillStyle = 'yellow';
+      ctx.beginPath();
+      ctx.moveTo(20, 0);
+      ctx.lineTo(-15, -12);
+      ctx.lineTo(-15, 12);
+      ctx.closePath();
+      ctx.fill();
+      ctx.restore();
     }
+    // Draw the shrinking storm circle with increasing damage indication
+    function drawStorm() {
+      ctx.save();
+      // Storm fill with transparent blue
+      const gradient = ctx.createRadialGradient(
+        storm.centerX,
+        storm.centerY,
+        storm.radius * 0.6,
+        storm.centerX,
+        storm.centerY,
+        storm.radius
+      );
+      gradient.addColorStop(0, 'rgba(100, 149, 237, 0.1)');
+      gradient.addColorStop(1, 'rgba(100, 149, 237, 0.6)');
+      ctx.fillStyle = gradient;
+      ctx.beginPath();
+      ctx.arc(storm.centerX, storm.centerY, storm.radius, 0, Math.PI * 2);
+      ctx.fill();
+      // Storm outline thickening and color shifting as radius shrinks
+      const stormProgress = 1 - storm.radius / storm.maxRadius; // 0 to 1
+      const outlineWidth = 10 + stormProgress * 20;
+      const redIntensity = Math.min(255, Math.floor(100 + stormProgress * 155));
+      ctx.strokeStyle = `rgba(${redIntensity}, 50, 150, 0.8)`;
+      ctx.lineWidth = outlineWidth;
+      ctx.beginPath();
+      ctx.arc(storm.centerX, storm.centerY, storm.radius, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.restore();
+    }
+    // Check if player is outside storm radius
+    function playerInStorm() {
+      const dx = player.x - storm.centerX;
+      const dy = player.y - storm.centerY;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      return dist > storm.radius;
+    }
+    // Storm damage application
+    let stormDamageAccumulator = 0;
+    function applyStormDamage(deltaTime) {
+      if (!stormActive) return;
+      if (playerInStorm()) {
+        // Damage increases as storm closes
+        const stormProgress = 1 - storm.radius / storm.maxRadius; // 0 to 1
+        const damageRate = storm.damagePerSecond * (1 + stormProgress * 4); // up to 5x damage
+        stormDamageAccumulator += damageRate * deltaTime;
+        while (stormDamageAccumulator >= 1) {
+          stormDamageAccumulator -= 1;
+          applyDamage(1);
         }
+      } else {
+        stormDamageAccumulator = 0;
       }
     }
+    // Apply damage to player health considering armor
+    function applyDamage(amount) {
+      if (playerArmor > 0) {
+        const armorAbsorb = Math.min(playerArmor, amount * 0.7); // Armor absorbs 70% of damage
+        playerArmor -= armorAbsorb;
+        amount -= armorAbsorb;
       }
+      playerHealth -= amount;
+      if (playerHealth <= 0) {
+        playerHealth = 0;
+        playerDeath();
       }
+      updatePlayerStats();
     }
+    // Storm radius shrinking over time
+    function updateStorm(deltaTime) {
+      if (!stormActive) return;
+      storm.radius -= storm.closingSpeed * deltaTime;
+      if (storm.radius < 50) storm.radius = 50;
     }
+    // Draw aim crosshair at mouse position
     function drawCrosshair() {
       ctx.save();
       ctx.strokeStyle = 'yellow';
       ctx.lineWidth = 2;
       ctx.beginPath();
+      const size = 10;
+      ctx.moveTo(mouse.canvasX - size, mouse.canvasY);
+      ctx.lineTo(mouse.canvasX + size, mouse.canvasY);
+      ctx.moveTo(mouse.canvasX, mouse.canvasY - size);
+      ctx.lineTo(mouse.canvasX, mouse.canvasY + size);
       ctx.stroke();
       ctx.restore();
     }
+    // Game timer and storm activation
+    let timerInterval;
     function startGame() {
       gameActive = true;
+      selectedBiome && console.log('Selected biome:', selectedBiome);
       landingScreenEl.classList.add('hidden');
       gameScreenEl.classList.remove('hidden');
+      stormWarningEl.classList.add('hidden');
+      // Reset stats
+      playerHealth = 100;
+      playerArmor = 0;
+      playerKills = 0;
+      updatePlayerStats();
+      initInventory();
+      initPlayerPosition();
       storm.radius = storm.maxRadius;
+      stormActive = false;
+      stormWarningEl.classList.add('hidden');
+      gameTime = 300; // 5 minutes
       document.getElementById('gameTimer').textContent = '5:00';
       timerInterval && clearInterval(timerInterval);
       timerInterval = setInterval(() => {
+        if (!gameActive) {
+          clearInterval(timerInterval);
+          return;
+        }
         gameTime--;
+        const minutes = Math.floor(gameTime / 60);
+        const seconds = gameTime % 60;
+        document.getElementById('gameTimer').textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
+        // Start storm after 60 seconds (4 minutes left)
+        if (gameTime === 240 && !stormActive) {
+          stormActive = true;
+          stormWarningEl.classList.remove('hidden');
+          setTimeout(() => stormWarningEl.classList.add('hidden'), 5000);
+        }
+        // End game when timer hits 0
+        if (gameTime <= 0) {
+          clearInterval(timerInterval);
+          endGame();
+        }
       }, 1000);
+      lastFrameTime = performance.now();
       requestAnimationFrame(gameLoop);
     }
+    // End game
     function endGame() {
       gameActive = false;
+      alert('Congratulations! You survived the BattleZone!');
     }
+    // Player death
     function playerDeath() {
       gameActive = false;
       deathScreenEl.classList.remove('hidden');
     }
+    // Respawn button handler
     document.getElementById('respawnBtn').addEventListener('click', () => {
       deathScreenEl.classList.add('hidden');
       landingScreenEl.classList.remove('hidden');
     });
+    // Biome selection handler
+    document.querySelectorAll('.biome-selector').forEach((selector) => {
+      selector.addEventListener('click', () => {
+        selectedBiome = selector.getAttribute('data-biome');
         startGame();
       });
     });
+    // Game loop with delta time for smooth movement and storm update
+    let lastFrameTime = 0;
+    function gameLoop(timestamp) {
+      if (!gameActive) return;
+      if (!lastFrameTime) lastFrameTime = timestamp;
+      const deltaTime = (timestamp - lastFrameTime) / 1000; // seconds
+      lastFrameTime = timestamp;
+      // Update
+      movePlayer();
+      updateStorm(deltaTime);
+      applyStormDamage(deltaTime);
+      // Clear
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      // Draw
+      drawStorm();
+      drawPlayer();
+      drawCrosshair();
+      // Show storm warning if player is outside storm radius while storm active
+      if (stormActive && playerInStorm()) {
+        stormWarningEl.classList.remove('hidden');
+      } else {
+        stormWarningEl.classList.add('hidden');
+      }
+      requestAnimationFrame(gameLoop);
+    }
+    // Initialize feather icons and setup
+    feather.replace();
     resizeCanvas();
     initInventory();
     updatePlayerStats();
   </script>
 </body>
 </html>