diff --git a/Games/Flappy_Birdd/README.md b/Games/Flappy_Birdd/README.md new file mode 100644 index 0000000000..90fd7ce36b --- /dev/null +++ b/Games/Flappy_Birdd/README.md @@ -0,0 +1,33 @@ +##Flappy_Birdd Game ## + +Game Description + +Flappy Bird is a simple, yet highly addictive side-scrolling game. The player controls a bird, attempting to fly between columns of green pipes without hitting them. The game ends if the bird collides with a pipe or the ground. Points are scored based on the number of pipes the bird successfully passes. + +Game Elements + +Bird: The main character controlled by the player. +Pipes: Obstacles that the bird must navigate through. +Ground: The surface at the bottom of the screen which, if collided with, ends the game. +Background: A simple static or slowly scrolling background to create a sense of movement. + +Game Logic + +The game can be broken down into several key components and steps: + +Initialization: + +Set up the game window. +Load images and sounds. +Initialize variables for the bird’s position, velocity, and the positions of pipes. + +Game Loop: + +Update the bird’s position based on gravity and user input. +Move pipes towards the bird and check for collisions. +Update the score when the bird passes through pipes. +Redraw the game window with updated positions and check for game over conditions. +Game Over: + +Display the score and possibly a game over screen. +Reset the game state for a new game if the player chooses to restart. \ No newline at end of file diff --git a/Games/Flappy_Birdd/flappybird.css b/Games/Flappy_Birdd/flappybird.css new file mode 100644 index 0000000000..733f6d5d24 --- /dev/null +++ b/Games/Flappy_Birdd/flappybird.css @@ -0,0 +1,9 @@ +body { + font-family:'Courier New', Courier, monospace; + text-align: center; +} + +#board { + /* background-color: skyblue; */ + background-image: url("/assets/images/flappybirdbg.png"); +} \ No newline at end of file diff --git a/Games/Flappy_Birdd/flappybird.js b/Games/Flappy_Birdd/flappybird.js new file mode 100644 index 0000000000..d1be84632b --- /dev/null +++ b/Games/Flappy_Birdd/flappybird.js @@ -0,0 +1,167 @@ +//board +let board; +let boardWidth = 360; +let boardHeight = 640; +let context; + +//bird +let birdWidth = 34; //width/height ratio = 408/228 = 17/12 +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; //width/height ratio = 384/3072 = 1/8 +let pipeHeight = 512; +let pipeX = boardWidth; +let pipeY = 0; + +let topPipeImg; +let bottomPipeImg; + +//physics +let velocityX = -2; //pipes moving left speed +let velocityY = 0; //bird jump speed +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"); //used for drawing on the board + + //draw flappy bird + // context.fillStyle = "green"; + // context.fillRect(bird.x, bird.y, bird.width, bird.height); + + //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); //every 1.5 seconds + document.addEventListener("keydown", moveBird); +} + +function update() { + requestAnimationFrame(update); + if (gameOver) { + return; + } + context.clearRect(0, 0, board.width, board.height); + + //bird + velocityY += gravity; + // bird.y += velocityY; + bird.y = Math.max(bird.y + velocityY, 0); //apply gravity to current bird.y, limit the bird.y to top of the canvas + 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; //0.5 because there are 2 pipes! so 0.5*2 = 1, 1 for each set of pipes + pipe.passed = true; + } + + if (detectCollision(bird, pipe)) { + gameOver = true; + } + } + + //clear pipes + while (pipeArray.length > 0 && pipeArray[0].x < -pipeWidth) { + pipeArray.shift(); //removes first element from the array + } + + //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; + } + + //(0-1) * pipeHeight/2. + // 0 -> -128 (pipeHeight/4) + // 1 -> -128 - 256 (pipeHeight/4 - pipeHeight/2) = -3/4 pipeHeight + 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's top left corner doesn't reach b's top right corner + a.x + a.width > b.x && //a's top right corner passes b's top left corner + a.y < b.y + b.height && //a's top left corner doesn't reach b's bottom left corner + a.y + a.height > b.y; //a's bottom left corner passes b's top left corner +} \ No newline at end of file diff --git a/Games/Flappy_Birdd/index.html b/Games/Flappy_Birdd/index.html new file mode 100644 index 0000000000..eadc6f1951 --- /dev/null +++ b/Games/Flappy_Birdd/index.html @@ -0,0 +1,13 @@ + + + + + + Flappy Bird + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index 22ec404355..a42fe83120 100644 --- a/README.md +++ b/README.md @@ -317,6 +317,8 @@ This repository also provides one such platforms where contributers come over an | [WordScramble](https://github.com/kunjgit/GameZone/tree/main/Games/wordScramble) [Roll_The_Dice](https://github.com/kunjgit/GameZone/tree/main/Games/Roll_The_Dice) | | [Black_jackk](https://github.com/kunjgit/GameZone/tree/main/Games/Black_jackk) | +| [Flappy_Birdd](https://github.com/kunjgit/GameZone/tree/main/Games/Flappy_Birdd) | + | [Recognizing_Figures](https://github.com/kunjgit/GameZone/tree/main/Games/Recognizing_Figures) | [Screen Pet Game](https://github.com/kunjgit/GameZone/tree/main/Games/Screen-Pet-Game) | | [Sudoku_light_theme](https://github.com/kunjgit/GameZone/tree/main/Games/Sudoku_light_theme) | | [Find_the_ball](https://github.com/kunjgit/GameZone/tree/main/Games/Find_the_ball) | diff --git a/assets/images/Flappy_Birdd.png b/assets/images/Flappy_Birdd.png new file mode 100644 index 0000000000..7f1445904c Binary files /dev/null and b/assets/images/Flappy_Birdd.png differ diff --git a/assets/images/bottompipe.png b/assets/images/bottompipe.png new file mode 100644 index 0000000000..2c57b32ab1 Binary files /dev/null and b/assets/images/bottompipe.png differ diff --git a/assets/images/flappybirdbg.png b/assets/images/flappybirdbg.png new file mode 100644 index 0000000000..885ee71bfd Binary files /dev/null and b/assets/images/flappybirdbg.png differ diff --git a/assets/images/toppipe.png b/assets/images/toppipe.png new file mode 100644 index 0000000000..8b0a96757d Binary files /dev/null and b/assets/images/toppipe.png differ