Spaces:
Running
Running
| <html><head><base href="https://websim.ai/cosmic-keystrokes"><title>Cosmic Keystrokes: Intergalactic Speed Typing Adventure</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes slide { | |
| 0% { transform: translateX(100%); } | |
| 100% { transform: translateX(-100%); } | |
| } | |
| .sliding-bg { | |
| background-image: url('https://images.websim.ai/1920x1080_space_background.jpg'); | |
| background-repeat: repeat-x; | |
| animation: slide 60s linear infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white font-sans"> | |
| <div class="sliding-bg absolute inset-0 z-0"></div> | |
| <div class="relative z-10 h-screen flex flex-col items-center justify-center"> | |
| <h1 class="text-4xl font-bold mb-8">Cosmic Keystrokes</h1> | |
| <div id="game-container" class="w-full max-w-2xl bg-gray-800 bg-opacity-75 p-6 rounded-lg"> | |
| <div id="word-display" class="text-3xl font-mono mb-4 h-12 text-center"></div> | |
| <input type="text" id="word-input" class="w-full bg-gray-700 text-white text-2xl p-2 rounded" autocomplete="off"> | |
| <div class="flex justify-between mt-4"> | |
| <div>Score: <span id="score">0</span></div> | |
| <div>Time: <span id="time">60</span>s</div> | |
| </div> | |
| </div> | |
| <button id="start-button" class="mt-8 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"> | |
| Start Game | |
| </button> | |
| </div> | |
| <script> | |
| const words = ['galaxy', 'nebula', 'asteroid', 'comet', 'planet', 'star', 'supernova', 'quasar', 'pulsar', 'cosmos']; | |
| let currentWord = ''; | |
| let score = 0; | |
| let timeLeft = 60; | |
| let gameInterval; | |
| const wordDisplay = document.getElementById('word-display'); | |
| const wordInput = document.getElementById('word-input'); | |
| const scoreDisplay = document.getElementById('score'); | |
| const timeDisplay = document.getElementById('time'); | |
| const startButton = document.getElementById('start-button'); | |
| function getRandomWord() { | |
| return words[Math.floor(Math.random() * words.length)]; | |
| } | |
| function updateGame() { | |
| if (timeLeft > 0) { | |
| timeLeft--; | |
| timeDisplay.textContent = timeLeft; | |
| } else { | |
| endGame(); | |
| } | |
| } | |
| function startGame() { | |
| score = 0; | |
| timeLeft = 60; | |
| scoreDisplay.textContent = score; | |
| timeDisplay.textContent = timeLeft; | |
| wordInput.value = ''; | |
| wordInput.disabled = false; | |
| startButton.disabled = true; | |
| nextWord(); | |
| gameInterval = setInterval(updateGame, 1000); | |
| wordInput.focus(); | |
| } | |
| function endGame() { | |
| clearInterval(gameInterval); | |
| wordDisplay.textContent = 'Game Over!'; | |
| wordInput.disabled = true; | |
| startButton.disabled = false; | |
| } | |
| function nextWord() { | |
| currentWord = getRandomWord(); | |
| wordDisplay.textContent = currentWord; | |
| } | |
| wordInput.addEventListener('input', () => { | |
| if (wordInput.value.toLowerCase() === currentWord) { | |
| score++; | |
| scoreDisplay.textContent = score; | |
| wordInput.value = ''; | |
| nextWord(); | |
| } | |
| }); | |
| startButton.addEventListener('click', startGame); | |
| </script> | |
| </body></html> |