添加一個猜測循環到我的Javascript猜數字遊戲

我很新的Javascript和我已經構建了一個簡單的猜數字遊戲。該程序會在1-10之間生成一個隨機數，並在您的猜測過高或過低時提示您。如果你猜對了，你就贏了。添加一個猜測循環到我的Javascript猜數字遊戲

我想通過給玩家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>

來源

2014-09-11 M B

不要使用循環。等待用戶執行一個操作，例如*按下按鈕*或*鍵入一個單詞*後回車。然後*繼續*與邏輯：猜測是否正確？如果不是，他們是否錯誤地猜錯了太多次？如果是這樣，那麼GAME OVER。 – user2864740 2014-09-11 04:09:09

對於初學者來說，創建一個可以調用的初始化函數，以便不必重新加載。你不能使用一個循環，只是一個你設置爲3的計數器，當它爲0時調用init。init將使用你的生成器，並重置計數器 – mplungjan 2014-09-11 04:10:21

因此，這裏是我如何去約上你的遊戲..我會盡我所能，讓你瞭解我的邏輯。

首先，你需要一個輸入框，用戶輸入他/她的猜測和一個按鈕提交猜測：

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

然後在點擊按鈕的事件偵聽器。在這裏，我從輸入框中獲得用戶猜測的值，並將其發送到另一個函數，以檢查猜測是正確的，低的還是高的。此外，我保持一個計數器，每增加一個按鈕點擊。用戶將只能檢查，直到maxGuesses，最初3.當計數器等於最大猜測，那就是當遊戲結束時，im禁用按鈕，所以沒有更多的輸入。

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

來源

2014-09-11 04:39:45

謝謝你，我不知道計數器，現在我有東西要看。我認爲循環是解決我的問題的唯一方法，但我會爲未來的項目記住櫃檯。 – 2014-09-11 06:28:22

歡迎..你可以標記正確的答案，如果它幫助你.. – 2014-09-11 06:29:38

你並不需要在這裏使用循環。你可以使用一個跟蹤還有多少猜測的變量。每次計算答案時減少一個變量。如果它變爲0，則遊戲丟失。

我也做了一些其他改進你的代碼，即：

使用的代碼單獨的JS文件。
將代碼包裝在立即調用的函數表達式中，以便不泄漏全局變量。
給變量一些更具可讀性的名字。
僅從DOM獲取DOM元素一次。
取代警報（）有利於將答案直接放在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(); 
     } 
    } 

}());

來源

2014-09-11 06:16:11

這裏的一些東西對我來說是新的像addEventListener函數。但我會自己研究。感謝您對我的編碼進行了這些改進，因爲先前掌握好編碼慣例是一種很好的做法。 – 2014-09-11 06:35:24

在這種情況下，.addEventListener（）函數與HTML元素上的onclick =屬性或JS中DOM元素的.onclick屬性幾乎相同。最大的區別是你可以使用.addEventListener（）添加多個監聽器，如果你想在你的web應用中合併腳本，它可能會更好，因爲它們可能需要監聽同一個事件。它還爲您提供了回調中的事件對象，您可以使用它來控制事件以有限的方式運行。 event.preventDefault（）在這種情況下阻止提交表單。 – 2014-09-11 07:18:34

添加一個猜測循環到我的Javascript猜數字遊戲

回答

相關問題