Live coding – Flappy Bird game using P5js

a year ago, April 30, 2023

Reading time: 3 mins

Live coding a game is an exciting experience, and that’s exactly what I did today! I streamed live on YouTube and LinkedIn and coded a Flappy Bird game from scratch using P5js.

P5js is a popular JavaScript library that simplifies creating interactive graphics and animations. It is easy to use and allows you to focus on your creativity rather than the nitty-gritty of coding. That’s why I chose it for this project.

The first thing I did was to create a bird, which was basically a circle. The next step was to add the movement to the bird. I used the P5js’ keyPressed function to detect when the player pressed any key. When a key is pressed, the bird moves up, and when it’s not pressed, the bird falls. I also added gravity to the game, which makes the bird fall faster as it moves down.

After that, I created the pipes. The pipes were created using P5js’s rectangle function, and I placed them and added a gap between the pipes in a random position. I added collision detection between the bird and the pipes. If the bird collides with the pipes, the game ends.

Finally, I added a score counter, which increases every time the bird passes through a set of pipes. I also added a game over screen, which shows the player’s score and allows them to restart the game.

The Flappy Bird game was a fun project to work on. By using P5js, I was able to create a fully functional game in a short amount of time. If you’re interested in learning more about P5js, you can visit their website and start creating your own games and interactive graphics.