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

Question

我是 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>

Answer 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='';
     }
}

在此处查看演示

编辑：我也添加了重启功能。 通过添加最初隐藏的重新启动按钮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';
}

在此处查看带有重启选项的新 DEMO

Answer 2

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

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

为代码使用单独的 JS 文件。
将代码包装在立即调用的函数表达式中，以免泄漏全局变量。
给变量一些更易读的名字。
仅从 DOM 中获取 DOM 元素一次。
替换了 alert() 以将答案直接放在 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>

文件游戏.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();
        }
    }

}());

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

问题描述

2 个解决方案

解决方案1
0 2014-09-11 04:39:45

解决方案2
0 2014-09-11 06:16:11

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

问题描述

2 个解决方案

解决方案1 0 2014-09-11 04:39:45

解决方案2 0 2014-09-11 06:16:11

解决方案1
0 2014-09-11 04:39:45

解决方案2
0 2014-09-11 06:16:11