在我的 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