Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cyber Flappy</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| overflow: hidden; | |
| background-color: #0a0a1a; | |
| } | |
| #game-container { | |
| position: relative; | |
| width: 400px; | |
| height: 600px; | |
| margin: 0 auto; | |
| overflow: hidden; | |
| border: 3px solid #00f0ff; | |
| box-shadow: 0 0 20px #00f0ff, inset 0 0 20px #00f0ff; | |
| border-radius: 10px; | |
| background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%); | |
| } | |
| #bird { | |
| position: absolute; | |
| width: 40px; | |
| height: 30px; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2300f0ff" d="M23,11.5L19.95,10l2.52-1.5c0.19-0.11,0.25-0.35,0.14-0.53l-0.81-1.41c-0.11-0.19-0.35-0.25-0.53-0.14L18.5,8.05 17,5.05C16.89,4.86,16.65,4.8,16.47,4.91l-1.41,0.81C14.86,5.83,14.8,6.07,14.91,6.25L16.5,9l-3.5-1.45V5.5 c0-0.28-0.22-0.5-0.5-0.5h-2C10.22,5,10,5.22,10,5.5v2.05L6.5,9L8.09,6.25C8.2,6.07,8.14,5.83,7.95,5.72L6.54,4.91 C6.35,4.8,6.11,4.86,6,5.05L4.5,8.05L2.24,6.92C2.06,6.81,1.82,6.87,1.71,7.06L0.9,8.47C0.79,8.65,0.85,8.89,1.04,9L3.05,10L0,11.5 c-0.19,0.11-0.25,0.35-0.14,0.53l0.81,1.41c0.11,0.19,0.35,0.25,0.53,0.14L4.5,12.95L6,15.95c0.11,0.19,0.35,0.25,0.53,0.14 l1.41-0.81c0.19-0.11,0.25-0.35,0.14-0.53L6.5,12l3.5,1.45v2.05c0,0.28,0.22,0.5,0.5,0.5h2c0.28,0,0.5-0.22,0.5-0.5v-2.05 L17,12l-1.59,2.75c-0.11,0.19-0.07,0.42,0.12,0.53l1.41,0.81c0.19,0.11,0.42,0.07,0.53-0.12L19.5,12.95l2.26,1.13 c0.19,0.09,0.42,0.03,0.53-0.16l0.81-1.41C23.25,11.85,23.19,11.61,23,11.5z"/></svg>'); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| filter: drop-shadow(0 0 5px #00f0ff); | |
| z-index: 10; | |
| } | |
| .pipe { | |
| position: absolute; | |
| width: 60px; | |
| background-color: #00f0ff; | |
| box-shadow: 0 0 10px #00f0ff; | |
| border: 2px solid #00f0ff; | |
| border-radius: 5px; | |
| } | |
| .pipe-top { | |
| top: 0; | |
| } | |
| .pipe-bottom { | |
| bottom: 0; | |
| } | |
| .score { | |
| position: absolute; | |
| top: 20px; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 24px; | |
| color: #00f0ff; | |
| text-shadow: 0 0 5px #00f0ff; | |
| z-index: 20; | |
| } | |
| .game-over { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 30; | |
| color: #00f0ff; | |
| text-shadow: 0 0 5px #00f0ff; | |
| } | |
| .start-screen { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 30; | |
| color: #00f0ff; | |
| text-shadow: 0 0 5px #00f0ff; | |
| } | |
| .grid-pattern { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .neon-btn { | |
| background: transparent; | |
| color: #00f0ff; | |
| border: 2px solid #00f0ff; | |
| padding: 10px 20px; | |
| margin-top: 20px; | |
| font-family: 'Orbitron', sans-serif; | |
| font-size: 16px; | |
| cursor: pointer; | |
| box-shadow: 0 0 10px #00f0ff, inset 0 0 10px #00f0ff; | |
| transition: all 0.3s; | |
| border-radius: 5px; | |
| } | |
| .neon-btn:hover { | |
| background: rgba(0, 240, 255, 0.2); | |
| box-shadow: 0 0 20px #00f0ff, inset 0 0 20px #00f0ff; | |
| } | |
| .stars { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| .star { | |
| position: absolute; | |
| background-color: #00f0ff; | |
| border-radius: 50%; | |
| box-shadow: 0 0 5px #00f0ff; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex items-center justify-center min-h-screen bg-gray-900"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-bold mb-4 text-cyan-400 neon-text">CYBER FLAPPY</h1> | |
| <div id="game-container"> | |
| <div class="stars" id="stars"></div> | |
| <div class="grid-pattern"></div> | |
| <div id="bird"></div> | |
| <div class="score" id="score">0</div> | |
| <div class="start-screen" id="start-screen"> | |
| <h2 class="text-3xl mb-4">CYBER FLAPPY</h2> | |
| <p class="mb-6">Press SPACE or CLICK to fly</p> | |
| <button class="neon-btn" id="start-btn">START GAME</button> | |
| </div> | |
| <div class="game-over hidden" id="game-over"> | |
| <h2 class="text-3xl mb-4">GAME OVER</h2> | |
| <p class="text-xl mb-2">Score: <span id="final-score">0</span></p> | |
| <p class="text-xl mb-6">High Score: <span id="high-score">0</span></p> | |
| <button class="neon-btn" id="restart-btn">PLAY AGAIN</button> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-cyan-400"> | |
| <p>Controls: SPACE or CLICK to fly</p> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Game elements | |
| const gameContainer = document.getElementById('game-container'); | |
| const bird = document.getElementById('bird'); | |
| const scoreElement = document.getElementById('score'); | |
| const finalScoreElement = document.getElementById('final-score'); | |
| const highScoreElement = document.getElementById('high-score'); | |
| const startScreen = document.getElementById('start-screen'); | |
| const gameOverScreen = document.getElementById('game-over'); | |
| const startBtn = document.getElementById('start-btn'); | |
| const restartBtn = document.getElementById('restart-btn'); | |
| const starsContainer = document.getElementById('stars'); | |
| // Game variables | |
| let gameRunning = false; | |
| let score = 0; | |
| let highScore = localStorage.getItem('cyberFlappyHighScore') || 0; | |
| let birdY = 300; | |
| let birdVelocity = 0; | |
| let gravity = 0.5; | |
| let jumpForce = -10; | |
| let pipes = []; | |
| let pipeGap = 180; | |
| let pipeWidth = 60; | |
| let pipeFrequency = 1500; // ms | |
| let lastPipeTime = 0; | |
| let gameSpeed = 3; | |
| let animationId; | |
| let lastTime = 0; | |
| // Create stars background | |
| function createStars() { | |
| starsContainer.innerHTML = ''; | |
| const starCount = 100; | |
| for (let i = 0; i < starCount; i++) { | |
| const star = document.createElement('div'); | |
| star.className = 'star'; | |
| const size = Math.random() * 3; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| star.style.left = `${Math.random() * 100}%`; | |
| star.style.top = `${Math.random() * 100}%`; | |
| // Twinkle animation | |
| const delay = Math.random() * 5; | |
| star.style.animation = `twinkle ${2 + Math.random() * 3}s infinite ${delay}s`; | |
| starsContainer.appendChild(star); | |
| } | |
| } | |
| // Initialize game | |
| function initGame() { | |
| birdY = 300; | |
| birdVelocity = 0; | |
| score = 0; | |
| scoreElement.textContent = score; | |
| pipes = []; | |
| // Clear existing pipes | |
| document.querySelectorAll('.pipe').forEach(pipe => pipe.remove()); | |
| // Position bird | |
| bird.style.top = `${birdY}px`; | |
| bird.style.left = '100px'; | |
| highScoreElement.textContent = highScore; | |
| } | |
| // Start game | |
| function startGame() { | |
| gameRunning = true; | |
| startScreen.classList.add('hidden'); | |
| gameOverScreen.classList.add('hidden'); | |
| initGame(); | |
| lastTime = performance.now(); | |
| gameLoop(lastTime); | |
| } | |
| // Game over | |
| function gameOver() { | |
| gameRunning = false; | |
| cancelAnimationFrame(animationId); | |
| // Update high score | |
| if (score > highScore) { | |
| highScore = score; | |
| localStorage.setItem('cyberFlappyHighScore', highScore); | |
| } | |
| finalScoreElement.textContent = score; | |
| highScoreElement.textContent = highScore; | |
| gameOverScreen.classList.remove('hidden'); | |
| } | |
| // Jump | |
| function jump() { | |
| if (!gameRunning) return; | |
| birdVelocity = jumpForce; | |
| // Add jump effect | |
| bird.style.transform = 'rotate(-30deg)'; | |
| setTimeout(() => { | |
| bird.style.transform = 'rotate(0deg)'; | |
| }, 200); | |
| } | |
| // Create pipe | |
| function createPipe(timestamp) { | |
| if (timestamp - lastPipeTime > pipeFrequency) { | |
| lastPipeTime = timestamp; | |
| const pipeHeight = Math.floor(Math.random() * (gameContainer.offsetHeight - pipeGap - 100)) + 50; | |
| // Top pipe | |
| const topPipe = document.createElement('div'); | |
| topPipe.className = 'pipe pipe-top'; | |
| topPipe.style.height = `${pipeHeight}px`; | |
| topPipe.style.left = `${gameContainer.offsetWidth}px`; | |
| gameContainer.appendChild(topPipe); | |
| // Bottom pipe | |
| const bottomPipe = document.createElement('div'); | |
| bottomPipe.className = 'pipe pipe-bottom'; | |
| bottomPipe.style.height = `${gameContainer.offsetHeight - pipeHeight - pipeGap}px`; | |
| bottomPipe.style.left = `${gameContainer.offsetWidth}px`; | |
| gameContainer.appendChild(bottomPipe); | |
| pipes.push({ | |
| top: topPipe, | |
| bottom: bottomPipe, | |
| x: gameContainer.offsetWidth, | |
| passed: false | |
| }); | |
| } | |
| } | |
| // Update pipes | |
| function updatePipes(timestamp) { | |
| createPipe(timestamp); | |
| pipes.forEach((pipe, index) => { | |
| pipe.x -= gameSpeed; | |
| pipe.top.style.left = `${pipe.x}px`; | |
| pipe.bottom.style.left = `${pipe.x}px`; | |
| // Check if pipe is passed | |
| if (!pipe.passed && pipe.x < 100 - pipeWidth) { | |
| pipe.passed = true; | |
| score++; | |
| scoreElement.textContent = score; | |
| // Increase difficulty | |
| if (score % 5 === 0) { | |
| gameSpeed += 0.5; | |
| pipeFrequency = Math.max(800, pipeFrequency - 50); | |
| } | |
| } | |
| // Remove pipes that are off screen | |
| if (pipe.x < -pipeWidth) { | |
| pipe.top.remove(); | |
| pipe.bottom.remove(); | |
| pipes.splice(index, 1); | |
| } | |
| }); | |
| } | |
| // Check collisions | |
| function checkCollisions() { | |
| // Check if bird hits the ground or ceiling | |
| if (birdY >= gameContainer.offsetHeight - 30 || birdY <= 0) { | |
| gameOver(); | |
| return; | |
| } | |
| // Check if bird hits a pipe | |
| const birdRect = { | |
| x: 100, | |
| y: birdY, | |
| width: 40, | |
| height: 30 | |
| }; | |
| for (const pipe of pipes) { | |
| const topPipeRect = { | |
| x: pipe.x, | |
| y: 0, | |
| width: pipeWidth, | |
| height: parseInt(pipe.top.style.height) | |
| }; | |
| const bottomPipeRect = { | |
| x: pipe.x, | |
| y: gameContainer.offsetHeight - parseInt(pipe.bottom.style.height), | |
| width: pipeWidth, | |
| height: parseInt(pipe.bottom.style.height) | |
| }; | |
| if ( | |
| birdRect.x < pipe.x + pipeWidth && | |
| birdRect.x + birdRect.width > pipe.x && | |
| (birdRect.y < topPipeRect.height || birdRect.y + birdRect.height > bottomPipeRect.y) | |
| ) { | |
| gameOver(); | |
| return; | |
| } | |
| } | |
| } | |
| // Game loop | |
| function gameLoop(timestamp) { | |
| if (!gameRunning) return; | |
| const deltaTime = timestamp - lastTime; | |
| lastTime = timestamp; | |
| // Update bird | |
| birdVelocity += gravity; | |
| birdY += birdVelocity; | |
| bird.style.top = `${birdY}px`; | |
| // Update pipes | |
| updatePipes(timestamp); | |
| // Check collisions | |
| checkCollisions(); | |
| animationId = requestAnimationFrame(gameLoop); | |
| } | |
| // Event listeners | |
| document.addEventListener('keydown', (e) => { | |
| if (e.code === 'Space') { | |
| e.preventDefault(); | |
| jump(); | |
| } | |
| }); | |
| gameContainer.addEventListener('click', () => { | |
| jump(); | |
| }); | |
| startBtn.addEventListener('click', startGame); | |
| restartBtn.addEventListener('click', startGame); | |
| // Initialize | |
| createStars(); | |
| initGame(); | |
| // Add animation for the start screen | |
| const neonTexts = document.querySelectorAll('.neon-text'); | |
| setInterval(() => { | |
| neonTexts.forEach(text => { | |
| text.style.textShadow = `0 0 ${5 + Math.random() * 5}px #00f0ff`; | |
| }); | |
| }, 1000); | |
| }); | |
| </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=zazial/spacespacespace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |