Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Throw Poop at Trump</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .poop { | |
| transition: transform 0.2s; | |
| } | |
| .poop:hover { | |
| transform: scale(1.1); | |
| } | |
| .politician-hit { | |
| animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; | |
| } | |
| @keyframes shake { | |
| 10%, 90% { transform: translate3d(-1px, 0, 0); } | |
| 20%, 80% { transform: translate3d(2px, 0, 0); } | |
| 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } | |
| 40%, 60% { transform: translate3d(4px, 0, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-blue-100 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-red-600 mb-2">Throw Poop at Trump!</h1> | |
| <p class="text-lg md:text-xl text-gray-700">Click on the poops to throw them at the politician</p> | |
| <div class="mt-4 flex justify-center items-center gap-4"> | |
| <div class="bg-yellow-200 px-4 py-2 rounded-full shadow-md"> | |
| <span class="font-bold text-yellow-800">Pontuação: </span> | |
| <span id="score" class="text-2xl font-bold">0</span> | |
| </div> | |
| <div class="bg-green-200 px-4 py-2 rounded-full shadow-md"> | |
| <span class="font-bold text-green-800">Tempo: </span> | |
| <span id="time" class="text-2xl font-bold">30</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative w-full max-w-2xl h-96 bg-blue-200 rounded-xl shadow-xl overflow-hidden mb-8"> | |
| <!-- Politician --> | |
| <div id="politician" class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-40 md:w-48 transition-all duration-300"> | |
| <img src="https://i.imgur.com/5f8W5bZ.png" alt="Donald Trump" class="w-full h-auto"> | |
| </div> | |
| <!-- Poops container --> | |
| <div id="poop-container" class="absolute top-0 left-0 w-full h-full pointer-events-none"></div> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-4 mb-8" id="poop-selection"> | |
| <button class="poop bg-yellow-700 text-white px-6 py-3 rounded-full shadow-lg hover:bg-yellow-800 transition" data-type="normal"> | |
| Merda Normal | |
| </button> | |
| <button class="poop bg-green-700 text-white px-6 py-3 rounded-full shadow-lg hover:bg-green-800 transition" data-type="rapid"> | |
| Merda Rápida | |
| </button> | |
| <button class="poop bg-purple-700 text-white px-6 py-3 rounded-full shadow-lg hover:bg-purple-800 transition" data-type="explosive"> | |
| 💣 Merda Explosiva | |
| </button> | |
| </div> | |
| <button id="start-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-4 px-8 rounded-full text-xl shadow-lg transition transform hover:scale-105"> | |
| Start the Chaos! | |
| </button> | |
| <div id="game-over" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50"> | |
| <div class="bg-white p-8 rounded-xl max-w-md w-full text-center"> | |
| <h2 class="text-3xl font-bold text-red-600 mb-4">Game Over!</h2> | |
| <p class="text-xl mb-6">You hit Trump <span id="final-score" class="font-bold text-2xl">0</span> times!</p> | |
| <button id="restart-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition"> | |
| Play Again | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Game variables | |
| let score = 0; | |
| let timeLeft = 30; | |
| let gameActive = false; | |
| let gameInterval; | |
| let timeInterval; | |
| let poopType = 'normal'; | |
| let politicianPosition = 50; // 0-100 percentage | |
| // DOM elements | |
| const scoreElement = document.getElementById('score'); | |
| const timeElement = document.getElementById('time'); | |
| const politicianElement = document.getElementById('politician'); | |
| const poopContainer = document.getElementById('poop-container'); | |
| const startBtn = document.getElementById('start-btn'); | |
| const gameOverScreen = document.getElementById('game-over'); | |
| const finalScoreElement = document.getElementById('final-score'); | |
| const restartBtn = document.getElementById('restart-btn'); | |
| const poopButtons = document.querySelectorAll('#poop-selection button'); | |
| // Politician movement | |
| function movePolitician() { | |
| // Random movement | |
| const moveAmount = Math.random() * 10 - 5; // -5 to 5 | |
| politicianPosition = Math.max(0, Math.min(100, politicianPosition + moveAmount)); | |
| // Update position | |
| politicianElement.style.left = `${politicianPosition}%`; | |
| } | |
| // Create poop | |
| function createPoop() { | |
| if (!gameActive) return; | |
| const poop = document.createElement('div'); | |
| poop.className = 'absolute text-4xl cursor-pointer pointer-events-auto'; | |
| poop.innerHTML = '💩'; | |
| // Random horizontal position | |
| const leftPos = Math.random() * 80 + 10; // 10-90% | |
| poop.style.left = `${leftPos}%`; | |
| poop.style.top = '0'; | |
| // Different properties based on poop type | |
| switch(poopType) { | |
| case 'rapid': | |
| poop.style.fontSize = '2rem'; | |
| poop.style.animation = 'none'; | |
| break; | |
| case 'explosive': | |
| poop.style.fontSize = '3.5rem'; | |
| poop.style.animation = 'none'; | |
| break; | |
| default: // normal | |
| poop.style.fontSize = '3rem'; | |
| poop.classList.add('floating'); | |
| } | |
| poop.addEventListener('click', () => throwPoop(poop, leftPos)); | |
| poopContainer.appendChild(poop); | |
| // Remove poop if not clicked after some time | |
| setTimeout(() => { | |
| if (poop.parentNode) { | |
| poop.remove(); | |
| } | |
| }, 3000); | |
| } | |
| // Throw poop at Trump | |
| function throwPoop(poop, startPos) { | |
| if (!gameActive) return; | |
| const endPos = politicianPosition; | |
| const distance = Math.abs(endPos - startPos); | |
| poop.style.transition = `left 0.5s, top 0.5s`; | |
| poop.style.left = `${endPos}%`; | |
| poop.style.top = '70%'; | |
| // Check if hit | |
| setTimeout(() => { | |
| const hitRange = 15; // hit range in percentage | |
| if (Math.abs(endPos - startPos) < hitRange) { | |
| // Hit! | |
| score++; | |
| scoreElement.textContent = score; | |
| politicianElement.classList.add('politician-hit'); | |
| // Explosive poop effect | |
| if (poopType === 'explosive') { | |
| poop.innerHTML = '💥'; | |
| poop.style.fontSize = '5rem'; | |
| setTimeout(() => poop.remove(), 300); | |
| } else { | |
| setTimeout(() => poop.remove(), 100); | |
| } | |
| setTimeout(() => { | |
| politicianElement.classList.remove('politician-hit'); | |
| }, 500); | |
| } else { | |
| // Miss | |
| poop.innerHTML = '💨'; | |
| setTimeout(() => poop.remove(), 300); | |
| } | |
| }, 500); | |
| } | |
| // Start game | |
| function startGame() { | |
| score = 0; | |
| timeLeft = 30; | |
| gameActive = true; | |
| scoreElement.textContent = score; | |
| timeElement.textContent = timeLeft; | |
| startBtn.disabled = true; | |
| poopButtons.forEach(btn => btn.disabled = true); | |
| // Clear any existing poops | |
| poopContainer.innerHTML = ''; | |
| // Start game loops | |
| gameInterval = setInterval(createPoop, 800); | |
| timeInterval = setInterval(() => { | |
| timeLeft--; | |
| timeElement.textContent = timeLeft; | |
| if (timeLeft <= 0) { | |
| endGame(); | |
| } | |
| }, 1000); | |
| // Politician movement | |
| setInterval(movePolitician, 1000); | |
| } | |
| // End game | |
| function endGame() { | |
| gameActive = false; | |
| clearInterval(gameInterval); | |
| clearInterval(timeInterval); | |
| finalScoreElement.textContent = score; | |
| gameOverScreen.classList.remove('hidden'); | |
| startBtn.disabled = false; | |
| poopButtons.forEach(btn => btn.disabled = false); | |
| } | |
| // Event listeners | |
| startBtn.addEventListener('click', startGame); | |
| restartBtn.addEventListener('click', () => { | |
| gameOverScreen.classList.add('hidden'); | |
| startGame(); | |
| }); | |
| // Poop type selection | |
| poopButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| poopType = button.dataset.type; | |
| // Update active button style | |
| poopButtons.forEach(btn => { | |
| btn.classList.remove('ring-4', 'ring-yellow-400'); | |
| }); | |
| button.classList.add('ring-4', 'ring-yellow-400'); | |
| }); | |
| }); | |
| // Set normal as default | |
| document.querySelector('[data-type="normal"]').click(); | |
| </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=Botapressao13/trump" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |