Spaces:
Running
Running
| <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> |