Hangman游戏开发问题：正确输入显示消失及错误猜测过滤异常

我正在开发一款Hangman游戏的变体，流程是通过随机单词生成器获取单词存入phrase变量，再将其拆分为数组存入passPhrase变量。希望通过keydown事件监听按键，对比按下的按键与数组内容：

• 若正确，将对应字符显示在secretWord对应的HTML <p>标签中
• 若错误，将按键记录到pastGuess对应的HTML <p>标签中

现在遇到两个问题：

1. 正确输入的字符会显示，但下一次触发keydown事件时就会消失
2. pastGuess标签会显示所有按键事件，包括正确的输入

当前代码：

let phrase = generate(1);
let passPhrase = phrase[0].split('');

window.addEventListener('keydown', function(event){
  for (let i=0; i < passPhrase.length; i++){
      if (event.key === passPhrase[i]) {
          secretWord.textContent = passPhrase[i];
      } else if (event.key != passPhrase[i]) {
          pastGuess.textContent = event.key;
      }
  }
});

问题1：正确字符无法保持显示 #

原因：每次触发keydown事件时，你直接把secretWord.textContent赋值为单个匹配的字符，完全覆盖了之前的内容。而且循环遍历数组时，只要遇到不匹配的元素，不会保留之前已经显示的正确字符。

解决方法：

• 先初始化一个和单词长度一致的数组，用下划线作为占位符，用来跟踪当前应该显示的内容
• 每次匹配到正确按键时，更新这个数组中对应位置的字符，再把整个数组转为字符串赋值给secretWord.textContent，这样就能保留之前的正确字符

问题2：正确按键也被记录为错误猜测 #

原因：循环遍历数组时，只要当前元素和按键不匹配，就会执行else if分支，把按键赋值给pastGuess.textContent。哪怕有一个位置匹配，其他位置不匹配的循环迭代还是会触发错误记录的逻辑，而且每次都会覆盖之前的错误记录。

解决方法：

• 先直接判断按键是否存在于passPhrase数组中，不用逐个元素循环对比
• 错误按键要做去重处理，并且是追加到pastGuess的内容后面，而不是直接覆盖原有内容

let phrase = generate(1);
let passPhrase = phrase[0].split('');
// 初始化显示数组，用下划线作为每个字符的占位符
let displayArray = passPhrase.map(() => '_');
// 用Set存储错误猜测，自动去重
let wrongGuesses = new Set();

// 初始化页面显示内容
secretWord.textContent = displayArray.join(' ');

window.addEventListener('keydown', function(event){
  const pressedKey = event.key.toLowerCase();
  // 只处理字母按键，过滤掉数字、符号等无效输入
  if (!/^[a-z]$/.test(pressedKey)) return;

  // 判断按键是否是单词中的字符
  if (passPhrase.some(char => char.toLowerCase() === pressedKey)) {
      // 更新所有匹配位置的显示内容
      passPhrase.forEach((char, index) => {
          if (char.toLowerCase() === pressedKey) {
              displayArray[index] = char;
          }
      });
      // 更新页面上的显示
      secretWord.textContent = displayArray.join(' ');
  } else {
      // 错误猜测，去重后追加显示
      if (!wrongGuesses.has(pressedKey)) {
          wrongGuesses.add(pressedKey);
          pastGuess.textContent = wrongGuesses.join(', ');
      }
  }
});

内容的提问来源于stack exchange，提问作者Tory S.