在JS中猜数字游戏 [英] Number guessing game in JS

问题描述

我想创建一个数字游戏，用户从1-100输入一个数字，脚本会尝试猜测用户的输入。如果在10次猜测中，它猜测它赢得的正确数字，否则用户获胜。到目前为止，我的工作正常，除了我有问题试图让它显示在游戏结束时进行的猜测次数。例如，如果有10次猜测，应该显示猜测次数：10次或猜测次数：5次（如果在5中猜到）。

  window.guessNum = function（）{document.getElementById（result）。innerHTML =; var guesses = 10; var input = parseInt（document.getElementById（numberGuess）。value） ; {var randomNum = Math.floor（Math.random（）* 100）+ 1; document.getElementById（result）。innerHTML + =I'll guess+ randomNum +< br /> ; if（input == randomNum）{document.getElementById（result）。innerHTML + =我们的号码匹配。我赢了！！ ：）< br />< br />; guesses = 0;} if（input< randomNum）{document.getElementById（result）。innerHTML + =Your input is less than number I在想什么。 < br />< br />;} else if（input> randomNum）{document.getElementById（result）。innerHTML + =您的输入大于我正在考虑的数字。 （猜测> 0）; if（input！= randomNum）{document.getElementById（result）。innerHTML + = &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&> 我无法弄清楚。我猜你赢了！< br />< br />;} document.getElementById（result）。innerHTML + =猜测次数：+ guesses +< br />;}  

< h1>数字游戏< / h1>< div id =mainCont>< p>数字：< input type =textid =numberGuess>< input type =buttononclick =guessNum（）;value = >< / p>< div id =guess>< / div>< div id =result>< / div>< / div>

循环



  var randomNum = Math.floor（Math.random（）* 100）+1; 
  

然后如果数字相等，则下面的行不存在，所以它进入循环循环。

  guesses = guesses  -  1; 
  

并用于显示猜测及其结果我接着将所有结果附加到单个 div

请参阅下面的演示：

  window.guessNum = function（）{document.getElementById（result）。innerHTML =; var guesses = 10; var input = parseInt（document.getElementById（numberGuess）.value）;做{//猜测 - ; var randomNum = Math.floor（Math.random（）* 100）+ 1; document.getElementById（result）。innerHTML + =< p>我会猜测+ randomNum +< / p>;如果（input< randomNum）{document.getElementById（result）。innerHTML + =< p>您的输入小于我正在考虑的数字。< / p>; } else if（input> randomNum）{document.getElementById（result）。innerHTML + =< p>您的输入大于我正在考虑的数字。< / p>; }猜测=猜测 -  1; （猜测> 0）; if（input！= randomNum）{document.getElementById（result）。innerHTML + =< p>我无法弄清楚，我猜你赢了！< / p>; } if（input == randomNum）{document.getElementById（result）。innerHTML + =< p>我们的号码匹配。我赢了!!：）< / p>;猜测= 0; }}  

< h1> Number Game< / h1> < div id =mainCont> < p>编号：< input type =textid =numberGuess> < input type =buttononclick =guessNum（）;值= 猜测 > < / p为H. < div id =guess>< / div> < div id =result>< / div>< / div>

演示： http://jsfiddle.net/kishoresahas/j0bbnhue/4/

I want to create a number game where the user enters a number from 1-100, and it the script will attempt to guess in 10 guesses the user's input. If within 10 guesses it guesses the right number it wins, otherwise the user wins. So far I got it work properly, except I'm having issues trying to have it display the number of guesses made at the end of the game. So for example, if 10 guesses were made than it should show "Number of guesses made: 10" or Number of guesses made: 5" (if guessed in 5).

window.guessNum = function () {
    document.getElementById("result").innerHTML = "";
    var guesses = 10;
    var input = parseInt(document.getElementById("numberGuess").value);
    do {
        var randomNum = Math.floor(Math.random() * 100) + 1;
         
        document.getElementById("result").innerHTML += "I'll guess " + randomNum + " <br />";
        if (input == randomNum) {
        document.getElementById("result").innerHTML += "Our numbers match. I win!! :)<br /><br />";
        guesses = 0;
       }
       if (input < randomNum) {
       document.getElementById("result").innerHTML += "Your input is less than the number I'm thinking about. <br /><br />";
       } else if (input > randomNum) {
       document.getElementById("result").innerHTML += "Your input is greater than the number I'm thinking about.<br /><br />";
       }
       guesses = guesses - 1;
       }
       while (guesses > 0);
       if (input != randomNum) {
       document.getElementById("result").innerHTML += "I can't figure it out. I guess you win!<br /><br />";
       }
       document.getElementById("result").innerHTML += "Number of guesses: " +guesses+ " <br />";
    }

<h1>Number Game</h1>
<div id="mainCont">
  <p>Number:
    <input type="text" id="numberGuess">
    <input type="button" onclick="guessNum();" value="Guess">
  </p>
  <div id="guess"></div>
  <div id="result"></div>
</div>

解决方案

The first one i noticed was the below line was out of the loop

 var randomNum = Math.floor(Math.random() * 100) + 1;

and then the below line was not there if the numbers were equal, so it went to recurring loop.

guesses = guesses - 1;

and for show the guess and its result one after another it , i appended all the result to single div

see the below working demo:

window.guessNum = function () {
    document.getElementById("result").innerHTML = "";
    var guesses = 10;
    var input = parseInt(document.getElementById("numberGuess").value);
    do {
        //guesses--;
          var randomNum = Math.floor(Math.random() * 100) + 1;
        document.getElementById("result").innerHTML += "<p>I 'll guess " + randomNum + " </p>";

        if (input < randomNum) {
            document.getElementById("result").innerHTML += "<p>Your input is less than the number I'm thinking about. </p>";
        } else if (input > randomNum) {
            document.getElementById("result").innerHTML += "<p>Your input is greater than the number I'm thinking about.</p> ";
        }
         guesses = guesses - 1;
    }
    while (guesses > 0);
    if (input != randomNum) {
        document.getElementById("result").innerHTML += "<p>I can 't figure it out. I guess you win!</p>";
    }
    if (input == randomNum) {
        document.getElementById("result").innerHTML += "<p>Our numbers match. I win!! :)</p>";
        guesses = 0;
    }
}

<h1>Number Game</h1>

<div id="mainCont">
    <p>Number:
        <input type="text" id="numberGuess">
        <input type="button" onclick="guessNum();" value="Guess">
    </p>
    <div id="guess"></div>
    <div id="result"></div>
</div>

Demo : http://jsfiddle.net/kishoresahas/j0bbnhue/4/

这篇关于在JS中猜数字游戏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！