如何制作猜数字小游戏

草莓屁屁我不吃

于 2024-08-07 15:27:23 发布

阅读量590

点赞数 28

文章标签： html javascript css

本文链接：https://blog.csdn.net/m0_65134936/article/details/140992296

版权

使用 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操作、时间处理和条件逻辑。

希望这篇文章对你有帮助~

感谢阅读！！！

草莓屁屁我不吃

关注

28
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何制作猜数字小游戏

本篇文章将逐步构建一个简单的“猜数字”游戏。通过这个项目，你将学习如何使用基础的HTML、CSS、JavaScript创建一个交互式网页应用。本次制作用到GPT-4o代码纠错，感兴趣的大佬可以试试这个，不用科学上网，写代码、写论文、以及商业和设计等等领域都可以用到。游戏的目标是让玩家猜测一个1到100之间的随机数字。玩家在输入框中输入猜测数字，并通过提示信息了解猜测结果是“太大”、“太小”还是“猜对了”。首先，我们需要创建一个基本的HTML页面结构。
复制链接

扫一扫