Spaces:

ALLEN20250302
/

coding-generation

Running

File size: 9,181 Bytes

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>气球爆破小游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        #game-container {
            position: relative;
            width: 100%;
            height: 80vh;
            background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 100%);
            overflow: hidden;
        }
        
        .balloon {
            position: absolute;
            width: 60px;
            height: 80px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.1s;
        }
        
        .balloon:before {
            content: "";
            position: absolute;
            width: 4px;
            height: 40px;
            background: #333;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .pop {
            transform: scale(1.5);
            opacity: 0;
            transition: all 0.2s;
        }
        
        .score-panel {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            padding: 10px;
        }
        
        #start-screen, #game-over {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, 0.6);
            z-index: 100;
        }
    </style>
</head>
<body class="bg-blue-50 font-sans">
    <div class="max-w-md mx-auto px-4 py-6">
        <h1 class="text-3xl font-bold text-center text-blue-600 mb-4">气球爆破</h1>
        
        <div class="flex justify-between items-center score-panel mb-4">
            <div class="text-lg">
                <span class="font-bold">分数:</span> 
                <span id="score">0</span>
            </div>
            <div class="text-lg">
                <span class="font-bold">时间:</span> 
                <span id="time">60</span>秒
            </div>
        </div>
        
        <div id="game-container">
            <!-- 游戏界面 -->
            <div id="start-screen">
                <h2 class="text-3xl font-bold text-white mb-6">气球爆破</h2>
                <p class="text-xl text-white mb-8">点击气球得分，60秒内得分最多!</p>
                <button id="start-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg">
                    开始游戏
                </button>
            </div>
            
            <div id="game-over" style="display: none;">
                <h2 class="text-3xl font-bold text-white mb-4">游戏结束!</h2>
                <p class="text-2xl text-yellow-300 mb-4">最终得分: <span id="final-score">0</span></p>
                <button id="restart-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg">
                    再来一次
                </button>
            </div>
        </div>
        
        <div class="mt-6 text-center text-gray-600">
            <p>点击上升的气球获得分数</p>
            <p class="mt-2 text-sm">不同颜色气球分值不同</p>
        </div>
    </div>

    <script>
        // 游戏变量
        let score = 0;
        let timeLeft = 60;
        let gameInterval;
        let timer;
        let balloonInterval;
        let balloonCount = 0;
        const maxBalloons = 15;
        
        // DOM元素
        const gameContainer = document.getElementById('game-container');
        const startScreen = document.getElementById('start-screen');
        const gameOverScreen = document.getElementById('game-over');
        const startBtn = document.getElementById('start-btn');
        const restartBtn = document.getElementById('restart-btn');
        const scoreDisplay = document.getElementById('score');
        const timeDisplay = document.getElementById('time');
        const finalScoreDisplay = document.getElementById('final-score');
        
        // 气球颜色及对应分数
        const balloonTypes = [
            { color: '#FF5252', score: 1 },   // 红色
            { color: '#4CAF50', score: 2 },   // 绿色
            { color: '#2196F3', score: 3 },   // 蓝色
            { color: '#FFC107', score: 5 },   // 黄色
            { color: '#9C27B0', score: 8 }    // 紫色
        ];
        
        // 开始游戏
        startBtn.addEventListener('click', startGame);
        restartBtn.addEventListener('click', startGame);
        
        function startGame() {
            // 重置游戏状态
            score = 0;
            timeLeft = 60;
            scoreDisplay.textContent = score;
            timeDisplay.textContent = timeLeft;
            
            // 清除现有气球
            document.querySelectorAll('.balloon').forEach(balloon => {
                balloon.remove();
            });
            balloonCount = 0;
            
            // 隐藏开始和结束画面
            startScreen.style.display = 'none';
            gameOverScreen.style.display = 'none';
            
            // 启动游戏循环
            gameInterval = setInterval(updateGame, 16);
            
            // 启动气球创建
            balloonInterval = setInterval(createBalloon, 800);
            
            // 启动计时器
            timer = setInterval(() => {
                timeLeft--;
                timeDisplay.textContent = timeLeft;
                
                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);
        }
        
        function updateGame() {
            // 移动所有气球
            document.querySelectorAll('.balloon').forEach(balloon => {
                const top = parseInt(balloon.style.top);
                balloon.style.top = (top - 1) + 'px';
                
                // 移除超出屏幕的气球
                if (top < -100) {
                    balloon.remove();
                    balloonCount--;
                }
            });
        }
        
        function createBalloon() {
            if (balloonCount >= maxBalloons) return;
            
            balloonCount++;
            
            // 随机选择气球类型
            const balloonType = balloonTypes[Math.floor(Math.random() * balloonTypes.length)];
            
            // 创建气球元素
            const balloon = document.createElement('div');
            balloon.className = 'balloon';
            balloon.dataset.score = balloonType.score;
            
            // 设置气球样式
            balloon.style.backgroundColor = balloonType.color;
            balloon.style.boxShadow = `inset -5px -5px 10px rgba(0,0,0,0.2)`;
            balloon.style.left = Math.random() * (gameContainer.offsetWidth - 60) + 'px';
            balloon.style.top = gameContainer.offsetHeight + 'px';
            
            // 气球点击事件
            balloon.addEventListener('click', function() {
                score += parseInt(this.dataset.score);
                scoreDisplay.textContent = score;
                this.classList.add('pop');
                
                // 播放爆破音效
                playPopSound();
                
                // 移除气球
                setTimeout(() => {
                    this.remove();
                    balloonCount--;
                }, 200);
            });
            
            gameContainer.appendChild(balloon);
        }
        
        function playPopSound() {
            // 微信中需要使用wx.createInnerAudioContext()
            const audio = new Audio();
            audio.src = "data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU...";
            audio.play().catch(e => console.log("无法播放音效:", e));
        }
        
        function endGame() {
            clearInterval(gameInterval);
            clearInterval(timer);
            clearInterval(balloonInterval);
            
            // 显示最终得分
            finalScoreDisplay.textContent = score;
            gameOverScreen.style.display = 'flex';
        }
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=ALLEN20250302/coding-generation" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>