As college students, playing games with friends in large groups can be difficult. Lack of crossplay compatibility/availability for some games, not having a console on hand, and not having the time to invest in long games all pose challenges to engage in a fun competition and collaboration with friends. However certain games, such as the, a suite that allows users to play with each other through the web-browsers on their phones, helps overcome these challenges. As a result, we were inspired to create a game that had the same ease of use as these web-games and still provided an enjoyable experience.

In addition, despite our enjoyment of video games, none of us had ever created one before. We were eager to try our hand at game development and see if we could overcome the various difficulties associated with it. Developing a video game would be a fun departure from the more serious programming that we do for our classes, jobs, and labs.

What it does

Going Dark is a web-based mobile multiplayer game designed to allow groups of friends to play against each other in team-based capture-the-flag. The game uses gyroscope and accelerometer data as well as screen-touch events from the user’s phone to control the character. The game runs on any phone that has a chrome browser so users do not have to download a new app.

Once a group joins the lobby, the game splits the members into two teams. Each member is given an electronic key (a flag) to hide on their side of the field. Once the match starts, teams try and find and retrieve the enemy team’s flags. Both collecting the enemy’s flags and standing on the enemy side will score points. The team that reaches the point threshold first wins the game.

However, players can get caught by the opposing team if they are on the enemy side which will result in a point deduction and their capture. To escape, one of their teammates needs to meet them at the jail section of the map.

How we built it

Our overall plan was to utilize the CS fundamentals we knew to construct the basis of our game and learn how to fill in the gaps during the hackathon. We outlined our overall plan for how the game would function and organized into teams based on our familiarity with the base concepts. We wanted to use WebSocket to link user accounts together and React to handle the game graphics and functions.

Most of our team worked on the front end of our game. By taking 2D sprites from old Gameboy games and photoshopping them to our needs, we constructed a full environment for players to interact with. We created a grid to represent the game environment and shared this grid with all the players connected to the game. We also added our own graphics and small animations to the game such as walking or carrying items to help bring it to life.

In order to connect players to their game lobbies, we made use of We created a server that manages all of the back end logic and a client to submit player requests to create and join lobbies using Node.js. Players interact with a webpage that requests a name and a room code. The user can then either create a new room with that code or join an existing room to play with friends. Once all of the players are in, their game is loaded and they can begin playing.

Challenges we ran into

To say we faced a few challenges during the development process would be an understatement. None of our group members have ever made a video game before, so designing the game and its mechanics was a challenge on its own. In addition, not having prior experience led to a lot of experimenting with incorporating graphics and user controls. Animating also proved significantly more time consuming than we anticipated. Properly spacing and texturing the sprites while having them move realistically was a new challenge to us all. Finally, as most of our group members had little JavaScript experience, crucial parts of the project such as building the WebSocket and using phone-sensor data to control the game required us to spend a lot of time learning how to fix issues we had never seen before.

Since developing a video game was completely new to us, we learned a lot in the process. We learned everything from WebSockets to properly animating sprites, to even designing video game mechanics to create an enjoyable experience for the player. Stepping out of our comfort zones like this, while it was challenging, made us learn a lot on the fly.

Accomplishments that we're proud of

We are delighted with how our game turned out. The graphics and animations of our game alone exceed our expectations. Despite not having previous experience developing video games, we believe that our project turned into one we could see ourselves playing with our friends. Having many of the project’s pieces, which we worked on separately, come together cohesively at the end was very exciting.

We also are proud of the overall plan we developed for the game and how we developed it. We created a written version of the structure and logic for almost the whole game before making it. We took into consideration how to balance the scoring and equalize controllability across various phones. In the end, we think that this planning paid off.

What's next for Going Dark

In the future, we hope to add more game-modes and maps to extend the playability of the game as well as to refine certain graphical and programmatic aspects that we had to rush.

Share this project: