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
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
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.