feat(grenades): implement grenade mechanics including throwing, explosion effects, and HUD integration

index.html

@@ -156,6 +156,10 @@
         <div class="label">FPS</div>
         <div class="value" id="fps">-</div>
       </div>
+      <div class="mini-card">
+        <div class="label">GRENADES</div>
+        <div class="value" id="grenades">0</div>
+      </div>
     </div>
 
     <!-- Health Bottom-Left -->
@@ -185,7 +189,7 @@
     <div id="overlay-content">
       <h1>Orcs In The Forest</h1>
       <p>Click to Start</p>
-      <p style="font-size: 14px;">Move: WASD | Look: Mouse | Fire: Click | Reload: R | Light: F | Pause: ESC</p>
+      <p style="font-size: 14px;">Move: WASD | Look: Mouse | Fire: Click | Reload: R | Grenade: Hold G then release | Light: F | Pause: ESC</p>
     </div>
   </div>
 

src/audio.js

@@ -115,6 +115,42 @@ export function playHeadshot() {
   click.start(t0);
 }
 
+// Explosion: bass thump + noise burst with decay
+export function playExplosion() {
+  ensureContext();
+  const t0 = ctx.currentTime;
+  const masterVol = (CFG.audio?.master ?? 0.6);
+  const base = 0.9 * masterVol;
+
+  // Low boom
+  const boom = ctx.createOscillator();
+  boom.type = 'sine';
+  boom.frequency.setValueAtTime(120, t0);
+  boom.frequency.exponentialRampToValueAtTime(45, t0 + 0.5);
+  const bGain = ctx.createGain();
+  bGain.gain.setValueAtTime(0.0001, t0);
+  bGain.gain.linearRampToValueAtTime(base * 0.8, t0 + 0.02);
+  bGain.gain.exponentialRampToValueAtTime(0.0001, t0 + 0.8);
+  boom.connect(bGain).connect(master);
+  boom.start(t0); boom.stop(t0 + 0.9);
+
+  // Noise blast (band-limited)
+  const len = Math.floor(ctx.sampleRate * 0.4);
+  const buf = ctx.createBuffer(1, len, ctx.sampleRate);
+  const ch = buf.getChannelData(0);
+  for (let i = 0; i < len; i++) ch[i] = (Math.random() * 2 - 1) * (1 - i / len);
+  const noise = ctx.createBufferSource();
+  noise.buffer = buf;
+  const lp = ctx.createBiquadFilter(); lp.type = 'lowpass'; lp.frequency.value = 2600;
+  const hp = ctx.createBiquadFilter(); hp.type = 'highpass'; hp.frequency.value = 80;
+  const nGain = ctx.createGain();
+  nGain.gain.setValueAtTime(0.0001, t0);
+  nGain.gain.linearRampToValueAtTime(base * 0.7, t0 + 0.01);
+  nGain.gain.exponentialRampToValueAtTime(0.0001, t0 + 0.45);
+  noise.connect(hp).connect(lp).connect(nGain).connect(master);
+  noise.start(t0); noise.stop(t0 + 0.5);
+}
+
 // FM metal ping helper
 function fmPing(t, { freq = 650, mod = 1200, index = 1.2, dur = 0.14, gain = 0.28, bpFreq = 1800, q = 8 }) {
   const o = ctx.createOscillator(); o.type = 'sine';

src/config.js

@@ -101,6 +101,19 @@ export const CFG = {
     impactLife: 0.25,
     muzzleLife: 0.05
   },
+  // Player grenades
+  grenade: {
+    speed: 24,        // initial throw speed
+    gravity: 20,      // matches enemy arrow gravity
+    fuse: 3.0,        // seconds after priming
+    radius: 6.5,      // explosion radius
+    maxDamage: 140,   // center damage to enemies
+    selfMaxDamage: 90,// center damage to player
+    previewSteps: 36, // points along arc preview
+    previewDt: 0.06,  // timestep used for preview sim
+    minPitchDeg: 28,  // minimum upward throw angle for a nice arc (not enforced if yBoost used)
+    yBoost: 3.5       // additional upward speed added for nicer arc (scaled by horizontal aim)
+  },
   audio: {
     master: 0.6,
     gunshotVol: 0.9,

src/events.js

@@ -2,6 +2,7 @@ import { G } from './globals.js';
 import { CFG } from './config.js';
 import { showOverlay } from './hud.js';
 import { initAudio, resumeAudio } from './audio.js';
+import { primeGrenade, releaseGrenade } from './grenades.js';
 
 export function setupEvents({ startGame, restartGame, beginReload, updateWeaponAnchor }) {
   const overlay = document.getElementById('overlay');
@@ -40,6 +41,12 @@ export function setupEvents({ startGame, restartGame, beginReload, updateWeaponA
       case 'KeyS': G.input.s = true; break;
       case 'KeyD': G.input.d = true; break;
       case 'ShiftLeft': G.input.sprint = true; break;
+      case 'KeyG':
+        if (G.state === 'playing') {
+          G.input.grenade = true;
+          primeGrenade();
+        }
+        break;
       case 'Space':
         if (G.state === 'playing' && G.player.grounded) {
           // Jump
@@ -75,6 +82,12 @@ export function setupEvents({ startGame, restartGame, beginReload, updateWeaponA
       case 'KeyS': G.input.s = false; break;
       case 'KeyD': G.input.d = false; break;
       case 'ShiftLeft': G.input.sprint = false; break;
+      case 'KeyG':
+        if (G.input.grenade) {
+          G.input.grenade = false;
+          releaseGrenade();
+        }
+        break;
     }
   });
 

src/fx.js

@@ -105,6 +105,27 @@ export function spawnPortalAt(worldPos, color = 0xff5522, size = 1.1, life = 0.3
   G.fx.portals.push({ ring, flare, light, life, maxLife: life, rot: Math.random() * Math.PI * 2 });
 }
 
+// Grenade explosion: additive glow sphere + shock ring + light
+export function spawnExplosionAt(worldPos, radius = 6) {
+  const glow = new THREE.Mesh(
+    new THREE.SphereGeometry(radius * 0.4, 18, 14),
+    new THREE.MeshBasicMaterial({ color: 0xffaa55, transparent: true, opacity: 0.9, blending: THREE.AdditiveBlending, depthWrite: false })
+  );
+  glow.position.copy(worldPos);
+  const ring = new THREE.Mesh(
+    new THREE.TorusGeometry(radius * 0.25, radius * 0.08, 12, 28),
+    new THREE.MeshBasicMaterial({ color: 0xffdd99, transparent: true, opacity: 0.85, blending: THREE.AdditiveBlending, depthWrite: false })
+  );
+  ring.position.copy(worldPos);
+  ring.rotation.x = Math.PI / 2;
+  const light = new THREE.PointLight(0xffa050, 9, radius * 3.5, 2);
+  light.position.copy(worldPos);
+  G.scene.add(glow);
+  G.scene.add(ring);
+  G.scene.add(light);
+  G.explosions.push({ glow, ring, light, life: 0.5, maxLife: 0.5 });
+}
+
 export function updateFX(delta) {
   for (let i = G.fx.tracers.length - 1; i >= 0; i--) {
     const t = G.fx.tracers[i];
@@ -183,4 +204,28 @@ export function updateFX(delta) {
       G.fx.portals.splice(i, 1);
     }
   }
+
+  // Explosions
+  for (let i = G.explosions.length - 1; i >= 0; i--) {
+    const e = G.explosions[i];
+    e.life -= delta;
+    const t = Math.max(0, e.life / e.maxLife);
+    const s = 1 + (1 - t) * 2.2;
+    if (e.glow) {
+      e.glow.material.opacity = 0.3 + 0.7 * t;
+      e.glow.scale.setScalar(s);
+    }
+    if (e.ring) {
+      e.ring.material.opacity = 0.2 + 0.7 * t;
+      e.ring.scale.setScalar(0.9 + (1 - t) * 2.6);
+      e.ring.rotation.z += delta * 2.5;
+    }
+    if (e.light) e.light.intensity = 2 + 10 * t;
+    if (e.life <= 0) {
+      if (e.glow) { G.scene.remove(e.glow); e.glow.geometry.dispose(); if (e.glow.material?.dispose) e.glow.material.dispose(); }
+      if (e.ring) { G.scene.remove(e.ring); e.ring.geometry.dispose(); if (e.ring.material?.dispose) e.ring.material.dispose(); }
+      if (e.light) { G.scene.remove(e.light); }
+      G.explosions.splice(i, 1);
+    }
+  }
 }

src/globals.js

@@ -30,7 +30,8 @@ export const G = {
     d: false,
     shoot: false,
     sprint: false,
-    jump: false
+    jump: false,
+    grenade: false
   },
 
   player: null, // initialized in main
@@ -74,6 +75,13 @@ export const G = {
   },
 
   fx: { tracers: [], impacts: [], flashes: [], dusts: [], portals: [] },
+  // Player grenades and preview helpers
+  grenades: [],
+  heldGrenade: null,
+  grenadeCount: 0,
+  grenadePreview: null,
+  // Explosion VFX
+  explosions: [],
   enemyProjectiles: [],
   // Health orbs and other pickups
   orbs: [],

src/grenades.js

@@ -0,0 +1,261 @@
+import * as THREE from 'three';
+import { CFG } from './config.js';
+import { G } from './globals.js';
+import { getTerrainHeight } from './world.js';
+import { updateHUD } from './hud.js';
+import { spawnExplosionAt } from './fx.js';
+import { playExplosion } from './audio.js';
+import { spawnHealthOrbs } from './pickups.js';
+
+const TMPv = new THREE.Vector3();
+const FORWARD = new THREE.Vector3();
+// Shared grenade mesh resources
+const GRENADE = (() => {
+  // Shared resources for a more realistic grenade
+  const bodyGeo = new THREE.CylinderGeometry(0.12, 0.12, 0.22, 12);
+  const capGeo = new THREE.CylinderGeometry(0.09, 0.09, 0.05, 12);
+  const leverGeo = new THREE.BoxGeometry(0.16, 0.03, 0.04);
+  const ringGeo = new THREE.TorusGeometry(0.06, 0.01, 8, 20);
+  const bodyMat = new THREE.MeshStandardMaterial({ color: 0x2b4c2b, roughness: 0.8, metalness: 0.1 }); // olive green
+  const metalMat = new THREE.MeshStandardMaterial({ color: 0x777777, roughness: 0.5, metalness: 0.6 });
+  const pinMat = new THREE.MeshStandardMaterial({ color: 0xb0b0b0, roughness: 0.4, metalness: 0.9 });
+  return { bodyGeo, capGeo, leverGeo, ringGeo, bodyMat, metalMat, pinMat };
+})();
+
+function createGrenadeMesh() {
+  const g = new THREE.Group();
+  const body = new THREE.Mesh(GRENADE.bodyGeo, GRENADE.bodyMat);
+  body.castShadow = true; body.receiveShadow = false;
+  g.add(body);
+  const cap = new THREE.Mesh(GRENADE.capGeo, GRENADE.metalMat);
+  cap.position.y = 0.14;
+  g.add(cap);
+  // Yellow identification stripe
+  const stripe = new THREE.Mesh(new THREE.CylinderGeometry(0.125, 0.125, 0.015, 16), new THREE.MeshStandardMaterial({ color: 0xffd84d, emissive: 0x7a6400, emissiveIntensity: 0.25, roughness: 0.6 }));
+  stripe.position.y = 0.06;
+  g.add(stripe);
+  const lever = new THREE.Mesh(GRENADE.leverGeo, GRENADE.metalMat);
+  lever.position.set(0.0, 0.18, -0.08);
+  lever.rotation.x = -0.3;
+  g.add(lever);
+  const ring = new THREE.Mesh(GRENADE.ringGeo, GRENADE.pinMat);
+  ring.position.set(-0.06, 0.16, -0.02);
+  ring.rotation.x = Math.PI / 2;
+  g.add(ring);
+  return g;
+}
+
+function throwOrigin(out) {
+  // Start near player's feet for better looking arc
+  const gx = G.player.pos.x;
+  const gz = G.player.pos.z;
+  const gy = getTerrainHeight(gx, gz);
+  out.set(gx, gy + 0.6, gz);
+  FORWARD.set(0, 0, 0);
+  G.camera.getWorldDirection(FORWARD);
+  // Nudge forward so it doesn't intersect player capsule
+  out.addScaledVector(FORWARD, 0.7);
+  return out;
+}
+
+function throwVelocity() {
+  const dir = new THREE.Vector3();
+  G.camera.getWorldDirection(dir);
+  dir.normalize();
+  const v = dir.clone().multiplyScalar(CFG.grenade.speed);
+  // Add a small upward boost to keep a pleasant arc, scaled by horizontal aim amount
+  const horiz = Math.min(1, Math.hypot(dir.x, dir.z));
+  v.y += (CFG.grenade.yBoost || 0) * horiz;
+  // Carry some of the player lateral velocity
+  v.x += G.player.vel.x * 0.25;
+  v.z += G.player.vel.z * 0.25;
+  return v;
+}
+
+function ensurePreview() {
+  if (G.grenadePreview) return;
+  // Line for arc
+  const pts = new Float32Array((CFG.grenade.previewSteps) * 3);
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute('position', new THREE.BufferAttribute(pts, 3));
+  const mat = new THREE.LineBasicMaterial({ color: 0x66ccff, transparent: true, opacity: 0.9, depthTest: true });
+  const line = new THREE.Line(geo, mat);
+  line.renderOrder = 10;
+  // Landing marker
+  const marker = new THREE.Mesh(
+    new THREE.TorusGeometry(0.45, 0.06, 10, 24),
+    new THREE.MeshBasicMaterial({ color: 0x66ccff, transparent: true, opacity: 0.75, depthTest: true })
+  );
+  marker.rotation.x = Math.PI / 2;
+  marker.renderOrder = 10;
+  G.scene.add(line);
+  G.scene.add(marker);
+  G.grenadePreview = { line, marker };
+}
+
+function clearPreview() {
+  if (!G.grenadePreview) return;
+  const { line, marker } = G.grenadePreview;
+  if (line) {
+    G.scene.remove(line);
+    line.geometry.dispose();
+    if (line.material?.dispose) line.material.dispose();
+  }
+  if (marker) {
+    G.scene.remove(marker);
+    marker.geometry.dispose();
+    if (marker.material?.dispose) marker.material.dispose();
+  }
+  G.grenadePreview = null;
+}
+
+export function primeGrenade() {
+  if (G.state !== 'playing' || !G.player.alive) return;
+  if (G.heldGrenade || G.grenadeCount <= 0) return;
+  // Consume a grenade and start fuse
+  G.grenadeCount -= 1;
+  updateHUD();
+  G.heldGrenade = { fuseLeft: CFG.grenade.fuse };
+  ensurePreview();
+}
+
+export function releaseGrenade() {
+  if (!G.heldGrenade) return;
+  // Spawn a thrown grenade with remaining fuse
+  const pos = throwOrigin(new THREE.Vector3());
+  const vel = throwVelocity();
+  const mesh = createGrenadeMesh();
+  mesh.position.copy(pos);
+  G.scene.add(mesh);
+  const g = {
+    pos,
+    vel,
+    fuseLeft: G.heldGrenade.fuseLeft,
+    alive: true,
+    grounded: false,
+    mesh
+  };
+  G.grenades.push(g);
+  G.heldGrenade = null;
+  clearPreview();
+}
+
+function explodeAt(position) {
+  // Visual + sound
+  spawnExplosionAt(position, CFG.grenade.radius);
+  playExplosion();
+
+  // Damage enemies (simple radial falloff)
+  for (let i = 0; i < G.enemies.length; i++) {
+    const e = G.enemies[i];
+    if (!e.alive) continue;
+    const d = position.distanceTo(e.pos);
+    if (d <= CFG.grenade.radius) {
+      const t = Math.max(0, 1 - d / CFG.grenade.radius);
+      const dmg = CFG.grenade.maxDamage * (0.3 + 0.7 * t); // keep some damage at edge
+      e.hp -= dmg;
+      if (e.hp <= 0 && e.alive) {
+        e.alive = false;
+        e.deathTimer = 0;
+        G.waves.aliveCount--;
+        // Award score like a body kill
+        G.player.score += 10;
+        // Modest heals
+        spawnHealthOrbs(e.pos, 1 + Math.floor(G.random() * 3));
+      }
+    }
+  }
+
+  // Damage player
+  const pd = position.distanceTo(G.player.pos);
+  if (pd <= CFG.grenade.radius) {
+    const t = Math.max(0, 1 - pd / CFG.grenade.radius);
+    const dmg = CFG.grenade.selfMaxDamage * (0.3 + 0.7 * t);
+    G.player.health -= dmg;
+    G.damageFlash = Math.min(1, G.damageFlash + dmg * CFG.hud.damagePulsePerHP);
+    if (G.player.health <= 0 && G.player.alive) {
+      G.player.health = 0;
+      G.player.alive = false;
+    }
+  }
+}
+
+export function updateGrenades(delta) {
+  // Update held grenade: fuse + preview
+  if (G.heldGrenade) {
+    G.heldGrenade.fuseLeft -= delta;
+    if (G.heldGrenade.fuseLeft <= 0) {
+      // Explode in hand
+      clearPreview();
+      explodeAt(G.player.pos.clone());
+      G.heldGrenade = null;
+      updateHUD();
+    } else {
+      // Update preview arc
+      ensurePreview();
+      const origin = throwOrigin(new THREE.Vector3());
+      const vel0 = throwVelocity();
+      const dt = CFG.grenade.previewDt;
+      const n = CFG.grenade.previewSteps;
+      const posAttr = G.grenadePreview.line.geometry.getAttribute('position');
+      let p = origin.clone();
+      let v = vel0.clone();
+      let hitPos = null;
+      for (let i = 0; i < n; i++) {
+        const idx = i * 3;
+        posAttr.array[idx] = p.x;
+        posAttr.array[idx + 1] = p.y;
+        posAttr.array[idx + 2] = p.z;
+        // step
+        v.y -= CFG.grenade.gravity * dt;
+        p.addScaledVector(v, dt);
+        const ground = getTerrainHeight(p.x, p.z);
+        if (p.y <= ground) {
+          p.y = ground;
+          hitPos = p.clone();
+          // Fill remaining points at landing
+          for (let k = i + 1; k < n; k++) {
+            const id2 = k * 3;
+            posAttr.array[id2] = p.x;
+            posAttr.array[id2 + 1] = p.y;
+            posAttr.array[id2 + 2] = p.z;
+          }
+          break;
+        }
+      }
+      posAttr.needsUpdate = true;
+      if (G.grenadePreview.marker) {
+        G.grenadePreview.marker.position.copy(hitPos || p);
+      }
+    }
+  }
+
+  // Update thrown grenades
+  for (let i = G.grenades.length - 1; i >= 0; i--) {
+    const g = G.grenades[i];
+    if (!g.alive) { G.grenades.splice(i, 1); continue; }
+    g.fuseLeft -= delta;
+
+    // Physics
+    g.vel.y -= CFG.grenade.gravity * delta;
+    g.pos.addScaledVector(g.vel, delta);
+    const ground = getTerrainHeight(g.pos.x, g.pos.z);
+    if (g.pos.y <= ground) {
+      g.pos.y = ground;
+      // Simple damp when on ground
+      g.vel.set(0, 0, 0);
+      g.grounded = true;
+    }
+
+    // Sync mesh
+    if (g.mesh) { g.mesh.position.copy(g.pos); g.mesh.rotation.y += delta * 2; }
+
+    if (g.fuseLeft <= 0) {
+      explodeAt(g.pos.clone());
+      if (g.mesh) { G.scene.remove(g.mesh); g.mesh = null; }
+      g.alive = false;
+      G.grenades.splice(i, 1);
+      updateHUD();
+    }
+  }
+}

src/hud.js

@@ -7,6 +7,7 @@ const HUD = {
   scoreEl: /** @type {HTMLElement|null} */(document.getElementById('score')),
   enemiesEl: /** @type {HTMLElement|null} */(document.getElementById('enemies')),
   ammoEl: /** @type {HTMLElement|null} */(document.getElementById('ammo')),
+  grenadesEl: /** @type {HTMLElement|null} */(document.getElementById('grenades')),
   healthText: /** @type {HTMLElement|null} */(document.getElementById('health-text')),
   healthFill: /** @type {HTMLElement|null} */(document.getElementById('health-fill')),
   ch: {
@@ -25,6 +26,7 @@ const HUD = {
     score: -1,
     enemies: -1,
     ammo: '',
+    grenades: -1,
   }
 };
 
@@ -59,6 +61,10 @@ export function updateHUD() {
     HUD.last.ammo = ammoText;
     if (HUD.ammoEl) HUD.ammoEl.textContent = ammoText;
   }
+  if (G.grenadeCount !== HUD.last.grenades) {
+    HUD.last.grenades = G.grenadeCount;
+    if (HUD.grenadesEl) HUD.grenadesEl.textContent = String(G.grenadeCount);
+  }
 }
 
 export function showWaveBanner(text) {

src/main.js

@@ -14,6 +14,7 @@ import { updateHUD, showOverlay, updateDamageEffect, updateHealEffect, updateCro
 import { updateFX } from './fx.js';
 import { updateCasings } from './casings.js';
 import { updateEnemyProjectiles } from './projectiles.js';
+import { updateGrenades } from './grenades.js';
 import { updateDayNight } from './daynight.js';
 import { performShooting } from './combat.js';
 import { updatePickups } from './pickups.js';
@@ -67,6 +68,7 @@ function init() {
   };
   G.weapon.ammo = CFG.gun.magSize;
   G.weapon.reserve = Infinity;
+  G.grenadeCount = 0;
 
   // Add camera to scene
   G.camera.position.copy(G.player.pos);
@@ -105,6 +107,10 @@ function startGame() {
   G.camera.position.copy(G.player.pos);
   G.damageFlash = 0;
   G.healFlash = 0;
+  // Grenades reset
+  G.grenades.length = 0;
+  G.heldGrenade = null;
+  G.grenadeCount = 0;
 
   // Clear enemies
   for (const enemy of G.enemies) {
@@ -195,6 +201,13 @@ function animate() {
   updateFX(delta);
   updateHelmets(delta);
   updateCasings(delta);
+  // Update grenades and previews last among gameplay
+  if (G.state === 'playing') {
+    updateGrenades(delta);
+    if (!G.player.alive) {
+      gameOver();
+    }
+  }
   updateClouds(delta);
   updateMountains(delta);
   // Update subtle foliage wind sway using elapsedTime (avoid double-advancing clock)

src/waves.js

@@ -26,6 +26,9 @@ export function startNextWave() {
   G.waves.spawnAnchor = new THREE.Vector3(ax, getTerrainHeight(ax, az), az);
 
   showWaveBanner(`Wave ${G.waves.current}`);
+
+  // Add 2 grenades each wave start (stacking)
+  G.grenadeCount = (G.grenadeCount || 0) + 2;
 }
 
 export function updateWaves(delta) {