Making My First Game!

At the end of another Mod in Flatiron’s Online course comes another project! This time around, we were tasked with making a single page application(SPA) using Javascript for the frontend and a Rails API for the backend. Instead of making another to-do list or Facebook/Twitter clone, I decided to make a glorified posting app under the guise of a game!

I call my app DB Arena, where users can go head to head with each other in a bid to gain the right to post a message on the database, which will be displayed on the Killfeed! Two players enter the arena, and only one can win. With every win, a user gains a soul and the right to post once on the database. However, with every loss, users lose a soul, and if they reach zero souls, they get immediately deleted from the database!

Although it may appear to be a simple game, I got some feedback from a tester that it’s challenging to keep track of your body and death circle as well as the opponents! You’re trying to keep track of where your body is so you can keep it away from your opponent’s death circle, and you’re also keeping track of your opponent’s body so you can have your death circle touch their body. You essentially need to keep track of all four circles if you want to have the best chance at surviving in the database!

Again, although the game is simple at it’s surface, everything working under the hood required way more research in order to bring everything together. The biggest parts to undertake were the controls for each player and their death circles, as well as the conditions that would indicate which player wins. As for the controls, we had a module in Flatiron that briefly touched on moving shapes using JS to adjust the shape’s pixels and positions relative to a background. However, it only allowed for one keydown at a time, so you couldn’t move diagonally and changing directions wasn’t quite smooth, and since it only allowed ONE keydown, it wouldn’t help with my concept of a 2 player local vs game. So I looked up alternative methods of controlling elements with keydowns and found a demonstration by Tom Hodgins that had very smooth movement as well as allowing multiple keydowns at the same time!

The next piece of the puzzle was the win condition! How could I possibly have my JS recognize that a death circle had touched the opponent’s body circle? As with games in general, the reason players don’t normally fall through the world floor and the reason Mario takes damage from making contact with an enemy the wrong way is simple: unit collision. Games knowing when two objects are making contact is important in having an interactive experience! I was able to find amazing documentation on 2D unit collision. With JS, the top and bottom pixel values of an element can be tracked in real time, so having those two values is already very useful. Using circles as shapes makes unit collision much simpler since the distance between the center and border of the circle is the same at every point of the border (the radius). If you treat the top and bottom style values of each circle as the x value and y value on a grid, you can compare the positions of two circles and get the distance using the Pythagorean Theorem! So where do the radii come into play? Imagine two circles touching each other at their borders without overlapping. What do you think would be the distance between their centers? Exactly! Their radii added together would be the answer, so a distance that’s equal to the two circle’s radii would represent the circles touching. As long as the distance between the two circle’s centers are above the sum of their radii, then there’s no unit collision detected. However, the moment the distance is equal to the sum of their radii, there’s unit collision, and in my app that means someone gains a kill, a soul, and the chance to post on the database! It also means someone else loses a soul, and if they happen to be on their last soul going into the fight, then that also means they disappear from the database forever!

On a sidenote:
I wanted to add something off topic regarding a hardship I had with this project, especially because it seemed as though not many other people were having the same issue, and soon you’ll see why. In making my single page application, every time I made a fetch request to my own Rails API, it would force my app to navigate back to the app itself, essentially refreshing the page. Now, this completely defeats the purpose of fetch and a single page application! The whole idea of these two things and AJAX is that the user doesn’t need to refresh the page to see changes because fetch requests will handle things between the app and the server seamlessly, while JS will handle the changes on the app dynamically. However, since all my fetch requests to my API would cause a refresh, I couldn’t make use of all my JS changes to the DOM because the DOM would be reset to its original state. That being said, placing my fetch behind a button would still cause my page to refresh when pressing on the button (and the issue wasn’t fixed with a simple .preventDefault(), as it wasn’t the issue). Placing it behind a .addEventListener looking for DOMContentLoaded was even more of a disaster! Since on DOM load, it would send the fetch, and the fetch would — for whatever reason — cause a page refresh, the DOM would load again! Yes, it tossed my app and my rails API into an infinite loop of fetching and refreshing. Thinking my API was the issue, I attempted to make a new API from scratch and fetching from that API. Unfortunately, I was met with the same issue. Fetching from other publicly available APIs didn’t cause my app to go into a loop, so I knew my JS and HTML weren’t the issue. Furthermore, since a newly made Rails API still gave me the same result, I was at a loss! If it wasn’t my code, what could it be?! Google searches for this issue were fruitless because think about it: SPA’s, fetches, and AJAX are the antithesis for page refreshes! Since SPA’s, fetches, and AJAX remove the need for page refreshes, why would page refreshes even be a common issue for SPA developers? After trying the same Google searches for hours (I had hit the point of insanity), I finally reworded my search to the magic combination.. It turns out that the HTML viewing extension I was using in VSCode has had very few documented issues causing refreshes when fetches are made to a server being run from a localport. So after hours of trying everything with my code and searching on Google, switching my HTML viewer to a different one finally fixed the bane of my SPA development.