Inspiration
I always wanted to have a game that I could play that didn't require too much thinking and had a chill vibe to it, and that's essentially what A Flappy Night does. The RnB background music I made on FL Studio and added into the game coupled with the dreamy, night vibe brought about through the background setting and purple-tinted pipes create the feeling that I intended: a chill game with chill music.
What it does
A Flappy Night functions like regular Flappy Bird. The goal: get Flappy Bird through the night by flying through the purple-tinted pipes. Additionally, if you don't like the music, you are able to toggle it on and off using a button I added on the top right of the screen. The score and "Game Over" sign is written in a night-like font to fit the vibe.
How I built it
I used Javascript, CSS, and HTML. Since it was my first time coding frontend and using these languages, I used Google and w3schools to help me. Essentially, I created 'board' tags for items that were on the canvas, like the background, pipes, bird, and text. I also had to add the game soundtrack by
Challenges I ran into
An issue I ran into was formatting the project so that it would work for the images that I selected. In the beginning, I used the default flappy bird images so I would not have to worry about formatting later on. However, I wanted to push myself to make a night-themed flappy bird game, so I watched videos and youtube to learn how to format the canvas and change the size of everything so that the game could work with images that are scaled differently. Eventually, the end result came out great!
What we learned
I learned that coding in frontend languages was not as intimidating as I expected it to be. At first, I did not know how I was going to learn three languages to code this project, but I learned how to make a canvas, organize the files that I coded in, introduce audio within my project, create button, use different fonts, and troubleshoot for frontend problems. Making this app was a lot of fun!
Log in or sign up for Devpost to join the conversation.