Spaces:

bbc123321
/

battle-zone-royale

Running

App Files Files Community

bbc123321 commited on Oct 15, 2025

Commit

0c2386c

verified ·

1 Parent(s): b72bd6e

Manual changes saved

Browse files

Files changed (1) hide show

index.html +277 -214

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>BattleZone Royale - Minimap Added</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
@@ -26,98 +26,47 @@
     .biome-selected { outline: 3px solid rgba(96,165,250,0.9); }
     /* Loading screen */
-    #loadingScreen {
-      position: absolute;
-      inset: 0;
-      z-index: 80;
-      display: none;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      color: #fff;
-      padding: 24px;
-      box-sizing: border-box;
-    }
-    /* animated gradient background */
-    .loading-bg {
       position: absolute;
-      inset: -20%;
-      background: linear-gradient(120deg, #0b1220 0%, #123049 30%, #5b2a6a 60%, #2f4b2f 100%);
-      filter: blur(20px) saturate(1.1);
-      animation: bgShift 18s linear infinite;
-      transform: scale(1.1);
-      opacity: 0.85;
-    }
-    @keyframes bgShift {
-      0% { filter: hue-rotate(0deg) blur(20px); transform: scale(1.06) rotate(0.01deg); }
-      25% { filter: hue-rotate(45deg) blur(18px); transform: scale(1.08) rotate(0.02deg); }
-      50% { filter: hue-rotate(90deg) blur(22px); transform: scale(1.04) rotate(-0.01deg); }
-      75% { filter: hue-rotate(180deg) blur(20px); transform: scale(1.07) rotate(0.01deg); }
-      100% { filter: hue-rotate(360deg) blur(20px); transform: scale(1.06) rotate(-0.02deg); }
-    }
-    .loading-card {
-      position: relative;
-      z-index: 2;
-      max-width: 880px;
-      width: calc(100% - 48px);
-      background: rgba(6,10,18,0.55);
-      border: 1px solid rgba(255,255,255,0.06);
-      box-shadow: 0 12px 40px rgba(0,0,0,0.7);
-      border-radius: 12px;
-      padding: 20px;
-      display:flex;
-      gap:18px;
-      align-items:center;
-    }
-    .loading-left {
-      flex: 1;
-      min-width: 260px;
-      display:flex; flex-direction:column; gap:10px;
-    }
-    .loading-right {
-      width: 260px;
-      display:flex; flex-direction:column; gap:12px; align-items:center;
-    }
-    .loader-spinner {
-      width: 84px; height:84px; border-radius:50%; position:relative;
-      display:flex; align-items:center; justify-content:center;
     }
-    .ring {
-      position:absolute; inset:0; border-radius:50%; box-shadow: inset 0 0 24px rgba(255,255,255,0.02);
-      border: 6px solid rgba(255,255,255,0.06);
-      animation: ringRotate 1.8s linear infinite;
     }
-    .ring::after {
-      content:'';
-      position:absolute; width:16px; height:16px; right:8px; top:50%; transform: translateY(-50%);
-      background: linear-gradient(90deg,#ffd86b,#8ef0ff);
-      border-radius:50%;
     }
-    @keyframes ringRotate { to { transform: rotate(360deg); } }
-    .loader-dots { display:flex; gap:6px; }
-    .dot { width:10px; height:10px; border-radius:50%; background:#ffd86b; opacity:0.6; animation: dotPulse 1.2s infinite; }
-    .dot:nth-child(2){ animation-delay: 0.15s; background:#8ef0ff; }
-    .dot:nth-child(3){ animation-delay: 0.3s; background:#ff9fb8; }
-    @keyframes dotPulse { 0%{ transform: scale(.8); opacity:0.4 } 50%{ transform: scale(1.2); opacity:1 } 100%{ transform: scale(.8); opacity:0.4 } }
-    .tips { font-size:14px; color:#e8eef7; background: rgba(0,0,0,0.18); padding:10px; border-radius:8px; line-height:1.3; }
-    .loading-title { font-size:18px; font-weight:800; color:#ffd86b; display:flex; align-items:center; gap:8px; }
-    .progress-wrap { width:100%; background: rgba(255,255,255,0.04); height:14px; border-radius:8px; overflow:hidden; }
-    .progress-bar { height:100%; width:0%; background: linear-gradient(90deg,#ffd86b,#8ef0ff); transition: width 0.12s linear; }
-    .loading-count { font-size:12px; color:#dfe9f9; }
-    .disabled-pane { pointer-events: none; opacity: 0.6; filter: grayscale(12%); }
-    @media (max-width: 820px){
-      .loading-card { flex-direction:column; align-items:center; text-align:center; }
-      .loading-right { width:100%; }
-    }
   </style>
 </head>
 <body>
@@ -157,7 +106,7 @@
         <li><strong>WASD</strong> — Move</li>
         <li><strong>Mouse</strong> — Aim</li>
         <li><strong>Left Click</strong> — Shoot (if weapon equipped or in selected slot) or pickaxe melee</li>
-        <li><strong>E</strong> — Use medkit in selected slot OR Interact / Loot</li>
         <li><strong>Q</strong> — Build (costs 10 materials)</li>
         <li><strong>R</strong> — Reload selected weapon</li>
         <li><strong>1-5</strong> — Select inventory slot (also equips it)</li>
@@ -258,6 +207,38 @@
           <div id="pickaxeSlot" class="pickaxe-slot" title="Pickaxe (press F to equip)">⛏️</div>
           <div id="hudGear" aria-label="gear"></div>
         </div>
       </div>
     </div>
   </div>
@@ -280,13 +261,22 @@
     const continueBtn = document.getElementById('continueBtn');
     const biomeGrid = document.getElementById('biomeGrid');
-    // Loading screen elements
     const loadingScreen = document.getElementById('loadingScreen');
     const loadingTipEl = document.getElementById('loadingTip');
     const loadingProgressEl = document.getElementById('loadingProgress');
     const loadingTimerText = document.getElementById('loadingTimerText');
-    // Minimap elements and cache
     const minimapCanvas = document.getElementById('minimapCanvas');
     const miniCtx = minimapCanvas.getContext('2d');
     let miniTerrainCache = null;
@@ -299,14 +289,22 @@
       const ctn = document.getElementById('canvasContainer');
       canvas.width = Math.max(900, Math.floor(ctn.clientWidth));
       canvas.height = Math.max(560, Math.floor(ctn.clientHeight));
-      // keep minimap internal pixel buffer consistent
       minimapCanvas.width = 220;
       minimapCanvas.height = 140;
       cameraUpdate();
-      miniTerrainCache = null; // rebuild on resize
     }
     window.addEventListener('resize', resizeCanvas);
     // Player
     const player = {
       id:'player', x: WORLD.width/2, y: WORLD.height/2, radius:16, angle:0, speed:220,
@@ -315,8 +313,9 @@
       selectedSlot:0,
       equippedIndex: -1,
       lastShot:0, lastMelee:0,
-      // medkit usage state
-      usingMedkit: false, usingMedkitUntil: 0, usingMedkitStart: 0, usingMedkitTimeout: null
     };
     // Input
@@ -327,33 +326,42 @@
     window.addEventListener('keydown',(e)=>{
       const k = e.key.toLowerCase();
-      if (gameActive){
-        if (k in keys) keys[k] = true;
-        if (['1','2','3','4','5'].includes(k)) {
-          const idx = parseInt(k)-1;
-          player.selectedSlot = idx;
-          equipSlot(idx);
-          updateHUD();
-        }
-        if (k === 'f') {
-          if (player.equippedIndex === player.selectedSlot) equipSlot(-1);
-          else equipSlot(player.selectedSlot);
-          updateHUD();
-        }
-        if (k === 'r') keys.r = true;
-      } else {
-        if (['1','2','3','4','5'].includes(k)) {
-          player.selectedSlot = parseInt(k)-1;
-          updateHUD();
-        }
       }
     });
     window.addEventListener('keyup',(e)=>{
       const k = e.key.toLowerCase();
       if (k in keys) keys[k] = false;
-      if (k === 'e') keys.e = true;
-      if (k === 'q') keys.q = true;
     });
     canvas.addEventListener('mousemove',(e)=>{
@@ -375,7 +383,70 @@
     });
     window.addEventListener('mouseup', ()=> mouse.down = false);
-    // Entities
     const bullets = [];
     const chests = [];
     const objects = [];
@@ -412,11 +483,9 @@
       return { type:'weapon', weapon: weapons[randInt(0, weapons.length)] };
     }
-    // Behaviour tuning
     const VIEW_RANGE = 1200;
     const SPAWN_PROTECT_MS = 1200;
-    // collision helpers
     function getObjectRadius(obj){
       if (!obj) return 18;
       if (obj.type === 'wall') return 28;
@@ -505,7 +574,6 @@
           tempTarget: null,
           tempTargetExpiry: 0,
           prioritizeChestsUntil: 0,
-          // medkit state for enemies
           usingMedkit: false, usingMedkitStart: 0, usingMedkitUntil: 0, usingMedkitSlot: -1
         };
@@ -549,9 +617,13 @@
     function updateHUD(){
       const now = performance.now();
       let healthText = `${Math.max(0,Math.floor(player.health))}%`;
-      if (player.usingMedkit){
-        const remaining = Math.max(0, Math.ceil((player.usingMedkitUntil - now)/1000));
-        healthText += ` (Healing ${remaining}s)`;
       }
       hudHealthText.textContent = healthText;
       const slots = hudGear.querySelectorAll('.gear-slot');
@@ -633,63 +705,10 @@
       }
     }
-    // Player interact & medkit usage
-    function attemptUseOrInteract(){
-      const sel = player.selectedSlot;
-      const selItem = player.inventory[sel];
-      if (selItem && selItem.type === 'medkit'){
-        // toggle or start medkit usage
-        if (player.usingMedkit){
-          cancelPlayerMedkitUse();
-        } else {
-          startPlayerMedkitUse(sel);
-        }
-      } else {
-        interactNearby();
-      }
-    }
-    function startPlayerMedkitUse(slot){
-      const it = player.inventory[slot];
-      if (!it || it.type !== 'medkit' || it.amount <= 0) return;
-      if (player.usingMedkit) return;
-      const now = performance.now();
-      player.usingMedkit = true;
-      player.usingMedkitStart = now;
-      player.usingMedkitUntil = now + 3000; // 3 seconds
-      // set a timeout to apply heal
-      player.usingMedkitTimeout = setTimeout(()=> {
-        // ensure still using and item present
-        if (!player.usingMedkit) return;
-        const cur = player.inventory[slot];
-        if (cur && cur.type === 'medkit'){
-          cur.amount -= 1;
-          player.health = Math.min(100, player.health + 50);
-          if (cur.amount <= 0) player.inventory[slot] = null;
-        }
-        player.usingMedkit = false;
-        player.usingMedkitTimeout = null;
-        updateHUD();
-      }, 3000);
-      updateHUD();
-    }
-    function cancelPlayerMedkitUse(){
-      if (!player.usingMedkit) return;
-      player.usingMedkit = false;
-      player.usingMedkitStart = 0;
-      player.usingMedkitUntil = 0;
-      if (player.usingMedkitTimeout){
-        clearTimeout(player.usingMedkitTimeout);
-        player.usingMedkitTimeout = null;
-      }
-      updateHUD();
-    }
     function interactNearby(){
       const sel = player.selectedSlot;
       const selItem = player.inventory[sel];
-      // medkit immediate use removed — now 3s usage handled above
       const range = 56;
       for (const chest of chests){
         if (chest.opened) continue;
@@ -718,6 +737,19 @@
       }
     }
     function pickupCollect(p){
       if (p.type === 'weapon'){
         let merged=false;
@@ -747,7 +779,7 @@
       }
     }
-    // Enemy helpers (medkit usage now takes 3s)
     function enemyEquipBestWeapon(e){
       let bestIdx = -1;
       let bestScore = -Infinity;
@@ -771,7 +803,6 @@
           e.usingMedkitStart = now;
           e.usingMedkitUntil = now + 3000;
           e.usingMedkitSlot = s;
-          // set nextHealTime to prevent immediate re-trigger
           e.nextHealTime = now + 5000;
           return true;
         }
@@ -845,7 +876,6 @@
           const it = e.inventory[s];
           if (it && it.type==='medkit'){ it.amount += p.amount;
             if (e.health < 60) {
-              // start medkit use if not already using
               if (!e.usingMedkit) enemyStartMedkitUse(e, performance.now());
             }
             return;
@@ -880,7 +910,6 @@
       return true;
     }
-    // LOS helpers
     function hasLineOfSight(x1,y1,x2,y2){
       const vx = x2 - x1, vy = y2 - y1;
       const vlen2 = vx*vx + vy*vy;
@@ -917,7 +946,6 @@
       return closest;
     }
-    // New helper: compute detour waypoint around blocker
     function computeDetourWaypoint(fromX, fromY, blocker, goalX, goalY, padding = 12){
       if (!blocker) return null;
       let br = 0;
@@ -941,7 +969,7 @@
       return chosen;
     }
-    // Bullets update (rewritten for consistent collision handling)
     function bulletsUpdate(dt){
       for (let i=bullets.length-1;i>=0;i--){
         const b = bullets[i];
@@ -954,10 +982,10 @@
         if (b.shooter !== 'player'){
           const dPlayer = Math.hypot(player.x - b.x, player.y - b.y);
           if (dPlayer < hitRadiusPlayer){
-            // apply damage
             player.health -= b.dmg;
-            // cancel medkit usage if player is healing
-            if (player.usingMedkit) cancelPlayerMedkitUse();
             if (player.health <= 0){ player.health = 0; playerDeath(); }
             bullets.splice(i,1);
             continue;
@@ -970,12 +998,9 @@
           if (e.health <= 0) continue;
           const d = Math.hypot(e.x - b.x, e.y - b.y);
           if (d < 14 && b.shooter !== e.id){
-            // apply damage
             e.health -= b.dmg;
             e.lastAttackedTime = performance.now();
-            // cancel enemy medkit if they are healing
             if (e.usingMedkit){
-              // if they were using medkit, cancel it when hit
               e.usingMedkit = false; e.usingMedkitSlot = -1; e.usingMedkitStart = 0; e.usingMedkitUntil = 0;
             }
             if (e.health <= 0){
@@ -997,12 +1022,10 @@
           if (obj.dead) continue;
           const rr = getObjectRadius(obj);
           const d = Math.hypot(obj.x - b.x, obj.y - b.y);
-          // use a small tolerance so bullets clearly collide
           if (d < rr + 2){
             obj.hp -= b.dmg;
             if (obj.hp <= 0){
               obj.dead = true;
-              // reward materials if player shot the object
               if (b.shooter === 'player') player.materials += (obj.type === 'wood' ? 3 : 6);
             }
             hitObj = obj;
@@ -1014,7 +1037,7 @@
           continue;
         }
-        // 4) Hit chests (if wanted bullets can open chests) — keep old behaviour
         for (const chest of chests){
           if (chest.opened) continue;
           const d = Math.hypot(chest.x - b.x, chest.y - b.y);
@@ -1036,7 +1059,6 @@
       }
     }
-    // Helpers to find nearest
     function findNearestChest(e, maxDist = 1200){
       let best = null; let bd = Infinity;
       for (const c of chests){ if (c.opened) continue; const d = Math.hypot(c.x - e.x, c.y - e.y); if (d < bd && d <= maxDist){ bd = d; best = c; } }
@@ -1053,14 +1075,12 @@
       return best;
     }
-    // Enemy AI (with medkit use delay)
     function updateEnemies(dt, now){
       const minSeparation = 20;
       for (const e of enemies){
         if (e.health <= 0) continue;
         if (!e.spawnSafeUntil) e.spawnSafeUntil = performance.now() + SPAWN_PROTECT_MS;
-        // Auto-open chests on proximity
         for (const chest of chests){
           if (chest.opened) continue;
           const distChest = Math.hypot(chest.x - e.x, chest.y - e.y);
@@ -1079,20 +1099,16 @@
           }
         }
-        // Handle enemy medkit usage finishing/cancelling
         if (e.usingMedkit){
-          // if they were attacked while using, cancel
           if (e.lastAttackedTime > e.usingMedkitStart){
             e.usingMedkit = false; e.usingMedkitSlot = -1; e.usingMedkitStart = 0; e.usingMedkitUntil = 0;
           } else if (now >= e.usingMedkitUntil){
             applyEnemyMedkitUseNow(e);
           } else {
-            // still using medkit; don't do other heavy actions
             continue;
           }
         }
-        // STORM behavior (unchanged)
         if (storm.active){
           const distToSafeCenter = Math.hypot(e.x - storm.centerX, e.y - storm.centerY);
           if (distToSafeCenter > storm.radius){
@@ -1157,12 +1173,10 @@
           }
         }
-        // NORMAL behavior
         if (now - e.lastAttackedTime < 4000) e.state = 'combat';
         if (e.state === 'gather') e.gatherTimeLeft -= dt;
         if (e.health < 60 && now >= (e.nextHealTime || 0) && !e.usingMedkit){
-          // start medkit use (3s) if possible
           if (enemyStartMedkitUse(e, now)){
             continue;
           }
@@ -1247,7 +1261,6 @@
           continue;
         }
-        // Combat logic remains (omitted here for brevity but preserved)
         if (e.equippedIndex === -1) enemyEquipBestWeapon(e);
         if (e.reloadPending){
           if (now >= e.reloadingUntil){
@@ -1453,7 +1466,6 @@
       }
     }
-    // Storm
     const storm = { maxRadius: 2400, radius:2400, centerX: WORLD.width/2, centerY: WORLD.height/2, damagePerSecond:1, closingSpeed: 0.6, active:false };
     let stormDamageAccumulator = 0;
     function playerInStorm(){ return Math.hypot(player.x - storm.centerX, player.y - storm.centerY) > storm.radius; }
@@ -1468,7 +1480,7 @@
         while (stormDamageAccumulator >= 1){
           stormDamageAccumulator -=1;
           player.health -= 1;
-          if (player.usingMedkit) cancelPlayerMedkitUse();
           if (player.health <= 0){ player.health = 0; playerDeath(); }
         }
       } else stormDamageAccumulator = 0;
@@ -1493,8 +1505,7 @@
       }
     }
-    // Drawing functions (unchanged, omitted here for brevity)...
-    // (All draw functions from the previous code remain unchanged and are present below.)
     function drawWorld(){
       const TILE = 600;
       const cols = Math.ceil(WORLD.width / TILE);
@@ -1702,7 +1713,7 @@
     function drawCrosshair(){}
-    // Minimap functions (unchanged)
     function buildMiniTerrainCache(){
       const mw = minimapCanvas.width;
       const mh = minimapCanvas.height;
@@ -1795,6 +1806,36 @@
       miniCtx.restore();
     }
     // Main loop
     let lastTime = 0;
     function gameLoop(ts){
@@ -1822,8 +1863,11 @@
         if (isCollidingSolid(player.x, player.y, player.radius)){
           player.y = oldY;
         }
-        // If player moves while using medkit, cancel use
-        if (player.usingMedkit && (dx !== 0 || dy !== 0)) cancelPlayerMedkitUse();
       }
       player.x = Math.max(16, Math.min(WORLD.width-16, player.x));
       player.y = Math.max(16, Math.min(WORLD.height-16, player.y));
@@ -1855,9 +1899,25 @@
       }
       if (keys.r) { reloadEquipped(); keys.r = false; }
-      if (keys.e){ attemptUseOrInteract(); keys.e = false; }
       if (keys.q){ tryBuild(); keys.q = false; }
       updateEnemies(dt, performance.now());
       bulletsUpdate(dt);
@@ -1879,6 +1939,10 @@
       if (storm.active && playerInStorm()) stormWarning.classList.remove('hidden'); else stormWarning.classList.add('hidden');
       requestAnimationFrame(gameLoop);
     }
@@ -1916,7 +1980,7 @@
       player.health = 100; player.armor = 0; player.kills = 0; player.materials = 0;
       player.inventory = [null,null,null,null,null];
       player.selectedSlot = 0; player.equippedIndex = -1; player.lastShot = 0; player.lastMelee = 0;
-      player.usingMedkit = false; player.usingMedkitTimeout = null;
       populateWorld();
       initHUD();
@@ -1964,8 +2028,7 @@
     function endGame(){ gameActive = false; alert('Match over!'); }
     function playerDeath(){
       gameActive = false;
-      // cancel medkit use on death
-      cancelPlayerMedkitUse();
       deathScreen.classList.remove('hidden');
     }
@@ -1973,7 +2036,7 @@
     goHomeBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); gameScreen.classList.add('hidden'); landingScreen.classList.remove('hidden'); });
     continueBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); startGame(selectedBiome); });
-    // Loading screen logic (unchanged)
     const loadingTips = [
       "Stick to cover when approaching buildings — open areas get you killed.",
       "Loot chests quickly and move — enemies can hear opening animations.",

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>BattleZone Royale - Mobile Controls & Medkit Hold</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
     .biome-selected { outline: 3px solid rgba(96,165,250,0.9); }
     /* Loading screen */
+    #loadingScreen { position: absolute; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; overflow: hidden; color: #fff; padding: 24px; box-sizing: border-box; }
+    /* Mobile controls */
+    #mobileControls {
       position: absolute;
+      bottom: 14px;
+      left: 14px;
+      right: 14px;
+      pointer-events: auto;
+      z-index: 60;
+      display: none;
+      touch-action: none;
     }
+    .mobile-left, .mobile-right { display:flex; gap:10px; align-items:center; }
+    .dpad { width: 140px; height: 140px; position: relative; }
+    .dpad button {
+      position: absolute; width: 46px; height: 46px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.04); color:#fff; font-weight:700;
+      display:flex; align-items:center; justify-content:center; -webkit-user-select:none; user-select:none;
     }
+    .dpad button:active { background: rgba(255,255,255,0.10); }
+    .dpad .up { left: 50%; transform: translateX(-50%); top: 6px; }
+    .dpad .down { left: 50%; transform: translateX(-50%); bottom: 6px; }
+    .dpad .left { left: 6px; top: 50%; transform: translateY(-50%); }
+    .dpad .right { right: 6px; top: 50%; transform: translateY(-50%); }
+    .mobile-actions { position:absolute; right:14px; bottom:14px; display:flex; flex-direction:column; gap:10px; align-items:flex-end; z-index:61; }
+    .action-btn { width:64px; height:64px; border-radius:12px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
+    .action-btn:active { background: rgba(255,255,255,0.10); }
+    .small-actions { display:flex; gap:8px; margin-top:8px; }
+    /* progress ring for medkit button */
+    .medkit-wrap { position:relative; width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
+    .medkit-progress {
+      position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;
+      opacity:0.95;
     }
+    /* Loading card styles (from previous) */
+    .loading-bg { position: absolute; inset: -20%; background: linear-gradient(120deg, #0b1220 0%, #123049 30%, #5b2a6a 60%, #2f4b2f 100%); filter: blur(20px) saturate(1.1); animation: bgShift 18s linear infinite; transform: scale(1.1); opacity: 0.85; }
+    @keyframes bgShift { 0% { filter: hue-rotate(0deg) blur(20px); transform: scale(1.06) rotate(0.01deg); } 25% { filter: hue-rotate(45deg) blur(18px); transform: scale(1.08) rotate(0.02deg); } 50% { filter: hue-rotate(90deg) blur(22px); transform: scale(1.04) rotate(-0.01deg); } 75% { filter: hue-rotate(180deg) blur(20px); transform: scale(1.07) rotate(0.01deg); } 100% { filter: hue-rotate(360deg) blur(20px); transform: scale(1.06) rotate(-0.02deg); } }
+    .loading-card { position: relative; z-index: 2; max-width: 880px; width: calc(100% - 48px); background: rgba(6,10,18,0.55); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 12px 40px rgba(0,0,0,0.7); border-radius: 12px; padding: 20px; display:flex; gap:18px; align-items:center; }
   </style>
 </head>
 <body>
         <li><strong>WASD</strong> — Move</li>
         <li><strong>Mouse</strong> — Aim</li>
         <li><strong>Left Click</strong> — Shoot (if weapon equipped or in selected slot) or pickaxe melee</li>
+        <li><strong>E</strong> — Hold to use medkit (3s) OR tap to Interact / Loot</li>
         <li><strong>Q</strong> — Build (costs 10 materials)</li>
         <li><strong>R</strong> — Reload selected weapon</li>
         <li><strong>1-5</strong> — Select inventory slot (also equips it)</li>
           <div id="pickaxeSlot" class="pickaxe-slot" title="Pickaxe (press F to equip)">⛏️</div>
           <div id="hudGear" aria-label="gear"></div>
         </div>
+        <!-- Mobile Controls -->
+        <div id="mobileControls" aria-hidden="true">
+          <div style="display:flex; justify-content:space-between;">
+            <div class="mobile-left">
+              <div class="dpad" id="dpad">
+                <button class="up" data-dir="up">▲</button>
+                <button class="down" data-dir="down">▼</button>
+                <button class="left" data-dir="left">◀</button>
+                <button class="right" data-dir="right">▶</button>
+              </div>
+            </div>
+            <div class="mobile-right" style="align-items:flex-end; gap:14px;">
+              <div style="display:flex; flex-direction:column; align-items:flex-end;">
+                <div class="mobile-actions" id="mobileActions">
+                  <div class="medkit-wrap">
+                    <canvas class="medkit-progress" id="medkitProgress" width="64" height="64" style="border-radius:12px;"></canvas>
+                    <button id="fireBtn" class="action-btn" style="width:64px;height:64px;">FIRE</button>
+                  </div>
+                  <div class="small-actions">
+                    <button id="interactBtn" class="action-btn" style="width:64px;height:44px;">USE</button>
+                    <button id="buildBtn" class="action-btn" style="width:64px;height:44px;">BUILD</button>
+                    <button id="reloadBtn" class="action-btn" style="width:64px;height:44px;">RLD</button>
+                    <button id="equipBtn" class="action-btn" style="width:64px;height:44px;">EQ</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
     const continueBtn = document.getElementById('continueBtn');
     const biomeGrid = document.getElementById('biomeGrid');
+    // Mobile controls elements
+    const mobileControls = document.getElementById('mobileControls');
+    const dpad = document.getElementById('dpad');
+    const fireBtn = document.getElementById('fireBtn');
+    const interactBtn = document.getElementById('interactBtn');
+    const buildBtn = document.getElementById('buildBtn');
+    const reloadBtn = document.getElementById('reloadBtn');
+    const equipBtn = document.getElementById('equipBtn');
+    const medkitCanvas = document.getElementById('medkitProgress');
+    const medkitCtx = medkitCanvas.getContext('2d');
+    // Loading screen elements and minimap
     const loadingScreen = document.getElementById('loadingScreen');
     const loadingTipEl = document.getElementById('loadingTip');
     const loadingProgressEl = document.getElementById('loadingProgress');
     const loadingTimerText = document.getElementById('loadingTimerText');
     const minimapCanvas = document.getElementById('minimapCanvas');
     const miniCtx = minimapCanvas.getContext('2d');
     let miniTerrainCache = null;
       const ctn = document.getElementById('canvasContainer');
       canvas.width = Math.max(900, Math.floor(ctn.clientWidth));
       canvas.height = Math.max(560, Math.floor(ctn.clientHeight));
       minimapCanvas.width = 220;
       minimapCanvas.height = 140;
       cameraUpdate();
+      miniTerrainCache = null;
     }
     window.addEventListener('resize', resizeCanvas);
+    // Detect mobile/touch
+    const isMobile = ('ontouchstart' in window) || navigator.maxTouchPoints > 0;
+    if (isMobile){
+      mobileControls.style.display = 'block';
+      mobileControls.setAttribute('aria-hidden', 'false');
+      // hide cursor for better mobile feel
+      canvas.style.cursor = 'none';
+    }
     // Player
     const player = {
       id:'player', x: WORLD.width/2, y: WORLD.height/2, radius:16, angle:0, speed:220,
       selectedSlot:0,
       equippedIndex: -1,
       lastShot:0, lastMelee:0,
+      // medkit hold state
+      ePressStart: 0, // timestamp when E/use started (keyboard or touch)
+      ePressApplied: false // whether medkit has been applied for current press
     };
     // Input
     window.addEventListener('keydown',(e)=>{
       const k = e.key.toLowerCase();
+      if (k in keys) keys[k] = true;
+      // handle medkit hold start on keydown
+      if (k === 'e'){
+        player.ePressStart = performance.now();
+        player.ePressApplied = false;
+      }
+      if (['1','2','3','4','5'].includes(k)) {
+        const idx = parseInt(k)-1;
+        player.selectedSlot = idx;
+        equipSlot(idx);
+        updateHUD();
       }
+      if (k === 'f') {
+        if (player.equippedIndex === player.selectedSlot) equipSlot(-1);
+        else equipSlot(player.selectedSlot);
+        updateHUD();
+      }
+      if (k === 'r') keys.r = true;
     });
     window.addEventListener('keyup',(e)=>{
       const k = e.key.toLowerCase();
       if (k in keys) keys[k] = false;
+      // medkit / interact: if released quickly treat as tap interact, else if held long enough medkit already applied
+      if (k === 'e'){
+        const now = performance.now();
+        const held = player.ePressStart ? (now - player.ePressStart) : 0;
+        if (!player.ePressApplied){
+          if (held < 3000){
+            interactNearby();
+          } // else medkit applied automatically earlier
+        }
+        player.ePressStart = 0;
+        player.ePressApplied = false;
+      }
+      if (k === 'q') { keys.q = false; }
     });
     canvas.addEventListener('mousemove',(e)=>{
     });
     window.addEventListener('mouseup', ()=> mouse.down = false);
+    // Mobile controls touch handlers
+    function bindTouchButton(el, onStart, onEnd){
+      if (!el) return;
+      el.addEventListener('touchstart', (ev) => { ev.preventDefault(); onStart && onStart(ev); }, { passive:false });
+      el.addEventListener('touchend', (ev) => { ev.preventDefault(); onEnd && onEnd(ev); }, { passive:false });
+      el.addEventListener('touchcancel', (ev) => { ev.preventDefault(); onEnd && onEnd(ev); }, { passive:false });
+    }
+    // D-pad buttons
+    const dirButtons = dpad.querySelectorAll('button');
+    dirButtons.forEach(btn => {
+      const dir = btn.dataset.dir;
+      bindTouchButton(btn,
+        () => { // start
+          if (dir === 'up') keys.w = true;
+          if (dir === 'down') keys.s = true;
+          if (dir === 'left') keys.a = true;
+          if (dir === 'right') keys.d = true;
+        },
+        () => { // end
+          if (dir === 'up') keys.w = false;
+          if (dir === 'down') keys.s = false;
+          if (dir === 'left') keys.a = false;
+          if (dir === 'right') keys.d = false;
+        }
+      );
+    });
+    // FIRE: hold to fire (maps to mouse.down)
+    bindTouchButton(fireBtn, () => { mouse.down = true; }, () => { mouse.down = false; });
+    // INTERACT / USE: tap to interact, hold to use medkit
+    bindTouchButton(interactBtn,
+      (ev) => {
+        player.ePressStart = performance.now();
+        player.ePressApplied = false;
+      },
+      (ev) => {
+        const now = performance.now();
+        const held = player.ePressStart ? (now - player.ePressStart) : 0;
+        if (!player.ePressApplied){
+          if (held < 3000){
+            interactNearby();
+          }
+        }
+        player.ePressStart = 0;
+        player.ePressApplied = false;
+      }
+    );
+    // BUILD (Q)
+    bindTouchButton(buildBtn, null, () => { tryBuild(); });
+    // RELOAD (R)
+    bindTouchButton(reloadBtn, null, () => { reloadEquipped(); });
+    // EQUIP toggle (F)
+    bindTouchButton(equipBtn, null, () => {
+      if (player.equippedIndex === player.selectedSlot) equipSlot(-1);
+      else equipSlot(player.selectedSlot);
+      updateHUD();
+    });
+    // Entities and world arrays
     const bullets = [];
     const chests = [];
     const objects = [];
       return { type:'weapon', weapon: weapons[randInt(0, weapons.length)] };
     }
     const VIEW_RANGE = 1200;
     const SPAWN_PROTECT_MS = 1200;
     function getObjectRadius(obj){
       if (!obj) return 18;
       if (obj.type === 'wall') return 28;
           tempTarget: null,
           tempTargetExpiry: 0,
           prioritizeChestsUntil: 0,
           usingMedkit: false, usingMedkitStart: 0, usingMedkitUntil: 0, usingMedkitSlot: -1
         };
     function updateHUD(){
       const now = performance.now();
       let healthText = `${Math.max(0,Math.floor(player.health))}%`;
+      // show medkit hold progress on HUD for keyboard or show "Healed" when applied
+      if (player.ePressStart && !player.ePressApplied){
+        const elapsed = Math.min(3000, now - player.ePressStart);
+        const remaining = Math.ceil((3000 - elapsed)/1000);
+        healthText += ` (Holding to use medkit: ${Math.max(0, (3000 - Math.floor(elapsed))/1000).toFixed(1)}s)`;
+      } else if (player.ePressApplied){
+        healthText += ' (Medkit used)';
       }
       hudHealthText.textContent = healthText;
       const slots = hudGear.querySelectorAll('.gear-slot');
       }
     }
+    // Player interact & medkit usage (refactored: hold to use for 3s; tap to interact)
     function interactNearby(){
       const sel = player.selectedSlot;
       const selItem = player.inventory[sel];
       const range = 56;
       for (const chest of chests){
         if (chest.opened) continue;
       }
     }
+    function applyPlayerMedkitNow(){
+      const sel = player.selectedSlot;
+      const it = player.inventory[sel];
+      if (!it || it.type !== 'medkit' || it.amount <= 0) return false;
+      it.amount -= 1;
+      player.health = Math.min(100, player.health + 50);
+      if (it.amount <= 0) player.inventory[sel] = null;
+      player.ePressApplied = true;
+      player.ePressStart = 0;
+      updateHUD();
+      return true;
+    }
     function pickupCollect(p){
       if (p.type === 'weapon'){
         let merged=false;
       }
     }
+    // Enemy medkit helpers (unchanged)
     function enemyEquipBestWeapon(e){
       let bestIdx = -1;
       let bestScore = -Infinity;
           e.usingMedkitStart = now;
           e.usingMedkitUntil = now + 3000;
           e.usingMedkitSlot = s;
           e.nextHealTime = now + 5000;
           return true;
         }
           const it = e.inventory[s];
           if (it && it.type==='medkit'){ it.amount += p.amount;
             if (e.health < 60) {
               if (!e.usingMedkit) enemyStartMedkitUse(e, performance.now());
             }
             return;
       return true;
     }
     function hasLineOfSight(x1,y1,x2,y2){
       const vx = x2 - x1, vy = y2 - y1;
       const vlen2 = vx*vx + vy*vy;
       return closest;
     }
     function computeDetourWaypoint(fromX, fromY, blocker, goalX, goalY, padding = 12){
       if (!blocker) return null;
       let br = 0;
       return chosen;
     }
+    // Bullets update with collisions (player & enemy & terrain)
     function bulletsUpdate(dt){
       for (let i=bullets.length-1;i>=0;i--){
         const b = bullets[i];
         if (b.shooter !== 'player'){
           const dPlayer = Math.hypot(player.x - b.x, player.y - b.y);
           if (dPlayer < hitRadiusPlayer){
             player.health -= b.dmg;
+            // cancel medkit hold on taking damage
+            player.ePressStart = 0;
+            player.ePressApplied = false;
             if (player.health <= 0){ player.health = 0; playerDeath(); }
             bullets.splice(i,1);
             continue;
           if (e.health <= 0) continue;
           const d = Math.hypot(e.x - b.x, e.y - b.y);
           if (d < 14 && b.shooter !== e.id){
             e.health -= b.dmg;
             e.lastAttackedTime = performance.now();
             if (e.usingMedkit){
               e.usingMedkit = false; e.usingMedkitSlot = -1; e.usingMedkitStart = 0; e.usingMedkitUntil = 0;
             }
             if (e.health <= 0){
           if (obj.dead) continue;
           const rr = getObjectRadius(obj);
           const d = Math.hypot(obj.x - b.x, obj.y - b.y);
           if (d < rr + 2){
             obj.hp -= b.dmg;
             if (obj.hp <= 0){
               obj.dead = true;
               if (b.shooter === 'player') player.materials += (obj.type === 'wood' ? 3 : 6);
             }
             hitObj = obj;
           continue;
         }
+        // 4) Hit chests
         for (const chest of chests){
           if (chest.opened) continue;
           const d = Math.hypot(chest.x - b.x, chest.y - b.y);
       }
     }
     function findNearestChest(e, maxDist = 1200){
       let best = null; let bd = Infinity;
       for (const c of chests){ if (c.opened) continue; const d = Math.hypot(c.x - e.x, c.y - e.y); if (d < bd && d <= maxDist){ bd = d; best = c; } }
       return best;
     }
     function updateEnemies(dt, now){
       const minSeparation = 20;
       for (const e of enemies){
         if (e.health <= 0) continue;
         if (!e.spawnSafeUntil) e.spawnSafeUntil = performance.now() + SPAWN_PROTECT_MS;
         for (const chest of chests){
           if (chest.opened) continue;
           const distChest = Math.hypot(chest.x - e.x, chest.y - e.y);
           }
         }
         if (e.usingMedkit){
           if (e.lastAttackedTime > e.usingMedkitStart){
             e.usingMedkit = false; e.usingMedkitSlot = -1; e.usingMedkitStart = 0; e.usingMedkitUntil = 0;
           } else if (now >= e.usingMedkitUntil){
             applyEnemyMedkitUseNow(e);
           } else {
             continue;
           }
         }
         if (storm.active){
           const distToSafeCenter = Math.hypot(e.x - storm.centerX, e.y - storm.centerY);
           if (distToSafeCenter > storm.radius){
           }
         }
         if (now - e.lastAttackedTime < 4000) e.state = 'combat';
         if (e.state === 'gather') e.gatherTimeLeft -= dt;
         if (e.health < 60 && now >= (e.nextHealTime || 0) && !e.usingMedkit){
           if (enemyStartMedkitUse(e, now)){
             continue;
           }
           continue;
         }
         if (e.equippedIndex === -1) enemyEquipBestWeapon(e);
         if (e.reloadPending){
           if (now >= e.reloadingUntil){
       }
     }
     const storm = { maxRadius: 2400, radius:2400, centerX: WORLD.width/2, centerY: WORLD.height/2, damagePerSecond:1, closingSpeed: 0.6, active:false };
     let stormDamageAccumulator = 0;
     function playerInStorm(){ return Math.hypot(player.x - storm.centerX, player.y - storm.centerY) > storm.radius; }
         while (stormDamageAccumulator >= 1){
           stormDamageAccumulator -=1;
           player.health -= 1;
+          player.ePressStart = 0; player.ePressApplied = false;
           if (player.health <= 0){ player.health = 0; playerDeath(); }
         }
       } else stormDamageAccumulator = 0;
       }
     }
+    // Drawing functions (kept from prior code)
     function drawWorld(){
       const TILE = 600;
       const cols = Math.ceil(WORLD.width / TILE);
     function drawCrosshair(){}
+    // Minimap functions
     function buildMiniTerrainCache(){
       const mw = minimapCanvas.width;
       const mh = minimapCanvas.height;
       miniCtx.restore();
     }
+    // Medkit progress draw (mobile ring)
+    function drawMedkitProgress(){
+      const ctxm = medkitCtx;
+      ctxm.clearRect(0,0,64,64);
+      const now = performance.now();
+      let progress = 0;
+      if (player.ePressStart && !player.ePressApplied){
+        progress = Math.min(1, (now - player.ePressStart) / 3000);
+      } else if (player.ePressApplied){
+        progress = 1;
+      }
+      // background circle
+      ctxm.beginPath();
+      ctxm.arc(32,32,28,0,Math.PI*2);
+      ctxm.fillStyle = 'rgba(255,255,255,0.02)';
+      ctxm.fill();
+      // progress arc
+      ctxm.beginPath();
+      ctxm.strokeStyle = 'rgba(255,107,107,0.95)';
+      ctxm.lineWidth = 6;
+      ctxm.lineCap = 'round';
+      ctxm.arc(32,32,24,-Math.PI/2, -Math.PI/2 + (Math.PI*2*progress));
+      ctxm.stroke();
+      // center label
+      ctxm.fillStyle = '#fff';
+      ctxm.font = '10px monospace';
+      ctxm.textAlign = 'center';
+      ctxm.fillText('USE', 32, 36);
+    }
     // Main loop
     let lastTime = 0;
     function gameLoop(ts){
         if (isCollidingSolid(player.x, player.y, player.radius)){
           player.y = oldY;
         }
+        // If player moves while holding medkit, cancel the hold
+        if (player.ePressStart){
+          player.ePressStart = 0;
+          player.ePressApplied = false;
+        }
       }
       player.x = Math.max(16, Math.min(WORLD.width-16, player.x));
       player.y = Math.max(16, Math.min(WORLD.height-16, player.y));
       }
       if (keys.r) { reloadEquipped(); keys.r = false; }
       if (keys.q){ tryBuild(); keys.q = false; }
+      // Handle player medkit hold: if holding and not applied and reached duration, apply automatically
+      if (player.ePressStart && !player.ePressApplied){
+        const now = performance.now();
+        const elapsed = now - player.ePressStart;
+        const sel = player.selectedSlot;
+        const it = player.inventory[sel];
+        if (it && it.type === 'medkit'){
+          if (elapsed >= 3000){
+            // apply medkit
+            applyPlayerMedkitNow();
+          }
+        } else {
+          // if not medkit in slot, cancel hold and treat as simple interact on release
+          // (we don't auto-interact here)
+        }
+      }
       updateEnemies(dt, performance.now());
       bulletsUpdate(dt);
       if (storm.active && playerInStorm()) stormWarning.classList.remove('hidden'); else stormWarning.classList.add('hidden');
+      if (isMobile){
+        drawMedkitProgress();
+      }
       requestAnimationFrame(gameLoop);
     }
       player.health = 100; player.armor = 0; player.kills = 0; player.materials = 0;
       player.inventory = [null,null,null,null,null];
       player.selectedSlot = 0; player.equippedIndex = -1; player.lastShot = 0; player.lastMelee = 0;
+      player.ePressStart = 0; player.ePressApplied = false;
       populateWorld();
       initHUD();
     function endGame(){ gameActive = false; alert('Match over!'); }
     function playerDeath(){
       gameActive = false;
+      player.ePressStart = 0; player.ePressApplied = false;
       deathScreen.classList.remove('hidden');
     }
     goHomeBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); gameScreen.classList.add('hidden'); landingScreen.classList.remove('hidden'); });
     continueBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); startGame(selectedBiome); });
+    // Loading tips
     const loadingTips = [
       "Stick to cover when approaching buildings — open areas get you killed.",
       "Loot chests quickly and move — enemies can hear opening animations.",