猜数字游戏


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>猜数字游戏</title>

<style>
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>
<script>

// 开始编写 JavaScript 代码
let randomNumber = Math.floor(Math.random() * 100) + 1;
//Math.random():获取0-1随机数
//Math.flooor(x):小于x且于x最接近的整数
//Math.random()*100:就是>=0 且 <100的数
//然后+1，就是>=1 且 <100的数
//最后，赋值给第一个变量（randomNumber）

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');

const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');
let guessCount = 1;//存储一个计时器（用于跟踪玩家猜测的次数）
let resetButton;//存储对重置按钮的引用

function checkGuess(){

//声明了一个名为 userGuess 的变量，并将其设置为在文本字段中输入的值。
//我们还对这个值应用了内置的 Number() 方法，只是为了确保该值是一个数字。
let userGuess = Number(guessField.value);
//玩家是不是第一次猜数字,如果是, 我们让 guesses 段落的文本内容等于“上次猜的数：”。如果不是就不用了。
if(guessCount === 1){
guesses.textContent = '上次猜的数：';
}
//将当前 userGuess 值附加到 guesses 段落的末尾，并加上一个空格，以使每两个猜测值之间有一个空格。
guesses.textContent += userGuess + ' ';
//检查用户的猜测是否等于在代码顶端设置的 randomNumber 值。如果是，则玩家猜对了，游戏胜利，
//我们将向玩家显示一个漂亮的绿色的祝贺信息，并清除“高了 / 低了”信息框的内容，调用 setGameOver() 方法。
if (userGuess === randomNumber) {
lastResult.textContent = '恭喜你！猜对了!';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
//检查这个回合是否是玩家的最后一个回合。如果是，程序将做与前一个程序块相同的事情，只是这次它显示的是 Game Over 而不是祝贺消息。
} else if (guessCount === 10) {
lastResult.textContent = '!!!GAME OVER!!!';
setGameOver();
//前两个比较都不返回 true 时（也就是玩家尚未猜对，但是还有机会）才会执行这里的代码。
//在这个情况下，我们会告诉玩家他们猜错了，并执行另一个条件测试，判断并告诉玩家猜测的数字是高了还是低了。
}else{
lastResult.textContent = '你猜错了！';
lastResult.style.backgroundColor = 'red';
if(userGuess<randomNumber){
lowOrHi.textContent = '你猜低了！';
}else if(userGuess>randomNumber){
lowOrHi.textContent = '你猜高了';
}

}
guessCount++;
guessField.value = '';
guessField.focus();
}
//侦听事件发生的结构称为事件监听器（Event Listener），响应事件触发而运行的代码块被称为事件处理器（Event Handler）。
guessSubmit.addEventListener('click', checkGuess);

//添加延时监听函数
// window.setTimeout(function(){
// },5000);

function setGameOver(){
//将disable属性设置为true来禁用表单文本输入和按钮
guessField.disabled = true;
guessSubmit.disabled = true;
//创建一个新的<button>元素。并把它添加到当前HTML的底部
resetButton = document.createElement('buttton');
resetButton.textContent = '开始新游戏';
document.body.appendChild(resetButton);
//设置一个事件监听器，点击时，调用resetGame()函数
resetButton.addEventListener('click',resetGame);
}
//将游戏重置为初始状态，开始新的一轮游戏
function resetGame(){
//将guessCount重置为1
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段落的背景颜色
lastResult.style.backgroundColor = 'white';
//生成一个新的随机数，这样就可以猜测新的数字了！
randomNumber = Math.floor(Math.random() * 100) + 1;
}
</script>

</body>
</html>