使用 HTML、CSS 和 JavaScript 创建猜数字游戏
本篇文章将逐步构建一个简单的“猜数字”游戏。通过这个项目，你将学习如何使用基础的HTML、CSS、JavaScript创建一个交互式网页应用。本次制作用到GPT-4o代码纠错，感兴趣的大佬可以试试这个363Ai工具箱，不用科学上网，写代码、写论文、以及商业和设计等等领域都可以用到。
游戏概括:
游戏的目标是让玩家猜测一个1到100之间的随机数字。玩家在输入框中输入猜测数字，并通过提示信息了解猜测结果是“太大”、“太小”还是“猜对了”。
步骤1：HTML结构
首先，我们需要创建一个基本的HTML页面结构。这个页面包括标题、说明文字、输入框、提交按钮和显示结果的区域。
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字游戏</title>
<style>
/* CSS 样式将在后面详细说明 */
</style>
</head>
<body>
<h1>猜数字游戏</h1>
<p>我想了一个 1 到 100 的数字。你能猜到吗？</p>
<input type="number" id="guessInput" min="1" max="100" placeholder="输入你的猜测">
<button id="submitGuess">提交</button>
<div id="message"></div>
<script>
// JavaScript 逻辑将在后面详细说明
</script>
</body>
</html>运行界面：
这就是一个简单的HTML基础页面
步骤2：CSS样式
为了让页面看起来更加整洁，我们将为其添加一些基本的样式。这些样式会使内容居中，应设置字体和背景颜色。
代码展示:
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#message {
margin-top: 20px;
font-size: 20px;
color: #333;
}
input, button {
padding: 10px;
margin: 10px;
font-size: 16px;
}样式解释
- display: flex 和 flex-direction: column：将页面内容垂直居中排列。
- align-items 和 justify-content：用于使内容在垂直和水平方向上居中。
- 背景颜色和字体：提升用户体验。
步骤3：JavaScript逻辑
接下来，我们将实现游戏的核心功能:随机生成一个数字，并根据玩家的输入提供反馈。
代码展示：
const randomNumber = Math.floor(Math.random() * 100) + 1;
const message = document.getElementById('message');
const guessInput = document.getElementById('guessInput');
const submitGuess = document.getElementById('submitGuess');
submitGuess.addEventListener('click', () => {
const userGuess = Number(guessInput.value);
if (userGuess < 1 || userGuess > 100) {
message.textContent = '请输入 1 到 100 之间的数字。';
} else if (userGuess < randomNumber) {
message.textContent = '太小了！再试一次。';
} else if (userGuess > randomNumber) {
message.textContent = '太大了！再试一次。';
} else {
message.textContent = '恭喜你！猜对了！';
}
guessInput.value = '';
});JavaScript详解
1.随机数生成：
- Math.random() 生成 0 到 1 之间的随机小数。
- Math.floor(Math.random() * 100) + 1 将其转换为 1 到 100 的整数。
2.获取DOM元素：
- document.getElementById 用于获取输入框、按钮和消息显示区域。
3.添加事件监听器:
- addEventListener('click', ...) 监听按钮点击事件。
4.逻辑判断：
- 判断用户输入是否在有效范围内。
- 根据用户输入和随机数的大小，更新消息内容。
5.清空输入框：
- 每次提交后清空输入框以便于再次输入。
如果你想添加一个重玩游戏的功能，代码演示：
更新HTML
在HTML中添加一个“重玩”按钮。
<button id="restartGame">重玩</button>更新JavaScript
在JavaScript中实现重置逻辑。
let randomNumber = Math.floor(Math.random() * 100) + 1;
const message = document.getElementById('message');
const guessInput = document.getElementById('guessInput');
const submitGuess = document.getElementById('submitGuess');
const restartGame = document.getElementById('restartGame');
submitGuess.addEventListener('click', () => {
const userGuess = Number(guessInput.value);
if (userGuess < 1 || userGuess > 100) {
message.textContent = '请输入 1 到 100 之间的数字。';
} else if (userGuess < randomNumber) {
message.textContent = '太小了！再试一次。';
} else if (userGuess > randomNumber) {
message.textContent = '太大了！再试一次。';
} else {
message.textContent = '恭喜你！猜对了！';
}
guessInput.value = '';
});
restartGame.addEventListener('click', () => {
randomNumber = Math.floor(Math.random() * 100) + 1;
message.textContent = '';
guessInput.value = '';
});解释：
- 新按钮：添加了一个“重玩”按钮。
- 重置逻辑：点击“重玩”按钮时，重新生成一个随机数，并清空消息和输入框。
这样就可以在游戏结束后重新开始游戏了。
游戏界面：
以下是完整的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字游戏</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#message {
margin-top: 20px;
font-size: 20px;
color: #333;
}
input, button {
padding: 10px;
margin: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>猜数字游戏</h1>
<p>我想了一个 1 到 100 的数字。你能猜到吗？</p>
<input type="number" id="guessInput" min="1" max="100" placeholder="输入你的猜测">
<button id="submitGuess">提交</button>
<button id="restartGame">重玩</button>
<div id="message"></div>
<script>
let randomNumber = Math.floor(Math.random() * 100) + 1;
const message = document.getElementById('message');
const guessInput = document.getElementById('guessInput');
const submitGuess = document.getElementById('submitGuess');
const restartGame = document.getElementById('restartGame');
submitGuess.addEventListener('click', () => {
const userGuess = Number(guessInput.value);
if (userGuess < 1 || userGuess > 100) {
message.textContent = '请输入 1 到 100 之间的数字。';
} else if (userGuess < randomNumber) {
message.textContent = '太小了！再试一次。';
} else if (userGuess > randomNumber) {
message.textContent = '太大了！再试一次。';
} else {
message.textContent = '恭喜你！猜对了！';
}
guessInput.value = '';
});
restartGame.addEventListener('click', () => {
randomNumber = Math.floor(Math.random() * 100) + 1;
message.textContent = '';
guessInput.value = '';
});
</script>
</body>
</html>将上述代码复制到一个 HTML 文件中，然后在浏览器中打开即可运行游戏。祝你玩得愉快！
结论
通过这个简单小游戏项目，我们学习了如何组合使用HTML、CSS和JavaScript创建一个简单的交互网页应用。这个游戏适合初学者练习基本的网页开发技能，包括DOM操作、时间处理和条件逻辑。
希望这篇文章对你有帮助~
感谢阅读！！！
