Flappy Bird Game Clone with HTML
CSS and JavaScript
TO Start or Restart the Game Tab Spacebar
Flappy Bird is an endless game that involves a bird that the player can control. The player has to save the bird from colliding with the hurdles like pipes. Each time the bird passes through the pipes, the score gets incremented by one. The game ends when the bird collides with the pipes or falls down due to gravity.
Video Tutorial of Flappy Bird Games
Flappy Bird Games [Source Codes]
To Create Flappy Bird Games with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport", content="width=device-width, initial-scale=1.0">
- <title>Flappy Bird</title>
- <link rel="stylesheet" href="flappybird.css">
- <script src="flappybird.js"></script>
- </head>
- <body>
- <canvas id="board"></canvas>
- </body>
- </html>
Now paste the following codes into your style.css file
- body {
- font-family:'Courier New', Courier, monospace;
- text-align: center;
- }
-
- #board {
- background-image: url("./bg.png");
- }
Now paste the following codes into your script.js file
- let board;
- let boardWidth = 1080;
- let boardHeight = 600;
- let context;
-
- let birdWidth = 34;
- let birdHeight = 24;
- let birdX = boardWidth/8;
- let birdY = boardHeight/2;
- let birdImg;
-
- let bird = {
- x : birdX,
- y : birdY,
- width : birdWidth,
- height : birdHeight
- }
-
- let pipeArray = [];
- let pipeWidth = 64;
- let pipeHeight = 512;
- let pipeX = boardWidth;
- let pipeY = 0;
-
- let topPipeImg;
- let bottomPipeImg;
-
- let velocityX = -2;
- let velocityY = 0;
- let gravity = 0.4;
-
- let gameOver = false;
- let score = 0;
-
- window.onload = function() {
- board = document.getElementById("board");
- board.height = boardHeight;
- board.width = boardWidth;
- context = board.getContext("2d");
-
- birdImg = new Image();
- birdImg.src = "./flappybird.png";
- birdImg.onload = function() {
- context.drawImage(birdImg, bird.x, bird.y, bird.width, bird.height);
- }
-
- topPipeImg = new Image();
- topPipeImg.src = "./toppipe.png";
-
- bottomPipeImg = new Image();
- bottomPipeImg.src = "./bottompipe.png";
-
- requestAnimationFrame(update);
- setInterval(placePipes, 1500);
- document.addEventListener("keydown", moveBird);
- }
-
- function update() {
- requestAnimationFrame(update);
- if (gameOver) {
- return;
- }
- context.clearRect(0, 0, board.width, board.height);
-
- velocityY += gravity;
-
- bird.y = Math.max(bird.y + velocityY, 0);
- context.drawImage(birdImg, bird.x, bird.y, bird.width, bird.height);
-
- if (bird.y > board.height) {
- gameOver = true;
- }
-
- for (let i = 0; i < pipeArray.length; i++) {
- let pipe = pipeArray[i];
- pipe.x += velocityX;
- context.drawImage(pipe.img, pipe.x, pipe.y, pipe.width, pipe.height);
-
- if (!pipe.passed && bird.x > pipe.x + pipe.width) {
- score += 0.5;
-
- pipe.passed = true;
- }
-
- if (detectCollision(bird, pipe)) {
- gameOver = true;
- }
- }
-
- while (pipeArray.length > 0 && pipeArray[0].x < -pipeWidth) {
- pipeArray.shift();
-
- }
-
- context.fillStyle = "white";
- context.font="45px sans-serif";
- context.fillText(score, 5, 45);
-
- if (gameOver) {
- context.fillText("GAME OVER", 5, 90);
- }
- }
-
- function placePipes() {
- if (gameOver) {
- return;
- }
-
- let randomPipeY = pipeY - pipeHeight/4 - Math.random()*(pipeHeight/2);
- let openingSpace = board.height/4;
-
- let topPipe = {
- img : topPipeImg,
- x : pipeX,
- y : randomPipeY,
- width : pipeWidth,
- height : pipeHeight,
- passed : false
- }
- pipeArray.push(topPipe);
-
- let bottomPipe = {
- img : bottomPipeImg,
- x : pipeX,
- y : randomPipeY + pipeHeight + openingSpace,
- width : pipeWidth,
- height : pipeHeight,
- passed : false
- }
- pipeArray.push(bottomPipe);
- }
-
- function moveBird(e) {
- if (e.code == "Space" || e.code == "ArrowUp" || e.code == "KeyX") {
-
- velocityY = -6;
-
- if (gameOver) {
- bird.y = birdY;
- pipeArray = [];
- score = 0;
- gameOver = false;
- }
- }
- }
-
- function detectCollision(a, b) {
- return a.x < b.x + b.width &&
-
- a.x + a.width > b.x &&
-
- a.y < b.y + b.height &&
- a.y + a.height > b.y; //a's botto
- }
If you face any difficulties while creating Flappy Bird Game or your code is not working as expected, you can download the source code files by clicking download button.