Flappy Bernie: Javascript & Rails API Project

My Neighbor Totoro ft. Bernie and his mittens

Whew, Phase 4 Javascript project complete! Although there definitely was a learning curve moving from Ruby to Javascript, the fundamentals were pretty similar... Plus JavaScript just makes applications more fun.

The project requirements were relatively open-ended and broad, which left room for a variety of applications I could build. I chose to create a spinoff game, combining the infamous Flappy Bird and the viral Bernie mitten meme, called FLAPPY BERNIE! I thought it would be nostalgic to recreate the addictive game that has been taken down and is lost forever.

You can view my frontend and backend GitHub repos respectively.

Requirements

1. Must be an HTML, CSS, and JavaScript frontend with a Rails API backend.
2. All interactions between the client and the server must be handled asynchronously (AJAX) and use JSON as the communication format.
3. The JavaScript application must use Object Oriented JavaScript (classes).
4. The domain model served by the Rails backend must include a resource with at least one has-many relationship.
5. Your application should have at least 3 AJAX calls, covering at least 2 of Create, Read, Update, and Delete (CRUD).
6. Your client-side JavaScript code must use fetch with the appropriate HTTP verb, and your Rails API should use RESTful conventions.

Project Gameplay

The user is required to input a name and “login” which enables the side navigation tabs and game start button. Once the game begins, Bernie starts dropping every 20 milliseconds via the gravity amount, which is set to 2 pixels. Each pair of pipes are generated every 2.5 seconds and moves to the left every 15 milliseconds by 2 pixels. Every pair of pipes that Bernie can successfully navigate through without hitting the pipes or ground, earns the player a point.The native JavaScript timing events methods like setInterval(), setTimeout(), and clearInterval()were heavily used for coding these behaviors.

bernieDrops()

generatePipe()

Video Demo:

Object Oriented JavaScript

One of our requirements was to code the JavaScript application using Object-oriented programming. Originally, I had coded my work using Functional programming, and therefore had to refactor my code. I made two classes, Game and User. From our class, my application creates object instances that contain data and functionality using its respective constructor function.

The refactor helped to organize my code into groups instead of having a single index.js file with all my Javascript code.

Fetch and Async Await

The backend and frontend were connected using AJAX calls. I originally used fetch() to make AJAX calls via JSON, but refactored to use async and await keywords to enable asynchronous, promise-based behavior because it felt a little cleaner without all the .then statements.

I used async await to make GET, POST, and PATCH requests to grab all the games and users from the database, create new games and users, and edit the score attribute for the game once the user finished the game. Here’s a snippet of how my GET requests were made:

In the javascripts/services/api.js file

In the javascripts/models/game.js file

Closing Remarks

Learning to use Javascript for the frontend instead of relying solely onHTML and CSS opened up possibilities for various functionalities and behaviors in my applications. I’m super excited to spice up my future projects as well, and continue on to learning React in the next and last phase!