Menu
I am new to javascript and I created a very basic hangman like game, but there are some things I'm having trouble with. One thing I'm having trouble with is my lettersGuessed array. Right now the array will display every time I press a key, and it will repeat the same character (which I don't want). I want the array to only display the pressed key once, no matter how many times you press that key. I also can't figure out how to make the guesses counter stay the same if the same key is pressed.
I'm also not sure why the game ends before you can see when the condition gets met. For instance, when you run out of guesses the alert will pop and you will still see that you have 1 guess remaining.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="placeholders"> </div>
<div id="guessesRemaining"></div>
<div id="wins"></div>
<div id="losses"></div>
<div id="pressedLetters"></div>
<script type="text/javascript">
var arrayOfWords = ["alpha", "bravo", "charlie", "delta", "echo"];
var pickedWord;
var pickedWordArray = [];
var pickedWordPlaceholders = [];
var wins = 0;
var losses = 0;
var lettersGuessed;
var guessesLeft;
function newGame() {
guessesLeft = 10;
lettersGuessed = [];
pickedWord = arrayOfWords[Math.floor(Math.random() * arrayOfWords.length)];
pickedWordArray = pickedWord.split("");
pickedWordPlaceholders = [];
for (var i = 0; i < pickedWordArray.length; i++) {
pickedWordPlaceholders.push("_");
var placeHolderString = pickedWordPlaceholders.join(' ');
document.querySelector("#guessesRemaining").innerHTML ="Lives: " + guessesLeft;
document.querySelector("#placeholders").innerHTML = placeHolderString;
document.querySelector("#wins").innerHTML = "Wins: " + wins;
document.querySelector("#losses").innerHTML = "Losses: " + losses;
}
}
document.onkeyup = function(event) {
var userGuess = event.key;
lettersGuessed.push(userGuess);
for (var i = 0; i < pickedWordArray.length; i++) {
if (userGuess === pickedWordArray[i]) {
pickedWordPlaceholders[i] = userGuess;
}
}
document.querySelector("#placeholders").innerHTML = pickedWordPlaceholders.join(" ");
document.querySelector("#pressedLetters").innerHTML = lettersGuessed;
if (pickedWordPlaceholders.indexOf(userGuess) === -1) {
guessesLeft--;
}
document.querySelector("#guessesRemaining").innerHTML ="Lives: " + guessesLeft;
if (guessesLeft === 0){
losses++;
alert("You lose!");
newGame();
}
document.querySelector("#losses").innerHTML = "Losses: " + losses;
if (pickedWordPlaceholders.join("") === pickedWord){
wins++;
alert("You win!");
newGame();
}
document.querySelector("#wins").innerHTML = "Wins: " + wins;
}
newGame();
</script>
</body>
</html>Feel free to call me out on any redundant code, or anything that I can do better.
You need to check if user already guessed that letter , if yes, just return false.
change your document.keyup method and add this right after var userGuess = event.key;
for(var i = 0; i <= lettersGuessed.length-1; i++)
{
if(lettersGuessed[i].indexOf(userGuess) != -1)
{
return false;
}
}
you can check it here :
https://jsfiddle.net/7e61yz2r/
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
