Aanchi-glitch2744 · varshithab05 · Oct 26, 2023 · Oct 28, 2023
diff --git a/JavaScriptLogicGames/FlappyBird/Readme.md b/JavaScriptLogicGames/FlappyBird/Readme.md
@@ -0,0 +1,28 @@
+# Flappy Bird Game
+
+## Introduction
+Welcome to the Flappy Bird Game repository!
+This project is an implementation of the classic Flappy Bird game using HTML/CSS JS.
+It's a fun and addictive game where you control a bird to avoid obstacles and score points by flying through gaps.
+
+## Rule :
+Bird should not touch the pipes.
+
+## How to Play
+1. **Game Start**: The game starts as soon as you open the game tab.
+2. **Flying the Bird**: Click on the spacebar to make the bird fly. Tap it repeatedly to control the bird's altitude.
+3. **Avoiding Obstacles**: Navigate the bird carefully to avoid colliding with the pipes.
+4. **Scoring**: Your score increases as you travel a greater distance without colliding with the pipes.
+
+## How to Use This Code Locally :
+1. Clone or download this repository to your local machine.
+2. Ensure you have a compatible web browser (e.g., Google Chrome, Firefox) to run the game.
+3. Open the HTML file (index.html) in your web browser to play the game.
+
+## Customising the game
+change the velocityX increase or decrease the speed of rods to make game easier
+```js
+let velocityX = -2;
+```
+
+## Have Fun :)
diff --git a/JavaScriptLogicGames/FlappyBird/index.html b/JavaScriptLogicGames/FlappyBird/index.html
@@ -0,0 +1,13 @@
+<!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="style.css">
+    </head>
+    <body>
+        <canvas id="board"></canvas>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/JavaScriptLogicGames/FlappyBird/script.js b/JavaScriptLogicGames/FlappyBird/script.js
@@ -0,0 +1,160 @@
+
+//board
+let board;
+let boardWidth = 360;
+let boardHeight = 640;
+let context;
+
+//bird
+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
+}
+
+//pipes
+let pipeArray = [];
+let pipeWidth = 64;
+let pipeHeight = 512;
+let pipeX = boardWidth;
+let pipeY = 0;
+
+let topPipeImg;
+let bottomPipeImg;
+
+//physics
+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"); 
+
+    //load images
+    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);
+
+    //bird
+    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;
+    }
+
+    //pipes
+    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;
+        }
+    }
+
+    //clear pipes
+    while (pipeArray.length > 0 && pipeArray[0].x < -pipeWidth) {
+        pipeArray.shift();
+    }
+
+    //score
+    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") {
+        //jump
+        velocityY = -6;
+
+        //reset game
+        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/JavaScriptLogicGames/FlappyBird/style.css b/JavaScriptLogicGames/FlappyBird/style.css
@@ -0,0 +1,8 @@
+body{
+    font-family: 'Courier New', Courier, monospace;
+    text-align: center;
+}
+#board{
+    background-color: aqua;
+    background-image:url(/flappybirdbg.png) ;
+}