Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript







Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Flappy Bird Game Code. We use HTML, Css, and javascript for this Flappy Bird Game Code. I hope you enjoy our blog so let’s start with a basic HTML structure for the Flappy Bird Game Code.

HTML Code

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flappy Bird Game</title>
</head>
<body>
<h3>flappyBird Game</h3>
<div class="random">
<canvas id="canvas" width="288" height="512"></canvas>
</div>
<script src="flappyBird.js"></script>
</body>
</html>

There is all the HTML code & Css code for the Flappy Bird Game Code. Now, you can see an output with CSS, then we write javascript for the Flappy Bird Game Code .

output

Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript

CSS code

 .random{  
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
h3{
text-align: center;
font-size: 2rem;
}

Css Updated output

Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript

Javascript code 

 "use strict";  
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
// load images
var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeNorth = new Image();
var pipeSouth = new Image();
bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeNorth.src = "images/pipeNorth.png";
pipeSouth.src = "images/pipeSouth.png";
// some variables
var gap = 85;
var constant;
var bX = 10;
var bY = 150;
var gravity = 1.5;
var score = 0;
// audio files
var fly = new Audio();
var scor = new Audio();
fly.src = "sounds/fly.mp3";
scor.src = "sounds/score.mp3";
// on key down
document.addEventListener("keydown", moveUp);
function moveUp() {
bY -= 25;
fly.play();
}
// pipe coordinates
var pipe = [];
pipe[0] = {
x: cvs.width,
y: 0,
};
// draw images
function draw() {
ctx.drawImage(bg, 0, 0);
for (var i = 0; i < pipe.length; i++) {
constant = pipeNorth.height + gap;
ctx.drawImage(pipeNorth, pipe[i].x, pipe[i].y);
ctx.drawImage(pipeSouth, pipe[i].x, pipe[i].y + constant);
pipe[i].x--;
if (pipe[i].x == 125) {
pipe.push({
x: cvs.width,
y: Math.floor(Math.random() * pipeNorth.height) - pipeNorth.height,
});
}
// detect collision
if (
(bX + bird.width >= pipe[i].x &&
bX <= pipe[i].x + pipeNorth.width &&
(bY <= pipe[i].y + pipeNorth.height ||
bY + bird.height >= pipe[i].y + constant)) ||
bY + bird.height >= cvs.height - fg.height
) {
location.reload(); // reload the page
}
if (pipe[i].x == 5) {
score++;
scor.play();
}
}
ctx.drawImage(fg, 0, cvs.height - fg.height);
ctx.drawImage(bird, bX, bY);
bY += gravity;
ctx.fillStyle = "#000";
ctx.font = "20px Verdana";
ctx.fillText("Score : " + score, 10, cvs.height - 20);
requestAnimationFrame(draw);
}
draw();

Final output

Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Flappy Bird Game Code. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
Share on:

0 thoughts on “Flappy Bird Game Code | Flappy Bird Game Using Html Css Javascript”

  1. THANK YOU FOR THIS AMAZING POST SIR, THESE CODES HELP ME A LOT IN IMPROVING MY SKILLS. PLEASE KEEP DOING THIS SIR.��

    Reply

Leave a Comment