diff --git a/Flappy-bird/.DS_Store b/Flappy-bird/.DS_Store new file mode 100644 index 0000000..943b103 Binary files /dev/null and b/Flappy-bird/.DS_Store differ diff --git a/Flappy-bird/Images/bottompipe.png b/Flappy-bird/Images/bottompipe.png new file mode 100644 index 0000000..2c57b32 Binary files /dev/null and b/Flappy-bird/Images/bottompipe.png differ diff --git a/Flappy-bird/Images/flappybird.png b/Flappy-bird/Images/flappybird.png new file mode 100644 index 0000000..7f14459 Binary files /dev/null and b/Flappy-bird/Images/flappybird.png differ diff --git a/Flappy-bird/Images/flappybirdbg.png b/Flappy-bird/Images/flappybirdbg.png new file mode 100644 index 0000000..885ee71 Binary files /dev/null and b/Flappy-bird/Images/flappybirdbg.png differ diff --git a/Flappy-bird/Images/toppipe.png b/Flappy-bird/Images/toppipe.png new file mode 100644 index 0000000..8b0a967 Binary files /dev/null and b/Flappy-bird/Images/toppipe.png differ diff --git a/Flappy-bird/README.md b/Flappy-bird/README.md new file mode 100644 index 0000000..d865f3c --- /dev/null +++ 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! \ No newline at end of file diff --git a/Flappy-bird/index.html b/Flappy-bird/index.html new file mode 100644 index 0000000..a6db286 --- /dev/null +++ b/Flappy-bird/index.html @@ -0,0 +1,13 @@ + + + + + + Flappy bird + + + + + + + \ No newline at end of file diff --git a/Flappy-bird/script.js b/Flappy-bird/script.js new file mode 100644 index 0000000..4a50d5f --- /dev/null +++ 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 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; +} \ No newline at end of file diff --git a/Flappy-bird/style.css b/Flappy-bird/style.css new file mode 100644 index 0000000..de9dd5d --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/script.js b/script.js index f9ed6a9..392c637 100644 --- a/script.js +++ b/script.js @@ -353,6 +353,11 @@ const projects = [ discription: "This a simple project where i created a time watcher website using only html, css and js, which can shows the time from the entered date to the currect in the milli-seconds precise order.", link: "TimeWatcher/index.html", image: "https://github.com/shrey141102/Javascript-projects/assets/114330097/f86f3485-cd24-445c-b1a9-11fa9c0fb58e" + }, + { 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" } ];