<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>猜数字游戏</title>
<style type="text/css">
html{
font-family: sans-serif;
}
body{
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.lastResult{
color: white;
padding: 3px;
}
</style>
</head>
<body>
<h1>猜数字游戏</h1>
<p>我刚才随机选定了一个100以内的自然数。看你能否在10次以内猜中它。每次我都会告诉你所采的结果是高了还是低了。</p>
<div class="form">
<label for="guessField">请猜数:</label>
<input type="text" id="guessField" class="guessField"/>
<input type="submit" value = "确定" class="guessSubmit"/>
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
</body>
<script>
let randomNumber = Math.floor(Math.random() * 100) + 1;
const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');
const guessField = document.querySelector('.guessField');
const guessSubmit = document.querySelector('.guessSubmit');
let guessCount = 1;
let resetButton;
guessField.focus();
function checkGuess(){
const userGuess = Number(guessField.value);
if(guessCount === 1){
guesses.textContent = '上次猜的数: ';
}
guesses.textContent += userGuess + ' ';
if(userGuess === randomNumber){
lastResult.textContent = '恭喜你猜对啦!';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
}else if(guessCount == 10){
lastResult.textContent = '!!!GAME OVER!!!';
setGameOver();
}else{
lastResult.textContent = '你猜错了!';
lastResult.style.backgroundColor = 'red';
if(userGuess < randomNumber){
lowOrHi.textContent = '你猜小了!';
}else if(userGuess > randomNumber){
lowOrHi.textContent = '你猜大了!';
}
}
guessCount++;
guessField.value = '';
guessField.focus();
}
guessSubmit.addEventListener('click',checkGuess);
function setGameOver(){
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = '开始新游戏';
document.body.appendChild(resetButton);
resetButton.addEventListener('click',resetGame);
}
function resetGame(){
guessCount = 1;
const resetParas = document.querySelectorAll('.resultParas p');
for(let i = 0; i < resetParas.length; i++){
resetParas[i].textContent = '';
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(random() * 100 + 1);
}
</script>
</html>
来自:MDN