如何在JavaScript中創建猜數字遊戲

Question

我需要創建一個數字猜測遊戲，它使用document.getElementById接收值並使用document.getElementByid將其輸出到textarea。我需要創建一個用戶可以猜測的隨機數。用戶會將信息放入html中的文本框中，並且用戶猜測它會將答案存儲在輸出文本區域中。第一次猜測會顯示太高或太低，然後之後的任何答案將顯示更暖或更冷。我不知道要開始。這裏是一個html的例子。任何幫助將不勝感激。

<form> 
<fieldset> 
    <legend>Inputs</legend> 
    <label for="guess">Your Guess:</label> 
    <input type="text" id="guess" value="523" /> 
    <input type="button" onclick="yourGuess()" value="submit" /><br /> 
    <input type="button" onclick="" value="Show My Guesses" /> 
    <input type="button" onclick="" value="New Game" /><br /> 
    <input id="cheat" type="checkbox" value="cheat" /> 
    <label for="cheat">Cheat</label> 
</fieldset> 
<fieldset> 

    <legend> Output </legend> <textarea id="output" name="output" rows="5"  style="width: 100%;">    
    </textarea> 
    </fieldset> 
</form> 

JavaScript代碼：

function yourGuess() 
{ 
var guess1 = document.getElementById("guess").value; 
var guess2 = 501; 
var newGuess = Math.floor(guess2); 
var n = 0; 

if (newGuess < guess1) { 
    yourReturn = "Your are too low!!!" 
} 
else { 
    if (newGuess > guess1) { 
     yourReturn = "You are too high!!!" 
    } 
    else { 
     yourReturn = "Correct, You are the winner!!!" 
    }  
} 
} 

Answer 1

這是我走在它：

http://jsfiddle.net/FB8Uh/

<fieldset> 
<legend>Inputs</legend> 
<label for="guess">Your Guess:</label> 
<input type="text" id="guess" value="523" /> 
<input type="button" onclick="yourGuess()" value="submit" /><br /> 
<input type="button" onclick="" value="Show My Guesses" /> 
<input type="button" onclick="" value="New Game" /><br /> 
<input id="cheat" type="checkbox" value="cheat" onclick="showNumberToGuess()" /> 
<label for="cheat">Cheat</label> 
<div id="cheatShow" style="display: none;"> 
    <input id="numberToGuess" type="text" /> 
    <label for="numberToGuess">Number to guess</label> 
</div> 
</fieldset> 
<fieldset> 
<legend> Output </legend> 
<textarea id="output" name="output" rows="5" style="width: 100%;"></textarea> 
</fieldset> 

的JavaScript：

<script type="text/javascript"> 
function yourGuess() { 
    guess = document.getElementById("guess").value; 
    guesses = document.getElementById("output"); 

    if (guess == numToGuess) { 
     guesses.value = guesses.value + "\r" + "You have guessed correctly! ("+guess+")"; 
    } else if (guess > numToGuess) { 
     guesses.value = guesses.value + "\r" + "You guessing too high!("+guess+")"; 
    } else { 
     guesses.value = guesses.value + "\r" + "You guessing too low!("+guess+")"; 
    } 
} 

function showNumberToGuess() { 
    if (document.getElementById('cheat').checked) { 
     document.getElementById('numberToGuess').value = numToGuess; 
     document.getElementById('cheatShow').style.display = 'inline'; 
    } else { 
     document.getElementById('numberToGuess').value = ''; 
     document.getElementById('cheatShow').style.display = 'none'; 
    } 
} 

var numToGuess = Math.floor(Math.random()*500); 
</script> 

修訂

http://jsfiddle.net/FB8Uh/4/

的HTML：

<fieldset> 
<legend>Inputs</legend> 
<label for="guess">Your Guess:</label> 
<input type="text" id="guess" value="523" /> 
<input type="button" onclick="yourGuess()" value="submit" /><br /> 
<input type="button" id="showguesses" onclick="showGuesses()" value="Show My Guesses" /> 
<input type="button" onclick="generateNumberToGuess(true)" value="New Game" /><br /> 
<input id="cheat" type="checkbox" value="cheat" onclick="showNumberToGuess()" /> 
<label for="cheat">Cheat</label> 
<div id="cheatShow" style="display: none;"> 
    <input id="numberToGuess" type="text" /> 
    <label for="numberToGuess">Number to guess</label> 
</div> 
</fieldset> 
<fieldset id="guesses" class="guesses"> 
<legend> Output </legend> 
<textarea id="output" name="output" rows="5" style="width: 100%;"></textarea> 
</fieldset> 

的JavaScript：

function yourGuess() { 
    // You can store references to the value and the 
    // guesses textarea in local function variables. 
    var guess = document.getElementById("guess").value; 
    var guesses = document.getElementById("output"); 

    // First, if the guess is the same, just show the answer. 
    // Append onto the textarea the result. 
    if (guess == numToGuess) { 
     guesses.value = guesses.value + "\r" + "You have guessed correctly! ("+guess+")"; 
    } else if (guess > numToGuess) { 
     guesses.value = guesses.value + "\r" + "You guessing too high!("+guess+")"; 
    } else { 
     guesses.value = guesses.value + "\r" + "You guessing too low!("+guess+")"; 
    } 
} 

function showNumberToGuess() { 
    // Show the randomly generated number if the onclick event 
    // fires and the checkbox is check; otherwise, remove the 
    // number and hide using display: none;. 
    if (document.getElementById('cheat').checked) { 
     document.getElementById('numberToGuess').value = numToGuess; 
     document.getElementById('cheatShow').style.display = 'inline'; 
    } else { 
     document.getElementById('numberToGuess').value = ''; 
     document.getElementById('cheatShow').style.display = 'none'; 
    } 
} 

// Randomly generate a number 
function generateNumberToGuess(confirmIt) { 
    var guesses = document.getElementById("output"); 

    // First, confirm this is what we want if the confirmIt 
    // argument was passed. 
    if (confirmIt && !confirm('Restart game with new number?')) { 
     return; 
    } 

    guesses.value = ''; 
    numToGuess = Math.floor(Math.random()*500); 
    guesses.value = "New number generated.\n"; 

    // Don't forget to hide the new number. 
    document.getElementById('numberToGuess').value = ''; 
    document.getElementById('cheatShow').style.display = 'none'; 
} 

function showGuesses(){ 
    var guesses = document.getElementById('guesses'); 
    var btn = document.getElementById('showguesses'); 

    if (guesses.style.display != 'block') { 
     guesses.style.display = 'block'; 
     btn.value = 'Hide My Guesses'; 
    } else { 
     guesses.style.display = 'none'; 
     btn.value = 'Show My Guesses'; 
    } 
} 

window.onload = function(){ 
    generateNumberToGuess(); 
} 

Answer 2

http://nicksjavascript.blogspot.com/2013/12/javascript-tutorial-8-guess-number.html

這是一個簡單的教程上的猜測我的號碼應用程序