Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Touch the Emoji Game</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .emoji { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .emoji:hover { | |
| transform: scale(1.1); | |
| } | |
| .emoji:active { | |
| transform: scale(0.9); | |
| } | |
| .happy-emoji { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.2); } | |
| 100% { transform: scale(1); } | |
| } | |
| .score-change { | |
| position: absolute; | |
| font-weight: bold; | |
| animation: floatUp 1s forwards; | |
| } | |
| @keyframes floatUp { | |
| 0% { opacity: 1; transform: translateY(0); } | |
| 100% { opacity: 0; transform: translateY(-50px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-100 to-purple-100 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-purple-800 mb-2">Touch the Emoji!</h1> | |
| <p class="text-lg text-gray-700">But be careful - touching 😊 will deduct points!</p> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-xl p-8 w-full max-w-md relative overflow-hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="text-2xl font-bold text-gray-800"> | |
| Score: <span id="score">100</span> | |
| </div> | |
| <div class="text-lg text-gray-600"> | |
| Time: <span id="time">30</span>s | |
| </div> | |
| </div> | |
| <div class="relative h-64 bg-gray-100 rounded-xl mb-6 flex items-center justify-center"> | |
| <div id="game-area" class="w-full h-full flex flex-wrap items-center justify-center gap-4 p-4"> | |
| <!-- Emojis will appear here --> | |
| </div> | |
| <div id="game-over" class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-4">Game Over!</h2> | |
| <p class="text-xl text-white mb-6">Your final score: <span id="final-score">0</span></p> | |
| <button id="restart-btn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded-full transition"> | |
| Play Again | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div class="text-sm text-gray-600"> | |
| <i class="fas fa-heart text-red-500 mr-1"></i> <span id="lives">3</span> lives | |
| </div> | |
| <div class="text-sm text-gray-600"> | |
| Level: <span id="level">1</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-gray-600"> | |
| <p>Find and click on other emojis to earn points!</p> | |
| <p class="text-sm mt-2">Avoid the happy face 😊 - it will reduce your score!</p> | |
| </div> | |
| <script> | |
| // Game variables | |
| let score = 100; | |
| let timeLeft = 30; | |
| let gameInterval; | |
| let emojiInterval; | |
| let lives = 3; | |
| let level = 1; | |
| let gameActive = true; | |
| const emojis = ['😊', '😢', '😡', '😍', '🤔', '😎', '🥶', '🤯', '🥺', '🤢']; | |
| const pointValues = { | |
| '😊': -20, | |
| '😢': 10, | |
| '😡': 15, | |
| '😍': 25, | |
| '🤔': 5, | |
| '😎': 20, | |
| '🥶': 15, | |
| '🤯': 30, | |
| '🥺': 10, | |
| '🤢': 5 | |
| }; | |
| // DOM elements | |
| const gameArea = document.getElementById('game-area'); | |
| const scoreElement = document.getElementById('score'); | |
| const timeElement = document.getElementById('time'); | |
| const livesElement = document.getElementById('lives'); | |
| const levelElement = document.getElementById('level'); | |
| const gameOverScreen = document.getElementById('game-over'); | |
| const finalScoreElement = document.getElementById('final-score'); | |
| const restartBtn = document.getElementById('restart-btn'); | |
| // Start the game | |
| function startGame() { | |
| score = 100; | |
| timeLeft = 30; | |
| lives = 3; | |
| level = 1; | |
| gameActive = true; | |
| updateUI(); | |
| gameOverScreen.classList.add('hidden'); | |
| // Start timer | |
| clearInterval(gameInterval); | |
| gameInterval = setInterval(() => { | |
| timeLeft--; | |
| timeElement.textContent = timeLeft; | |
| if (timeLeft <= 0) { | |
| endGame(); | |
| } | |
| }, 1000); | |
| // Start emoji generation | |
| clearInterval(emojiInterval); | |
| generateEmojis(); | |
| emojiInterval = setInterval(generateEmojis, 2000 - (level * 150)); | |
| } | |
| // Generate random emojis | |
| function generateEmojis() { | |
| if (!gameActive) return; | |
| gameArea.innerHTML = ''; | |
| const emojiCount = Math.min(3 + Math.floor(level / 2), 8); | |
| for (let i = 0; i < emojiCount; i++) { | |
| const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)]; | |
| const emojiElement = document.createElement('div'); | |
| emojiElement.className = 'emoji text-4xl'; | |
| if (randomEmoji === '😊') { | |
| emojiElement.classList.add('happy-emoji'); | |
| } | |
| emojiElement.textContent = randomEmoji; | |
| // Random position | |
| const posX = Math.random() * 80; | |
| const posY = Math.random() * 80; | |
| emojiElement.style.position = 'absolute'; | |
| emojiElement.style.left = `${posX}%`; | |
| emojiElement.style.top = `${posY}%`; | |
| emojiElement.addEventListener('click', () => handleEmojiClick(randomEmoji, emojiElement)); | |
| gameArea.appendChild(emojiElement); | |
| } | |
| } | |
| // Handle emoji click | |
| function handleEmojiClick(emoji, element) { | |
| if (!gameActive) return; | |
| const points = pointValues[emoji]; | |
| score += points; | |
| // Show score change | |
| const scoreChange = document.createElement('div'); | |
| scoreChange.className = 'score-change text-xl'; | |
| scoreChange.textContent = (points > 0 ? '+' : '') + points; | |
| scoreChange.style.color = points > 0 ? 'green' : 'red'; | |
| const rect = element.getBoundingClientRect(); | |
| const gameRect = gameArea.getBoundingClientRect(); | |
| scoreChange.style.left = `${rect.left - gameRect.left + rect.width / 2}px`; | |
| scoreChange.style.top = `${rect.top - gameRect.top}px`; | |
| gameArea.appendChild(scoreChange); | |
| setTimeout(() => scoreChange.remove(), 1000); | |
| // Special effects for happy emoji | |
| if (emoji === '😊') { | |
| gameArea.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; | |
| setTimeout(() => { | |
| gameArea.style.backgroundColor = ''; | |
| }, 300); | |
| lives--; | |
| if (lives <= 0) { | |
| endGame(); | |
| } | |
| } | |
| // Update UI | |
| updateUI(); | |
| // Remove clicked emoji | |
| element.remove(); | |
| // Level up check | |
| if (score >= 100 + (level * 50)) { | |
| levelUp(); | |
| } | |
| } | |
| // Update UI elements | |
| function updateUI() { | |
| scoreElement.textContent = Math.max(0, score); | |
| livesElement.textContent = lives; | |
| levelElement.textContent = level; | |
| } | |
| // Level up | |
| function levelUp() { | |
| level++; | |
| timeLeft += 5; // Bonus time | |
| clearInterval(emojiInterval); | |
| emojiInterval = setInterval(generateEmojis, 2000 - (level * 150)); | |
| // Show level up message | |
| const levelUpMsg = document.createElement('div'); | |
| levelUpMsg.className = 'absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white text-2xl font-bold'; | |
| levelUpMsg.textContent = `Level ${level}!`; | |
| gameArea.appendChild(levelUpMsg); | |
| setTimeout(() => { | |
| levelUpMsg.remove(); | |
| generateEmojis(); | |
| }, 1000); | |
| } | |
| // End the game | |
| function endGame() { | |
| gameActive = false; | |
| clearInterval(gameInterval); | |
| clearInterval(emojiInterval); | |
| gameArea.innerHTML = ''; | |
| finalScoreElement.textContent = Math.max(0, score); | |
| gameOverScreen.classList.remove('hidden'); | |
| } | |
| // Event listeners | |
| restartBtn.addEventListener('click', startGame); | |
| // Start the game when page loads | |
| window.addEventListener('load', startGame); | |
| </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=amirpoorazima/is-alive" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |