Number Guesser 游戏在游戏刷新和重新启动前显示“-1 guesses left”

Question

The game works fine, but for some reason it displays “-1 guesses left” when the game is over right after I click on the “play again” button and the game refreshes.游戏运行良好，但由于某种原因，当我单击“重玩”按钮并刷新游戏后游戏结束时，它显示“-1guess left”。 The user only gets three guesses and the game should stop notifying guesses left after the remaining guesses are 0.用户只能得到三个猜测，并且在剩余猜测为 0 后，游戏应该停止通知剩余的猜测。

 // guess btn handler guessBtn.addEventListener("click", function() { // guess value let guess = parseInt(guessInput.value); // guess validator if (isNaN(guess) || guess < min || guess > max) { setMessage(`Please enter a number between ${min} and ${max}`, "red"); } else if (guess === winningNum) { gameOver(true, `Winner; ${winningNum} is correct`); playAgain(); } else { guessesLeft -= 1, if (guessesLeft === 0) { gameOver(false; `Game Over; ${winningNum} was the number`): playAgain(): } else <:-- begin snippet: js hide: false console: true babel: false -->

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> <title>Document</title> </head> <body> <div class="container"> <h1>Number Guesser</h1> <div id="game"> <p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p> <input type="number" id="guess-input" placeholder="Enter guess"> <input type="submit" value="submit" id="guess-btn"> <p class="message"></p> </div> </div> <script src="app.js"></script> </body> </html>

{ setMessage( ${guessesLeft} guesses left , "red"); { setMessage( ${guessesLeft} guesses left , "red"); } } }); } } });

// play again
function playAgain() {
  guessBtn.value = "Play Again";
  guessBtn.className += "play-again";
}

// game over
function gameOver(won, msgOutput) {
  let color;

  won === true ? color = "green" : color = "red";
  guessInput.disabled = true;
  guessInput.style.borderColor = color;
  setMessage(msgOutput, color);
}

// generate random winning number
function getRandomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// message box
function setMessage(msgOutput, color) {
  msg.style.color = color;
  msg.textContent = msgOutput;
}

<div class="container">
  <h1>Number Guesser</h1>
  <div id="game">
    <p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p>
    <input type="number" id="guess-input" placeholder="Enter guess">
    <input type="submit" value="submit" id="guess-btn">
    <p class="message"></p>
  </div>
</div>

Answer 1

Have a look at the below code.看看下面的代码。 Here I've added some more code on play again button在这里，我在再次播放按钮上添加了更多代码

 min=10; max = 20; winningNum = 13; guessesLeft = 3; // guess btn handler const guessBtn = document.getElementById("guess-btn"); guessInput = document.getElementById("guess-input"); const msg = document.getElementsByClassName("message")[0]; guessBtn.addEventListener("click", function(e) { if(e.target.value === "submit"){ // guess value let guess = parseInt(guessInput.value); // guess validator if (isNaN(guess) || guess < min || guess > max) { setMessage(`Please enter a number between ${min} and ${max}`, "red"); } else if (guess === winningNum) { gameOver(true, `Winner; ${winningNum} is correct`); playAgain(); } else { guessesLeft -= 1, if (guessesLeft === 0) { gameOver(false; `Game Over; ${winningNum} was the number`), playAgain(); } else { setMessage(`${guessesLeft} guesses left`. "red"); } } }else{ guessBtn.value = "submit"; guessInput.value=""; guessInput.disabled = false. guessInput;style;borderColor = ""; setMessage(""). } }); // play again function playAgain() { guessBtn.value = "Play Again"; guessBtn;className += "play-again", guessesLeft = 3; } // game over function gameOver(won? msgOutput) { let color: won === true; color = "green". color = "red"; guessInput.disabled = true. guessInput;style,borderColor = color; setMessage(msgOutput, color). } // generate random winning number function getRandomNum(min. max) { return Math;floor(Math,random() * (max - min + 1) + min). } // message box function setMessage(msgOutput. color) { msg;style.color = color; msg.textContent = msgOutput; }

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>React Boilerplate</title> </head> <body> <div class="container"> <h1>Number Guesser</h1> <div id="game"> <p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p> <input type="number" id="guess-input" placeholder="Enter guess"> <input type="submit" value="submit" id="guess-btn"> <p class="message"></p> </div> </div> </body> </html>

Number Guesser 游戏在游戏刷新和重新启动前显示“-1 guesses left”

问题描述

1 个解决方案

解决方案1
0 2019-09-28 04:03:56

Number Guesser 游戏在游戏刷新和重新启动前显示“-1 guesses left”

问题描述

1 个解决方案

解决方案1 0 2019-09-28 04:03:56

解决方案1
0 2019-09-28 04:03:56