I completed this project as a personal learning project
The Context
In Thinkful's Intermediate JavaScript course, I had to create an imitation of the infamous flappy bird game with vanilla JavaScript.
The flapby bird!.
The Stack
Strictly HTML5 canvas, CSS, and vanilla JS. It is hosted on Github pages. Browserify is used to bundle all the scripts.
My Role
Since this is a personal project, I did everything including the graphics. You like?
The Process
I used Entity-Component-System pattern as the backbone. At first, I had to get the draw cycle to run at 60 fps for a smooth game. Once that was good, I focused on drawing the bird itself in the middle of the canvas for every draw cycle. A simple physics calculation is added to make the bird fall and an event listener to boost the bird's position whenever the user performs a mouse click.
The obstacles were created at an interval and are moved to the left every draw cycle until they disappear and were destroyed. The gap's location is randomized, but it gets narrower after every "level".
I created a background that can be repeated so that I can stack two of them horizontally and just cycle through them to give the impression of moving forward.