More...

Overview

The goal of the assignment was to create a front-end application that leveraged an API to display information in a meaningful or interactive way. As someone who loves games and interactivity, I used this as an excuse to develop a simple game that would take information from an API, manipulate it in some meaningful way, and allow users to play with that data.

The core function of the application could be broken down into 3 main parts. The API call/information retrieval, UI to interact, and the game logic to resolve ‘combat’. The API call and return function took actor information and stored it into an object that took actor and movie popularity and distilled them into the Actor’s armor, health, and attack stats. At its heart, the armors health was based on their popularity, attacks were based on movie popularity, and armor was based on a combination of the two.

I used Dragula to handle the majority of the UI interaction on the screen. I liked how intuitive it made the controls from a user perspective, and there were a number of features within the Dragula API that made it an easy choice over jQuery UI. It handled a lot of the heavy lifting from a UI perspective and let me focus on the interactions as a developer.

Outcome

A working app that converts information about actors into a playable game. There are a few bugs left to be worked out, but ultimately it accomplished the objectives of the assignment.

Preliminary feedback I’ve gotten about the game has been positive. Reviewers have described it as the type of game they could idly play while they watch TV or a movie.

Challenges

When I started the project I initially intended to create an e-sports fantasy type game. I find fantasy sports interesting for the heavy dependence on statistics but I find myself bored by the lack of direct interactivity. However, as I tried to find this information, I was unable to find a resource that would give me access to what I needed. I decided to pivot to actors because they were easily recognizable, and I recognized that the specific data implementation I used at first was irrelevant to the larger concept of what I was trying to achieve. This allowed me to create a game that could be hooked up to different sets of information (athletes come to mind) and still be played in similar implementation.

The biggest technological challenge I had with the project was using jQuery to handle state changes in the app. This is incredibly difficult to make work because jQuery as a framework doesn’t really exist to handle state changes the way my app wants to behave. For example there are three main different screens (you could argue two, but I set it up as three) that a user will go through on my app, the welcome screen, the main game screen, and the end-game screen. I handle these with a number of hides, class selection, and state changes, but the code becomes very hackneyed as I have to assigned and remove css states in a linear way with jQuery.

For example, I handle single player v. multiplayer by defining a global variable, and then initializing a different click variable based on that option. That same click variable has to also regulate whether or not a new actor should be added to two players or a single player. In order to overcome these challenges I plan to port the project over to an Angular implementation which I believe will handle these changes more easily.