添加一个猜测循环到我的Javascript猜数字游戏

我很新的Javascript和我已经构建了一个简单的猜数字游戏。该程序会在1-10之间生成一个随机数，并在您的猜测过高或过低时提示您。如果你猜对了，你就赢了。添加一个猜测循环到我的Javascript猜数字游戏

我想通过给玩家3次猜测来改进当前版本，在此之后玩家赢得或失败。我知道这是用循环完成的，但我不能为我的生活弄清楚如何。我试过使用while循环，但它不起作用。这里是我的代码，并感谢大家的帮助：

<script> 
    var rannum = Math.floor((Math.random() * 10) + 1); //generates a random number and stores it in the rannum variable 

     function submitanswer(){ //This function analyzes player response and is called by the submit button 
      var playerguess = document.getElementById("guess"); //grabs whatever the player types in and stores it in the playerguess variable 
      if (playerguess.value == rannum){ //if the value of playerguess is the same as rannum then the player wins 
       alert("You win!"); 
       location.reload(); 
      } 
      if (playerguess.value > rannum){ //if the player's guess is higher than the random number alert too high 
       alert("Too high!"); 
       document.getElementById("guess").value=''; 
      } 

      else if (playerguess.value < rannum){ //if the player's guess is lower than the random number alert too low 
       alert("Too low!"); 
       document.getElementById("guess").value=''; 
      } 


     } 
     function reloaD(){ //start over by generating a new number 
      document.getElementById("guess").value=''; 
      location.reload(); 
     }       

    </script> 
    </body> 
</html>

来源

2014-09-11 M B

不要使用循环。等待用户执行一个操作，例如*按下按钮*或*键入一个单词*后回车。然后*继续*与逻辑：猜测是否正确？如果不是，他们是否错误地猜错了太多次？如果是这样，那么GAME OVER。 – user2864740 2014-09-11 04:09:09

对于初学者来说，创建一个可以调用的初始化函数，以便不必重新加载。你不能使用一个循环，只是一个你设置为3的计数器，当它为0时调用init。init将使用你的生成器，并重置计数器 – mplungjan 2014-09-11 04:10:21

因此，这里是我如何去约上你的游戏..我会尽我所能，让你了解我的逻辑。

首先，你需要一个输入框，用户输入他/她的猜测和一个按钮提交猜测：

Your Guess: <input type='text' id='guess'> 
<button id="checkBtn">Check</button>

然后在点击按钮的事件侦听器。在这里，我从输入框中获得用户猜测的值，并将其发送到另一个函数，以检查猜测是正确的，低的还是高的。此外，我保持一个计数器，每增加一个按钮点击。用户将只能检查，直到maxGuesses，最初3.当计数器等于最大猜测，那就是当游戏结束时，im禁用按钮，所以没有更多的输入。

document.getElementById('checkBtn').onclick = function(){ 
    var guess = document.getElementById('guess').value; 
    checkGuess(guess); 
    counter++; 

    if(counter == maxGuesses) { 
     alert("Game Over"); 
     document.getElementById("checkBtn").disabled = true; 
    } 
}

检查猜测是否过高，过低或正确的猜测是简单的逻辑，就像你使用的三种情况一样。在正确的猜测中，用户将显示“你赢了！”并且该按钮将再次被禁用，因为游戏现在结束。

function checkGuess(guess){ 
    if (guess == rannum){ //if the value of playerguess is the same as rannum then the player wins 
     alert("You win!"); 
     document.getElementById("checkBtn").disabled = true; 
    } 
    if (guess > rannum){ //if the player's guess is higher than the random number alert too high 
     alert("Too high!"); 
     document.getElementById("guess").value=''; 
    } 

    else if (guess < rannum){ //if the player's guess is lower than the random number alert too low 
    alert("Too low!"); 
     document.getElementById("guess").value=''; 
    } 
}

See the DEMO here

编辑：我加入了重启功能，以及。通过增加一个重启按钮，它最初是隐藏display: none

<button id="restart" style="display:none">Restart</button>

时，无论是用户还是赢游戏获得超过（最大猜测到达）它会得到显示。

document.getElementById("restart").style.display='block'; //making it visible

然后，当用户点击重新启动，所有值重置，重新启动按钮消失，游戏再次开始。

document.getElementById('restart').onclick = function(){ 
    rannum = Math.floor((Math.random() * 10) + 1); 
    counter = 0; 
    guess = 0; 
    document.getElementById("checkBtn").disabled = false; 
    document.getElementById("guess").value=''; 
    document.getElementById("restart").style.display='none'; 
}

See the new DEMO with restart option here

来源

2014-09-11 04:39:45

谢谢你，我不知道计数器，现在我有东西要看。我认为循环是解决我的问题的唯一方法，但我会为未来的项目记住柜台。 – 2014-09-11 06:28:22

欢迎..你可以标记正确的答案，如果它帮助你.. – 2014-09-11 06:29:38

你并不需要在这里使用循环。你可以使用一个跟踪还有多少猜测的变量。每次计算答案时减少一个变量。如果它变为0，则游戏丢失。

我也做了一些其他改进你的代码，即：

使用的代码单独的JS文件。
将代码包装在立即调用的函数表达式中，以便不泄漏全局变量。
给变量一些更具可读性的名字。
仅从DOM获取DOM元素一次。
取代警报（）有利于将答案直接放在DIV中。
删除了页面重新加载 - 在这里没有必要，你可以重置游戏的状态。

index.html文件：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Guess the number</title> 
    </head> 
    <body> 
     <form> 
      <input type="text" id="guess" /> 
      <input type="submit" id="submitAnswer" value="Check answer" /> 
     </form> 
     <div id="answer"></div> 
     <script src="game.js"></script> 
    </body> 
</html>

文件game.js：

(function() { 

    var guessesLeft, randomNumber, guessInput, submitButton, answerDisplay, maxGuesses; 

    maxGuesses = 3; 

    // Load all the element references from the DOM 
    // so that we don't need to do that every time we chek the answer 
    guessInput = document.getElementById("guess"); 
    submitButton = document.getElementById("submitAnswer"); 

    // Let's use a DIV element to display the answer. 
    // It's nicer than using alert(). 
    answerDisplay = document.getElementById("answer"); 

    answerDisplay.innerHTML = "Please make a guess!"; 

    submitButton.addEventListener("click", function (event) { 
     event.stopPropagation(); 
     event.preventDefault(); 
     checkAnswer(); 
    }); 

    initGame(); 

    function initGame() { 
     guessesLeft = maxGuesses; 
     randomNumber = Math.floor(Math.random() * 10 + 1); 
     guessInput.value = ""; 
    } 

    function checkAnswer() { 

     if (guessInput.value == randomNumber) { 
      answerDisplay.innerHTML = "You win! " + randomNumber + " is correct. " + 
       "Please input your next guess to start again."; 
      initGame(); 
      return; 
     } 
     else if (guessInput.value > randomNumber) { 
      answerDisplay.innerHTML = "Too high!"; 
     } 
     else { 
      answerDisplay.innerHTML = "Too low!"; 
     } 

     guessesLeft -= 1; 

     if (guessesLeft === 0) { 
      answerDisplay.innerHTML += " No guesses left - you lost!"; 
      initGame(); 
     } 
    } 

}());

来源

2014-09-11 06:16:11

这里的一些东西对我来说是新的像addEventListener函数。但我会自己研究。感谢您对我的编码进行了这些改进，因为先前掌握好编码惯例是一种很好的做法。 – 2014-09-11 06:35:24

在这种情况下，.addEventListener（）函数与HTML元素上的onclick =属性或JS中DOM元素的.onclick属性几乎相同。最大的区别是你可以使用.addEventListener（）添加多个监听器，如果你想在你的web应用中合并脚本，它可能会更好，因为它们可能需要监听同一个事件。它还为您提供了回调中的事件对象，您可以使用它来控制事件以有限的方式运行。 event.preventDefault（）在这种情况下阻止提交表单。 – 2014-09-11 07:18:34

添加一个猜测循环到我的Javascript猜数字游戏

回答

相关问题