简单的HTML小游戏

原创已于 2024-09-21 16:55:06 修改 · 806 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript #css

于 2024-09-21 16:53:22 首次发布

下面是一个简单的HTML小游戏示例——“猜数字”游戏。玩家需要猜一个1到100之间的随机数字，程序会告诉玩家猜的数字是太高还是太低，直到猜中为止。

如何使用这个程序
将上述代码复制并粘贴到一个新的文本文件中，并将其保存为 guess_number_game.html。
在你的网页浏览器中打开 guess_number_game.html 文件。

开始游戏，输入一个1到100之间的数字并点击“提交猜测”按钮，程序会告诉你你猜的数字是太高、太低，还是猜对了。
如果猜对了，可以点击“重新开始游戏”按钮重新开始游戏。

这个小游戏可以帮助你理解基本的HTML结构、CSS样式以及如何使用JavaScript处理用户输入和事件。你可以尝试修改代码，让这个游戏变得更有趣！

这是整个游戏的代码，包括HTML、CSS和JavaScript：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>
<body>

    <h1>猜数字游戏</h1>
    <p>请猜一个1到100之间的数字：</p>
    <input type="number" id="guess" min="1" max="100">
    <button onclick="checkGuess()">提交猜测</button>

    <div class="result" id="result"></div>
    <button onclick="restartGame()" style="display: none;" id="restartBtn">重新开始游戏</button>

    <script>
        let randomNumber = Math.floor(Math.random() * 100) + 1;
        let attempts = 0;

        function checkGuess() {
            const userGuess = Number(document.getElementById('guess').value);
            attempts++;

            if (userGuess === randomNumber) {
                document.getElementById('result').textContent = `恭喜你！猜对了！你总共猜了 ${attempts} 次。`;
                document.getElementById('restartBtn').style.display = 'inline-block';
            } else if (userGuess < randomNumber) {
                document.getElementById('result').textContent = '太低了！再试试。';
            } else if (userGuess > randomNumber) {
                document.getElementById('result').textContent = '太高了！再试试。';
            }
        }

        function restartGame() {
            randomNumber = Math.floor(Math.random() * 100) + 1;
            attempts = 0;
            document.getElementById('guess').value = '';
            document.getElementById('result').textContent = '';
            document.getElementById('restartBtn').style.display = 'none';
        }
    </script>

</body>
</html>