JS中的猜数字游戏

Posted 2023-02-25

【中文标题】JS中的猜数字游戏

【英文标题】：Number guessing game in JS

【发布时间】：2016-02-01 15:41:13

【问题描述】：

我想创建一个数字游戏，用户输入一个 1-100 的数字，脚本将尝试在 10 次中猜测用户的输入。如果在 10 次之内，它猜对了它就赢了，否则用户赢了。到目前为止，我让它正常工作，除了我在试图让它显示游戏结束时的猜测次数时遇到问题。例如，如果进行了 10 次猜测，则应显示“猜测次数：10”或猜测次数：5”（如果猜测为 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>

【问题讨论】：

问题是什么？您发布的代码有问题吗？

是的，输出没有按预期进行。它显示脚本的猜测 10 次，然后显示比较 10 次，显示它是小于还是大于用户的输入。之后它直接进入我无法弄清楚你的号码。我希望它能够在 10 倍内猜出不同的数字并比较用户的输入。结果的显示也不正确。它应该显示脚本猜测的内容，而不是显示它是否大于或小于数字。之后，它应该猜另一个数字。直到 10 次猜测完成。

在调用函数之前生成一次 randomNum，然后将输入的数字与同一事物 over and over again 进行比较。至少生成 randomNum 的行应该在函数内部，但是最好弄清楚如何在 10 次猜测中猜测它。

试试这个jsfiddle.net/kishoresahas/j0bbnhue/3，我对你的代码做了一些修改。

【参考方案1】：

你必须在每个循环中计算一个新的随机数（不仅仅是在开始时）

【讨论】：

我把它放在do 之后innerHTML 之前我猜一个数字。我在 5 次机会中将范围从 1-10 降低，现在它猜测 7 次，即使我得到正确的数字，它也不会结束说它赢了。

【参考方案2】：

我注意到的第一个是下面的行不在循环中

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

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

【讨论】：

你是否能够看到它是否达到了如果它猜到了用户输入的时间，它就会说他是用户赢了。我一直在努力，到目前为止还没有运气。尤其是在 10 次或更少的猜测中

是的，我能够得到它，但出于测试目的，我只是硬编码了变量 randomNum 以获得这个 Our numbers match. I win!! :) 输出。

非常感谢您的帮助。我非常感谢所有的帮助。