Untitled
unknown
plain_text
5 months ago
3.1 kB
1
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flappy Bird Canvas Game</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #70c5ce; } canvas { border: 2px solid #000; } </style> </head> <body> <canvas id="flappyBirdCanvas" width="320" height="480"></canvas> <script> const canvas = document.getElementById('flappyBirdCanvas'); const ctx = canvas.getContext('2d'); const bird = { x: 50, y: 200, width: 20, height: 20, gravity: 0.6, lift: -15, velocity: 0 }; const pipes = []; const pipeWidth = 50; const pipeGap = 100; let pipeFrequency = 90; // Time between pipes let score = 0; // Game loop function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw bird bird.velocity += bird.gravity; bird.y += bird.velocity; ctx.fillStyle = '#ff0'; ctx.fillRect(bird.x, bird.y, bird.width, bird.height); // Draw pipes if (Math.random() < 0.02) { const pipeHeight = Math.floor(Math.random() * (canvas.height - pipeGap)); pipes.push({ x: canvas.width, y: pipeHeight }); } pipes.forEach((pipe, index) => { pipe.x -= 2; ctx.fillStyle = '#008000'; // Top pipe ctx.fillRect(pipe.x, 0, pipeWidth, pipe.y); // Bottom pipe ctx.fillRect(pipe.x, pipe.y + pipeGap, pipeWidth, canvas.height - pipe.y - pipeGap); // Remove pipes that go out of bounds if (pipe.x + pipeWidth < 0) { pipes.splice(index, 1); score++; } // Collision detection if (pipe.x < bird.x + bird.width && pipe.x + pipeWidth > bird.x) { if (bird.y < pipe.y || bird.y + bird.height > pipe.y + pipeGap) { endGame(); } } }); // Ground collision if (bird.y + bird.height > canvas.height) { endGame(); } // Draw score ctx.fillStyle = '#000'; ctx.font = '20px Arial'; ctx.fillText('Score: ' + score, 10, 30); requestAnimationFrame(gameLoop); } // Bird control (up when clicked) canvas.addEventListener('click', () => { bird.velocity = bird.lift; }); // End game function endGame() { alert('Game Over! Score: ' + score); bird.y = 200; bird.velocity = 0; pipes.length = 0; score = 0; } gameLoop(); // Start game loop </script> </body> </html>
Editor is loading...
Leave a Comment