用JS制作简单的猜数字游戏 - 在线体验 - 常规

这是一个简单的猜数字游戏，玩家需要在限定的次数内猜出计算机随机生成的数字。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字游戏</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>猜数字游戏</h1>
    <p>请在1到100之间猜一个整数，您有10次机会。</p>
    <input type="text" id="guessInput" placeholder="请输入数字">
    <br>
    <button id="submitBtn">猜</button>
    <p id="result"></p>
    <script src="game.js"></script>
</body>
</html>

JavaScript：

// 生成1到100之间的随机整数
var randomNumber = Math.floor(Math.random() * 100) + 1;

var guessInput = document.getElementById("guessInput");
var submitBtn = document.getElementById("submitBtn");
var result = document.getElementById("result");
var guessCount = 0;
var guessLimit = 10;
var isGameOver = false;

submitBtn.addEventListener("click", function() {
    if (isGameOver) {
        return;
    }

    // 获取玩家猜的数字
    var guess = parseInt(guessInput.value);
    if (isNaN(guess) || guess < 1 || guess > 100) {
        result.innerHTML = "请输入1到100之间的整数。";
        return;
    }

    // 猜测次数加1
    guessCount++;

    // 判断猜测是否正确
    if (guess === randomNumber) {
        result.innerHTML = "恭喜你，猜对了！你用了" + guessCount + "次机会。";
        isGameOver = true;
        return;
    } else if (guessCount === guessLimit) {
        result.innerHTML = "很遗憾，你没有猜对。正确答案是" + randomNumber + "。";
        isGameOver = true;
        return;
    }

    // 判断猜测是否过大或过小
    var message = guess < randomNumber ? "太小了。" : "太大了。";
    result.innerHTML = message + "你还有" + (guessLimit - guessCount) + "次机会。";
});