探索HTML中的猜数字小游戏，JavaScript必学

本文链接：https://blog.youkuaiyun.com/zsx0806/article/details/144357624

探索HTML中的猜数字小游戏，JavaScript必学

在网页开发的世界里，HTML、JavaScript等技术的组合能够创造出许多有趣的互动体验。

今天，我想和大家分享一个用HTML编写的简单却充满趣味的猜数字小游戏。

这个猜数字小游戏的界面十分简洁。在HTML的<body>部分，我们首先看到一个<h1>标签，上面写着“猜数字游戏”，这就是游戏的标题，简单明了地告诉玩家这是一个什么样的游戏。

接着是一个<p>标签，里面的文字“我已经想好了一个1到100之间的数字，你能猜到它吗？”，这是给玩家的一个提示信息，让他们知道游戏的规则大概是怎样的。

然后有一个<input>标签，类型为number，并且设置了id为guessInput。这个输入框就是玩家输入他们猜测数字的地方，通过设置id，方便在JavaScript中获取这个输入框的值。旁边还有一个<button>按钮，上面写着“猜一猜”，并且设置了onclick属性为checkGuess()。这意味着当玩家点击这个按钮时，就会调用名为checkGuess的JavaScript函数。最后还有一个<p>标签，设置了id为result，这个元素是用来显示游戏结果的。

在JavaScript部分，代码首先生成了一个随机数。const targetNumber = Math.floor(Math.random() * 100) + 1;这行代码看起来有点复杂，但其实原理很简单。Math.random()会生成一个0到1之间（不包括1）的随机数，然后乘以100得到0到100之间（不包括100）的随机数，再通过Math.floor向下取整得到一个整数，最后加1就得到了一个1到100之间的随机数，这个数字就是玩家要猜测的目标数字。

checkGuess函数是这个游戏的核心逻辑部分。当玩家点击“猜一猜”按钮时，这个函数就会被调用。函数首先通过const userGuess = parseInt(document.getElementById('guessInput').value);获取玩家在输入框中输入的内容，并尝试将其转换为整数。如果isNaN(userGuess)为true，也就是输入的不是一个数字，那么就会在结果显示区域（id为result的<p>标签）显示“请输入一个有效的数字”。如果输入的是一个数字，就会进行比较。如果userGuess === targetNumber，也就是玩家猜对了，就会显示“恭喜你，猜对了！”；如果userGuess < targetNumber，则显示“猜的数字小了，再试一次”；如果userGuess > targetNumber，则显示“猜的数字大了，再试一次”。

通过这个简单的HTML猜数字小游戏，我们可以看到如何将HTML和JavaScript结合起来创建一个互动性的小应用。这只是一个基础的示例，我们可以进一步扩展这个游戏，比如增加猜测次数限制、给玩家更多的提示等等。希望这个小游戏能够激发你对HTML和JavaScript互动性开发的兴趣。

完整代码如下：

```html
<!DOCTYPE html>
<html>

<head>
    <title>猜数字游戏</title>
</head>

<body>
    <h1>猜数字游戏</h1>
    <!-- 游戏标题 -->
    <p>我已经想好了一个1到100之间的数字，你能猜到它吗？</p>
    <!-- 游戏提示信息 -->
    <input type="number" id="guessInput">
    <!-- 创建一个输入框，用于玩家输入猜测的数字，id为guessInput方便后续在JavaScript中获取该元素 -->
    <button onclick="checkGuess()">猜一猜</button>
    <!-- 创建一个按钮，点击时调用checkGuess函数 -->
    <p id="result"></p>
    <!-- 创建一个段落元素，用于显示游戏结果 -->

    <script>
        const targetNumber = Math.floor(Math.random() * 100) + 1;
        // 生成一个1到100之间的随机整数，作为要猜测的目标数字
        // Math.random()会生成一个0到1之间的随机数（不包括1）
        // 乘以100得到0到100之间的随机数（不包括100）
        // Math.floor向下取整得到一个整数，再加1就得到1到100之间的随机数

        function checkGuess() {
            const userGuess = parseInt(document.getElementById('guessInput').value);
            // 获取输入框中的值，并将其转换为整数类型，存储在userGuess变量中
            // document.getElementById('guessInput')通过id获取输入框元素，.value获取其值，parseInt将其转换为整数

            if (isNaN(userGuess)) {
                document.getElementById('result').innerHTML = "请输入一个有效的数字";
                // 如果转换后的结果不是一个数字（isNaN判断），则在结果显示区域显示提示信息
            } else {
                if (userGuess === targetNumber) {
                    document.getElementById('result').innerHTML = "恭喜你，猜对了！";
                    // 如果玩家猜测的数字和目标数字相等，在结果显示区域显示猜对的提示
                } else if (userGuess < targetNumber) {
                    document.getElementById('result').innerHTML = "猜的数字小了，再试一次";
                    // 如果玩家猜测的数字小于目标数字，在结果显示区域显示数字小了的提示
                } else {
                    document.getElementById('result').innerHTML = "猜的数字大了，再试一次";
                    // 如果玩家猜测的数字大于目标数字，在结果显示区域显示数字大了的提示
                }
            }
        }
    </script>
</body>

</html>
```