Javascript 尝试制作一个随机生成的数字猜测游戏_Javascript_Random

Javascript 尝试制作一个随机生成的数字猜测游戏

javascript random

Javascript 尝试制作一个随机生成的数字猜测游戏,javascript,random,Javascript,Random,我应该做一个随机数字猜测游戏所以我知道我需要随机生成一个0-50之间的数字，用户需要猜测。根据他们的猜测，我必须告诉他们是过低还是过高到目前为止，这就是我所拥有的，但我不知道下一步该做什么。（如果是正确的话。）数字游戏我在想一个介于0和50之间的数字。。。这是你的电话号码吗？ var outputDiv=document.querySelector（“输出”）；函数checkInput（）{ var guess=parseInt（txtInput.value）； } 函数genN

我应该做一个随机数字猜测游戏

所以我知道我需要随机生成一个0-50之间的数字，用户需要猜测。根据他们的猜测，我必须告诉他们是过低还是过高

到目前为止，这就是我所拥有的，但我不知道下一步该做什么。（如果是正确的话。）


数字游戏
我在想一个介于0和50之间的数字。。。


这是你的电话号码吗？
var outputDiv=document.querySelector（“输出”）；
函数checkInput（）{
var guess=parseInt（txtInput.value）；
}
函数genNum（）{
txtInput.value=Math.round（Math.random（）*50）；
}

首先，不能在一个“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>


数字游戏
函数theGuess（）{
var guess=$（'#txtInput'）.val（）；
返回（数字（猜测））
};
函数highLow（）{
//生成一个介于0到50之间的随机数
//random（）返回一个介于0和1之间的随机数
var rand=数字（Math.random（）*50）；
var roundRand=编号（rand）.toFixed（0）；
//将用户的猜测存储为变量
var userGuess=theGuess（）；
//验证猜测
如果（用户猜测>50）{
return（$（'#output'）.html（'请输入一个介于0和50之间的数字'）；
}else if（isNaN（userGuess））{
返回（$（'#output'）.html（'请输入一个数字，而不是任何其他数据类型'）；
} 
//检查猜测是否相等
if（userGuessroundRand）{
$（'#output'）.html（“太高了！”）；
}else if（userGuess==roundRand）{
$（'#output'）.html（“你猜对了！！”）；
}
}
//onclick函数
函数答案（）{
猜（）；
高低（）；
}
我在想一个介于0和50之间的数字。。。


这是你的电话号码吗？

你仍然可以享受到如何验证输入的乐趣；如何检查输入是否为空？：）

首先，您在错误的位置生成了数字。您应该在页面加载后以及每次单击按钮后立即执行此操作。将

genNum

的输出存储在任何函数之外的变量中；在脚本标记内初始化一个变量，如

randomNum

<代码>var randomNum=0

您只需要在

checkInput

中获取文本字段的值

这样做：

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

然后，使用

if

语句来确定猜测值是高于还是低于

randomNum

。为此，请使用

运算符。根据条件，将输出div的内容设置为：

outputDiv.innerHTML='您的值比实际值大一些'

之后，仍然在

checkInput

中，将randomNum变量重新分配给

genNum

的输出：

randNum=genNum（）

（需要注意的是，我们没有再次使用

var

关键字

这会让你知道该怎么做。

没有什么问题

1） script元素不能同时包含src和body内容，如果要包含外部js脚本，请使用单独的

script

标记 2）点击按钮后，您需要生成随机数，并对照输入中输入的值进行检查

var outputDiv=document.getElementById（“输出”）；
var txtInput=document.getElementById（“txtInput”）；
函数checkInput（）{
var guess=+txtInput.value，//将输入值转换为数字
ran=genNum（）；//生成一个随机数
if（isNaN（guess））{//如果输入的值不是数值
outputDiv.innerHTML='输入一个数字'
}else如果（guess==ran）{//如果两个值相同
outputDiv.innerHTML='Correct'
}else如果（guess


我在想一个介于0和50之间的数字。。。


这是你的号码吗？
所以，这听起来像是家庭作业，让我们试着找出实现游戏所需的步骤。一旦你掌握了这些步骤，在谷歌的帮助下，将其翻译成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

//1。Load：你需要什么才能开始游戏？
//1.1我们需要一个js中的秘密随机数
var secretRandomNumber=Math.round（Math.random（）*50）；
//1.2我们还需要一种方法，让用户在html中输入他/她的猜测
//1.3我们需要让用户检查他们在html中的猜测是否正确
猜测
//还有js
函数checkGuess（）{
???
}
//1.4我们需要一种用html向用户传达结果的方法
// 2. 开始：让我们玩吧！
//2.1用户键入一个数字
//2.2用户确认号码并发送给检查（按下猜测按钮）
var guess=document.getElementById（'guess'）.value；
//2.3游戏将检查数字是否等于密码，如果不等于，则继续2.4
如果（guess==secretRandomNumber）{
//2.3.1游戏向用户传达他/她的猜测是正确的！
document.getElementById（'message'）。innerHTML='Correct！'；
}否则
// 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>