Live coding – Flappy Bird game using P5js
Reading time: 2 mins

Live coding – Flappy Bird game using P5js

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.

Source Code


Upgrading NextJs v11 to 12 hopefully to 13
A cry for Help turns out a goat. ChatGPT continues the story with the help of Mid-journey and Firefly
© 2023 Anil Maharjan