You are currently viewing Flappy Bird Game Using HTML & JavaScript

Flappy Bird Game Using HTML & JavaScript

Flappy Bird Game Using HTML & JavaScript

 

Flappy Bird Game Using JavaScript
Flappy Bird Game Using JavaScript

 

Welcome to the CodeWithRandom blog. In this blog, we learn how to create a simple Flappy Bird Game. We use HTML, Css, And JavaScript🤩 for this Flappy Bird Game Source Code.

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

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

HTML Code Flappy Bird 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 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 Using HTML
Flappy Bird Game Using HTML

CSS code Flappy Bird Game 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
Flappy Bird Game Using HTML CSS JAVASCRIPT

Javascript Code Flappy Bird Game 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
Flappy Bird Game Using HTML CSS JAVASCRIPT

Now we have completed our javascript code for Flappy Bird Game. Here is our updated output with javascript. Hope 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 !

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

In this post, we learn how to create a Flappy Bird Game Code using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – CodeWithRandom/Anki 

This Post Has 0 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