Spaces:

bbc123321
/

battle-zone-royale

Running

App Files Files Community

bbc123321 commited on Oct 13, 2025

Commit

5f0ec06

verified ·

1 Parent(s): e19e778

Manual changes saved

Browse files

Files changed (1) hide show

index.html +493 -459

index.html CHANGED Viewed

@@ -1,628 +1,662 @@
 <!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>
   </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>
   </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>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>BattleZone Royale - Fixed</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
+    html, body { height:100%; margin:0; background:#0b1220; color:#fff; font-family:monospace; }
+    #canvasContainer { position:relative; flex:1; display:flex; justify-content:center; align-items:center; height:100vh; overflow:hidden; }
+    #gameCanvas { display:block; user-select:none; cursor:crosshair; box-shadow:0 0 20px rgba(0,0,0,.5); width:100%; height:100%; }
+    .biome-selector { transition:all .25s ease; }
+    .biome-selector:hover { transform:scale(1.03); box-shadow:0 0 10px rgba(255,215,0,.15); }
+    .hud-pill { background:#111827; padding:.5rem .75rem; border-radius:.5rem; }
+    #stormWarning { z-index:10; }
+    #deathScreen { z-index:20; }
   </style>
 </head>
 <body>
+  <!-- Landing / Instructions screen -->
+  <div id="landingScreen" class="flex flex-col items-center justify-center h-screen p-6">
+    <h1 class="text-5xl font-bold text-yellow-400 mb-6 flex items-center">
       <i data-feather="target" class="mr-2"></i> BattleZone Royale
     </h1>
+    <h2 class="text-2xl text-yellow-300 mb-4">Choose Landing Zone</h2>
+    <div class="grid grid-cols-2 gap-6 max-w-xl w-full mb-6">
+      <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>
+    <!-- Instructions moved here -->
+    <div class="bg-gray-800 p-4 rounded-lg max-w-xl w-full text-sm">
+      <h3 class="font-bold text-yellow-400 mb-2">Controls</h3>
+      <ul class="list-disc pl-5 space-y-1">
+        <li><strong>WASD</strong> — Move</li>
+        <li><strong>Mouse</strong> — Aim & Shoot</li>
+        <li><strong>E</strong> — Interact / Loot / Harvest</li>
+        <li><strong>1-5</strong> — Switch weapons</li>
+      </ul>
+    </div>
   </div>
+  <!-- Game screen -->
   <div id="gameScreen" class="hidden h-screen flex flex-col">
+    <header class="flex justify-between items-center border-b border-yellow-500 px-6 py-4" style="flex-shrink:0;">
+      <h1 class="text-3xl font-bold text-yellow-400 flex items-center"><i data-feather="target" class="mr-2"></i>BattleZone Royale</h1>
+      <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>
+      <!-- Sidebar: stats & inventory only (no instructions) -->
+      <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>
       </aside>
     </div>
   </div>
   <script>
+    // --- Basic globals ---
     let gameActive = false;
+    let selectedBiome = 'forest';
+    // DOM elements
     const landingScreenEl = document.getElementById('landingScreen');
     const gameScreenEl = document.getElementById('gameScreen');
+    const stormWarningEl = document.getElementById('stormWarning');
+    const deathScreenEl = document.getElementById('deathScreen');
+    const canvas = document.getElementById('gameCanvas');
+    const ctx = canvas.getContext('2d');
+    // --- World & camera ---
+    const WORLD = { width: 3000, height: 2000 };
+    let camera = { x: 0, y: 0 };
+    function resizeCanvas() {
+      const container = document.getElementById('canvasContainer');
+      // set logical canvas size to container size to keep consistent drawing coordinates
+      canvas.width = Math.max(300, Math.floor(container.clientWidth));
+      canvas.height = Math.max(200, Math.floor(container.clientHeight));
+      // adjust camera after resize
+      cameraUpdate();
+    }
+    window.addEventListener('resize', resizeCanvas);
+    // --- Player ---
     const player = {
+      x: WORLD.width/2, y: WORLD.height/2, radius: 16, angle: 0,
+      speed: 220, health: 100, armor: 0, kills: 0, materials: 0,
+      weapons: [], currentWeaponIndex:0, lastShot:0
     };
+    // --- Input ---
+    const keys = { w:false, a:false, s:false, d:false, e:false };
+    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 (k in keys) keys[k] = true;
+      if (['1','2','3','4','5'].includes(k)) {
+        const idx = parseInt(k)-1;
+        if (player.weapons[idx]) player.currentWeaponIndex = idx;
+      }
+    });
+    window.addEventListener('keyup', (e) => {
+      if (!gameActive) return;
+      const k = e.key.toLowerCase();
+      if (k in keys) keys[k] = false;
+      if (k === 'e') { keys.e = true; } // mark for interact, will be cleared after handling
+    });
+    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', () => { if (gameActive) mouse.down = true; });
+    window.addEventListener('mouseup', () => { mouse.down = false; });
+    // --- World entities ---
+    const bullets = [];
+    const chests = [];
+    const objects = []; // breakables
+    function randInt(min,max){ return Math.floor(Math.random()*(max-min))+min; }
+    function rand(min,max){ return Math.random()*(max-min)+min; }
+    function biomeAt(x,y) {
+      const bx = Math.floor(x / 400);
+      const by = Math.floor(y / 400);
+      const seed = (bx*73856093) ^ (by*19349663);
+      const r = Math.abs(Math.sin(seed)) % 1;
+      if (r < 0.25) return 'desert';
+      if (r < 0.55) return 'forest';
+      if (r < 0.75) return 'oasis';
+      return 'ruins';
     }
+    function generateLootForBiome(b) {
+      const roll = Math.random();
+      if (roll < 0.4) return { type:'medkit', heal:25 };
+      if (roll < 0.75) return { type:'materials', amount: randInt(5,20) };
+      const weapons = [
+        { name:'Pistol', dmg:12, rate:320, color:'#ffd86b' },
+        { name:'SMG', dmg:6, rate:120, color:'#8ef0ff' },
+        { name:'Shotgun', dmg:22, rate:800, color:'#ff9fb8' },
+        { name:'Rifle', dmg:18, rate:400, color:'#c7ff9a' }
+      ];
+      return { type:'weapon', weapon: weapons[randInt(0,weapons.length)] };
     }
+    function populateWorld() {
+      chests.length = 0;
+      objects.length = 0;
+      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)) });
+      }
+      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, dead:false });
+      }
     }
+    // --- 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) {
+      if (weapon) {
+        elem.innerHTML = `<div style="font-size:11px">${weapon.name}</div><div style="color:${weapon.color}">●</div>`;
+      } else {
+        elem.innerHTML = '<i data-feather="box" class="text-gray-400"></i><span>Empty</span>';
+      }
     }
+    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);
+      const slots = document.querySelectorAll('#inventorySlots > div');
+      slots.forEach(s => updateSlot(s, player.weapons[parseInt(s.dataset.index)] || null));
+      feather.replace();
+    }
+    // --- Camera logic (centers on player; handles world smaller than canvas) ---
+    function cameraUpdate() {
+      if (!canvas.width || !canvas.height) return;
+      if (WORLD.width <= canvas.width) {
+        camera.x = (WORLD.width - canvas.width) / 2;
+      } else {
+        camera.x = player.x - canvas.width / 2;
+        camera.x = Math.max(0, Math.min(camera.x, WORLD.width - canvas.width));
       }
+      if (WORLD.height <= canvas.height) {
+        camera.y = (WORLD.height - canvas.height) / 2;
+      } else {
+        camera.y = player.y - canvas.height / 2;
+        camera.y = Math.max(0, Math.min(camera.y, WORLD.height - canvas.height));
       }
+    }
+    function worldToScreen(wx, wy) { return { x: Math.round(wx - camera.x), y: Math.round(wy - camera.y) }; }
+    // --- Interaction / combat ---
+    function shootBullet(originX, originY, targetX, targetY, weapon) {
+      const speed = 1000;
+      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 : '#ffffff',
+        life: 1.5, traveled:0, tracer:false
+      });
+    }
+    function applyDamageToObject(obj, dmg) {
+      obj.hp -= dmg;
+      if (obj.hp <= 0 && !obj.dead) {
+        obj.dead = true;
+        const gained = obj.type==='wood'? randInt(3,10) : randInt(8,20);
+        player.materials += gained;
+      }
+    }
+    function interactNearby() {
+      const range = 48;
+      // chests
+      for (const chest of chests) {
+        if (chest.opened) continue;
+        const d = Math.hypot(chest.x - player.x, chest.y - player.y);
+        if (d < range) {
+          chest.opened = true;
+          const loot = chest.loot;
+          if (loot.type === 'medkit') player.health = Math.min(100, player.health + loot.heal);
+          else if (loot.type === 'materials') player.materials += loot.amount;
+          else if (loot.type === 'weapon') {
+            let placed=false;
+            for (let i=0;i<6;i++){ if (!player.weapons[i]) { player.weapons[i] = loot.weapon; player.currentWeaponIndex = i; placed=true; break; } }
+            if (!placed) player.weapons[player.currentWeaponIndex] = loot.weapon;
+          }
+          // small pop effect
+          for (let i=0;i<6;i++) {
+            bullets.push({ x:chest.x, y:chest.y, vx:(Math.random()-0.5)*200, vy:(Math.random()-0.5)*200, dmg:0, color:'#ffd86b', life:0.6, tracer:true });
+          }
+          updatePlayerStats();
+          return;
+        }
       }
+      // breakable objects (harvest)
+      for (const obj of objects) {
+        if (obj.dead) continue;
+        const d = Math.hypot(obj.x - player.x, obj.y - player.y);
+        if (d < range) {
+          const gain = obj.type==='wood'? 2 : 5;
+          player.materials += gain;
+          obj.dead = true;
+          updatePlayerStats();
+          return;
+        }
+      }
+    }
+    // --- Drawing ---
+    function drawWorld() {
+      // tiles
+      const TILE = 400;
+      const cols = Math.ceil(WORLD.width / TILE);
+      const rows = Math.ceil(WORLD.height / TILE);
+      for (let by=0; by<rows; by++) {
+        for (let bx=0; bx<cols; bx++) {
+          const x = bx*TILE, y = by*TILE;
+          const b = biomeAt(x+1, y+1);
+          let color = '#203a2b';
+          if (b === 'desert') color = '#cbb78b';
+          else if (b === 'forest') color = '#1f4d2c';
+          else if (b === 'oasis') color = '#2a4f5a';
+          else if (b === 'ruins') color = '#4a3b3b';
+          const s = worldToScreen(x,y);
+          ctx.fillStyle = color;
+          ctx.fillRect(s.x, s.y, TILE, TILE);
+          ctx.strokeStyle = 'rgba(0,0,0,0.12)';
+          ctx.strokeRect(s.x, s.y, TILE, TILE);
+        }
+      }
+      // storm overlay
+      if (storm.active) {
+        const screenCenter = worldToScreen(storm.centerX, storm.centerY);
+        ctx.save();
+        const grad = ctx.createRadialGradient(screenCenter.x, screenCenter.y, storm.radius*0.15, screenCenter.x, screenCenter.y, storm.radius);
+        grad.addColorStop(0, 'rgba(100,149,237,0.02)');
+        grad.addColorStop(1, 'rgba(100,149,237,0.35)');
+        ctx.fillStyle = grad;
+        ctx.beginPath();
+        ctx.arc(screenCenter.x, screenCenter.y, storm.radius, 0, Math.PI*2);
+        ctx.fill();
+        ctx.restore();
+      }
+    }
+    function drawObjects() {
+      for (const obj of objects) {
+        if (obj.dead) continue;
+        const s = worldToScreen(obj.x, obj.y);
+        ctx.save();
+        const h = obj.type === 'wood' ? 18 : (obj.type==='stone'? 12: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
+        ctx.fillStyle = obj.type === 'wood' ? '#6b3b1a' : (obj.type==='stone' ? '#6b6b6b' : '#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();
+        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();
+        ctx.fillStyle = chest.opened ? '#7b3e00' : '#a56b2a';
+        ctx.fillRect(s.x-18, s.y-12, 36, 20);
+        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 {
+          const backX = s.x - (b.vx * 0.02);
+          const backY = s.y - (b.vy * 0.02);
+          const grad = ctx.createLinearGradient(backX, backY, s.x, s.y);
+          grad.addColorStop(0, 'rgba(255,255,255,0)');
+          grad.addColorStop(0.7, b.color);
+          grad.addColorStop(1, '#fff');
+          ctx.strokeStyle = grad;
+          ctx.lineWidth = 3;
+          ctx.beginPath(); ctx.moveTo(backX, backY); ctx.lineTo(s.x, s.y); ctx.stroke();
+          ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(s.x, s.y, 2.5, 0, Math.PI*2); ctx.fill();
+        }
+        ctx.restore();
+      }
     }
     function drawPlayer() {
+      const s = worldToScreen(player.x, player.y);
       ctx.save();
+      ctx.translate(s.x, s.y);
       ctx.rotate(player.angle);
+      // 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();
       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 ---
+    const storm = { maxRadius: 900, radius: 900, centerX: WORLD.width/2, centerY: WORLD.height/2, damagePerSecond:1, closingSpeed: 8, active:false };
     function playerInStorm() {
+      return Math.hypot(player.x - storm.centerX, player.y - storm.centerY) > storm.radius;
     }
     let stormDamageAccumulator = 0;
+    function updateStorm(dt) {
+      if (!storm.active) return;
+      storm.radius -= storm.closingSpeed * dt * 50;
+      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 loop & updates ---
+    let lastTime = 0;
+    function gameLoop(ts) {
+      if (!gameActive) return;
+      if (!lastTime) lastTime = ts;
+      const dt = Math.min(0.05, (ts - lastTime) / 1000);
+      lastTime = ts;
+      // movement
+      let dx=0, dy=0;
+      if (keys.w) dy -= 1;
+      if (keys.s) dy += 1;
+      if (keys.a) dx -= 1;
+      if (keys.d) dx += 1;
+      if (dx !== 0 || dy !== 0) {
+        const len = Math.hypot(dx,dy) || 1;
+        player.x += (dx/len) * player.speed * dt;
+        player.y += (dy/len) * player.speed * dt;
       }
+      // clamp
+      player.x = Math.max(16, Math.min(WORLD.width-16, player.x));
+      player.y = Math.max(16, Math.min(WORLD.height-16, player.y));
+      // camera & mouse world mapping
+      cameraUpdate();
+      mouse.worldX = mouse.canvasX + camera.x;
+      mouse.worldY = mouse.canvasY + camera.y;
+      // 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 & collisions
+      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;
+        if (!b.tracer && b.dmg > 0) {
+          for (const obj of objects) {
+            if (obj.dead) continue;
+            if (Math.hypot(obj.x - b.x, obj.y - b.y) < 20) { applyDamageToObject(obj, b.dmg); b.life = -1; break; }
+          }
+          for (const chest of chests) {
+            if (!chest.opened && Math.hypot(chest.x - b.x, chest.y - b.y) < 20) { chest.opened = true; chest.openProgress = 1; b.life = -1; }
+          }
+        }
+        if (b.life <= 0 || b.traveled > 2000) bullets.splice(i,1);
+      }
+      // cleanup dead objects
+      for (let i=objects.length-1;i>=0;i--) if (objects[i].dead) objects.splice(i,1);
+      // interact (E)
+      if (keys.e) { interactNearby(); keys.e = false; }
+      // update storm
+      updateStorm(dt);
+      // draw
+      ctx.clearRect(0,0,canvas.width,canvas.height);
+      drawWorld();
+      drawObjects();
+      drawChests();
+      drawBullets();
+      drawPlayer();
+      drawCrosshair();
+      // storm warning UI
+      if (storm.active && playerInStorm()) stormWarningEl.classList.remove('hidden'); else stormWarningEl.classList.add('hidden');
+      updatePlayerStats();
+      requestAnimationFrame(gameLoop);
     }
+    // --- Game start / end handlers ---
+    let timerInterval = null;
+    let gameTime = 300;
     function startGame() {
       gameActive = true;
       landingScreenEl.classList.add('hidden');
       gameScreenEl.classList.remove('hidden');
+      // ensure canvas size and camera correct (fix for "not showing")
+      resizeCanvas();
+      // 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 = [];
+      player.weapons[0] = { name:'Pistol', dmg:12, rate:320, color:'#ffd86b' };
+      player.currentWeaponIndex = 0;
+      populateWorld();
       initInventory();
+      cameraUpdate();
+      // timer & storm
+      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}`;
+        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 start the game
+    document.querySelectorAll('.biome-selector').forEach(el => {
+      el.addEventListener('click', () => {
+        selectedBiome = el.getAttribute('data-biome');
         startGame();
       });
     });
+    // Ensure E key can be used from anywhere
+    window.addEventListener('keydown', (e) => {
+      if (e.key.toLowerCase() === 'e' && gameActive) keys.e = true;
+    });
+    // Initialize on load
     resizeCanvas();
+    populateWorld();
     initInventory();
     updatePlayerStats();
+    feather.replace();
   </script>
 </body>
 </html>