Spaces:

bbc123321
/

battle-zone-royale

Running

App Files Files Community

bbc123321 commited on Oct 13, 2025

Commit

51f3ab7

verified ·

1 Parent(s): dd19369

Manual changes saved

Browse files

Files changed (1) hide show

index.html +606 -272

index.html CHANGED Viewed

@@ -1,294 +1,628 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BattleZone Royale</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <style>
-        #gameCanvas {
-            background-image: url('http://static.photos/nature/1200x630/42');
-            background-size: cover;
-            background-position: center;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-        }
-        .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); }
-        }
-    </style>
 </head>
-<body class="bg-gray-900 text-white font-mono">
-    <div class="container mx-auto px-4 py-8">
-        <!-- Game Header -->
-        <header class="flex justify-between items-center mb-8 border-b border-yellow-500 pb-4">
-            <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">
-                <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">3:00</span>
-                </div>
             </div>
-        </header>
-        <!-- Game Area -->
-        <div class="flex flex-col lg:flex-row gap-8">
-            <!-- Main Game Canvas -->
-            <div class="flex-1 relative">
-                <canvas id="gameCanvas" class="w-full h-96 lg:h-screen-80 rounded-xl border-4 border-gray-700"></canvas>
-                <!-- Storm Warning -->
-                <div id="stormWarning" class="hidden absolute top-4 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 -->
-            <div class="w-full lg:w-80 bg-gray-800 rounded-xl p-6 h-fit">
-                <!-- Landing Selection -->
-                <div id="landingSelection" class="mb-8">
-                    <h2 class="text-2xl font-bold text-yellow-400 mb-4 flex items-center">
-                        <i data-feather="map-pin" class="mr-2"></i> Choose Landing Zone
-                    </h2>
-                    <div class="grid grid-cols-2 gap-4">
-                        <div class="biome-selector bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-yellow-800" data-biome="desert">
-                            <i data-feather="sun" class="text-yellow-300"></i>
-                            <h3 class="font-bold">Golden Dunes</h3>
-                            <p class="text-xs">High loot, high risk</p>
-                        </div>
-                        <div class="biome-selector bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-green-800" data-biome="forest">
-                            <i data-feather="tree" class="text-green-300"></i>
-                            <h3 class="font-bold">Shadow Forest</h3>
-                            <p class="text-xs">Good cover, medium loot</p>
-                        </div>
-                        <div class="biome-selector bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-blue-800" data-biome="oasis">
-                            <i data-feather="droplet" class="text-blue-300"></i>
-                            <h3 class="font-bold">Crystal Oasis</h3>
-                            <p class="text-xs">Medium loot, low risk</p>
-                        </div>
-                        <div class="biome-selector bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-purple-800" data-biome="ruins">
-                            <i data-feather="layers" class="text-purple-300"></i>
-                            <h3 class="font-bold">Ancient Ruins</h3>
-                            <p class="text-xs">Legendary loot, dangerous</p>
-                        </div>
-                    </div>
-                </div>
-                <!-- Player Stats -->
-                <div class="mb-8">
-                    <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>
-                </div>
-                <!-- Inventory -->
-                <div class="mb-8">
-                    <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">
-                        <!-- Will be populated with items -->
-                    </div>
-                </div>
-                <!-- Controls Info -->
-                <div>
-                    <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>
-                </div>
             </div>
-        </div>
     </div>
-    <script>
-        // Game variables
-        let gameActive = false;
-        let playerHealth = 100;
-        let playerArmor = 0;
-        let playerKills = 0;
-        let gameTime = 180; // 3 minutes in seconds
-        let stormActive = false;
-        let selectedBiome = null;
-        // Initialize canvas
-        const canvas = document.getElementById('gameCanvas');
-        const ctx = canvas.getContext('2d');
-        // Set canvas size
-        function resizeCanvas() {
-            canvas.width = canvas.offsetWidth;
-            canvas.height = canvas.offsetHeight;
-        }
-        window.addEventListener('resize', resizeCanvas);
-        resizeCanvas();
-        // Biome selection
-        document.querySelectorAll('.biome-selector').forEach(selector => {
-            selector.addEventListener('click', () => {
-                selectedBiome = selector.getAttribute('data-biome');
-                document.getElementById('landingSelection').classList.add('hidden');
-                startGame();
-            });
-        });
-        // Start game function
-        function startGame() {
-            gameActive = true;
-            document.getElementById('stormWarning').classList.remove('hidden');
-            // Start game timer
-            const timerInterval = setInterval(() => {
-                gameTime--;
-                const minutes = Math.floor(gameTime / 60);
-                const seconds = gameTime % 60;
-                document.getElementById('gameTimer').textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
-                // Activate storm after 1 minute
-                if (gameTime === 120 && !stormActive) {
-                    stormActive = true;
-                    alert('The storm is closing in! Move to the safe zone!');
-                }
-                if (gameTime <= 0) {
-                    clearInterval(timerInterval);
-                    endGame();
-                }
-            }, 1000);
-            // Start game loop
-            gameLoop();
-        }
-        // Game loop
-        function gameLoop() {
-            if (!gameActive) return;
-            // Clear canvas
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            // Draw game elements here
-            // (Character, enemies, loot, storm, etc.)
-            requestAnimationFrame(gameLoop);
-        }
-        // End game function
-        function endGame() {
-            gameActive = false;
-            if (playerHealth > 0) {
-                alert('Congratulations! You survived the BattleZone!');
-            }
-        }
-        // Death function
-        function playerDeath() {
-            gameActive = false;
-            document.getElementById('deathScreen').classList.remove('hidden');
         }
-        // Respawn button
-        document.getElementById('respawnBtn').addEventListener('click', () => {
-            document.getElementById('deathScreen').classList.add('hidden');
-            document.getElementById('landingSelection').classList.remove('hidden');
-            resetPlayerStats();
-        });
-        // Reset player stats
-        function resetPlayerStats() {
-            playerHealth = 100;
-            playerArmor = 0;
-            playerKills = 0;
-            updatePlayerStats();
         }
-        // Update player stats display
-        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);
-            }
         }
-        // Initialize
-        feather.replace();
-        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</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>