在我的 Javascript 猜数字游戏中添加一个猜测循环答案

【问题标题】：Adding a guess loop to my Javascript number guessing game在我的 Javascript 猜数字游戏中添加一个猜测循环
【发布时间】：2014-09-11 04:04:11
【问题描述】：

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

我想通过给玩家 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>

【问题讨论】：

不要使用循环。等待用户执行操作，例如按下按钮或在输入单词后按回车。然后按照逻辑继续：猜对了吗？如果不是，他们是不是猜错了太多次？如果是这样，那么游戏结束。
对于初学者，创建一个您可以调用的初始化函数，这样您就不必重新加载。您不能使用循环，只能使用您设置为 3 的计数器并在它为 0 时调用 init。init 将拥有您的生成器，并重置计数器

标签： javascript numbers

【解决方案1】：

所以这就是我对你的游戏的看法。我会尽力让你理解我的逻辑。

首先，您需要一个输入框，用户将在其中输入他/她的猜测和一个提交该猜测的按钮：

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

然后是按钮点击的事件监听器。在那，我从输入框中获取用户猜测的值并将其发送到另一个函数，该函数将检查猜测是否正确、低或高。我还保留了一个计数器，每次单击按钮时都会增加。并且用户将只能检查直到 maxGuesses，最初为 3。当计数器等于最大猜测数时，即游戏结束并且我禁用按钮以便不再输入。

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

【讨论】：

谢谢你，我不知道计数器，现在我有一些事情要调查。我认为循环是解决我的问题的唯一方法，但我会在以后的项目中记住计数器。

【解决方案2】：

您不需要在这里使用循环。您可以只使用一个变量来跟踪还剩下多少猜测。每次计算答案时，都将变量减一。如果它变为 0，则游戏失败。

我还对您的代码进行了一些其他改进，即：

对代码使用单独的 JS 文件。
将代码包装在立即调用的函数表达式中，以免全局变量泄露。
给变量一些更易读的名称。
仅从 DOM 中获取 DOM 元素一次。
替换了 alert() 以支持将答案直接放在 DIV 中。
删除了页面重新加载 - 这里没有必要，您只需重置游戏状态即可。

文件索引.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();
        }
    }

}());

【讨论】：

这里的一些东西对我来说是新的，比如 addEventListener 函数。但我会自己研究。感谢您对我的编码进行了这些改进，因为在早期掌握良好的编码约定是一种很好的做法。
本例中的 .addEventListener() 函数与 HTML 元素的 onclick= 属性或 JS 中的 DOM 元素的 .onclick 属性几乎相同。最大的区别是您可以使用 .addEventListener() 添加多个侦听器，如果您想在 Web 应用程序中组合脚本，这将更合适，因为它们可能需要侦听相同的事件。它还在回调中为您提供了一个事件对象，您可以使用它来控制事件如何以有限的方式运行。 event.preventDefault() 在这种情况下会阻止提交表单。