js如何编写猜数游戏

时间：2026-03-17 11:50:31

编写一个简单的猜数字游戏（Guess the Number Game）在 JavaScript 中非常简单。这个游戏通常会让用户输入一个数字，然后程序会判断这个数字是否正确，是否太大或太小，直到用户猜中为止。

下面是一个完整的 JavaScript 示例，你可以复制并运行它：

✅ 示例：猜数字游戏（Guess the Number）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>猜数字游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        #game {
            margin: 20px auto;
            width: 300px;
        }
        input[type="number"] {
            padding: 10px;
            width: 80%;
            font-size: 18px;
        }
        button {
            padding: 10px;
            font-size: 18px;
            cursor: pointer;
        }
        #result {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>

    <h1>猜数字游戏</h1>
    <div id="game">
        <p>我想了一个 1-100 之间的数字，你能猜出来吗？</p>
        <input type="number" id="guess" placeholder="输入你的猜测">
        <button onclick="checkGuess()">猜一猜</button>
        <div id="result"></div>
    </div>

    <script>
        // 生成一个 1-100 之间的随机数
        let secretNumber = Math.floor(Math.random() * 100) + 1;

        function checkGuess() {
            const guess = parseInt(document.getElementById('guess').value);
            const resultDiv = document.getElementById('result');

            if (isNaN(guess)) {
                resultDiv.textContent = "请输入一个数字！";
                return;
            }

            if (guess < secretNumber) {
                resultDiv.textContent = "太小了！";
            } else if (guess > secretNumber) {
                resultDiv.textContent = "太大了！";
            } else {
                resultDiv.textContent = "恭喜你！猜对了！";
                document.getElementById('guess').value = ""; // 清空输入框
                document.getElementById('result').textContent = ""; // 清空结果
            }
        }
    </script>

</body>
</html>

手机游戏图文推荐

js如何编写猜数游戏相关文章