前端实践选题:使用JavaScript实现猜数字小游戏 | 豆包MarsCode Al刷题引言相信大家都有玩过或者看见

该篇文章是本文人在学习了基础JavaScript课程后，想要通过一个完整的项目示例来演示一下如何使用JavaScript实现某个功能或解决某个问题，下面我将用JavaScript实现猜数字小游戏来给大家演示

引言

相信大家都有玩过或者看见过猜数字游戏，先有一个一定范围内的随机生成的固定数字，然后玩家进行猜测，猜测后会得到提示，比如“猜大了”、“猜小了”或“猜中了”，以此来缩小猜测的范围，最后看谁能够最快的猜出来这个数字。在学习了javascript后，我想要通过这门技术来给大家来给演示一下javascrpt是如何实现猜数字小游戏这个简易小项目的。

小游戏概述

猜数字小游戏主要包括以下几个功能：

随机生成一个指定范围内的数字。
允许玩家输入猜测的数字。
根据玩家的猜测给出提示。

啊哦，太大了，再试一次！
啊哦，太小了，再试一次！
恭喜你答对啦！正确的数字是xx,您一共尝试了xx次。
请输入数字范围在1-100之间
请输入一个数字

记录玩家猜测的次数
判断游戏是否结束，并显示结果。

项目实现

1. html页面框架设计

（1）创建guessNum.html文件

首先，我们需要创建一个新的html文件，我们可以命名为 guessNum.html，在这个文件中编写我们项目的基本框架。

（2）编写html文件代码

框架主要包含欢迎语、范围提示、输入框、开始猜测按钮和猜测结果提示

<div id="game">
    <h1>欢迎来到猜数字小游戏</h1>
    <p>请输入你猜测的数字（范围在1-100）</p>
    <input type="number" id="guess" placeholder="请输入数字">
    <button id="submit-guess">开始猜数</button>
    <p id="result"></p>
</div>

页面基本框架展示如图：

2. css样式编写

（1）创建guessNum.css文件

首先，我们需要创建一个新的css文件，我们可以命名为 guessNum.css，在这个文件中我们为我们编写的框架添加样式。

（2）编写css代码

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#game {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

input[type="number"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

（3）在html文件中引入css文件

<link rel="stylesheet" href="./guessNum.css">

添加样式后页面展示如下：

3. 基本逻辑实现

（1）创建guessNum.js文件

首先，我们需要创建一个新的JavaScript文件，我们可以命名为 guessNum.js。这个文件将包含我们的猜数字游戏的所有逻辑。

（2）设置事件监听器

document.addEventListener('DOMContentLoaded', function () {
    // 游戏逻辑将在这里实现
});

这段代码设置了一个事件监听器，它将在文档加载完成（DOM内容完全可用）后触发。这是一个常见的做法，确保在文档的元素可以被安全地访问和操作之前不会执行任何代码。

（3）定义游戏基本变量

const min = 1;
const max = 100;

这里定义了猜数字游戏的数字范围，最小值 min 为 1，最大值 max 为 100。

（4）使用Math.random生成随机数

let secretNumber = Math.floor(Math.random() * (max - min + 1)) + min;

（5）获取DOM元素

let attempts = document.getElementById('result');

通过 document.getElementById 方法获取到页面上用于显示猜测提示的元素，并将其引用存储在 attempts 变量中。

（6）为提交按钮添加事件监听器

document.getElementById('submit-guess').addEventListener('click', function () {
    // 事件处理逻辑将在这里实现
});

这行代码为提交按钮添加了一个点击事件监听器。当玩家点击按钮时，将执行括号内的函数。

（7）获取玩家的猜测

const guess = document.getElementById('guess').value;

当玩家点击提交按钮时，这行代码获取输入框（ID为 guess）中的玩家猜测值。

（8）验证玩家的输入

if (guess !== '' && !isNaN(guess)) {
    // 输入有效
} else {
    attempts.textContent = '请输入数字';
}

这段代码检查玩家的输入是否为空且是否为数字。如果不是，它将提示玩家输入一个有效的数字。

（9）处理玩家的猜测

guessCount++;  // 增加猜测次数
const userGuess = parseInt(guess, 10);
if (userGuess < min || userGuess > max) {
    attempts.textContent = '请输入数字范围在1-100之间';
} else if (userGuess === secretNumber) {
    // 猜测正确
} else if (userGuess < secretNumber) {
    // 猜测太小
} else {
    // 猜测太大
}

这段代码首先将猜测次数增加1，然后将玩家的输入转换为整数。接着，它检查玩家的猜测是否在指定范围内。如果不在范围内，它会提示玩家输入一个1到100之间的数字。如果猜测正确，它会显示恭喜信息并重置游戏。如果猜测太小或太大，它会相应地更新提示信息。

（10）猜测成功，重置游戏

document.getElementById('guess').value = '';
secretNumber = Math.floor(Math.random() * (max - min + 1)) + min;
guessCount = 0;

当玩家猜对数字后，这段代码会生成一个新的随机数并重置猜测次数，从而开始新一轮的游戏。

（11）在HTML文件中引入js文件

<script src="./guessNum.js"></script>

js完整代码：

// game.js
document.addEventListener('DOMContentLoaded', function () {
    // 设置猜数的范围
    const min = 1;
    const max = 100;
    // 生成随机数
    let secretNumber = Math.floor(Math.random() * (max - min + 1)) + min;
    console.log(secretNumber)
    let guessCount = 0;  // 记录猜测次数
    let attempts = document.getElementById('result');// 获取显示猜测次数的元素

    document.getElementById('submit-guess').addEventListener('click', function () {
        // 获取input中的猜测值
        const guess = document.getElementById('guess').value;
        if (guess !== '' && !isNaN(guess)) {
            guessCount++;  // 增加猜测次数
            const userGuess = parseInt(guess, 10);
            if (userGuess < min || userGuess > max) {
                attempts.textContent = '请输入数字范围在1-100之间';
            } else if (userGuess === secretNumber) {
                attempts.textContent = `恭喜你答对啦！正确的数字是 ${secretNumber}, 您一共尝试了 ${guessCount} 次`;
                attempts.style.color = 'green';
                // 重置secretNumber和猜测次数，input
                document.getElementById('guess').value = '';
                secretNumber = Math.floor(Math.random() * (max - min + 1)) + min;
                guessCount = 0;
                console.log(secretNumber)
            } else if (userGuess < secretNumber) {
                attempts.textContent = '啊哦，太小了，再试一次！';
            } else {
                attempts.textContent = '啊哦，太大了，再试一次！';
            }
            document.getElementById('guess').value = '';
        } else {
            attempts.textContent = '请输入数字';
        }
    });
});

总结

本文通过这个简单的猜数字游戏，展示了如何使用HTML、CSS和JavaScript来创建一个具有基本功能的项目实例。这个小项目可以作为学习JavaScript和Web开发的一个很好的起点。随着对前端知识的深入学习，我相信以后我可以更加熟练的运用这些前端工具，编写更好的前端项目。

最后如果文中有什么写的不好的地方，欢迎大家批评指正，非常感谢！

前端实践选题:使用JavaScript实现猜数字小游戏 | 豆包MarsCode Al刷题

引言