一个非常简单的h5小游戏项目

最新推荐文章于 2024-04-01 10:14:34 发布

编程入门小助手

最新推荐文章于 2024-04-01 10:14:34 发布

阅读量230

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/kplnb1123/article/details/133071278

版权

这个小游戏叫做“猜数字游戏”，玩家需要猜出计算机生成的随机数字。

<!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 {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
        }
        #message {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>猜数字游戏</h1>
    <p>我已经想好了一个1到100之间的随机数字，看看你能不能猜中它！</p>
    <input type="number" id="guess" min="1" max="100">
    <button onclick="checkGuess()">猜一猜</button>
    <p id="message"></p>

    <script>
        // 生成随机数
        const randomNumber = Math.floor(Math.random() * 100) + 1;
        let attempts = 0;

        function checkGuess() {
            const guess = parseInt(document.getElementById("guess").value);

            if (isNaN(guess) || guess < 1 || guess > 100) {
                setMessage("请输入1到100之间的有效数字。");
                return;
            }

            attempts++;

            if (guess === randomNumber) {
                setMessage(`恭喜你，猜对了！你用了${attempts}次尝试。`);
                document.getElementById("guess").disabled = true;
            } else {
                const message = guess < randomNumber ? "猜低了，再试一次。" : "猜高了，再试一次。";
                setMessage(message);
            }
        }

        function setMessage(msg) {
            document.getElementById("message").textContent = msg;
        }
    </script>
</body>
</html>

小程序有跟多知识