feat(hud): implement hitmarker functionality with visual feedback on enemy hits

index.html

@@ -41,6 +41,15 @@
     }
     .arm-h { height: 2px; }
     .arm-v { width: 2px; }
+    /* Hitmarker (X) */
+    .hit-arm {
+      position: absolute;
+      height: 2px;
+      background: rgba(255,255,255,0.95);
+      box-shadow: 0 0 6px rgba(255,255,255,0.6);
+      opacity: 0; /* driven by JS */
+      transform-origin: 50% 50%;
+    }
     /* HUD Cards */
     .hud-card {
       position: absolute;
@@ -180,6 +189,10 @@
       <div id="ch-right" class="crosshair-arm arm-h"></div>
       <div id="ch-top" class="crosshair-arm arm-v"></div>
       <div id="ch-bottom" class="crosshair-arm arm-v"></div>
+      <div id="ch-hit-a1" class="hit-arm"></div>
+      <div id="ch-hit-a2" class="hit-arm"></div>
+      <div id="ch-hit-b1" class="hit-arm"></div>
+      <div id="ch-hit-b2" class="hit-arm"></div>
     </div>
     <div id="wave-banner"></div>
     <div id="heal-overlay"></div>

src/combat.js

@@ -90,6 +90,8 @@ export function performShooting(delta) {
 
       const { enemy, zone } = findEnemyAndZone(firstHit.object);
       if (enemy && enemy.alive) {
+        // Trigger hitmarker HUD flash
+        G.hitFlash = Math.min(1, (G.hitFlash || 0) + 1);
         const isHead = zone === 'head';
         const dmg = CFG.gun.damage * (isHead ? CFG.gun.headshotMult : 1);
         enemy.hp -= dmg;

src/config.js

@@ -160,7 +160,12 @@ export const CFG = {
     healMaxOpacity: 0.5,
     healFadeSpeed: 2.5, // per second
     healPulsePerPickup: 0.45, // adds to flash per orb pickup
-    healPulsePerHP: 0.01 // adds per HP healed
+    healPulsePerHP: 0.01, // adds per HP healed
+    // Hitmarker (X) flash
+    hitFadeSpeed: 12.0, // higher = faster fade (per second)
+    hitMaxOpacity: 0.3, // cap opacity to 30%
+    hitSize: 12,        // shorter segment length
+    hitGapExtra: 6      // extra center gap vs crosshair
   },
   seed: 1337
 };

src/globals.js

@@ -92,6 +92,7 @@ export const G = {
   helmets: [],
   damageFlash: 0,
   healFlash: 0,
+  hitFlash: 0,
   // Deferred GPU resource disposal queue to avoid frame spikes
   disposeQueue: [],
 

src/hud.js

@@ -16,8 +16,15 @@ const HUD = {
     right: /** @type {HTMLElement|null} */(document.getElementById('ch-right')),
     top: /** @type {HTMLElement|null} */(document.getElementById('ch-top')),
     bottom: /** @type {HTMLElement|null} */(document.getElementById('ch-bottom')),
+    hitA1: /** @type {HTMLElement|null} */(document.getElementById('ch-hit-a1')),
+    hitA2: /** @type {HTMLElement|null} */(document.getElementById('ch-hit-a2')),
+    hitB1: /** @type {HTMLElement|null} */(document.getElementById('ch-hit-b1')),
+    hitB2: /** @type {HTMLElement|null} */(document.getElementById('ch-hit-b2')),
     lastGap: -1,
-    lastLen: -1
+    lastLen: -1,
+    hitLen: -1,
+    lastHitOpacity: -1,
+    hitGap: -1
   },
   last: {
     hp: -1,
@@ -152,3 +159,62 @@ export function updateCrosshair(delta) {
   ch.bottom.style.top = gapPx + 'px';
   ch.bottom.style.left = '-1px';
 }
+
+// Small white X that flashes briefly when hitting an enemy
+export function updateHitMarker(delta) {
+  const { ch } = HUD;
+  if (!ch.root || !ch.hitA1 || !ch.hitA2 || !ch.hitB1 || !ch.hitB2) return;
+
+  // Fade out hit flash
+  G.hitFlash = Math.max(0, G.hitFlash - (CFG.hud.hitFadeSpeed || 12) * delta);
+  const maxOp = (CFG.hud.hitMaxOpacity != null ? CFG.hud.hitMaxOpacity : 0.3);
+  const op = Math.max(0, Math.min(maxOp, G.hitFlash));
+
+  // Only touch DOM when something changed
+  if (Math.abs(op - ch.lastHitOpacity) > 0.01) {
+    ch.lastHitOpacity = op;
+    ch.hitA1.style.opacity = String(op);
+    ch.hitA2.style.opacity = String(op);
+    ch.hitB1.style.opacity = String(op);
+    ch.hitB2.style.opacity = String(op);
+  }
+
+  // Size and placement: four segments with a center gap
+  const L = (CFG.hud.hitSize || 16) | 0; // length of each segment in px
+  const extra = (CFG.hud.hitGapExtra || 6) | 0;
+  const baseGap = ch.lastGap >= 0 ? ch.lastGap : 10; // from crosshair
+  const gap = baseGap + extra; // ensure larger than crosshair gap
+  if (L !== ch.hitLen || Math.abs(gap - ch.hitGap) > 0.5) {
+    ch.hitLen = L;
+    ch.hitGap = gap;
+    // Distance from center to each segment center along the diagonal
+    const d = gap + L * 0.5;
+    const s = Math.SQRT1_2; // 1 / sqrt(2)
+    const dx = d * s;
+    const dy = d * s;
+    const leftBase = (v) => (v - L * 0.5) + 'px';
+    const topBase = (v) => (v - 1) + 'px'; // thickness ~2px
+
+    // A diagonal (+45deg): NE and SW
+    ch.hitA1.style.width = L + 'px';
+    ch.hitA1.style.left = leftBase(dx);
+    ch.hitA1.style.top = topBase(dy);
+    ch.hitA1.style.transform = 'rotate(45deg)';
+
+    ch.hitA2.style.width = L + 'px';
+    ch.hitA2.style.left = leftBase(-dx);
+    ch.hitA2.style.top = topBase(-dy);
+    ch.hitA2.style.transform = 'rotate(45deg)';
+
+    // B diagonal (-45deg): NW and SE
+    ch.hitB1.style.width = L + 'px';
+    ch.hitB1.style.left = leftBase(-dx);
+    ch.hitB1.style.top = topBase(dy);
+    ch.hitB1.style.transform = 'rotate(-45deg)';
+
+    ch.hitB2.style.width = L + 'px';
+    ch.hitB2.style.left = leftBase(dx);
+    ch.hitB2.style.top = topBase(-dy);
+    ch.hitB2.style.transform = 'rotate(-45deg)';
+  }
+}

src/main.js

@@ -10,7 +10,7 @@ import { setupEvents } from './events.js';
 import { updatePlayer } from './player.js';
 import { updateEnemies } from './enemies.js';
 import { startNextWave, updateWaves } from './waves.js';
-import { updateHUD, showOverlay, updateDamageEffect, updateHealEffect, updateCrosshair } from './hud.js';
+import { updateHUD, showOverlay, updateDamageEffect, updateHealEffect, updateCrosshair, updateHitMarker } from './hud.js';
 import { updateFX } from './fx.js';
 import { updateCasings } from './casings.js';
 import { updateEnemyProjectiles } from './projectiles.js';
@@ -122,6 +122,7 @@ function startGame() {
   G.camera.position.copy(G.player.pos);
   G.damageFlash = 0;
   G.healFlash = 0;
+  G.hitFlash = 0;
   // Grenades reset
   G.grenades.length = 0;
   G.heldGrenade = null;
@@ -213,6 +214,7 @@ function animate() {
     updatePickups(delta);
     updateHUD();
     updateCrosshair(delta);
+    updateHitMarker(delta);
     updateDamageEffect(delta);
     updateHealEffect(delta);
   }