求助：JavaScript实现Hangman游戏字母匹配功能的代码编写

你需要实现的字母点击匹配逻辑可以通过以下步骤完成，同时优化现有代码的可维护性：

关键优化与实现步骤 #

• 统一大小写处理：目标单词包含大写字母，按钮是小写，统一转成小写或大写避免匹配失败。
• 用数组存储当前显示状态：原来的下划线字符串无法单独修改某个位置，改用数组存储每个字符的显示状态（下划线或已猜中的字母），便于更新。
• 整合点击事件逻辑：将按钮变暗、禁用、字母检查、生命值扣除逻辑合并到同一个事件监听器中，避免重复绑定。
• 添加游戏胜负判断：每次操作后检查是否猜完所有字母（胜利）或生命值耗尽（失败）。

修改后的完整JavaScript代码 #

let category = document.querySelector('.category')
let word = document.querySelector('.word')
let lives = document.querySelector('.lives')
let clue = document.querySelector('.clue')
const hintbutton = document.querySelector('.hint')
const playAgainButton = document.querySelector('.play-again')
let userLives = 10
let guessed = []

// 生成随机单词
const gameWords = ['Doctor', 'MichaelJackson', 'Prince', 'Giraffe', 'LionKing']
let result = gameWords[Math.floor(Math.random() * gameWords.length)]
// 转存小写版本用于匹配
let resultLower = result.toLowerCase()

console.log(result)

// 创建存储显示状态的数组，每个元素初始为下划线
function initWordDisplay() {
  return Array(result.length).fill('_')
}
let displayArray = initWordDisplay()
// 初始渲染下划线
word.innerHTML = displayArray.join(' ')

// 提示功能
function hint() {
  hintbutton.addEventListener('click', function() {
    if (result === 'MichaelJackson' || result === 'Prince') {
      clue.innerHTML = 'Clue - Music Artist'
    } else if (result === 'Giraffe') {
      clue.innerHTML = 'Clue - Animal'
    } else if (result === 'Doctor') {
      clue.innerHTML = 'Clue - Occupation'
    } else {
      clue.innerHTML = 'Clue - Movie'
    }
    // 点击后禁用提示按钮防止重复点击
    this.disabled = true
  })
}

hint()

// 初始化字母按钮事件
function setupLetterButtons() {
  const letters = document.querySelectorAll('.letter')
  letters.forEach(letterBtn => {
    letterBtn.addEventListener('click', function() {
      // 按钮变暗并禁用
      this.style.opacity = '0.4'
      this.disabled = true
      
      const clickedLetter = this.textContent.toLowerCase()
      
      // 检查字母是否在单词中
      if (resultLower.includes(clickedLetter)) {
        // 遍历单词，替换对应位置的下划线
        for (let i = 0; i < result.length; i++) {
          if (resultLower[i] === clickedLetter) {
            displayArray[i] = result[i] // 保留原单词的大小写
          }
        }
        // 更新页面显示
        word.innerHTML = displayArray.join(' ')
        // 检查是否获胜
        checkWin()
      } else {
        // 扣除生命值
        userLives--
        lives.innerHTML = `you have ${userLives} lives!`
        // 检查是否失败
        if (userLives === 0) {
          alert(`Game Over! The word was ${result}`)
          // 禁用所有字母按钮
          letters.forEach(btn => btn.disabled = true)
        }
      }
    })
  })
}

// 检查是否获胜
function checkWin() {
  if (!displayArray.includes('_')) {
    alert(`Congratulations! You guessed the word: ${result}`)
    // 禁用所有字母按钮
    const letters = document.querySelectorAll('.letter')
    letters.forEach(btn => btn.disabled = true)
  }
}

// 初始化字母按钮事件
setupLetterButtons()

// 重新开始按钮功能（可选补充）
playAgainButton.addEventListener('click', function() {
  window.location.reload()
})

代码说明 #

1. 重构下划线生成：initWordDisplay返回一个和目标单词长度一致的数组，每个元素初始为_，后续直接修改数组对应位置的值即可更新显示。
2. 字母点击逻辑：
   • 获取点击的字母并转小写，和目标单词的小写版本对比，避免大小写导致的匹配失败
   • 如果字母存在，遍历目标单词的每个字符，匹配到的位置替换数组中的下划线，保留原单词的大小写
   • 如果字母不存在，扣除生命值并更新页面显示，生命值为0时提示游戏结束
   • 点击后禁用按钮，防止重复点击
3. 胜负判断：
   • checkWin函数检查数组中是否还有下划线，没有则提示胜利
   • 生命值耗尽时提示失败，并禁用所有字母按钮
4. 提示按钮优化：点击后禁用提示按钮，防止重复触发

内容的提问来源于stack exchange，提问作者Quavie