如何在 JavaScript 中创建一个猜数字游戏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5688100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 18:28:09 来源:igfitidea点击:
How to create a number guessing game in JavaScript?
提问by user689290
I need to create a number guessing game that receives a value using document.getElementByIdand 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 <textarea>. 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 where to start. Here is a sample of the HTML.
我需要创建一个数字猜谜游戏，该游戏接收一个值 usingdocument.getElementById并将其输出到<textarea>using document.getElementByid。我需要创建一个用户可以猜测的随机数。用户会将信息放入 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:
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!!!"
}
}
}
回答by Jared Farrish
Here's my go at it:
这是我的做法：
<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>
The Javascript:
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>
UPDATED
更新
The HTML:
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>
The Javascript:
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();
}
