Gearz

Our logo!
Our landing screen, with an interactive gear simulation to play with while waiting for a room
Two players set up side by side, ready to join the same room using the room code
Two players communicating about the solution through the built-in room chat
The board for each player after solving one of the first few levels
Our help page

Inspiration

Over the past couple of months, COVID-19 has driven much of society online - from school to work to play, we rarely leave our computers, never mind our homes. This, in turn, has frayed many of our personal relationships and decreased the number of opportunities we have to socialize and meet new people. Thus, the aim of Gearz is to connect people organically, through solving puzzles that require collaboration.

What it does

Gearz is a browser game with an innovative twist - two players must work together in order to link gears together and advance through the levels provided. The built-in chat feature allows for easy communication, and the option to join random games facilitates socializing with unfamiliar players.

How we built it

For the gear system, we designed gears from scratch in Autodesk Fusion 360, then loaded them into Matter.js to simulate the gears rotating with each other. To allow for connection between players, we created rooms in Socket.io. Our website was built entirely in JavaScript, HTML, and CSS with a server in Node.js, and was hosted on repl.it.

Challenges we ran into

One challenge we ran into was making sure that a room would start when two people joined a room. We found out this discrepancy occurred because of the method that the pages were being loaded, so we delayed the signal from the server to start the game until the pages loaded for all players.

Another challenge was loading the gears into Matter.js and figuring out how to rotate them. This took a while, as all documentation pertaining to our gears was general information on SVG files within Matter.js, so it was a general struggle to figure out the translation, rotation, and locking of the gears on the grid. We also found that many functions in the documentation would not work as expected (such as translation), so we designed our own functions using those that did work to make sure that when one player moved a gear, the same gear moved for the other player too.

Accomplishments that we're proud of

We’re really proud of our linkage between Matter.js and Socket.js. This linkage is the foundation of our project, and took a lot of work to get up and running. However, once the linking was finished and game rooms began working, the project came together really well, which we’re super proud of.

What we learned

On the server-side, we learned how to use Socket.js to create game rooms and allow users to interact with each other. Only one of our team members had used Socket.js before, so for the majority of us this was a new experience. Matter.js was also new to every team member, and we all learned a lot about how rigid bodies interact with each other and the physical properties of gears and motors.

What's next for Gearz

In the future, we would like to develop more levels, work on stylizing the game more, develop the landing page of the website, and invite more people to try the game out. Gearz is a way for people around the world to connect and play a game with each other, even during a quarantine that prevents us from doing so in person.

Built With

Submitted to

QurantineHacks 2020
New hack, who this?
- Winner Best Social Connectivity Hack

Created by

I worked entirely on the backend, helping out with the Matter.js simulation. I mainly worked on the rotation settings for the gear system, implementing the motor rotation and the conservation of angular momentum within the gear system to allow all gears to rotate together.

Kevin Gauld
I worked on the back end and on level design. I helped figure out how the physics of the game would operate -- in particular, I worked on the grid layout on which gears can be snapped into place and the collisions between gears.

I designed most of the levels in the demo, mainly through experimentation and play testing the levels myself.

Katherine He
I programmed essentially all of the backend, as well as some of the front end functionality. I also helped to make the gear SVGs for the physics simulations.

Ethan Horowitz
I worked on front-end and helped out with the game functionality -- in particular, the grid array and the gear mechanics. I also helped with design and color schemes.

Oleh Shostak
Incoming freshman @ Haverford College, interested in ML, Data Science, and VR.
Carolyn Qian