根据数组检查用户输入，充当猜测Javascript

Question

I am a new aspiring dev and I am trying to figure out how to build a game of hangman using vanilla js only. I have put together a key event listner, and have got it to console log the inputs. I have also got it to print the letters pushed into a "letters guessed" array.

document.addEventListener("keypress", letterPressed);

function letterPressed(event) {
    var letter = String.fromCharCode(event.keyCode);
    guessedLetters.push(letter);
    document.getElementById("lettersGuessed").innerHTML = guessedLetters;
    console.log(guessedLetters)
}

I also have an array of choices of words

var wordList = ["Ravens", "Cardinals", "Falcons", "Bills",
"Panthers", "Bears", "Bengals", "Browns", "Cowboys",
"Broncos", "Lions", "Packers", "Texans", "Colts",
"Jaguars", "Cheifs", "Chargers", "Rams",
"Dolphins", "Vikings", "Patriots", "Saints",
"Giants", "Jets", "Raiders", "Eagles", "Steelers",
"Forty Niners", "Seahawks", "Buccaneers", "Titans",
"Redskins"];

and a for loop picking the random word from this array, converting it to "_" strings in the length of the word, and printing it to the html document in a div id of "spaces".

   var wordBlanks = [];
var guessedLetters = [];
var randomWord = wordList[Math.floor(Math.random() * wordList.length)];

for (var i = 0; i < randomWord.length; i++) {
    wordBlanks[i] = "_";
    console.log(wordBlanks,randomWord);
    document.getElementById("spaces").innerHTML = wordBlanks.join(" ");
};

Where would I even want to go from here? I want to check input from the keystrokes (or the letters guessed array, im not sure which would be best) against the word thats chosen and have the "_" strings reveal the correct guesses when guessed correctly.

My question is more regarding pointing me in the right direction. So, I can properly teach myself. Any words of advice?

Thank you!

Answer 1

You'll have to come to terms with the upper/lowercase issue first, but after that, something like this will work:

 const randomWord = "BEARS"; const guessedLetters = ["S", "O", "E"]; const wordBlanks = randomWord.split('') .map(letter => guessedLetters.indexOf(letter) >= 0 ? letter : "_") .join(' '); console.log(wordBlanks); 

Answer 2

Instead of putting into the guessedLetters array, try to see if the presses letter can be found in the randomWord .

If so, find the position of the letter and let it replace the appropriate _ space in the wordBlank array.

Something like:

function letterPressed(event) {
    var letter = String.fromCharCode(event.keyCode);

    if (randomWord.indexOf(letter) >= 0)
       wordBlank[(randomWord.indexOf(letter)] = letter;

    console.log(wordBlank);
}

Note that a letter may have multiple occurences in a word.