学习h5【1】入门小游戏（气球小游戏）

本文链接：https://blog.csdn.net/liuhebahuang/article/details/130683190

该文章展示了一个使用HTML、CSS和JavaScript编写的简单互动小游戏。玩家需点击随机出现在游戏区域的红色气球来得分，每点击一个气球，分数增加1并显示在界面上。游戏通过定时器每秒生成一个新的气球，增加了游戏的挑战性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>点击气球小游戏</title>
</head>

<body>
    <h1>点击气球小游戏</h1>
    <p>分数: <span id="score">0</span></p>
    <div id="gameArea">
    </div>

    <script>
        // 定义分数变量
        var score = 0;
        // 获取游戏区域元素
        var gameArea = document.getElementById('gameArea');

        // 创建气球函数
        function createBalloon() {
            // 创建气球元素
            var balloon = document.createElement('div');
            balloon.classList.add('balloon');
            // 设置气球位置
            balloon.style.left = Math.random() * (gameArea.offsetWidth - 100) + 'px';
            balloon.style.top = Math.random() * (gameArea.offsetHeight - 100) + 'px';
            // 添加气球点击事件
            balloon.onclick = function() {
                // 移除气球元素
                gameArea.removeChild(balloon);
                // 分数加1
                score++;
                document.getElementById('score').innerHTML = score;
            }

            // 将气球元素添加到游戏区域中
            gameArea.appendChild(balloon);
        }

        // 定时器每秒钟创建一个气球
        setInterval(function() {
            createBalloon();
        }, 1000);

    </script>

    <style>
        /* 气球样式 */
        .balloon {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: red;
            position: absolute;
            cursor: pointer;
        }
    </style>

</body>

</html>