Spaces:

porkz
/

piggy-paradise

Running

File size: 21,499 Bytes

71fdc04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cute Piglets 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>
        @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
        
        body {
            font-family: 'Comic Neue', cursive;
            background-color: #FFF5F5;
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMTkyLDIwMywwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
        }

        .piglet {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .piglet::before {
            content: '';
            position: absolute;
            top: 30%;
            left: 30%;
            width: 40%;
            height: 40%;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: scale(0);
            transition: transform 0.3s ease;
        }

        .piglet:hover::before {
            transform: scale(1);
        }

        .piglet.hungry {
            animation: pulse 1.5s infinite;
        }

        .piglet.fed {
            transform: scale(1.05);
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .progress-bar {
            height: 8px;
            border-radius: 4px;
            background-color: #F3F4F6;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            transition: width 0.5s ease;
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #F472B6;
            opacity: 0;
        }

        @keyframes confetti-fall {
            0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(1000px) rotate(360deg); opacity: 0; }
        }

        .farm-bg {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDApIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2ZmZjVmNSIvPjxwYXRoIGQ9Ik0gMCwwIEwgMCwxMDAgTCAxMDAsMTAwIEwgMTAwLDAgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDIxNCwxNjMsMTY3LDAuMSkiIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
            border-radius: 20px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .piglet-face {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .piglet-eyes {
            display: flex;
            gap: 20px;
            margin-bottom: 10px;
        }

        .piglet-eye {
            width: 20px;
            height: 20px;
            background-color: #333;
            border-radius: 50%;
            position: relative;
        }

        .piglet-eye::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
            top: 4px;
            left: 4px;
        }

        .piglet-nose {
            width: 40px;
            height: 30px;
            background-color: #F472B6;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .piglet-nostrils {
            display: flex;
            gap: 8px;
        }

        .piglet-nostril {
            width: 8px;
            height: 8px;
            background-color: #333;
            border-radius: 50%;
        }

        .piglet-mouth {
            width: 30px;
            height: 15px;
            border-bottom: 3px solid #333;
            border-radius: 0 0 20px 20px;
            margin-top: 10px;
        }

        .piglet-mouth.happy {
            border-bottom: 3px solid #333;
            border-radius: 0 0 20px 20px;
            transform: scaleY(0.7);
        }

        .piglet-mouth.sad {
            border-top: 3px solid #333;
            border-radius: 20px 20px 0 0;
            border-bottom: none;
            transform: scaleY(0.7);
        }

        .tooltip {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            white-space: nowrap;
        }

        .piglet:hover .tooltip {
            opacity: 1;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
    <div class="max-w-4xl w-full">
        <div class="text-center mb-8">
            <h1 class="text-5xl font-bold text-pink-600 mb-2">Piggy Paradise</h1>
            <p class="text-xl text-pink-500">Feed all the hungry piglets before they get too cranky!</p>
        </div>

        <div class="farm-bg p-8 mb-8">
            <div class="flex justify-between items-center mb-6">
                <div class="flex items-center gap-4">
                    <div class="bg-pink-100 p-3 rounded-full">
                        <i class="fas fa-stopwatch text-pink-600 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-gray-600">Time played</p>
                        <p id="timer" class="text-2xl font-bold text-pink-600">00:00</p>
                    </div>
                </div>
                
                <div class="flex items-center gap-4">
                    <div class="bg-pink-100 p-3 rounded-full">
                        <i class="fas fa-trophy text-pink-600 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-gray-600">Score</p>
                        <p id="score" class="text-2xl font-bold text-pink-600">0</p>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 piglets-grid mb-6"></div>

            <div class="flex flex-col items-center game-status">
                <div class="bg-pink-100 rounded-full px-6 py-3 mb-4 shadow-md">
                    <p id="status-message" class="text-pink-700 font-bold text-lg">Click on piglets to feed them!</p>
                </div>
                <button id="restart-btn" class="hidden bg-pink-600 hover:bg-pink-700 text-white font-bold py-2 px-6 rounded-full transition-all transform hover:scale-105">
                    Play Again <i class="fas fa-redo ml-2"></i>
                </button>
            </div>
        </div>

        <div class="text-center text-gray-500">
            <p>Made with <i class="fas fa-heart text-pink-500"></i> for pig lovers everywhere</p>
        </div>
    </div>

    <script>
        // Game elements
        const pigletsGrid = document.querySelector('.piglets-grid');
        const statusMessage = document.getElementById('status-message');
        const timerElement = document.getElementById('timer');
        const scoreElement = document.getElementById('score');
        const restartBtn = document.getElementById('restart-btn');

        // Game variables
        let piglets = [];
        let gameOver = false;
        let score = 0;
        let seconds = 0;
        let timerInterval;
        let hungryCount = 0;

        // Initialize game
        function initGame() {
            // Reset game state
            pigletsGrid.innerHTML = '';
            piglets = [];
            gameOver = false;
            score = 0;
            seconds = 0;
            hungryCount = 0;
            scoreElement.textContent = score;
            timerElement.textContent = '00:00';
            statusMessage.textContent = 'Click on piglets to feed them!';
            restartBtn.classList.add('hidden');
            
            // Clear existing timer
            if (timerInterval) clearInterval(timerInterval);
            
            // Start timer
            timerInterval = setInterval(updateTimer, 1000);
            
            // Create piglets
            for (let i = 0; i < 8; i++) {
                createPiglet(i);
            }
        }

        // Create a piglet element
        function createPiglet(index) {
            const piglet = document.createElement('div');
            piglet.classList.add('piglet', 'relative', 'rounded-full', 'bg-pink-300', 'cursor-pointer', 'overflow-hidden');
            piglet.dataset.index = index;
            piglet.dataset.hunger = Math.floor(Math.random() * 40 + 60); // Start between 60-100
            piglet.dataset.lastFed = 0;
            
            // Create piglet face
            const pigletFace = document.createElement('div');
            pigletFace.classList.add('piglet-face');
            
            // Eyes
            const eyes = document.createElement('div');
            eyes.classList.add('piglet-eyes');
            
            const leftEye = document.createElement('div');
            leftEye.classList.add('piglet-eye');
            
            const rightEye = document.createElement('div');
            rightEye.classList.add('piglet-eye');
            
            eyes.appendChild(leftEye);
            eyes.appendChild(rightEye);
            
            // Nose
            const nose = document.createElement('div');
            nose.classList.add('piglet-nose');
            
            const nostrils = document.createElement('div');
            nostrils.classList.add('piglet-nostrils');
            
            const leftNostril = document.createElement('div');
            leftNostril.classList.add('piglet-nostril');
            
            const rightNostril = document.createElement('div');
            rightNostril.classList.add('piglet-nostril');
            
            nostrils.appendChild(leftNostril);
            nostrils.appendChild(rightNostril);
            nose.appendChild(nostrils);
            
            // Mouth
            const mouth = document.createElement('div');
            mouth.classList.add('piglet-mouth', 'happy');
            
            pigletFace.appendChild(eyes);
            pigletFace.appendChild(nose);
            pigletFace.appendChild(mouth);
            
            // Progress bar
            const progressContainer = document.createElement('div');
            progressContainer.classList.add('progress-bar', 'w-4/5', 'mt-2', 'mx-auto');
            
            const progressFill = document.createElement('div');
            progressFill.classList.add('progress-fill', 'bg-pink-500');
            progressFill.style.width = `${piglet.dataset.hunger}%`;
            
            progressContainer.appendChild(progressFill);
            
            // Tooltip
            const tooltip = document.createElement('div');
            tooltip.classList.add('tooltip');
            tooltip.textContent = `Hunger: ${piglet.dataset.hunger}%`;
            
            piglet.appendChild(pigletFace);
            piglet.appendChild(progressContainer);
            piglet.appendChild(tooltip);
            
            pigletsGrid.appendChild(piglet);
            piglets.push(piglet);
        }

        // Update timer
        function updateTimer() {
            if (!gameOver) {
                seconds++;
                const minutes = Math.floor(seconds / 60);
                const remainingSeconds = seconds % 60;
                timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
            }
        }

        // Update piglet hunger levels
        setInterval(() => {
            if (!gameOver) {
                hungryCount = 0;
                
                piglets.forEach((piglet) => {
                    let hunger = parseInt(piglet.dataset.hunger);
                    hunger -= 1;
                    piglet.dataset.hunger = hunger;
                    piglet.dataset.lastFed = parseInt(piglet.dataset.lastFed) + 1;
                    
                    // Update progress bar
                    const progressFill = piglet.querySelector('.progress-fill');
                    progressFill.style.width = `${hunger}%`;
                    
                    // Update tooltip
                    const tooltip = piglet.querySelector('.tooltip');
                    tooltip.textContent = `Hunger: ${hunger}%`;
                    
                    // Update appearance based on hunger
                    const mouth = piglet.querySelector('.piglet-mouth');
                    
                    if (hunger <= 30) {
                        hungryCount++;
                        piglet.classList.add('hungry');
                        piglet.classList.remove('bg-pink-300', 'bg-green-200');
                        piglet.classList.add('bg-pink-500');
                        mouth.classList.remove('happy');
                        mouth.classList.add('sad');
                        progressFill.classList.remove('bg-pink-500', 'bg-green-400');
                        progressFill.classList.add('bg-red-500');
                    } else if (hunger >= 70) {
                        piglet.classList.remove('hungry', 'bg-pink-500');
                        piglet.classList.add('bg-pink-300');
                        mouth.classList.remove('sad');
                        mouth.classList.add('happy');
                        progressFill.classList.remove('bg-red-500', 'bg-green-400');
                        progressFill.classList.add('bg-pink-500');
                    }
                    
                    // If recently fed
                    if (parseInt(piglet.dataset.lastFed) < 5 && hunger > 30) {
                        piglet.classList.remove('bg-pink-300', 'bg-pink-500');
                        piglet.classList.add('bg-green-200');
                        progressFill.classList.remove('bg-pink-500', 'bg-red-500');
                        progressFill.classList.add('bg-green-400');
                    }
                });
                
                checkGameStatus();
            }
        }, 1000);

        // Feed piglet on click
        pigletsGrid.addEventListener('click', (e) => {
            let target = e.target;
            
            // Find the piglet element (might have clicked on child elements)
            while (target && !target.classList.contains('piglet') && target !== pigletsGrid) {
                target = target.parentElement;
            }
            
            if (target.classList.contains('piglet') && !gameOver) {
                const piglet = target;
                let hunger = parseInt(piglet.dataset.hunger);
                
                // Only feed if not already full
                if (hunger < 100) {
                    hunger += 30;
                    if (hunger > 100) hunger = 100;
                    piglet.dataset.hunger = hunger;
                    piglet.dataset.lastFed = 0;
                    
                    // Update progress bar
                    const progressFill = piglet.querySelector('.progress-fill');
                    progressFill.style.width = `${hunger}%`;
                    progressFill.classList.remove('bg-red-500');
                    progressFill.classList.add('bg-green-400');
                    
                    // Update tooltip
                    const tooltip = piglet.querySelector('.tooltip');
                    tooltip.textContent = `Hunger: ${hunger}%`;
                    
                    // Visual feedback
                    piglet.classList.remove('hungry', 'bg-pink-500');
                    piglet.classList.add('bg-green-200');
                    
                    const mouth = piglet.querySelector('.piglet-mouth');
                    mouth.classList.remove('sad');
                    mouth.classList.add('happy');
                    
                    // Add to score
                    score += 10;
                    scoreElement.textContent = score;
                    
                    // Create feed effect
                    createFeedEffect(piglet);
                }
            }
        });

        // Create feed effect (hearts animation)
        function createFeedEffect(piglet) {
            for (let i = 0; i < 5; i++) {
                const heart = document.createElement('div');
                heart.innerHTML = '<i class="fas fa-heart text-pink-500"></i>';
                heart.classList.add('absolute', 'text-xl', 'animate-bounce', 'opacity-70');
                heart.style.left = `${Math.random() * 60 + 20}%`;
                heart.style.top = `${Math.random() * 60 + 20}%`;
                heart.style.animationDuration = `${Math.random() * 0.5 + 0.5}s`;
                heart.style.animationDelay = `${i * 0.1}s`;
                
                piglet.appendChild(heart);
                
                // Remove after animation
                setTimeout(() => {
                    heart.remove();
                }, 1000);
            }
        }

        // Create confetti effect
        function createConfetti() {
            const container = document.querySelector('.farm-bg');
            
            for (let i = 0; i < 100; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                confetti.style.left = `${Math.random() * 100}%`;
                confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 75%)`;
                confetti.style.width = `${Math.random() * 10 + 5}px`;
                confetti.style.height = `${Math.random() * 10 + 5}px`;
                confetti.style.animation = `confetti-fall ${Math.random() * 3 + 2}s linear forwards`;
                confetti.style.animationDelay = `${Math.random() * 0.5}s`;
                
                container.appendChild(confetti);
                
                // Remove after animation
                setTimeout(() => {
                    confetti.remove();
                }, 3000);
            }
        }

        // Check game status
        function checkGameStatus() {
            const allFed = piglets.every((piglet) => parseInt(piglet.dataset.hunger) >= 70);
            
            if (allFed) {
                gameOver = true;
                clearInterval(timerInterval);
                statusMessage.textContent = 'Congratulations! All piglets are happy and fed!';
                restartBtn.classList.remove('hidden');
                createConfetti();
                
                // Bonus points for time
                const timeBonus = Math.max(0, 500 - seconds * 2);
                score += timeBonus;
                scoreElement.textContent = score;
                
                if (timeBonus > 0) {
                    setTimeout(() => {
                        statusMessage.textContent = `Time bonus: +${timeBonus} points!`;
                    }, 2000);
                }
            } else {
                if (hungryCount === 0) {
                    statusMessage.textContent = 'All piglets are content! Keep feeding them!';
                } else if (hungryCount === 1) {
                    statusMessage.textContent = '1 piglet is hungry! Click to feed!';
                } else {
                    statusMessage.textContent = `${hungryCount} piglets are hungry! Feed them!`;
                }
            }
        }

        // Restart game
        restartBtn.addEventListener('click', initGame);

        // Start the game
        initGame();
    </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=porkz/piggy-paradise" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>