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 Our website was built entirely in JavaScript, HTML, and CSS with a server in Node.js, and was hosted on

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

Share this project: