Flappy Bat

After making so many simple games, I wanted to make a more dynamic game with advanced animations and physics.

I decided to learn how to use the HTML Canvas element and associated API for JavaScript, in order to make my own clone of the once popular mobile app, Flappy Bird.

I found a good free tutorial by Youtuber Kenny Yip, and once I was done learning Canvas, I used my own drawing skills to create custom graphics for my own game.

The template Flappy Bird project did not have an animated sprite, so I learned how to create my own animations using JavaScript. I drew a sprite sheet to help bring my new bat character to life: animating the bat involved iterating through the frames of the sprite sheet I had created.

I added my own saw hazard to the game, basing it on the existing code for the wall collisions, but adding the ability for it to randomly move up and down. I was struggling to implement the rotation of the saw sprite via Canvas's rotate method, but a few quick code prompts to ChatGPT got me a solution that worked as intended!