| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Pake Mane Game</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| @keyframes fall { |
| from { transform: translateY(-100px); } |
| to { transform: translateY(calc(100vh - 100px)); } |
| } |
| |
| .falling-item { |
| animation: fall linear forwards; |
| position: absolute; |
| width: 50px; |
| height: 50px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 24px; |
| } |
| |
| #gameArea { |
| position: relative; |
| width: 100%; |
| height: calc(100vh - 100px); |
| overflow: hidden; |
| background-color: #f0f9ff; |
| } |
| |
| #basket { |
| transition: left 0.1s ease-out; |
| } |
| |
| .score-bounce { |
| animation: scoreBounce 0.5s; |
| } |
| |
| @keyframes scoreBounce { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.5); } |
| } |
| </style> |
| </head> |
| <body class="bg-blue-50 min-h-screen flex flex-col items-center"> |
| <div class="container mx-auto px-4 py-8"> |
| <h1 class="text-4xl font-bold text-center text-blue-600 mb-2">Pake Mane</h1> |
| <p class="text-center text-blue-500 mb-6">Catch the falling items with your basket!</p> |
| |
| <div class="flex justify-between items-center mb-4"> |
| <div class="text-xl font-semibold"> |
| Score: <span id="score" class="text-blue-600">0</span> |
| </div> |
| <div class="text-xl font-semibold"> |
| Time: <span id="time" class="text-blue-600">60</span>s |
| </div> |
| </div> |
| |
| <div id="gameArea" class="border-2 border-blue-300 rounded-lg bg-gradient-to-b from-blue-100 to-blue-200"> |
| <div id="basket" class="absolute bottom-0 w-24 h-16 bg-orange-500 rounded-t-lg flex items-center justify-center"> |
| <div class="w-full h-2 bg-orange-700 rounded-full"></div> |
| </div> |
| </div> |
| |
| <div class="mt-6 flex justify-center space-x-4"> |
| <button id="startBtn" class="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition"> |
| Start Game |
| </button> |
| <button id="resetBtn" class="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition"> |
| Reset |
| </button> |
| </div> |
| |
| <div class="mt-8 bg-white p-4 rounded-lg shadow-md"> |
| <h2 class="text-xl font-semibold text-blue-600 mb-2">How to Play</h2> |
| <ul class="list-disc pl-5 space-y-1"> |
| <li>Use mouse or touch to move the basket left and right</li> |
| <li>Catch as many items as you can in 60 seconds</li> |
| <li>Different items give different points</li> |
| <li>Avoid the bombs that deduct points!</li> |
| </ul> |
| </div> |
| </div> |
| |
| <script> |
| const gameArea = document.getElementById('gameArea'); |
| const basket = document.getElementById('basket'); |
| const scoreDisplay = document.getElementById('score'); |
| const timeDisplay = document.getElementById('time'); |
| const startBtn = document.getElementById('startBtn'); |
| const resetBtn = document.getElementById('resetBtn'); |
| |
| let score = 0; |
| let timeLeft = 60; |
| let gameInterval; |
| let timeInterval; |
| let isGameRunning = false; |
| let gameWidth = gameArea.offsetWidth; |
| let basketWidth = basket.offsetWidth; |
| |
| |
| const items = [ |
| { emoji: '🍎', points: 1, color: 'bg-red-400' }, |
| { emoji: '🍌', points: 2, color: 'bg-yellow-300' }, |
| { emoji: '🍇', points: 3, color: 'bg-purple-400' }, |
| { emoji: '🍒', points: 2, color: 'bg-red-500' }, |
| { emoji: '💣', points: -5, color: 'bg-gray-700' } |
| ]; |
| |
| |
| gameArea.addEventListener('mousemove', moveBasket); |
| gameArea.addEventListener('touchmove', (e) => { |
| e.preventDefault(); |
| const touch = e.touches[0]; |
| moveBasket({ clientX: touch.clientX }); |
| }); |
| |
| function moveBasket(e) { |
| if (!isGameRunning) return; |
| |
| const gameRect = gameArea.getBoundingClientRect(); |
| let newPosition = e.clientX - gameRect.left - basketWidth / 2; |
| |
| |
| newPosition = Math.max(0, Math.min(newPosition, gameWidth - basketWidth)); |
| |
| basket.style.left = `${newPosition}px`; |
| } |
| |
| function createFallingItem() { |
| if (!isGameRunning) return; |
| |
| const item = items[Math.floor(Math.random() * items.length)]; |
| const itemElement = document.createElement('div'); |
| itemElement.className = `falling-item ${item.color} rounded-full shadow-md`; |
| itemElement.textContent = item.emoji; |
| |
| const startPosition = Math.random() * (gameWidth - 50); |
| itemElement.style.left = `${startPosition}px`; |
| |
| |
| const duration = 3 + Math.random() * 4; |
| itemElement.style.animationDuration = `${duration}s`; |
| |
| gameArea.appendChild(itemElement); |
| |
| |
| const checkCollision = setInterval(() => { |
| const itemRect = itemElement.getBoundingClientRect(); |
| const basketRect = basket.getBoundingClientRect(); |
| |
| if ( |
| itemRect.bottom >= basketRect.top && |
| itemRect.right >= basketRect.left && |
| itemRect.left <= basketRect.right |
| ) { |
| |
| clearInterval(checkCollision); |
| updateScore(item.points); |
| itemElement.remove(); |
| |
| |
| const feedback = document.createElement('div'); |
| feedback.className = 'absolute text-xl font-bold'; |
| feedback.textContent = item.points > 0 ? `+${item.points}` : `${item.points}`; |
| feedback.style.color = item.points > 0 ? 'green' : 'red'; |
| feedback.style.left = `${itemRect.left}px`; |
| feedback.style.top = `${itemRect.top}px`; |
| gameArea.appendChild(feedback); |
| |
| |
| setTimeout(() => { |
| feedback.style.transition = 'all 0.5s'; |
| feedback.style.opacity = '0'; |
| feedback.style.transform = 'translateY(-20px)'; |
| setTimeout(() => feedback.remove(), 500); |
| }, 100); |
| } |
| |
| |
| if (itemRect.top >= gameArea.offsetHeight) { |
| clearInterval(checkCollision); |
| itemElement.remove(); |
| } |
| }, 16); |
| } |
| |
| function updateScore(points) { |
| score += points; |
| score = Math.max(0, score); |
| scoreDisplay.textContent = score; |
| scoreDisplay.classList.add('score-bounce'); |
| setTimeout(() => scoreDisplay.classList.remove('score-bounce'), 500); |
| } |
| |
| function updateTimer() { |
| timeLeft--; |
| timeDisplay.textContent = timeLeft; |
| |
| if (timeLeft <= 10) { |
| timeDisplay.classList.add('text-red-500'); |
| } |
| |
| if (timeLeft <= 0) { |
| endGame(); |
| } |
| } |
| |
| function startGame() { |
| if (isGameRunning) return; |
| |
| isGameRunning = true; |
| score = 0; |
| timeLeft = 60; |
| scoreDisplay.textContent = score; |
| timeDisplay.textContent = timeLeft; |
| timeDisplay.classList.remove('text-red-500'); |
| |
| |
| document.querySelectorAll('.falling-item').forEach(item => item.remove()); |
| |
| |
| gameInterval = setInterval(createFallingItem, 800); |
| timeInterval = setInterval(updateTimer, 1000); |
| |
| startBtn.disabled = true; |
| startBtn.classList.add('opacity-50'); |
| } |
| |
| function endGame() { |
| isGameRunning = false; |
| clearInterval(gameInterval); |
| clearInterval(timeInterval); |
| |
| startBtn.disabled = false; |
| startBtn.classList.remove('opacity-50'); |
| |
| |
| const gameOver = document.createElement('div'); |
| gameOver.className = 'absolute inset-0 flex items-center justify-center bg-black bg-opacity-70 text-white text-3xl font-bold'; |
| gameOver.textContent = `Game Over! Score: ${score}`; |
| gameArea.appendChild(gameOver); |
| |
| setTimeout(() => gameOver.remove(), 3000); |
| } |
| |
| function resetGame() { |
| endGame(); |
| score = 0; |
| timeLeft = 60; |
| scoreDisplay.textContent = score; |
| timeDisplay.textContent = timeLeft; |
| timeDisplay.classList.remove('text-red-500'); |
| document.querySelectorAll('.falling-item').forEach(item => item.remove()); |
| } |
| |
| startBtn.addEventListener('click', startGame); |
| resetBtn.addEventListener('click', resetGame); |
| |
| |
| window.addEventListener('resize', () => { |
| gameWidth = gameArea.offsetWidth; |
| }); |
| </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=dlma/subway" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
