如何在 JavaScript 中创建一个猜数字游戏？

Question

我需要创建一个猜数游戏，它使用document.getElementById 接收一个值，并使用document.getElementByid 将其输出到<textarea>。我需要创建一个用户可以猜测的随机数。用户将信息放入 HTML 文本框中，并根据用户的猜测将答案存储在 <textarea> 中。第一个猜测将显示太高或太低，然后任何答案都将显示更暖或更冷。我不知道从哪里开始。这是 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();
}