分享一個簡單有趣的網頁小游戲 - 彩色泡泡爆破。玩家需要點擊屏幕上隨機出現的彩色泡泡來得分。?
<!DOCTYPE html>
<html lang="zh">
<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: #f0f8ff;margin: 0;padding: 20px;overflow: hidden;user-select: none;}#game-container {position: relative;width: 100%;height: 70vh;border: 2px dashed #ccc;border-radius: 10px;margin: 20px auto;background-color: white;}.bubble {position: absolute;border-radius: 50%;cursor: pointer;transition: transform 0.1s;box-shadow: 0 0 10px rgba(0,0,0,0.2);}.bubble:hover {transform: scale(1.05);}#score-display {font-size: 24px;margin: 10px;color: #333;}#timer {font-size: 20px;margin: 10px;color: #e74c3c;}#start-btn {padding: 10px 20px;font-size: 18px;background-color: #2ecc71;color: white;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;}#start-btn:hover {background-color: #27ae60;}#game-over {display: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(255, 255, 255, 0.9);padding: 20px;border-radius: 10px;box-shadow: 0 0 20px rgba(0,0,0,0.3);}</style>
</head>
<body><h1>彩色泡泡爆破</h1><p>點擊出現的泡泡得分！60秒內看你能得多少分！</p><div id="score-display">得分: 0</div><div id="timer">剩余時間: 60秒</div><button id="start-btn">開始游戲</button><div id="game-container"><div id="game-over"><h2>游戲結束!</h2><p id="final-score">你的得分: 0</p><button id="restart-btn">再玩一次</button></div></div><script>const gameContainer = document.getElementById('game-container');const scoreDisplay = document.getElementById('score-display');const timerDisplay = document.getElementById('timer');const startBtn = document.getElementById('start-btn');const gameOverDiv = document.getElementById('game-over');const finalScoreDisplay = document.getElementById('final-score');const restartBtn = document.getElementById('restart-btn');let score = 0;let timeLeft = 60;let gameInterval;let timerInterval;let isGameRunning = false;// 泡泡顏色數組const bubbleColors = ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF', '#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41', '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40'];// 創建泡泡function createBubble() {if (!isGameRunning) return;const bubble = document.createElement('div');bubble.className = 'bubble';// 隨機大小 (30-80px)const size = Math.floor(Math.random() * 50) + 30;bubble.style.width = `${size}px`;bubble.style.height = `${size}px`;// 隨機位置const maxX = gameContainer.clientWidth - size;const maxY = gameContainer.clientHeight - size;const posX = Math.floor(Math.random() * maxX);const posY = Math.floor(Math.random() * maxY);bubble.style.left = `${posX}px`;bubble.style.top = `${posY}px`;// 隨機顏色const colorIndex = Math.floor(Math.random() * bubbleColors.length);bubble.style.backgroundColor = bubbleColors[colorIndex];// 點擊事件bubble.addEventListener('click', () => {if (!isGameRunning) return;// 播放爆破音效playPopSound();// 增加分數score++;scoreDisplay.textContent = `得分: ${score}`;// 爆破動畫bubble.style.transform = 'scale(1.2)';bubble.style.opacity = '0';// 移除泡泡setTimeout(() => {bubble.remove();}, 200);});gameContainer.appendChild(bubble);// 泡泡自動消失 (3-6秒)setTimeout(() => {if (bubble.parentNode) {bubble.style.opacity = '0';setTimeout(() => bubble.remove(), 300);}}, Math.random() * 3000 + 3000);}// 播放爆破音效function playPopSound() {const popSound = new Audio();popSound.src = 'https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3';popSound.play().catch(e => console.log('無法播放音效:', e));}// 開始游戲function startGame() {if (isGameRunning) return;// 重置游戲狀態score = 0;timeLeft = 60;isGameRunning = true;scoreDisplay.textContent = `得分: ${score}`;timerDisplay.textContent = `剩余時間: ${timeLeft}秒`;gameOverDiv.style.display = 'none';// 清除所有現有泡泡document.querySelectorAll('.bubble').forEach(bubble => bubble.remove());// 開始生成泡泡gameInterval = setInterval(createBubble, 800);// 開始倒計時timerInterval = setInterval(() => {timeLeft--;timerDisplay.textContent = `剩余時間: ${timeLeft}秒`;if (timeLeft <= 0) {endGame();}}, 1000);}// 結束游戲function endGame() {isGameRunning = false;clearInterval(gameInterval);clearInterval(timerInterval);// 顯示游戲結束界面finalScoreDisplay.textContent = `你的得分: ${score}`;gameOverDiv.style.display = 'block';}// 事件監聽startBtn.addEventListener('click', startGame);restartBtn.addEventListener('click', startGame);</script>
</body>
</html>游戲特點
-
彩色泡泡：隨機大小、顏色和位置出現的泡泡
-
點擊得分：點擊泡泡得分，有爆破動畫效果
-
時間限制：60秒倒計時挑戰
-
音效反饋：點擊泡泡時有爆破音效
-
響應式設計：適應不同屏幕大小
如何擴展這個游戲
-
添加不同分數的特殊泡泡（如金色泡泡得5分）
-
增加難度級別（泡泡出現速度隨時間加快）
-
添加連擊系統（快速連續點擊泡泡獲得額外分數）
-
添加本地存儲功能保存最高分
-
增加更多動畫效果和音效
![[ctfshow web入門] web5](http://pic.xiahunao.cn/[ctfshow web入門] web5)
)
