flappy bird javascript

Build Flappy Bird Game using HTML Code

Build the Flappy Bird Game using HTML and JavaScript Code

Hello Coder, Welcome to the Codewithrandom blog. In this article, we create a step-by Step Flappy Bird game using HTML code. Creating a 2D-based game using Javascript helps developers understand the most advanced concepts of JavaScript, which helps users build multiple projects that can later be used in their resumes.

In this article, we will be working on a 2D endless game where a bird continuously flies in a particular area, and the user has to use the spacebar key to control the movements of the bird and pass it through the obstacles in the mid way.We will be using HTML for structuring the game design and then JavaScript for adding functionality to our game.

What is Flappy Bird Game?

Flappy Bird is an endless game that has a bird that is controlled by the user using the spacebar. The player must prevent the bird from hitting obstacles like pipes. Every time the bird moves through the pipes, the score goes up by one. The game is over when the bird hits the pipes or plummets to the ground due to gravity. The procedures that must be performed to create this game are described in the sections below.

What are the benefits of Creating these games?

There are numerous benefits of creating these games, some of them are:

1. Gaining experience on real-world projects.

2. It also helps in understanding advanced JavaScript concepts.

3. Also added to the resume for job interviews.

4. Enhance design skills.

25 FREE HTML Games (Source Code)

flappy bird Game html code
Flappy Bird Game using HTML and JavaScript Code


 

We can learn a lot about CSS and JavaScript from the game Flappy Bird. In order to give our flappy bird game a dynamic aspect, we will examine photographs and their characteristics. Using fundamental JavaScript concepts, we will also include the control movements of the birds in our game. This tutorial will demonstrate how to make a responsive Flappy Bird game utilizing fundamental JavaScript, HTML, and CSS ideas.

50+ HTML, CSS & JavaScript Projects With Source Code

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

 

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:-

 

ADVERTISEMENT

flappy bird Game html code
Flappy Bird Game Using HTML

ADVERTISEMENT

 

ADVERTISEMENT

Flappy Bird CSS Code:-

ADVERTISEMENT

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

ADVERTISEMENT

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.

Output After Css Code:-

 

Flappy Bird Game Code Html

 

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

  • Use strict is the first remark in the code.
  • This ensures that the code will execute without any issues.
  • The object CVS, a canvas element on the page, is created in the following line.
  • The context of this canvas is then obtained, and it is saved in the ctx variable.
  • The next several lines also load the audio files fly and score while loading images into the variables bird, bg, fg, pipeNorth, pipeSouth, and score.
  • Two images are loaded by the code—one for the bird and one for the background.
  • Next, a “gap” variable is created and given a value of 85 pixels.
  • The x and y coordinates of the bird’s beginning place on the screen are then determined using variables called bX and bY.
  • When the bird is released by pressing a key on the keyboard, gravity and score will be used to determine whether it flies north or south of the pipe.
  • It then loops through each pipe and draws it on top of the background image, using a constant height for each pipe.
  • The code also checks to see if there is a collision between any pipes and the bird.
  • If so, it reloads the page with an animation that plays when you click on one of the pipes.
  • The code is a very simple example of the use of requestAnimationFrame function.

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:-

Flappy Bird Game Code Html
Flappy Bird Game using 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!

 

10+ Javascript Project Ideas For Beginners( Project Source Code)

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.

Written by – CodeWithRandom/Anki 

Which code editor do you use for this Flappy Bird Game coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

What is Flappy Bird Game

Flappy Bird is an endless game that has a bird that is controlled by the user using the spacebar. The player must prevent the bird from hitting obstacles like pipes. Every time the bird moves through the pipes, the score goes up by one.

What are the benefits of Creating these games?

There are numerous benefits of creating these games, some of them are:
1. Gaining experience on real-world projects.
2. It also helps in understanding advanced JavaScript concepts.
3. Also added to the resume for job interviews.
4. Enhance design skills.



This Post Has 3 Comments

  1. Anonymous

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

  2. V.P.Bhaskar

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

  3. Anonymous

    Cant see any link or file for the images and sounds

Leave a Reply