flappybird

Flappy Bird body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #70c5ce; } canvas { border: 2px solid #000; } const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); // Load images const bird = new Image(); const bg = new Image(); const fg = new Image(); const pipeUp = new Image(); const pipeBottom = new Image(); bird.src = "https://i.imgur.com/7Ecz6wa.png"; // Image of the bird bg.src = "https://i.imgur.com/c7x9mIB.png"; // Background image fg.src = "https://i.imgur.com/qF3Cq9I.png"; // Foreground image pipeUp.src = "https://i.imgur.com/OHZy1G5.png"; // Upper pipe image pipeBottom.src = "https://i.imgur.com/L5LJ0cc.png"; // Lower pipe image // Variables let gap = 85; let constant; let bX = 10; let bY = 150; let gravity = 1.5; let score = 0; // Audio files const fly = new Audio(); const scoreAudio = new Audio(); fly.src = "https://www.soundjay.com/button/sounds/button-10.mp3"; // Sound when bird flies scoreAudio.src = "https://www.soundjay.com/button/sounds/button-4.mp3"; // Sound when score increases // Key press document.addEventListener("keydown", moveUp); function moveUp() { bY -= 25; // Move the bird up by 25px fly.play(); } // Pipe coordinates let pipe = []; pipe[0] = { x: canvas.width, y: 0, }; // Draw function function draw() { // Draw background ctx.drawImage(bg, 0, 0); // Draw pipes for (let i = 0; i < pipe.length; i++) { constant = pipeUp.height + gap; ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y); ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + constant); pipe[i].x--; if (pipe[i].x === 125) { pipe.push({ x: canvas.width, y: Math.floor(Math.random() * pipeUp.height) - pipeUp.height, }); } // Detect collision if ( (bX + bird.width >= pipe[i].x && bX = canvas.height - fg.height ) { location.reload(); // Reload the game } if (pipe[i].x === 5) { score++; scoreAudio.play(); } } // Draw foreground ctx.drawImage(fg, 0, canvas.height - fg.height); // Draw bird ctx.drawImage(bird, bX, bY); // Apply gravity bY += gravity; // Display score ctx.fillStyle = "#000"; ctx.font = "20px Verdana"; ctx.fillText("Score : " + score, 10, canvas.height - 20); requestAnimationFrame(draw); } draw();