假设你的老板给你布置了以下游戏设计任务要求:
我想让你开发一个猜数字游戏。游戏应随机选择一个 100 以内的自然数, 然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否,如果出错了,则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对,或者用尽所有机会,游戏将结束。游戏结束后,可以让玩家选择再次开始。
<!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>