Make A Flappy Bird Game using JavaScript & P5.js framework

Learn to build a Flappy Bird game with JavaScript and p5.js, using a free online editor to draw shapes, simulate gravity and jumping, and add pipes, collision detection, and scoring.

Explore the basics of the p5.js framework by using setup and draw, creating a 400 by 400 canvas with createCanvas, and coloring shapes with background, fill, and rect or ellipse.

Define a Bird class in JavaScript with x and y coordinates and a size, implement a draw method using ellipse, and render it in a p5.js sketch.

Update position with velocity and acceleration to simulate gravity, then apply gravity in the bird class, set a floor at 90% height, and stop movement on contact.

Learn to implement a jumping mechanic for a flappy bird clone in JavaScript with p5.js, triggered by mouse clicks or the space bar, via doAction and bird.jump, adjusting gravity.

Create a health variable to kill the bird on floor or off-screen, preventing jumps when dead, and display a centered 'game over' in black. Add a reset function to restart.

Create a pipe class in pipe.js with x, gapWidth, gapHeight, and topGap, using random and map to place the gap between 10% and 60% of height, and draw green rects.

Create an illusion of infinite pipes using three pipe objects moving left, resetting off-screen with randomized top gaps, controlled by the bird's alive state and reset logic.

Implement collision logic for a flappy bird game by detecting pipe bounds, killing the bird on collision, and adjusting its floor to topGap plus gapHeight or floorY.

Implement score tracking in a Flappy Bird game using JavaScript and p5.js, updating the bird's score and its hiscore as pipes are passed and displaying them on screen.

Increase pipe speed with the score using a pipeSpeed variable, and implement a freeze feature that unfreezes on input, showing 'Press a space key or click to jump' when frozen.

Log in and save your project, then share your Flappy Bird game from the File menu to generate a full screen link, a standalone present link, or an embedded iframe.