flappy bird javascript

Build Flappy Bird Game using HTML Code

Do you want to know how to make Flappy Bird Game using HTML CSS and JavaScript?

Here I will tell you step by step how to make Flappy Bird Game. I will use HTML CSS and JavaScript to create this game.

Flappy Bird Game using HTML & JavaScript

If you want to strengthen your JavaScript knowledge then this type of JavaScript game will help you a lot. JavaScript Flappy Bird Game is basically a 2D game. These games do not require much code. A little HTML and CSS is used to structure the project. Then JavaScript is used to add the logic.

I hope you enjoy our blog so let’s start with a basic HTML structure for the Flappy Bird Game Code.

Code byN /A
Project DownloadLink Available Below
Language usedHTML, CSS, and JavaScript
External link / DependenciesNo
ResponsiveYES
Flappy Bird Game Code

Here you will find the complete source code and live preview to build this project(Create Flappy Bird clone in Javascript HTML CSS).

Flappy Bird 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>

Give our flappy bird game a framework. Using the <h3> tag selector, we will give our flappy bird game’s heading inside the body section. Now using the div tag with the class “random” The Flappy Bird image’s container will be made. The canvas Method is now being used, with 512 and 288 as the width and height, respectively.

There is all the HTML code & Css code for the Flappy Bird Game Code. Now you can see output without Css and JavaScript🤩. This is only the HTML coding output for Flappy Bird Game Code. Then we write Css And JavaScript for Flappy Bird Game Code🔥.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Output Flappy Bird Game Code:-

 

flappy bird Game html code
Flappy Bird Game Using HTML

 

Flappy Bird CSS Code

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

Now applying the class selector at random 100 vh will be chosen as the height. We’ll use the width property to change the display type to “set to flex” and the width to 100%. We will put the element in the centre by using the Align item property.

Responsive Gym Website Using HTML ,CSS &  JavaScript

We’ll inside the letter from the H3 Times. Put the text in centre alignment. utilising the text-align attribute. The text’s font size is also set to 2 REM.

ADVERTISEMENT

Output After Css Code:-

ADVERTISEMENT

ADVERTISEMENT

 

ADVERTISEMENT

Flappy Bird Game Code Html

ADVERTISEMENT

 

Flappy Bird 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();

 

Create Resume/CV Website Using HTML and CSS (Source Code)

[su_button id=”download” url=”https://drive.google.com/drive/folders/1v_vm9JE0m5AmCP8cLGDQrNjliTb2S_Ip?usp=sharing” target=”blank” style=”3d” size=”11″ wide=”yes” center=”yes” icon=”icon: download”]DOWNLOAD CODE NOW[/su_button]

Final Output Of Flappy Bird HTML and JavaScript Code

Now we have completed our Flappy Bird JavaScript Code. Here is our updated output with Html and JavaScript. Hope you like the Flappy Bird Game Source Code. you can see the output video and project screenshots.

See our other blogs and gain knowledge in front-end development. Thank you!

In this post, we learn how to create a Flappy Bird Game Using Html and JavaScript Code. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.



Tags: , , ,

This Post Has 3 Comments

  2. Anonymous April 5, 2022 Reply

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

  3. V.P.Bhaskar April 17, 2022 Reply

    WHERE ARE THE IMAGES BROTHER , THAT YOU HAVE MENTIONED IN SOURCE CODE WHERE WE HAVE TO GO FOR TH PICTURES

  4. Anonymous May 24, 2022 Reply

    Cant see any link or file for the images and sounds

Leave a Reply