怎么制作一个简单的html页面猜数字游戏

最新推荐文章于 2024-03-18 19:42:15 发布

mowang_hongci

最新推荐文章于 2024-03-18 19:42:15 发布

阅读量538

点赞数 5

文章标签： html

本文链接：https://blog.csdn.net/mowang_hongci/article/details/136404012

版权

制作一个简单的HTML页面经典的"猜数字"游戏。玩家有几次机会猜测一个由计算机生成的在一定范围内的随机数。每次猜测后，玩家会收到提示，告诉他们猜测的数字是太高、太低还是正确。

HTML

首先，我们需要创建游戏的HTML界面，包括一个输入框让玩家输入他们的猜测，一个按钮来提交猜测，以及一个用于显示提示和结果的段落。

<!DOCTYPE html>
<html lang="en">
<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之间的数字，你有10次机会猜它是什么。</p>
    <input type="number" id="guessInput" placeholder="输入数字...">
    <button onclick="checkGuess()">猜测</button>
    <p id="feedback"></p>

    <script src="game.js"></script>
</body>
</html>

JavaScript

接下来，我们需要编写JavaScript代码来实现游戏逻辑。这包括生成一个随机数，接收玩家的猜测，以及根据猜测给出反馈。

保存以下代码为game.js，并确保它与HTML文件位于同一目录下，这样HTML文件就可以正确地引用它。

let secretNumber = Math.floor(Math.random() * 100) + 1;
let guessesRemaining = 10;

function checkGuess() {
    let guessInput = document.getElementById('guessInput');
    let guess = Number(guessInput.value);
    let feedback = document.getElementById('feedback');

    if (guess < 1 || guess > 100) {
        feedback.textContent = '请输入一个1到100之间的数字。';
        return;
    }

    guessesRemaining -= 1;

    if (guess === secretNumber) {
        feedback.textContent = `恭喜你！答对了。数字是${secretNumber}。`;
        endGame();
    } else if (guessesRemaining === 0) {
        feedback.textContent = `游戏结束。正确答案是${secretNumber}。`;
        endGame();
    } else if (guess < secretNumber) {
        feedback.textContent = '太低了。';
    } else if (guess > secretNumber) {
        feedback.textContent = '太高了。';
    }

    feedback.textContent += ` 你还有${guessesRemaining}次猜测机会。`;
}

function endGame() {
    document.getElementById('guessInput').disabled = true;
    document.getElementById('feedback').textContent += ' 游戏已结束，请刷新页面重新开始。';
}