[英]How to create a number guessing game in JavaScript?
我需要创建一个猜数字游戏,其接收使用值document.getElementById
和一个其输出<textarea>
使用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:
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!!!"
}
}
}
这是我的做法:
<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>
更新
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();
}
http://nicksjavascript.blogspot.com/2013/12/javascript-tutorial-8-guess-number.html
这是一个关于猜测我的号码应用程序的简单教程
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.