Live coding – Flappy Bird game using P5js

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.

Episode 1: Angry Bird

Lazy sunday LIVE, Let’s build a Game (Episode: 1) Angry Bird

Episode 2: Angry Bird transforms to Ballon Fighter (NES)

Lazy sunday LIVE, Let’s build a Game (Episode: 2) Angry Bird transforms to Ballon Fighter (NES)

Episode 3: Balloon Fight, add Platforms

Lazy sunday LIVE, Let’s build a Game (Episode: 3) Balloon Fight, add Platforms

Episode 4: Balloon Fight, Big refactor, multiple platforms, multi player

Lazy sunday LIVE, Let’s build a Game (Episode: 4) Balloon Fight, Big refactor, multiple platforms, multi player

Episode 5: Balloon Fight, Player player collision

Lazy sunday LIVE, Let’s build a Game (Episode: 5) Balloon Fight, Player player collision

Source Code

https://github.com/dejavu1987/flappy-bird-p5js

DEMO

https://dejavu1987.github.io/flappy-bird-p5js/

Previous
FreeTouchDeck with air mouse feature
Next
Upgrading NextJs v11 to 12 hopefully to 13
© 2024 Anil Maharjan