I am working on developing a hangman game using vanilla javascript and I need some assistance with resetting the game after a player loses. Specifically, I would like to: 1. Reset the "guessRemain" variable. 2. Clear out the "guess" id so that none of the guessed letters are displayed. 3. Choose another random word from the array.
Your help is greatly appreciated!
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Hangman Game</title>
<link rel="stylesheet" type="text/css" href="assets\css\reset.css"/>
<link rel="stylesheet" type="text/css" href="assets\css\style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="https://use.fontawesome.com/ca6de464ee.js"></script>
</head>
<body>
<div id="white">
<img src="assets\images\turkey.png" alt="turkey" class="turkeyImage">
</div>
<div id="orangebox">
<h4>thanksgiving</h4>
<h4 class="hangman">hangman</h4>
</div>
<div class="instructions">
<h1>Instructions:</h1>
<br/>
<h2>1. Guess a Thanksgiving dish!</h2>
<br/>
<h3>2. Press any key to begin.</h3>
</div>
<div class="display">
<p class="greywords">Current Word:</p>
<br/>
<p id="current"></p>
<br/>
<br/>
<p class ="greywords">Number of Guesses Remaining:</p>
<br/>
<p id="remain"></p>
<br>
<br/>
<p class="greywords">Letters Already Guessed:</p>
<p id="guess"></p>
<br>
<br/>
<p class="greywords">Wins:</p>
<p id="win"></p>
<br>
<br/>
<p class="greywords">Losses:</p>
<p id="loss"></p>
</div>
<!-- End of HTML -->
<script type="text/javascript">
// Step 2: create variable of the food words
var wins = 1;
var losses = 1;
var guessRemain = 10;
var foodWords = [
"pie",
"turkey",
"bacon",
"bread"
];
// Step 1: display remaining gueses
document.getElementById("remain").innerHTML = guessRemain;
// Step 3: create a variable to pick a random word from that array
var randomWord = foodWords[Math.floor(Math.random() * foodWords.length)];
console.log(randomWord);
//Step 4: make it count the number of letters in that word that you just picked
var count = [];
for (var i = 0; i < randomWord.length; i++) {
count[i] = "_ ";
}
//Step 5: write the var on the screen
document.getElementById("current").innerHTML = count;
//Step 6: have it recognize that there are remaining letters
var remainingLetters = randomWord.length;
console.log("I HAVE " + remainingLetters + " left");
//Step 7: function for when they click a key
document.onkeyup=function(event) {
var userGuess = event.key;
document.getElementById("guess").innerHTML += userGuess + " ";
// console.log(randomWord.length);
if (randomWord.includes(userGuess)) {
// console.log("test");
// Step 7: if this statment is true, then modify the count variable, replace the dash in count with letter, and it has the correct position, and display the letter
var guessIndex = randomWord.indexOf(userGuess);
//console.log(randomWord.indexOf(userGuess));
count[guessIndex] = userGuess
//console.log(count);
document.getElementById("current").innerHTML = count;
remainingLetters--;
console.log("I HAVE " + remainingLetters + " left");
if (remainingLetters === 0) {
document.getElementById("win").innerHTML = wins++;
console.log("I have won");}
}
// Step 8: if not true, then subtract a guess
else {
document.getElementById("remain").innerHTML = guessRemain--;
document.getElementById("remain").innerHTML = guessRemain;
if (guessRemain === 0) {
document.getElementById("loss").innerHTML = losses++;
console.log("I have lost");
}
}
}
// Step 10: if there are no letters remaining in count, then add "1" to the win id and reset the page
// if (remainingLetters === 0) {
// document.getElementById("#win").innerHTML = winSs++;
// console.log("I have won");
//console.log("i win");
// function reset() {
// document.getElementById("display").reset();
// }
// }
// Step 11: if there are no guesses remaining, add a "1" to the loss id and reset the page
// if (remainingGuess < 0) {
// document.getElementById("#loss").innerHTML = ++1;
// function reset() {
// document.getElementById("display").reset();
// }
// }
</script>
</body>
<div class="footer">
</div>
</html>