Merge pull request #194 from Gaurav0203Shetty/fllap

Flappy bird
shrey141102 · Jan 2, 2024 · f320565 · f320565
2 parents d25d6ea + 2bef7c1
commit f320565
Show file tree

Hide file tree

Showing 10 changed files with 198 additions and 0 deletions.
diff --git a/Flappy-bird/.DS_Store b/Flappy-bird/.DS_Store
diff --git a/Flappy-bird/Images/bottompipe.png b/Flappy-bird/Images/bottompipe.png
diff --git a/Flappy-bird/Images/flappybird.png b/Flappy-bird/Images/flappybird.png
diff --git a/Flappy-bird/Images/flappybirdbg.png b/Flappy-bird/Images/flappybirdbg.png
diff --git a/Flappy-bird/Images/toppipe.png b/Flappy-bird/Images/toppipe.png
diff --git a/Flappy-bird/README.md b/Flappy-bird/README.md
@@ -0,0 +1,28 @@
+Flappy Bird Game
+
+Introduction:
+This is a simple implementation of the classic Flappy Bird game using HTML, CSS, and JavaScript. The game features a bird that the player controls by pressing the spacebar or the up arrow key to avoid pipes and earn points.
+
+Getting Started:
+To play the game, open the index.html file in a web browser. The game will start automatically, and you can control the bird's height by pressing the spacebar, up arrow key, or the 'X' key. The objective is to navigate the bird through the openings between the pipes without colliding.
+
+Game Components:
+Canvas: The game board is represented using an HTML canvas element with the id "board."
+Bird: The player controls a bird with a specified width, height, and initial position. The bird's image is loaded from "./Images/flappybird.png."
+Pipes: Pipes are obstacles that the bird must navigate through. The game generates pipes at intervals and moves them from right to left. The top and bottom pipes have images loaded from "./Images/toppipe.png" and "./Images/bottompipe.png," respectively.
+Score: The player earns points by successfully passing through the openings between pipes. The current score is displayed in the top left corner of the canvas.
+
+Game Logic:
+The game utilizes a simple physics model with gravity to simulate the bird's movement.
+Pipes are generated at intervals using the placePipes function, and their positions are updated in the update function.
+The game ends if the bird collides with the ground or a pipe. The final score and "GAME OVER" message are displayed on the canvas.
+
+Controls:
+Press the spacebar, up arrow key, or 'X' key to make the bird jump and avoid obstacles.
+Customization
+You can customize the game's appearance by modifying the styles in the "style.css" file.
+Images for the bird and pipes can be replaced by updating the image sources in the JavaScript code.
+
+Acknowledgments:
+Special thanks to the creators of Flappy Bird for the inspiration.
+Have fun playing Flappy Bird!
diff --git a/Flappy-bird/index.html b/Flappy-bird/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flappy bird</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
+</head>
+<body>
+    <canvas id="board"></canvas>
+</body>
+</html>
diff --git a/Flappy-bird/script.js b/Flappy-bird/script.js
@@ -0,0 +1,143 @@
+let board;
+let boardWidth = 360;
+let boardHeight = 640;
+let context;
+
+let birdWidth = 34;
+let birdHeight = 24;
+let birdX = boardHeight/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");
+
+    //context.fillStyle = "green";
+    //context.fillRect(bird.x, bird.y, bird.width, bird.height);
+
+    birdImg = new Image();
+    birdImg.src = "./Images/flappybird.png";
+    birdImg.onload = function(){
+        context.drawImage(birdImg, bird.x, bird.y, bird.width, bird.height);
+    }
+    topPipeImg = new Image();
+    topPipeImg.src = "./Images/toppipe.png";
+    bottomPipeImg = new Image();
+    bottomPipeImg.src = "./Images/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 bottompPipe = {
+        img : bottomPipeImg,
+        x : pipeX,
+        y : randomPipeY + pipeHeight + openingSpace,
+        width : pipeWidth,
+        height : pipeHeight,
+        passed : false
+    }
+    pipeArray.push(bottompPipe);
+}
+
+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;
+}
diff --git a/Flappy-bird/style.css b/Flappy-bird/style.css
@@ -0,0 +1,9 @@
+body{
+    font-family: 'Courier New', Courier, monospace;
+    text-align: center;
+}
+
+#board{
+    background-color: skyblue;
+    background-image: url(./Images/flappybirdbg.png);
+}
diff --git a/script.js b/script.js
@@ -348,6 +348,11 @@ const projects = [
     discription: "Welcome to the Magic 8 Ball project! This simple web application allows users to ask a question and receive a mysterious and random answer from the virtual Magic 8 Ball.", 
     link: "Magic-8-ball/index.html", 
     image: "https://www.adweek.com/wp-content/uploads/files/magic-8-hed-2015.jpg" 
+  },
+    { title: "Flappy bird clone",
+    discription: "This is a simple implementation of the classic Flappy Bird game using HTML, CSS, and JavaScript. The game features a bird that the player controls by pressing the spacebar or the up arrow key to avoid pipes and earn points.", 
+    link: "Flappy-bird/index.html", 
+    image: "https://imageio.forbes.com/blogs-images/ccuster/files/2014/02/flappybird.jpg?height=400&width=711&fit=bounds" 
   }
 
 ];