JavaScript猜词游戏问题: the same letter won't populate multiple times once the letter key is pressed

Question

我有我的猜词游戏设置，这样当用户按下正确的字母时，相应的下划线就会被该字母替换。但是，我似乎无法多次填充同一个字母。示例:单词“Pennywise”有两个字母“n”，但是当按下该字母时，无论我按该字母多少次，都只会填充一个“n”。

// Global Variables
// ================================================================================================================================================
// Create an array of words
var word = [
"michael myers", 
"freddy krueger", 
"jason voorhees", 
"xenomorph", 
"pinhead", 
"ghostface", 
"hannibal lector", 
"pennywise", 
"leatherface", 
"chucky", 
"jack torrance"
]

var rightLetter = [];
var wrongLetter = [];
var underScore = [];

// Choose word randomly
    var randNum = Math.floor(Math.random() * word.length);
    var randWord = word[randNum];
    console.log(randWord);

// DOM manipulation
var docUnderScore = document.getElementsByClassName("underscore");
var docRightGuess = document.getElementsByClassName("rightGuess");
var docWrongGuess = document.getElementsByClassName("wrongGuess");


// ================================================================================================================================================
// Main
// ================================================================================================================================================
// Create underscore based on length of word
    var generateUnderscore = () => {
        for ( var i = 0; i < randWord.length; i++) {
            underScore.push("_");
        }
        return underScore;
    }

// Get user guess
    document.addEventListener("keypress", (event) => {
        var keyWord = String.fromCharCode(event.keyCode);
        // if user's guess is correct    
        if (randWord.indexOf(keyWord) === -1) {
        // replace underscore with correct letter
            underScore[randWord.indexOf(keyWord)] = keyWord;
            docUnderScore[0].innerHTML = underScore.join(" ");

        // check to see if user word matches guess
            if (underScore.join("") === randWord) {
                alert("You Survived!");
            }
        }
        // if user's guess is incorrect     
        else {
            wrongLetter.push(keyWord);
            docWrongGuess[0].innerHTML = wrongLetter;
        }

    });

    docUnderScore[0].innerHTML = generateUnderscore().join(" ");

Answer 1

问题是您不会继续使用 randWord.indexOf(keyWord) 因为每次它都会获取您想要查找的字母的第一次出现，相反您可以维护一个计数器并每次触发 keydown 事件时匹配字母，如果匹配则递增它以继续:

// Create an array of words
var word = [
  "michael myers",
  "freddy krueger",
  "jason voorhees",
  "xenomorph",
  "pinhead",
  "ghostface",
  "hannibal lector",
  "pennywise",
  "leatherface",
  "chucky",
  "jack torrance"
];

var rightLetter = [];
var wrongLetter = [];
var underScore = [];
var counter = 0;

// Choose word randomly
var randNum = Math.floor(Math.random() * word.length);
var randWord = word[7];
console.log(randWord);

// DOM manipulation
var docUnderScore = document.getElementsByClassName("underscore");
var docRightGuess = document.getElementsByClassName("rightGuess");
var docWrongGuess = document.getElementsByClassName("wrongGuess");

// Create underscore based on length of word
var generateUnderscore = () => {
  for (var i = 0; i < randWord.length; i++) {
    underScore.push("_");
  }
  return underScore;
}

// Get user guess
document.addEventListener("keypress", (event) => {
  var keyWord = String.fromCharCode(event.keyCode);
  // if user's guess is correct    
  if (randWord[counter] == keyWord) {
    // replace underscore with correct letter
    underScore[counter] = keyWord;
    docUnderScore[0].innerHTML = underScore.join(" ");

    // check to see if user word matches guess
    if (underScore.join("") === randWord) {
      console.log("You Survived!");
    }
    counter++;
  }
  // if user's guess is incorrect     
  else {
    wrongLetter.push(keyWord);
    docWrongGuess[0].innerHTML = wrongLetter;
  }
});

docUnderScore[0].innerHTML = generateUnderscore().join(" ");

<div class="underscore"></div>
<div class="rightGuess"></div>
<div class="wrongGuess"></div>