Spaces:
Running
Running
| <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> |