├── assets ├── toppipe.png ├── vault x.png ├── bottompipe.png ├── flappybird.png └── flappybirdbg.png ├── style.css ├── index.html ├── README.md └── script.js /assets/toppipe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Flappy-Bird/HEAD/assets/toppipe.png -------------------------------------------------------------------------------- /assets/vault x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Flappy-Bird/HEAD/assets/vault x.png -------------------------------------------------------------------------------- /assets/bottompipe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Flappy-Bird/HEAD/assets/bottompipe.png -------------------------------------------------------------------------------- /assets/flappybird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Flappy-Bird/HEAD/assets/flappybird.png -------------------------------------------------------------------------------- /assets/flappybirdbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/Flappy-Bird/HEAD/assets/flappybirdbg.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Courier New', Courier, monospace; 3 | text-align: center; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | height: 100vh; 8 | margin: 0; 9 | padding: 10px; 10 | } 11 | 12 | #container { 13 | display: flex; 14 | flex-wrap: wrap; 15 | margin-top: 10px; 16 | } 17 | 18 | #canvas { 19 | background-image: url("./assets/flappybirdbg.png"); 20 | width: 100%; 21 | margin-top: 10px; 22 | max-width: 780px; 23 | height: auto; 24 | } 25 | 26 | #instructions { 27 | margin-left: 20px; 28 | } 29 | 30 | /* Responsive Styles */ 31 | @media (max-width: 600px) { 32 | #container { 33 | flex-direction: column; 34 | align-items: center; 35 | } 36 | 37 | #instructions { 38 | margin-left: 0; 39 | margin-top: 20px; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flappy Bird 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
18 | 19 |
20 |

How To Play

21 |

Press Space or ArrowUp key to help the bird fly

22 |

Press Space or ArrowUp key to Restart

23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **Simon_Game_Challenge** 2 | 3 | This is a simple implementation of the Flappy Bird game using HTML, CSS, and JavaScript. 4 | 5 |
6 | 7 | ## **Description 📃** 8 | - Flappy Bird is a popular side-scrolling game where the player controls a bird and tries to navigate it through gaps between pipes without touching them. The objective is to achieve the highest possible score by successfully passing through as many gaps as possible. 9 | 10 | ## **functionalities 🎮** 11 | - The game starts as soon as it is loaded in the browser. 12 | - The player can control the bird's movement by clicking or tapping on the screen, causing the bird to flap its wings and ascend. 13 | - Gravity pulls the bird downward, and if it touches any of the pipes or the ground, the game is over. 14 | - The player's score increases with each successfully passed gap between the pipes. 15 | - The game keeps track of the player's highest score. 16 | - The player can restart the game by refreshing the page. 17 |
18 | 19 | ## **How to play? 🕹️** 20 | - To play or keep the bird Floating Press Space or Arrow Up key 21 | - The game will stopp once the birds collides or Falls 22 | - Press space or arrowup key to then restart the game 23 | 24 |
25 | 26 | ![image](../../assets/images/Flappy_Bird_Game.png) 27 | 28 |
29 | 30 | ## **Working video 📹** 31 | 32 |
33 | 34 | 35 | https://github.com/AbhishekPSingh07/GameZone/assets/79076050/7e790f27-2092-4810-8612-d31fe38609ab 36 | 37 | 38 |
39 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | //canvas 2 | let canvas; 3 | let boardWidth = 780; 4 | let boardHeight = 720; 5 | let context; 6 | 7 | //bird 8 | let birdHeight = 24; 9 | let birdWidth = 34; 10 | let birdX = boardWidth/8; 11 | let birdY = boardHeight/2; 12 | let birdImage; 13 | 14 | let bird = { 15 | x : birdX, 16 | y : birdY, 17 | width : birdWidth, 18 | height : birdHeight 19 | } 20 | 21 | //pipes 22 | let pipeArray = []; 23 | let pipeWidth = 64; 24 | let pipeHeight = 512; 25 | let pipeX = boardWidth; 26 | let pipeY = 0; 27 | let topPipeImg; 28 | let bottomPipeImg; 29 | 30 | //score 31 | let score = 0; 32 | let HighScore = 0; 33 | 34 | //game Over 35 | let gameOver = false; 36 | 37 | //physics 38 | let velocityX = -2;//pipes moving left Speed 39 | let velocityY = 0;//bird Jump seed 40 | let gravity = 0.4; 41 | window.onload = function(){ 42 | canvas = document.getElementById("canvas"); 43 | canvas.width = boardWidth; 44 | canvas.height = boardHeight; 45 | context = canvas.getContext('2d'); 46 | 47 | //load image bird 48 | 49 | birdImage = new Image(); 50 | birdImage.src = "./assets/flappybird.png"; 51 | birdImage.onload = function(){ 52 | context.drawImage(birdImage,bird.x, bird.y, bird.width, bird.height); 53 | } 54 | 55 | //load the pipes 56 | topPipeImg = new Image(); 57 | topPipeImg.src = "./assets/toppipe.png" 58 | 59 | bottomPipeImg = new Image(); 60 | bottomPipeImg.src = "./assets/bottompipe.png"; 61 | 62 | requestAnimationFrame(Update); 63 | setInterval(placePipes,2000); 64 | document.addEventListener("keydown",moveBird); 65 | 66 | } 67 | function Update(){ 68 | requestAnimationFrame(Update); 69 | if(gameOver){ 70 | return; 71 | } 72 | context.clearRect(0,0,canvas.width,canvas.height); 73 | 74 | //bird 75 | velocityY += gravity; 76 | bird.y = Math.max(bird.y+velocityY,0); 77 | context.drawImage(birdImage,bird.x, bird.y, bird.width, bird.height); 78 | 79 | if(bird.y > canvas.height){ 80 | gameOver = true 81 | } 82 | 83 | //pipe 84 | for(let i=0;i pipe.width+pipe.x){ 90 | score += 0.5; 91 | pipe.passed = true; 92 | } 93 | 94 | if(detectCollision(bird,pipe)){ 95 | gameOver = true; 96 | 97 | } 98 | 99 | } 100 | //clear 101 | while(pipeArray.length >0 && pipeArray[0].x < -pipeWidth){ 102 | pipeArray.shift() 103 | } 104 | //Score 105 | context.fillStyle = "white"; 106 | context.font = "45px sans-serif"; 107 | context.fillText(score,5,45); 108 | context.font = "25px sans-serif"; 109 | context.fillText("HighScore: ",5,85); 110 | if(score > HighScore){ 111 | context.fillText(score,130,85); 112 | }else{ 113 | context.fillText(HighScore,130,85); 114 | } 115 | 116 | 117 | if(gameOver){ 118 | context.font = "45px sans-serif"; 119 | context.fillText("GAME OVER",20,320); 120 | context.fillText("Score:",20,360); 121 | context.fillText(score,155,360); 122 | context.fillText("High Score:",20,400); 123 | if(score> HighScore){ 124 | context.fillText(score,255,400); 125 | }else{ 126 | context.fillText(HighScore,255,400); 127 | } 128 | 129 | 130 | } 131 | } 132 | function placePipes(){ 133 | 134 | if(gameOver){ 135 | return; 136 | } 137 | let randomPipeY = pipeY - pipeHeight/4 - Math.random() *pipeHeight/2; 138 | let openingSpace = canvas.height/4; 139 | let topPipe = { 140 | img : topPipeImg, 141 | x : pipeX, 142 | y : randomPipeY, 143 | width : pipeWidth, 144 | height : pipeHeight, 145 | passed : false, 146 | } 147 | pipeArray.push(topPipe); 148 | let bottomPipe = { 149 | img : bottomPipeImg, 150 | x : pipeX, 151 | y : randomPipeY + pipeHeight + openingSpace, 152 | width : pipeWidth, 153 | height : pipeHeight, 154 | passed : false, 155 | } 156 | 157 | pipeArray.push(bottomPipe); 158 | 159 | } 160 | function moveBird(e){ 161 | if(e.code === "Space" || e.code === "ArrowUp"){ 162 | //jump 163 | velocityY = -6; 164 | 165 | if(gameOver){ 166 | if(score > HighScore){ 167 | HighScore = score; 168 | } 169 | bird.y = birdY; 170 | pipeArray=[]; 171 | score = 0; 172 | gameOver = false; 173 | } 174 | } 175 | } 176 | 177 | function detectCollision(a,b){ 178 | return a.x b.x && 180 | a.y b.y 182 | } 183 | --------------------------------------------------------------------------------