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

Adding a guess loop to my Javascript number guessing game

本文关键字：循环 一个 Javascript 我的 数字 游戏 添加      更新时间：2023-09-26

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

下面是我对你的游戏的看法。。我会尽力让你理解我的逻辑。

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

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

这里不需要使用循环。您可以使用一个变量来跟踪还有多少猜测。每次计算答案时，都要将变量减少一。如果达到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="answerswer"></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("answerswer");
    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();
        }
    }
}());
相关文章：