使用html5制作一个猜数字小游戏

2201_75396384

已于 2024-03-18 19:51:19 修改

阅读量684

点赞数 12

文章标签： html5 前端 html

于 2024-03-18 19:42:15 首次发布

本文链接：https://blog.csdn.net/2201_75396384/article/details/136819089

版权

最终成果如下：

直接上代码（给作者一点赞赏呗，求求了......）

<!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 {
        font-family: Arial, sans-serif;
        text-align: center;
        background-color: #f5f5f5;
        margin: 0;
        padding: 0;
    }
    .container {
        max-width: 400px;
        margin: 100px auto;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    h1 {
        color: #007bff;
    }
    #guessInput {
        padding: 10px;
        margin-top: 20px;
        border: 2px solid #007bff;
        border-radius: 5px;
        font-size: 18px;
        width: 80%;
    }
    #submitBtn, #restartBtn {
        padding: 10px 20px;
        margin-top: 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    #submitBtn:hover, #restartBtn:hover {
        background-color: #0056b3;
    }
    #message {
        margin-top: 20px;
        font-size: 18px;
    }
</style>
</head>
<body>
<div class="container">
    <h1>猜数字游戏</h1>
    <p>在 1 到 100 之间猜一个数字。</p>
    <input type="number" id="guessInput" min="1" max="100" placeholder="输入你的猜测">
    <br>
    <button id="submitBtn">提交</button>
    <br>
    <p id="message"></p>
    <br>
    <button id="restartBtn" style="display: none;">重新开始游戏</button>
</div>

<script>
    const config = {
        maxAttempts: 10
    };

    let state = {
        randomNumber: generateRandomNumber(),
        attempts: 0,
        gameOver: false
    };

    function generateRandomNumber() {
        return Math.floor(Math.random() * 100) + 1;
    }

    function displayMessage(msg, color) {
        const message = document.getElementById('message');
        message.textContent = msg;
        message.style.color = color;
    }

    function updateUI() {
        const { gameOver } = state;
        document.getElementById('guessInput').disabled = gameOver;
        document.getElementById('submitBtn').disabled = gameOver;
        document.getElementById('restartBtn').style.display = gameOver ? 'inline-block' : 'none';
    }

    function restartGame() {
        state.randomNumber = generateRandomNumber();
        state.attempts = 0;
        state.gameOver = false;
        displayMessage('', 'black');
        updateUI();
    }

    function handleGuess() {
        const guessInput = document.getElementById('guessInput');
        const guess = parseInt(guessInput.value);
        const { randomNumber, attempts, gameOver } = state;

        if (isNaN(guess) || guess < 1 || guess > 100) {
            displayMessage('请输入 1 到 100 之间的有效数字！', 'red');
            return;
        }

        state.attempts++;

        if (guess === randomNumber) {
            displayMessage(`恭喜你，你猜对了！你用了 ${attempts} 次猜测。`, 'green');
            state.gameOver = true;
        } else if (guess < randomNumber) {
            displayMessage('太小了，请尝试更大的数字。', 'red');
        } else {
            displayMessage('太大了，请尝试更小的数字。', 'red');
        }

        if (attempts >= config.maxAttempts) {
            displayMessage(`游戏结束，你已经用完了 ${config.maxAttempts} 次猜测。正确答案是 ${randomNumber}。`, 'red');
            state.gameOver = true;
        }

        updateUI();
        guessInput.value = '';
        guessInput.focus();
    }

    document.getElementById('submitBtn').addEventListener('click', handleGuess);
    document.getElementById('restartBtn').addEventListener('click', restartGame);
</script>
</body>
</html>