资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

猜数字游戏

创作时间:

作者:

@小白创作中心

猜数字游戏

引用

CSDN

等

来源

https://blog.csdn.net/2201_75813676/article/details/139023434

https://blog.csdn.net/2201_75396384/article/details/136819089

https://codesign.qq.com/hc/article/front-end-animation-introduction/

https://blog.csdn.net/m0_57344393/article/details/136109712

http://www.runoob.com/w3cnote/js-random.html

https://docs.pingcode.com/baike/3862330

https://developer.mozilla.org/zh-CN/docs/Web/Performance/CSS_JavaScript_animation_performance

https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/A_first_splash

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random#%E5%B0%9D%E8%AF%95%E4%B8%80%E4%B8%8B

10.

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random

11.

http://www.yxfzedu.com/article/9225

12.

https://docs.pingcode.com/baike/2314637

在这个教程中，我们将使用HTML、CSS和JavaScript开发一个简单的网页版猜数字游戏。这个游戏的目标是让玩家在1到100之间猜测一个由程序随机生成的数字。每次猜测后，系统会提示玩家猜得太高、太低还是正好猜中，并实时更新尝试次数。

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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>猜数字游戏</h1>
    <p>请输入一个1-100之间的数字：</p>
    <input type="number" id="userGuess" min="1" max="100">
    <br>
    <button id="submitGuess">提交</button>
    <p id="resultMessage"></p>
    <p id="attemptCount"></p>
    <ul id="guessHistory"></ul>
    <button id="resetGame">再来一次</button>

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

CSS样式

接下来，我们添加一些基本的CSS样式来美化界面：

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f8ff;
}

h1 {
    color: #333;
}

input {
    width: 100px;
    height: 30px;
    font-size: 16px;
    margin: 10px;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin: 10px;
}

button:hover {
    background-color: #45a049;
}

#resultMessage {
    color: red;
    font-weight: bold;
}

#guessHistory {
    margin-top: 20px;
}

JavaScript功能

现在，我们来实现核心的JavaScript功能：

// 生成1-100之间的随机数
const targetNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
const historyList = document.getElementById('guessHistory');

// 处理用户提交的猜测
document.getElementById('submitGuess').addEventListener('click', function() {
    const userGuess = parseInt(document.getElementById('userGuess').value);
    attempts++;

    if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
        document.getElementById('resultMessage').textContent = '请输入一个有效的数字（1-100）';
        return;
    }

    let message = '';
    if (userGuess === targetNumber) {
        message = `恭喜你，猜对了！答案就是${targetNumber}。你总共尝试了${attempts}次。`;
        document.getElementById('submitGuess').disabled = true;
    } else if (userGuess < targetNumber) {
        message = '太低了，再试试！';
    } else {
        message = '太高了，再试试！';
    }

    document.getElementById('resultMessage').textContent = message;
    document.getElementById('attemptCount').textContent = `尝试次数：${attempts}`;
    const li = document.createElement('li');
    li.textContent = `第${attempts}次猜测：${userGuess} - ${message}`;
    historyList.appendChild(li);
    document.getElementById('userGuess').value = '';
});

// 重置游戏
document.getElementById('resetGame').addEventListener('click', function() {
    location.reload();
});

动画效果（可选）

为了增加趣味性，我们可以在玩家猜对数字时添加一个简单的动画效果：

function animateCorrectGuess() {
    const resultElement = document.getElementById('resultMessage');
    let opacity = 1;
    const timer = setInterval(() => {
        if (opacity <= 0.1) {
            clearInterval(timer);
        }
        resultElement.style.opacity = opacity;
        opacity -= opacity * 0.1;
    }, 200);
}

// 在猜对时调用动画函数
if (userGuess === targetNumber) {
    message = `恭喜你，猜对了！答案就是${targetNumber}。你总共尝试了${attempts}次。`;
    document.getElementById('submitGuess').disabled = true;
    animateCorrectGuess();
}