如何在JavaScript中创建一个数字猜谜游戏 [英] How to create a number guessing game in JavaScript

问题描述

我需要创建一个使用document.getElementById接收值的数字猜谜游戏，并使用document.getElementByid将其输出到textarea。我需要创建一个用户可以猜测的随机数。用户将信息放入html的文本框中，并且当用户猜测它将把答案存储在输出文本区域中。第一个猜测将显示太高或太低，然后任何答案将显示更暖或更冷。我不确定要开始。这是html的示例。任何帮助将不胜感激。

I need to create a number guessing game that receives a value using document.getElementById and outputs it to a textarea using document.getElementByid. I need to create a random number that the user can guess against. the user will put the information into a text box in html and as the user guesses it will store the answers in the output text area. The first guess will either display too high or too low, and then any answer after that will display warmer or colder. I am not sure were to start. Here is a sample of the html. Any help would be greatly appreciated.

  <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代码：

JavaScript code:

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!!!"
    }       
}
}

推荐答案

以下是我的观点：

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：

The 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：

The 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();
}

这篇关于如何在JavaScript中创建一个数字猜谜游戏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！