Spaces:

dlma
/

subway

Running

File size: 11,032 Bytes

<!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;
        
        // Items with their points and emojis
        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' }
        ];
        
        // Update basket position on mouse/touch move
        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;
            
            // Keep basket within game area
            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`;
            
            // Randomize falling speed
            const duration = 3 + Math.random() * 4;
            itemElement.style.animationDuration = `${duration}s`;
            
            gameArea.appendChild(itemElement);
            
            // Check for collision
            const checkCollision = setInterval(() => {
                const itemRect = itemElement.getBoundingClientRect();
                const basketRect = basket.getBoundingClientRect();
                
                if (
                    itemRect.bottom >= basketRect.top &&
                    itemRect.right >= basketRect.left &&
                    itemRect.left <= basketRect.right
                ) {
                    // Collision detected
                    clearInterval(checkCollision);
                    updateScore(item.points);
                    itemElement.remove();
                    
                    // Show feedback
                    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);
                    
                    // Animate feedback
                    setTimeout(() => {
                        feedback.style.transition = 'all 0.5s';
                        feedback.style.opacity = '0';
                        feedback.style.transform = 'translateY(-20px)';
                        setTimeout(() => feedback.remove(), 500);
                    }, 100);
                }
                
                // Remove if out of bounds
                if (itemRect.top >= gameArea.offsetHeight) {
                    clearInterval(checkCollision);
                    itemElement.remove();
                }
            }, 16);
        }
        
        function updateScore(points) {
            score += points;
            score = Math.max(0, score); // Prevent negative 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');
            
            // Clear any existing items
            document.querySelectorAll('.falling-item').forEach(item => item.remove());
            
            // Start game loops
            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');
            
            // Show game over message
            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);
        
        // Handle window resize
        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>