实现一个猜数字游戏的过程，通常包括以下几个步骤：
- 生成一个随机数：计算机随机生成一个目标数字。
- 用户输入猜测：玩家猜测数字并提交。
- 比较用户输入与目标数字：计算机检查玩家的猜测，给出提示（比如“猜小了”或“猜大了”）。
- 循环进行：直到玩家猜对为止，或者达到预设的次数。
1. HTML 文件 (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字游戏</title>
<style>
/* 简单的样式 */
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#result {
font-size: 20px;
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>猜数字游戏</h1>
<p>我已经选了一个1到100之间的数字，试着猜一猜！</p>
<!-- 输入框供用户输入猜测数字 -->
<input type="number" id="guessInput" placeholder="请输入一个数字" min="1" max="100">
<button id="submitBtn">提交猜测</button>
<!-- 显示结果 -->
<div id="result"></div>
<!-- 引入外部JS文件 -->
<script src="game.js"></script>
</body>
</html>
2. JavaScript 文件 (game.js)
// 获取页面元素
const guessInput = document.getElementById('guessInput'); // 输入框
const submitBtn = document.getElementById('submitBtn'); // 提交按钮
const resultDiv = document.getElementById('result'); // 显示结果的区域
// 游戏初始化
let targetNumber = Math.floor(Math.random() * 100) + 1; // 生成1到100之间的随机数字
let attempts = 0; // 记录猜测次数
// 提交猜测的按钮点击事件
submitBtn.addEventListener('click', function() {
// 获取用户输入的数字，并转换为整数
let userGuess = parseInt(guessInput.value);
// 如果用户没有输入有效的数字（例如为空或不在范围内）
if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
resultDiv.innerHTML = "请输入一个1到100之间的数字！"; // 提示用户输入有效数字
return; // 结束本次函数执行
}
// 增加猜测次数
attempts++;
// 判断用户猜测结果
if (userGuess > targetNumber) {
// 如果猜测的数字大了
resultDiv.innerHTML = `你猜的数字 ${userGuess} 太大了！<br>你已经猜了 ${attempts} 次。`;
} else if (userGuess < targetNumber) {
// 如果猜测的数字小了
resultDiv.innerHTML = `你猜的数字 ${userGuess} 太小了！<br>你已经猜了 ${attempts} 次。`;
} else {
// 如果猜对了
resultDiv.innerHTML = `恭喜你，猜对了！数字是 ${targetNumber}。<br>你一共猜了 ${attempts} 次。`;
// 游戏结束后，2秒钟后重置游戏
setTimeout(() => {
// 重置游戏
targetNumber = Math.floor(Math.random() * 100) + 1; // 生成新的随机数字
attempts = 0; // 重置猜测次数
resultDiv.innerHTML = ""; // 清空结果区域
guessInput.value = ""; // 清空输入框
guessInput.focus(); // 将焦点放回输入框
}, 2000);
}
});
解释：
1. HTML 文件 (index.html):
- 基本结构：
h1标签显示游戏标题。input标签用来让用户输入猜测的数字，type="number"强制用户输入数字，并且通过min="1"和max="100"限制数字的范围。button标签用于触发用户的猜测操作。div用来显示游戏的结果（例如提示用户猜大了、猜小了或猜对了）。
<script src="game.js"></script>： 这是将外部的 JavaScript 文件game.js引入到 HTML 页面中，这样可以把逻辑和页面结构分离。
2. JavaScript 文件 (game.js):
-
获取 HTML 元素： 使用
document.getElementById()获取页面上的输入框、按钮和结果显示区域。 -
初始化随机数和猜测次数：
targetNumber是通过Math.random()随机生成的1到100之间的数字。attempts用来记录玩家已经猜了多少次。
-
事件监听：
- 使用
addEventListener()方法监听按钮的点击事件。 - 当用户点击按钮时，会获取用户输入的数字
userGuess，并进行一系列验证（例如检查是否是有效数字，是否在合法范围内等）。
- 使用
-
判断猜测结果：
- 如果用户输入的数字比目标数字大，显示“太大了”。
- 如果数字比目标数字小，显示“太小了”。
- 如果数字正确，显示“恭喜你猜对了”，并在 2 秒钟后重置游戏。
游戏的交互流程：
- 用户输入数字后，点击“提交猜测”按钮。
- 程序会判断用户的猜测是“大了”还是“小了”，并显示相应的提示。
- 如果用户猜对了，程序会显示恭喜信息，并且自动重置游戏，玩家可以继续猜。
优点：
- HTML 和 JavaScript 分开：结构和行为分离，代码更加模块化，便于维护和扩展。
- 用户交互性：通过输入框和按钮与用户进行交互。
- 简洁清晰：每部分代码有清晰的职责，注释有助于理解代码逻辑。
你可以将 index.html 和 game.js 文件分别保存在同一目录下，然后用浏览器打开 index.html 来进行游戏。如果你想添加更多功能，可以进一步扩展，比如限制最多猜测次数，或者让用户选择游戏的难度等。