Spaces:
Running
Running
Game Prompt: "TypeCycle: E-Waste Eradicator" It’s the year 2100, and Earth’s orbit is choking with e-waste debris—discarded satellites, toxic circuit boards, batteries, and shards of lost tech. In your hi-tech spaceship, you’re humanity’s last hope to clear the orbital junkyard before it destroys all communication and satellites. Gameplay: Waves of e-waste fragments drift toward your ship. Each piece is labeled with a complex tech word (like “microchip,” “lithium,” “motherboard,” or “PCB”). Type the word attached to a piece of e-waste to power your laser and vaporize it. The faster and more accurately you type, the more e-waste you destroy before it reaches your spacecraft. Advanced modes: Larger e-waste clusters require typing short environmental facts or recycling tips to destroy them. Power-ups drop for streaks: “Turbo Recycle” (mass destruction for perfect accuracy) or “Eco Shield” (blocks large debris). Objectives: Prevent debris from hitting your ship or Earth. Clear increasingly difficult waves as the orbit fills with faster and more dangerous e-waste. Earn high scores, unlock new spaceship skins, and collect rare tech relics from legendary satellites.make the words very slowly and straight give them 25 seconds per word,in total there should e 20 words and after writing it should also show the meaning of the each word and make it's quality 720p - Initial Deployment
80410ba verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TypeCycle: E-Waste Eradicator</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=Orbitron:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Roboto Mono', monospace; | |
| background-color: #0a0a1a; | |
| color: #e0e0e0; | |
| overflow: hidden; | |
| } | |
| .title-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .space-bg { | |
| background-image: | |
| radial-gradient(circle at 20% 30%, rgba(30, 144, 255, 0.1) 0%, transparent 20%), | |
| radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.1) 0%, transparent 20%), | |
| url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="10" cy="10" r="0.5" fill="white"/><circle cx="30" cy="70" r="0.7" fill="white"/><circle cx="80" cy="20" r="0.3" fill="white"/><circle cx="60" cy="50" r="0.4" fill="white"/><circle cx="90" cy="90" r="0.6" fill="white"/></svg>'); | |
| } | |
| .spaceship { | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ffffff" d="M12,2L4,12L12,22L20,12L12,2M12,6L17,12L12,18L7,12L12,6Z"/></svg>'); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: contain; | |
| } | |
| .e-waste { | |
| transition: transform 25s linear; | |
| will-change: transform; | |
| } | |
| .laser-beam { | |
| position: absolute; | |
| height: 2px; | |
| background: linear-gradient(90deg, rgba(0,255,255,0.8) 0%, rgba(0,255,255,0) 100%); | |
| transform-origin: left center; | |
| z-index: 10; | |
| } | |
| .explosion { | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,100,100,0.8) 50%, transparent 70%); | |
| border-radius: 50%; | |
| animation: explode 0.5s forwards; | |
| z-index: 20; | |
| } | |
| @keyframes explode { | |
| 0% { transform: scale(0); opacity: 1; } | |
| 100% { transform: scale(2); opacity: 0; } | |
| } | |
| .definition-card { | |
| background: rgba(0, 20, 40, 0.9); | |
| border-left: 3px solid #00ffff; | |
| box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background: linear-gradient(90deg, #00ffff, #00ff88); | |
| } | |
| .word-correct { | |
| color: #00ff88; | |
| text-shadow: 0 0 8px rgba(0, 255, 136, 0.5); | |
| } | |
| .word-incorrect { | |
| color: #ff5555; | |
| text-shadow: 0 0 8px rgba(255, 85, 85, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="space-bg h-screen flex flex-col"> | |
| <div class="container mx-auto px-4 flex-grow flex flex-col"> | |
| <!-- Header --> | |
| <header class="py-6 text-center"> | |
| <h1 class="title-font text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500 mb-2"> | |
| TYPECYCLE | |
| </h1> | |
| <p class="text-sm md:text-base text-cyan-300">E-Waste Eradicator • 2100 AD</p> | |
| </header> | |
| <!-- Game Stats --> | |
| <div class="flex justify-between items-center mb-4 px-2"> | |
| <div class="text-cyan-300"> | |
| <span class="font-bold">Score:</span> <span id="score">0</span> | |
| </div> | |
| <div class="text-purple-300"> | |
| <span class="font-bold">Level:</span> <span id="level">1</span> | |
| </div> | |
| <div class="text-green-300"> | |
| <span class="font-bold">Words:</span> <span id="words-destroyed">0</span>/20 | |
| </div> | |
| </div> | |
| <!-- Game Area --> | |
| <div class="relative flex-grow border border-cyan-900 rounded-lg overflow-hidden bg-black bg-opacity-40"> | |
| <!-- Spaceship --> | |
| <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-16 h-16 sprites spaceship z-10"></div> | |
| <!-- E-Waste Elements will appear here --> | |
| <div id="game-container" class="h-full w-full relative"></div> | |
| <!-- Laser Beam (hidden by default) --> | |
| <div id="laser-beam" class="laser-beam hidden"></div> | |
| <!-- Input Area --> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-70"> | |
| <div class="flex items-center"> | |
| <input | |
| type="text" | |
| id="word-input" | |
| autocomplete="off" | |
| autocorrect="off" | |
| autocapitalize="off" | |
| spellcheck="false" | |
| class="flex-grow bg-gray-900 text-white px-4 py-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-cyan-500 font-mono" | |
| placeholder="Type to destroy e-waste..." | |
| > | |
| <button id="submit-btn" class="bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-3 rounded-r-lg transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div id="progress-container" class="mt-2 hidden"> | |
| <div id="progress-bar" class="progress-bar rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Definition Modal --> | |
| <div id="definition-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> | |
| <div class="definition-card max-w-md w-full mx-4 p-6 rounded-lg relative"> | |
| <button id="close-definition" class="absolute top-2 right-2 text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <h3 class="text-xl font-bold text-cyan-300 mb-2" id="definition-word">Word</h3> | |
| <p class="text-gray-300 mb-4" id="definition-text">Definition goes here...</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-400" id="definition-count">1/20</span> | |
| <button id="next-definition" class="bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded transition"> | |
| Next <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Over Modal --> | |
| <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-gray-900 max-w-md w-full mx-4 p-6 rounded-lg text-center"> | |
| <h2 class="text-3xl font-bold text-red-400 mb-4">Mission Report</h2> | |
| <div class="space-y-4 mb-6"> | |
| <p class="text-xl">You destroyed <span id="final-score" class="text-cyan-300 font-bold">0</span> e-waste pieces!</p> | |
| <p class="text-lg">Accuracy: <span id="final-accuracy" class="text-purple-300 font-bold">0%</span></p> | |
| <p class="text-sm text-gray-400" id="performance-comment">Keep practicing to save Earth's orbit!</p> | |
| </div> | |
| <button id="restart-btn" class="bg-cyan-600 hover:bg-cyan-700 text-white px-6 py-3 rounded-lg transition font-bold"> | |
| <i class="fas fa-redo mr-2"></i> Try Again | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Game Data | |
| const techWords = [ | |
| { word: "MICROCHIP", definition: "A tiny piece of semiconductor material that contains electronic circuits for computers and other devices." }, | |
| { word: "LITHIUM", definition: "A chemical element used in rechargeable batteries for electronics and electric vehicles." }, | |
| { word: "MOTHERBOARD", definition: "The main circuit board in a computer that connects all components together." }, | |
| { word: "PCB", definition: "Printed Circuit Board - a board that connects electronic components using conductive tracks." }, | |
| { word: "CAPACITOR", definition: "A component that stores electrical energy in an electric field, used in nearly all electronic circuits." }, | |
| { word: "SILICON", definition: "A chemical element used to make semiconductors for electronic devices." }, | |
| { word: "TRANSISTOR", definition: "A semiconductor device used to amplify or switch electronic signals." }, | |
| { word: "DIODE", definition: "A component that allows current to flow in one direction only." }, | |
| { word: "RESISTOR", definition: "A passive component that resists the flow of electric current." }, | |
| { word: "LED", definition: "Light Emitting Diode - a semiconductor light source used in displays and lighting." }, | |
| { word: "CRT", definition: "Cathode Ray Tube - the older display technology used in bulky monitors and TVs." }, | |
| { word: "PLASMA", definition: "A display technology that uses small cells of plasma gas to create images." }, | |
| { word: "LCD", definition: "Liquid Crystal Display - a flat panel display technology using liquid crystals." }, | |
| { word: "OLED", definition: "Organic Light Emitting Diode - a display technology with self-emitting pixels." }, | |
| { word: "SSD", definition: "Solid State Drive - a storage device using flash memory with no moving parts." }, | |
| { word: "HDD", definition: "Hard Disk Drive - a traditional storage device with spinning magnetic disks." }, | |
| { word: "GPU", definition: "Graphics Processing Unit - a specialized processor for rendering images and video." }, | |
| { word: "CPU", definition: "Central Processing Unit - the primary component that performs calculations in a computer." }, | |
| { word: "RAM", definition: "Random Access Memory - temporary storage for data being actively used by the CPU." }, | |
| { word: "ROM", definition: "Read Only Memory - permanent storage for firmware and other essential data." } | |
| ]; | |
| // Game State | |
| let currentWordIndex = 0; | |
| let score = 0; | |
| let wordsDestroyed = 0; | |
| let currentLevel = 1; | |
| let correctChars = 0; | |
| let totalChars = 0; | |
| let activeEwaste = null; | |
| let progressInterval = null; | |
| let progress = 0; | |
| let gameActive = true; | |
| // DOM Elements | |
| const gameContainer = document.getElementById('game-container'); | |
| const wordInput = document.getElementById('word-input'); | |
| const submitBtn = document.getElementById('submit-btn'); | |
| const scoreDisplay = document.getElementById('score'); | |
| const levelDisplay = document.getElementById('level'); | |
| const wordsDestroyedDisplay = document.getElementById('words-destroyed'); | |
| const progressContainer = document.getElementById('progress-container'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const definitionModal = document.getElementById('definition-modal'); | |
| const definitionWord = document.getElementById('definition-word'); | |
| const definitionText = document.getElementById('definition-text'); | |
| const definitionCount = document.getElementById('definition-count'); | |
| const nextDefinitionBtn = document.getElementById('next-definition'); | |
| const closeDefinitionBtn = document.getElementById('close-definition'); | |
| const gameOverModal = document.getElementById('game-over-modal'); | |
| const finalScoreDisplay = document.getElementById('final-score'); | |
| const finalAccuracyDisplay = document.getElementById('final-accuracy'); | |
| const performanceComment = document.getElementById('performance-comment'); | |
| const restartBtn = document.getElementById('restart-btn'); | |
| const laserBeam = document.getElementById('laser-beam'); | |
| // Initialize Game | |
| function initGame() { | |
| wordInput.value = ''; | |
| wordInput.focus(); | |
| spawnEwaste(); | |
| startProgressTimer(); | |
| } | |
| // Spawn E-Waste | |
| function spawnEwaste() { | |
| if (!gameActive || currentWordIndex >= techWords.length) return; | |
| const wordData = techWords[currentWordIndex]; | |
| const word = wordData.word; | |
| // Create e-waste element | |
| const ewaste = document.createElement('div'); | |
| ewaste.className = 'e-waste absolute top-0 text-xl md:text-2xl font-bold text-white font-mono p-2 rounded-lg bg-gray-800 bg-opacity-70 border border-cyan-700 shadow-lg'; | |
| ewaste.textContent = word; | |
| ewaste.dataset.word = word; | |
| ewaste.dataset.index = currentWordIndex; | |
| // Random horizontal position (avoid edges) | |
| const leftPos = Math.max(20, Math.min(80, Math.random() * 100)); | |
| ewaste.style.left = `${leftPos}%`; | |
| // Add to game container | |
| gameContainer.appendChild(ewaste); | |
| // Force reflow before starting animation | |
| void ewaste.offsetWidth; | |
| // Start falling animation | |
| ewaste.style.transform = `translateY(${window.innerHeight * 0.8}px)`; | |
| activeEwaste = ewaste; | |
| // Remove after animation completes (25s) | |
| setTimeout(() => { | |
| if (ewaste.parentNode && !ewaste.classList.contains('destroyed')) { | |
| gameContainer.removeChild(ewaste); | |
| if (gameActive) { | |
| gameOver(); | |
| } | |
| } | |
| }, 25000); | |
| } | |
| // Start progress timer | |
| function startProgressTimer() { | |
| progress = 0; | |
| progressContainer.classList.remove('hidden'); | |
| progressBar.style.width = '0%'; | |
| progressInterval = setInterval(() => { | |
| progress += 1; | |
| progressBar.style.width = `${progress}%`; | |
| if (progress >= 100) { | |
| clearInterval(progressInterval); | |
| progressContainer.classList.add('hidden'); | |
| } | |
| }, 250); // 100 steps over 25 seconds | |
| } | |
| // Check typed word | |
| function checkWord() { | |
| const typedWord = wordInput.value.trim().toUpperCase(); | |
| const targetWord = activeEwaste.dataset.word; | |
| totalChars += typedWord.length; | |
| // Check if correct | |
| if (typedWord === targetWord) { | |
| correctChars += typedWord.length; | |
| destroyEwaste(true); | |
| } else { | |
| // Highlight incorrect characters | |
| highlightIncorrectChars(typedWord, targetWord); | |
| } | |
| } | |
| // Highlight incorrect characters | |
| function highlightIncorrectChars(typed, target) { | |
| activeEwaste.innerHTML = ''; | |
| for (let i = 0; i < target.length; i++) { | |
| const charSpan = document.createElement('span'); | |
| charSpan.textContent = target[i]; | |
| if (i < typed.length) { | |
| charSpan.className = typed[i] === target[i] ? 'word-correct' : 'word-incorrect'; | |
| } else { | |
| charSpan.className = ''; | |
| } | |
| activeEwaste.appendChild(charSpan); | |
| } | |
| } | |
| // Destroy e-waste with animation | |
| function destroyEwaste(correct) { | |
| if (!activeEwaste) return; | |
| clearInterval(progressInterval); | |
| progressContainer.classList.add('hidden'); | |
| const ewaste = activeEwaste; | |
| ewaste.classList.add('destroyed'); | |
| // Create laser beam effect | |
| const shipRect = document.querySelector('.spaceship').getBoundingClientRect(); | |
| const ewasteRect = ewaste.getBoundingClientRect(); | |
| const shipX = shipRect.left + shipRect.width / 2; | |
| const shipY = shipRect.top + shipRect.height / 2; | |
| const ewasteX = ewasteRect.left + ewasteRect.width / 2; | |
| const ewasteY = ewasteRect.top + ewasteRect.height / 2; | |
| const length = Math.sqrt(Math.pow(ewasteX - shipX, 2) + Math.pow(ewasteY - shipY, 2)); | |
| const angle = Math.atan2(ewasteY - shipY, ewasteX - shipX) * 180 / Math.PI; | |
| laserBeam.style.width = `${length}px`; | |
| laserBeam.style.left = `${shipX}px`; | |
| laserBeam.style.top = `${shipY}px`; | |
| laserBeam.style.transform = `rotate(${angle}deg)`; | |
| laserBeam.classList.remove('hidden'); | |
| // Create explosion | |
| const explosion = document.createElement('div'); | |
| explosion.className = 'explosion'; | |
| explosion.style.left = `${ewasteX - 20}px`; | |
| explosion.style.top = `${ewasteY - 20}px`; | |
| gameContainer.appendChild(explosion); | |
| // Remove elements after animation | |
| setTimeout(() => { | |
| laserBeam.classList.add('hidden'); | |
| gameContainer.removeChild(explosion); | |
| gameContainer.removeChild(ewaste); | |
| }, 500); | |
| // Update score | |
| if (correct) { | |
| score += 100 * currentLevel; | |
| wordsDestroyed++; | |
| scoreDisplay.textContent = score; | |
| wordsDestroyedDisplay.textContent = `${wordsDestroyed}/20`; | |
| // Check level up | |
| if (wordsDestroyed > 0 && wordsDestroyed % 5 === 0) { | |
| currentLevel++; | |
| levelDisplay.textContent = currentLevel; | |
| } | |
| } | |
| // Move to next word or show definitions | |
| currentWordIndex++; | |
| wordInput.value = ''; | |
| if (currentWordIndex < techWords.length) { | |
| setTimeout(() => { | |
| spawnEwaste(); | |
| startProgressTimer(); | |
| }, 1000); | |
| } else { | |
| setTimeout(showDefinitions, 1000); | |
| } | |
| } | |
| // Show word definitions | |
| function showDefinitions() { | |
| gameActive = false; | |
| currentWordIndex = 0; | |
| updateDefinitionCard(); | |
| definitionModal.classList.remove('hidden'); | |
| } | |
| // Update definition card | |
| function updateDefinitionCard() { | |
| const wordData = techWords[currentWordIndex]; | |
| definitionWord.textContent = wordData.word; | |
| definitionText.textContent = wordData.definition; | |
| definitionCount.textContent = `${currentWordIndex + 1}/${techWords.length}`; | |
| } | |
| // Game over | |
| function gameOver() { | |
| gameActive = false; | |
| clearInterval(progressInterval); | |
| const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 100) : 0; | |
| finalScoreDisplay.textContent = wordsDestroyed; | |
| finalAccuracyDisplay.textContent = `${accuracy}%`; | |
| // Performance comment | |
| if (wordsDestroyed >= 18 && accuracy >= 90) { | |
| performanceComment.textContent = "Outstanding! Earth's orbit is safe thanks to you!"; | |
| } else if (wordsDestroyed >= 15 && accuracy >= 80) { | |
| performanceComment.textContent = "Great job! You've made a significant impact."; | |
| } else if (wordsDestroyed >= 10) { | |
| performanceComment.textContent = "Good effort! More practice will make you even better."; | |
| } else { | |
| performanceComment.textContent = "Keep practicing! Earth needs your help to clean up orbit."; | |
| } | |
| gameOverModal.classList.remove('hidden'); | |
| } | |
| // Reset game | |
| function resetGame() { | |
| // Clear game container | |
| while (gameContainer.firstChild) { | |
| gameContainer.removeChild(gameContainer.firstChild); | |
| } | |
| // Reset game state | |
| currentWordIndex = 0; | |
| score = 0; | |
| wordsDestroyed = 0; | |
| currentLevel = 1; | |
| correctChars = 0; | |
| totalChars = 0; | |
| activeEwaste = null; | |
| gameActive = true; | |
| // Update displays | |
| scoreDisplay.textContent = score; | |
| levelDisplay.textContent = currentLevel; | |
| wordsDestroyedDisplay.textContent = `${wordsDestroyed}/20`; | |
| // Hide modals | |
| definitionModal.classList.add('hidden'); | |
| gameOverModal.classList.add('hidden'); | |
| // Start new game | |
| initGame(); | |
| } | |
| // Event Listeners | |
| submitBtn.addEventListener('click', checkWord); | |
| wordInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| checkWord(); | |
| } | |
| }); | |
| nextDefinitionBtn.addEventListener('click', () => { | |
| currentWordIndex++; | |
| if (currentWordIndex < techWords.length) { | |
| updateDefinitionCard(); | |
| } else { | |
| definitionModal.classList.add('hidden'); | |
| gameOver(); | |
| } | |
| }); | |
| closeDefinitionBtn.addEventListener('click', () => { | |
| definitionModal.classList.add('hidden'); | |
| gameOver(); | |
| }); | |
| restartBtn.addEventListener('click', resetGame); | |
| // 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=Jashpatel152/my-e-waste-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |