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;
    }
}

检查过高，低或正确猜测的猜测是你使用的简单逻辑，三个条件。在正确的猜测中，用户将显示＆＃34; You Win！＆＃34;因为游戏现在已经结束，按钮将再次被禁用。

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

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>

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

}());

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

2 个答案: