Question

我应该做一个随机数猜谜游戏。

所以我知道我需要随机生成0到50之间的数字，用户需要猜测。基于他们的猜测，我必须告诉他们他们是否太低或太高。

这是我到目前为止所做的，但我不知道接下来应该做什么。（或者，如果它是对的。）

<!DOCTYPE html>
<html>
<head>
    <title>Number Game</title>
</head>
<body>
    <h2>I'm thinking of a number between 0 and 50...</h2>
    <div id="output"></div>
    <input id="txtInput" /><br>
    <button onClick="checkInput();genNum();">Is this your number?</button>
    <script src="js/main.js">
        var outputDiv = document.querySelector("#output");

        function checkInput() {
            var guess = parseInt(txtInput.value);
        }

        function genNum() {
            txtInput.value = Math.round(Math.random() * 50);
        }
    </script>
</body>
</html>

Answer 1

首先，你不能在一个“onclick”中调用两个函数。您应该创建一个调用这两个函数的函数，并将其用作“onclick”函数。这是让你入门的东西：

  <!DOCTYPE html>
  <html>

  <head>
    <title>Number Game</title>
  </head>
  <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
  <body>

     <script>

        function theGuess() {
            var guess = $('#txtInput').val();

            return(Number(guess))

        };


        function highLow() {
            // Generate a random number that is between 0 to 50
            // Math.random() returns a random number between 0 and 1
            var rand = Number(Math.random()*50);
            var roundRand = Number(rand).toFixed(0);
            // store user's guess as a variable
            var userGuess = theGuess();
            // validate the guess
            if (userGuess > 50) {
                return($('#output').html('Please enter a number that is between 0 and 50'));
            } else if (isNaN(userGuess)){
                return($('#output').html('Please enter a number, not any other data type'));
            } 
            // check equality of the guess
            if (userGuess < roundRand){
                $('#output').html("Too Low!");
            } else if(userGuess > roundRand) {
                $('#output').html("Too High!");
            } else if(userGuess == roundRand)  {
                $('#output').html("You guessed it!!");
            }
        }
        // onclick function
        function answer() {
            theGuess();
            highLow();
        }
    </script>
    <h2>I'm thinking of a number between 0 and 50...</h2>

    <div id="output"></div>
    <input id="txtInput" />
      <br/>
    <button onclick="answer()">Is this your number?</button>


  </body>

</html>

你仍然很高兴找出如何验证输入;如何检查输入是否为空白？：）

Answer 2

首先，您在错误的位置生成数字。您应该在页面加载后立即执行此操作，并在每次单击按钮后执行此操作。将genNum的输出存储在任何函数之外的变量中;在脚本标记内初始化像randomNum这样的变量; var randomNum = 0;

您只需要在checkInput中获取文本字段的值。

这样做：

var guessBox = document.getElementById('txtInput')
var theGuess = parseInt(guessBox.value)

然后，使用if语句确定theGuess是高于还是低于randomNum。使用<和>运算符。根据条件，设置输出div的内容，如下所示：outputDiv.innerHTML = 'Your value was (something) than the real value'

之后，仍然在checkInput中，将randomNum变量重新分配给genNum的输出：randNum = genNum()（请务必注意，我们没有使用var关键字再次。

这应该让你知道该怎么做。

Answer 3

几乎没有问题......

1）script元素不能包含src和body内容，如果要包含外部js脚本，请使用单独的script标记 2）单击按钮，您需要生成随机数，并根据输入

中输入的值进行检查

var outputDiv = document.getElementById("output");
var txtInput = document.getElementById("txtInput");

function checkInput() {
  var guess = +txtInput.value, //convert the input value to number
    ran = genNum(); //generate a random number
  if (isNaN(guess)) { //if the entered value is not a numerical value
    outputDiv.innerHTML = 'Enter a number'
  } else if (guess == ran) { //if both values are same
    outputDiv.innerHTML = 'Correct'
  } else if (guess < ran) { //if we entered a lesser value
    outputDiv.innerHTML = 'Less:' + ran
  } else { //we entered a greater value
    outputDiv.innerHTML = 'More:' + ran
  }
}

function genNum() {
  return Math.round(Math.random() * 50);
}

<h2>I'm thinking of a number between 0 and 50...</h2>
<div id="output"></div>
<input id="txtInput" />
<br>
<button onClick="checkInput()">Is this your number?</button>

脚本标记应为

<script src="js/main.js"></script>
<script>
    var outputDiv = document.querySelector("#output");

    function checkInput() {
        var guess = parseInt(txtInput.value);
    }

    function genNum() {
        txtInput.value = Math.round(Math.random() * 50);
    }
</script>

Answer 4

所以，这听起来像是家庭作业所以让我们试着找出实现游戏所需的步骤。一旦你完成了这些步骤，在Google先生的帮助下，将其翻译成html / js或任何其他编程语言应该相对容易。

1. Load: What do you need to be able to start a game?
    1.1 We need a secret random number
    1.2 We also need a way to let the user input his/her guess
    1.3 We need to let the user check if their guess is right
    1.4 We need a way to communicate the result to the user

2. Start: Lets play!
    2.1 The user types a number
    2.2 The user confirms the number and sends it to be checked
    2.3 The game checks if the number is equal to the secret number, if not continue at 2.4
        2.3.1 The game communicates to the user that his/her guess was correct!
    2.4 The game checks if the number is less than the secret number, if not continue at 2.5
        2.4.1 The game communicates to the user that his/her guess was too low
        2.4.2 The user tries another guess, continue at 2.1
    2.5 The number must be greater than the secret number
        2.5.1 The game communicates to the user that his/her guess was too high
        2.5.2 The user tries another guess, continue at 2.1

3. End: Want to play again?
    3.1 Restart
    3.2 Bye bye

让我们开始把它变成代码

// 1. Load: What do you need to be able to start a game?
//     1.1 We need a secret random number in js
       var secretRandomNumber = Math.round(Math.random() * 50);
//     1.2 We also need a way to let the user input his/her guess in html
       <input type="text" id="guess" />
//     1.3 We need to let the user check if their guess is right in html
       <button onclick="checkGuess();">Guess!</button> 
//     and in js
       function checkGuess(){
            ???
       }
//     1.4 We need a way to communicate the result to the user in html
       <div id="message"></div> 

// 2. Start: Lets play!
//     2.1 The user types a number
//     2.2 The user confirms the number and sends it to be checked (presses the Guess button)
       var guess = document.getElementById('guess').value;
//     2.3 The game checks if the number is equal to the secret number, if not continue at 2.4
           if (guess == secretRandomNumber){ 
//         2.3.1 The game communicates to the user that his/her guess was correct!
               document.getElementById('message').innerHTML = 'Correct!';
           }else
//     2.4 The game checks if the number is less than the secret number, if not continue at 2.5
           if (guess < secretRandomNumber){
//         2.4.1 The game communicates to the user that his/her guess was too low
//         2.4.2 The user tries another guess, continue at 2.1
               document.getElementById('message').innerHTML = 'Too low, try again';
           }else{
//     2.5 The number must be greater than the secret number
//         2.5.1 The game communicates to the user that his/her guess was too high
//         2.5.2 The user tries another guess, continue at 2.1
               document.getElementById('message').innerHTML = 'Too high, try again';
           }

// 3. End: Want to play again?
//     3.1 Restart - generate a new secret random number
//     3.2 Bye bye - close the page

清理它

    <input type="text" id="guess" />
    <button onclick="checkGuess();">Guess!</button>
    <div id="message"></div>
    <button onclick="generateSecretRandomNumber()">Restart</button>

    <script>
    var secretRandomNumber; // outside makes it available to other functions
    function generateSecretRandomNumber(){
       secretRandomNumber = Math.round(Math.random() * 50);
    }

    function checkGuess(){
        var guess = document.getElementById('guess').value;
        if (guess == secretRandomNumber){
            document.getElementById('message').innerHTML = 'Correct!';
        }else if (guess < secretRandomNumber){
            document.getElementById('message').innerHTML = 'Too low, try again';
        }else{
            document.getElementById('message').innerHTML = 'Too high, try again';
        }
    }

    // make sure we have a brand new secret number once the page loads
    generateSecretRandomNumber();
    </script>

现在您可以将其插入完整的html页面并调整其余部分，希望它有所帮助：）

试图制作一个随机生成的数字猜谜游戏

4 个答案: