使用 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操作、时间处理和条件逻辑。
希望这篇文章对你有帮助~
感谢阅读！！！
