1

frontend/src/ui/hud.js

@@ -1,5 +1,9 @@
 import { WEAPONS, WEAPON_CONFIG } from '../utils/constants.js'
 
+/**
+ * HUD界面类
+ * 显示游戏中的血量、武器、弹药等信息
+ */
 export class HUD {
   constructor(container) {
     this.container = container
@@ -9,15 +13,21 @@ export class HUD {
     this._build()
   }
 
+  /**
+   * 构建HUD界面元素
+   */
   _build() {
+    // 血量条
     this.healthBar = document.createElement('div')
     this.healthBar.className = 'hud-health-bar'
     this.healthBar.innerHTML = '<div class="hud-health-fill"></div><span class="hud-health-text">100</span>'
     this.container.appendChild(this.healthBar)
 
+    // 武器面板
     this.weaponPanel = document.createElement('div')
     this.weaponPanel.className = 'hud-weapon-panel'
 
+    // 武器列表
     const weaponList = [WEAPONS.PISTOL, WEAPONS.MACHINE_GUN, WEAPONS.SHOTGUN, WEAPONS.GRENADE]
     this.weaponSlots = []
     for (let i = 0; i < weaponList.length; i++) {
@@ -25,14 +35,17 @@ export class HUD {
       slot.className = 'hud-weapon-slot'
       slot.dataset.index = i
 
+      // 按键提示（1-4）
       const keyLabel = document.createElement('span')
       keyLabel.className = 'hud-weapon-key'
       keyLabel.textContent = (i + 1).toString()
 
+      // 武器名称
       const weaponName = document.createElement('span')
       weaponName.className = 'hud-weapon-name'
       weaponName.textContent = WEAPON_CONFIG[weaponList[i]].name
 
+      // 弹药数量
       const ammoText = document.createElement('span')
       ammoText.className = 'hud-weapon-ammo'
 
@@ -45,12 +58,14 @@ export class HUD {
 
     this.container.appendChild(this.weaponPanel)
 
+    // 手雷蓄力条（默认隐藏）
     this.grenadeChargeBar = document.createElement('div')
     this.grenadeChargeBar.className = 'hud-grenade-charge'
     this.grenadeChargeBar.innerHTML = '<div class="hud-grenade-charge-fill"></div>'
     this.grenadeChargeBar.style.display = 'none'
     this.container.appendChild(this.grenadeChargeBar)
 
+    // 信息面板（波次、分数、时间）
     this.infoPanel = document.createElement('div')
     this.infoPanel.className = 'hud-info-panel'
 
@@ -71,40 +86,59 @@ export class HUD {
     this.infoPanel.appendChild(this.timeText)
     this.container.appendChild(this.infoPanel)
 
+    // 准星
     this.crosshair = document.createElement('div')
     this.crosshair.className = 'hud-crosshair'
     this.container.appendChild(this.crosshair)
 
+    // 击杀信息（最近5条）
     this.killFeed = document.createElement('div')
     this.killFeed.className = 'hud-kill-feed'
     this.container.appendChild(this.killFeed)
   }
 
+  /**
+   * 显示HUD
+   */
   show() {
     this.visible = true
     this.container.style.display = 'flex'
   }
 
+  /**
+   * 隐藏HUD
+   */
   hide() {
     this.visible = false
     this.container.style.display = 'none'
   }
 
+  /**
+   * 更新血量显示
+   * @param {number} health 血量值 0-100
+   */
   updateHealth(health) {
     const fill = this.healthBar.querySelector('.hud-health-fill')
     const text = this.healthBar.querySelector('.hud-health-text')
     const pct = Math.max(0, Math.min(100, health))
     fill.style.width = pct + '%'
+    // 颜色根据血量变化：绿色>60，橙色>30，红色<=30
     if (pct > 60) fill.style.backgroundColor = '#44ff44'
     else if (pct > 30) fill.style.backgroundColor = '#ffaa00'
     else fill.style.backgroundColor = '#ff4444'
     text.textContent = Math.ceil(pct)
   }
 
+  /**
+   * 更新武器显示
+   * @param {number} currentIndex 当前武器索引
+   * @param {Object} ammo 各武器弹药数
+   */
   updateWeapons(currentIndex, ammo) {
     const weaponList = [WEAPONS.PISTOL, WEAPONS.MACHINE_GUN, WEAPONS.SHOTGUN, WEAPONS.GRENADE]
     for (let i = 0; i < this.weaponSlots.length; i++) {
       const slot = this.weaponSlots[i]
+      // 高亮当前武器
       slot.slot.classList.toggle('hud-weapon-active', i === currentIndex)
       const weaponKey = weaponList[i]
       const currentAmmo = ammo[weaponKey]
@@ -116,6 +150,10 @@ export class HUD {
     }
   }
 
+  /**
+   * 更新手雷蓄力显示
+   * @param {number} percent 蓄力百分比 0-1
+   */
   updateGrenadeCharge(percent) {
     if (percent > 0) {
       this.grenadeChargeBar.style.display = 'block'
@@ -126,6 +164,12 @@ export class HUD {
     }
   }
 
+  /**
+   * 更新游戏信息
+   * @param {number} wave 当前波次
+   * @param {number} score 分数
+   * @param {number} time 游戏时间（秒）
+   */
   updateInfo(wave, score, time) {
     this.waveText.textContent = 'Wave: ' + wave
     this.scoreText.textContent = 'Score: ' + score
@@ -134,16 +178,22 @@ export class HUD {
     this.timeText.textContent = `Time: ${mins}:${secs.toString().padStart(2, '0')}`
   }
 
+  /**
+   * 添加击杀信息条目
+   * @param {string} message 击杀信息文本
+   */
   addKillFeed(message) {
     const entry = document.createElement('div')
     entry.className = 'hud-kill-entry'
     entry.textContent = message
     this.killFeed.appendChild(entry)
+    // 4秒后自动移除
     setTimeout(() => {
       if (entry.parentNode) entry.parentNode.removeChild(entry)
     }, 4000)
+    // 最多保留5条
     while (this.killFeed.children.length > 5) {
       this.killFeed.removeChild(this.killFeed.firstChild)
     }
   }
-}
+}