Hi All! I am building a JS Hangman Game. I am having trouble with one item:
It doesn’t have a lot of styling right now as I want to get it fully functional first!
I added a comment where the issue is.
Any help is very much appreciated!
Hey @uconnwbball!
Could you see if this helps?
if (word.includes(guessedLetter)) {
console.log("Your letter is in the word!");
// Update myArray with correct letter guess
word.forEach((letter, index) => {
if (letter === guessedLetter) {
myArray[index] = guessedLetter;
}
});
// Re-render the word with correct guessed letter
updateWordDisplay();
// Add win logic here
}
}
Haven’t looked too deeply into it but from a quick assessment, I would cross-check the guessed letter if it’s in the word, if so, find the position of this letter within your myArray, and replace the _ with the letter. You can then re-render the word which will show the guessed letter along with the underscores.
This logic can be optimized but for the sake of understanding I think this may work.
Also note that // Add win logic here is for when all the letters. Something simple like a condition to check if your myArray still has underscores is probably suffice. I’ll let you explore that logic!
Hey Roku! Thanks so much for helping me on this–I updated my code and am now getting the correct letter and its position in the word. However, I cannot figure out how to either 1) display only the correct letters in those positions on the screen or 2) rerender the word with only those letters showing
Sorry for the delay @uconnwbball!
Could you check if these were tackled in your code? i had a look at your scrim lesson but wasn’t sure if you did more edits to it.
Hey Roku! I added the code you suggested, and am now console logging the correct letter and its position, but I can’t figure out how to swap out the underscore for the letter in its correct place!
Sorry for the delay @uconnwbball !
Working off the top of my head here - what about if you split the correct word into seperate letters into an array, and then do a correct letter match to the position of the array. You’ll then render na amount of underscores correlating to the count of letters eg:
DOG -> [D,O,G] then your app shows _ _ _
If D is guess, find the location of D in the array, and then render the letter replacing the third underscore. You can try creating an array for the underscores ['_','_','_'] , use this for the rendering. If D is guessed, find D in the array with the seperate letters, get it’s location, and then put D in the [‘‘,’’,‘_’] array, in which this case is position [0].
Not sure about the performance of this and could be optimised but for the sake the exercise, could you see if it works for you?
Hey Roku! I have made a TON of progress–thank you so much for all your help thus far! There is now just the one feature left to add–replacing all the undefined items in the wordArray with the “-” so the user can see where correct letter guesses are in the word in relation to unguessed letters. I commented where I think this should go in the code. It should be simple enough–replacing every item in the wordArray with a “-”. However, I have tried everything with no luck in making this happen. I tried splice, mapping over the wordArray, and nothing has worked!
