2015-07-10 156 views
0

我應該做一個隨機數猜謎遊戲。試圖做一個隨機生成的數字猜謎遊戲

所以我知道我需要隨機生成一個介於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> 
+1

利用javascript的'alert'或'console.log'進行調試。我們不是在這裏寫你的代碼。 – twentylemon

+1

每次用戶猜測時,你爲什麼要做'genNum'? –

+0

我不想讓任何人寫我的代碼,我只是想知道它到目前爲止是否是錯誤的。我以爲我需要genNum來產生他們應該猜測的隨機數。就像我說的,不太確定如何去做。 – Sina

回答

0

首先,你不能在一個「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> 

你仍然喜歡搞清楚如何驗證輸入;如何檢查輸入是否爲空? :)

0

首先,你是在錯誤的地方生成號碼。您應該在頁面加載後立即執行該操作,並且每次單擊該按鈕後執行該操作。將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關鍵字一次。

這應該給你做什麼是一個好主意。

0

有幾個問題...

1)腳本元素不能有src和主體內容,如果你想包括一個前ternal 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> 
0

所以,這聽起來像是作業,所以讓我們試圖弄清楚他需要完成你的遊戲所需的步驟。一旦你有了這些步驟,在谷歌先生的幫助下,將其轉換爲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頁面和調整的剩餘部分,希望它有助於: )