Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>QOBubbleTrouble Game</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| touch-action: manipulation; | |
| background: linear-gradient(to bottom right, #4a00e0, #8e2de2); | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: Arial, sans-serif; | |
| color: white; | |
| } | |
| #gameContainer { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| .smiley { | |
| position: absolute; | |
| font-size: 40px; | |
| cursor: pointer; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| animation: float 2s infinite ease-in-out; | |
| text-shadow: 0 0 10px rgba(255,255,255,0.5); | |
| transition: transform 0.2s; | |
| } | |
| .smiley:hover { | |
| transform: scale(1.2); | |
| } | |
| #scoreDisplay { | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; | |
| font-size: 24px; | |
| background: rgba(0,0,0,0.5); | |
| padding: 10px 20px; | |
| border-radius: 20px; | |
| z-index: 100; | |
| } | |
| #timerDisplay { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| font-size: 24px; | |
| background: rgba(0,0,0,0.5); | |
| padding: 10px 20px; | |
| border-radius: 20px; | |
| z-index: 100; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| #gameOver { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.8); | |
| display: none; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 200; | |
| } | |
| #gameOver h1 { | |
| font-size: 48px; | |
| color: #ffcc00; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| #finalScore { | |
| font-size: 36px; | |
| margin-bottom: 30px; | |
| } | |
| #restartButton { | |
| padding: 15px 30px; | |
| background: linear-gradient(to right, #ff416c, #ff4b2b); | |
| border: none; | |
| border-radius: 30px; | |
| color: white; | |
| font-size: 18px; | |
| cursor: pointer; | |
| transition: transform 0.3s; | |
| } | |
| #restartButton:hover { | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="gameContainer"> | |
| <div id="scoreDisplay">Score: 0</div> | |
| <div id="timerDisplay">Time: 30s</div> | |
| <div id="gameOver"> | |
| <h1>🎉 Congratulations! 🎉</h1> | |
| <div id="finalScore">Your score: 0</div> | |
| <button id="restartButton">Play Again</button> | |
| </div> | |
| </div> | |
| <script> | |
| // Game variables | |
| let score = 0; | |
| let timeLeft = 30; | |
| let gameActive = false; | |
| let gameInterval; | |
| let timerInterval; | |
| const smileys = ['😀', '😊', '🤩', '😎', '🥳', '😍', '🤪', '😜', '😂', '😇']; | |
| // DOM elements | |
| const gameContainer = document.getElementById('gameContainer'); | |
| const scoreDisplay = document.getElementById('scoreDisplay'); | |
| const timerDisplay = document.getElementById('timerDisplay'); | |
| const gameOverScreen = document.getElementById('gameOver'); | |
| const finalScoreDisplay = document.getElementById('finalScore'); | |
| const restartButton = document.getElementById('restartButton'); | |
| // Start game | |
| startGame(); | |
| function startGame() { | |
| // Reset game state | |
| score = 0; | |
| timeLeft = 30; | |
| gameActive = true; | |
| // Clear any existing elements | |
| gameContainer.querySelectorAll('.smiley').forEach(el => el.remove()); | |
| // Update displays | |
| scoreDisplay.textContent = `Score: ${score}`; | |
| timerDisplay.textContent = `Time: ${timeLeft}s`; | |
| // Hide game over screen | |
| gameOverScreen.style.display = 'none'; | |
| // Start game loop | |
| gameInterval = setInterval(spawnSmiley, 500); | |
| // Start timer | |
| timerInterval = setInterval(updateTimer, 1000); | |
| } | |
| function spawnSmiley() { | |
| if (!gameActive) return; | |
| const smiley = document.createElement('div'); | |
| smiley.className = 'smiley'; | |
| smiley.textContent = smileys[Math.floor(Math.random() * smileys.length)]; | |
| // Random position (with margins) | |
| const x = Math.random() * (window.innerWidth - 100) + 50; | |
| const y = Math.random() * (window.innerHeight - 100) + 50; | |
| smiley.style.left = `${x}px`; | |
| smiley.style.top = `${y}px`; | |
| // Random size | |
| const size = Math.random() * 30 + 30; | |
| smiley.style.fontSize = `${size}px`; | |
| // Click handler | |
| smiley.addEventListener('click', () => { | |
| if (!gameActive) return; | |
| score++; | |
| scoreDisplay.textContent = `Score: ${score}`; | |
| // Animation when clicked | |
| smiley.style.transform = 'scale(1.5)'; | |
| smiley.style.opacity = '0'; | |
| setTimeout(() => smiley.remove(), 200); | |
| }); | |
| // Auto-remove after 2 seconds if not clicked | |
| setTimeout(() => { | |
| if (smiley.parentNode) smiley.remove(); | |
| }, 2000); | |
| gameContainer.appendChild(smiley); | |
| } | |
| function updateTimer() { | |
| timeLeft--; | |
| timerDisplay.textContent = `Time: ${timeLeft}s`; | |
| if (timeLeft <= 0) { | |
| endGame(); | |
| } | |
| } | |
| function endGame() { | |
| gameActive = false; | |
| clearInterval(gameInterval); | |
| clearInterval(timerInterval); | |
| // Show game over screen | |
| finalScoreDisplay.textContent = `Your score: ${score}`; | |
| gameOverScreen.style.display = 'flex'; | |
| } | |
| // Restart button handler | |
| restartButton.addEventListener('click', startGame); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| if (gameActive) { | |
| // Reposition all smileys to stay visible | |
| document.querySelectorAll('.smiley').forEach(smiley => { | |
| const x = Math.random() * (window.innerWidth - 100) + 50; | |
| const y = Math.random() * (window.innerHeight - 100) + 50; | |
| smiley.style.left = `${x}px`; | |
| smiley.style.top = `${y}px`; | |
| }); | |
| } | |
| }); | |
| // Prevent default touch behavior | |
| document.addEventListener('touchstart', (e) => { | |
| if (e.target === gameContainer) e.preventDefault(); | |
| }, { passive: false }); | |
| document.addEventListener('touchend', (e) => { | |
| if (e.target === gameContainer) e.preventDefault(); | |
| }, { passive: false }); | |
| </script> | |
| </body> | |
| </html> |