Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dino Runner</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @keyframes slide { | |
| from { background-position: 0 0; } | |
| to { background-position: -2000px 0; } | |
| } | |
| @keyframes jump { | |
| 0% { transform: translateY(0); } | |
| 50% { transform: translateY(-120px); } | |
| 100% { transform: translateY(0); } | |
| } | |
| .game-container { | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f0f0f0"/></svg>'); | |
| background-size: 100px 100px; | |
| animation: slide 10s linear infinite; | |
| } | |
| .dino { | |
| transition: transform 0.1s; | |
| } | |
| .jumping { | |
| animation: jump 0.5s ease-out; | |
| } | |
| .cactus { | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| } | |
| .game-over { | |
| display: none; | |
| } | |
| @media (max-width: 640px) { | |
| .game-container { | |
| height: 200px ; | |
| } | |
| .dino { | |
| height: 40px ; | |
| width: 40px ; | |
| } | |
| .cactus { | |
| height: 40px ; | |
| width: 20px ; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Dino Runner</h1> | |
| <p class="text-gray-600">Press Space or Tap to Jump</p> | |
| </div> | |
| <div class="relative overflow-hidden bg-white rounded-lg shadow-xl mb-8"> | |
| <div id="game" class="game-container relative w-full md:w-[600px] h-[300px] bg-gray-50 border-b-2 border-gray-300"> | |
| <div id="dino" class="dino absolute bottom-0 left-20 w-16 h-16 bg-gray-800 rounded-md"></div> | |
| <div id="score" class="absolute top-4 right-4 text-xl font-bold text-gray-700">0</div> | |
| <div id="high-score" class="absolute top-4 left-4 text-xl font-bold text-gray-700">High: 0</div> | |
| <div id="game-over" class="game-over absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white text-4xl font-bold"> | |
| Game Over!<br> | |
| <button id="restart" class="mt-4 px-6 py-2 bg-white text-black rounded-lg text-xl">Play Again</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex gap-4"> | |
| <button id="jump-btn" class="md:hidden px-8 py-4 bg-gray-800 text-white rounded-lg text-lg font-bold touch-none">JUMP</button> | |
| <button id="start-btn" class="px-8 py-4 bg-green-600 text-white rounded-lg text-lg font-bold touch-none">Start Game</button> | |
| </div> | |
| <div class="mt-8 text-gray-500 text-center max-w-md px-4"> | |
| <p class="mb-2">Desktop: Press Space to jump</p> | |
| <p>Mobile: Tap the JUMP button or touch the screen</p> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const dino = document.getElementById('dino'); | |
| const game = document.getElementById('game'); | |
| const scoreDisplay = document.getElementById('score'); | |
| const highScoreDisplay = document.getElementById('high-score'); | |
| const gameOverDisplay = document.getElementById('game-over'); | |
| const restartBtn = document.getElementById('restart'); | |
| const jumpBtn = document.getElementById('jump-btn'); | |
| const startBtn = document.getElementById('start-btn'); | |
| let isJumping = false; | |
| let isGameOver = false; | |
| let score = 0; | |
| let highScore = localStorage.getItem('highScore') || 0; | |
| let gameSpeed = 5; | |
| let cactusInterval; | |
| let scoreInterval; | |
| let gameStarted = false; | |
| highScoreDisplay.textContent = `High: ${highScore}`; | |
| function jump() { | |
| if (isJumping || !gameStarted) return; | |
| isJumping = true; | |
| dino.classList.add('jumping'); | |
| setTimeout(() => { | |
| dino.classList.remove('jumping'); | |
| isJumping = false; | |
| }, 500); | |
| } | |
| function createCactus() { | |
| if (isGameOver) return; | |
| const cactus = document.createElement('div'); | |
| cactus.classList.add('cactus', 'bg-green-800', 'rounded-sm'); | |
| cactus.style.width = `${Math.random() * 20 + 20}px`; | |
| cactus.style.height = `${Math.random() * 40 + 30}px`; | |
| cactus.style.right = '0px'; | |
| game.appendChild(cactus); | |
| let cactusPosition = game.offsetWidth; | |
| let randomTime = Math.random() * 3000 + 1000; | |
| function moveCactus() { | |
| if (isGameOver) { | |
| clearInterval(cactusMove); | |
| return; | |
| } | |
| cactusPosition -= gameSpeed; | |
| cactus.style.right = `${game.offsetWidth - cactusPosition}px`; | |
| // Check collision | |
| const dinoRect = dino.getBoundingClientRect(); | |
| const cactusRect = cactus.getBoundingClientRect(); | |
| if ( | |
| dinoRect.right > cactusRect.left && | |
| dinoRect.left < cactusRect.right && | |
| dinoRect.bottom > cactusRect.top | |
| ) { | |
| endGame(); | |
| } | |
| if (cactusPosition < -50) { | |
| clearInterval(cactusMove); | |
| game.removeChild(cactus); | |
| } | |
| } | |
| const cactusMove = setInterval(moveCactus, 20); | |
| } | |
| function updateScore() { | |
| if (isGameOver) return; | |
| score++; | |
| scoreDisplay.textContent = score; | |
| // Increase difficulty | |
| if (score % 100 === 0) { | |
| gameSpeed += 0.5; | |
| } | |
| } | |
| function endGame() { | |
| isGameOver = true; | |
| gameOverDisplay.style.display = 'flex'; | |
| clearInterval(cactusInterval); | |
| clearInterval(scoreInterval); | |
| if (score > highScore) { | |
| highScore = score; | |
| localStorage.setItem('highScore', highScore); | |
| highScoreDisplay.textContent = `High: ${highScore}`; | |
| } | |
| } | |
| function startGame() { | |
| if (gameStarted) return; | |
| gameStarted = true; | |
| isGameOver = false; | |
| score = 0; | |
| gameSpeed = 5; | |
| scoreDisplay.textContent = '0'; | |
| gameOverDisplay.style.display = 'none'; | |
| // Clear any existing cacti | |
| document.querySelectorAll('.cactus').forEach(c => c.remove()); | |
| // Start game loops | |
| cactusInterval = setInterval(createCactus, 1500); | |
| scoreInterval = setInterval(updateScore, 100); | |
| } | |
| function restartGame() { | |
| gameStarted = false; | |
| startGame(); | |
| } | |
| // Event listeners | |
| document.addEventListener('keydown', (e) => { | |
| if ((e.code === 'Space' || e.key === 'ArrowUp') && !e.repeat) { | |
| e.preventDefault(); | |
| jump(); | |
| } | |
| }); | |
| game.addEventListener('click', () => { | |
| if (!gameStarted) { | |
| startGame(); | |
| } else { | |
| jump(); | |
| } | |
| }); | |
| jumpBtn.addEventListener('click', jump); | |
| startBtn.addEventListener('click', startGame); | |
| restartBtn.addEventListener('click', restartGame); | |
| // Touch support for mobile | |
| game.addEventListener('touchstart', (e) => { | |
| if (e.cancelable) e.preventDefault(); | |
| if (!gameStarted) { | |
| startGame(); | |
| } else { | |
| jump(); | |
| } | |
| }, { passive: false }); | |
| jumpBtn.addEventListener('touchstart', (e) => { | |
| if (e.cancelable) e.preventDefault(); | |
| jump(); | |
| }, { passive: false }); | |
| }); | |
| </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=09iiyb/my-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |