Multiplayer Online Board Game
The Search for the Queen
During the COVID-19 pandemic, I often played the board game "The Search for Planet X" with my family. I wanted to build a way to continue to play this favorite board game online both during and after the pandemic. I also reskinned the game to be castle-themed, so in this version players aim to located "The Queen" instead of "Planet X".
Web-Based Demo Server Repository App RepositoryOnline Board Game
"The Search for Planet X" is a board game in which players attempt to discover which space objects (asteroids, comets, etc) are present in different "sectors" of the sky. It is a "Clue"-like game in which players learn more information about where certain objects are by performing different actions on their turn. I created a python script to construct the valid combinations of where different objects can be on the board, a node server to facilitating playing the game, and an Ionic VueJS application to play the game. In addition to implementing the basic rules of the board game, I also added a 24-sector version with new objects (the original game has only 12- and 18-sector versions). I also created an ocean-themed version.
Backend
In "The Search for Planet X", there are certain rules that every configuration must follow. For example, every asteroid must be next to another asteroid, or every comet is in a prime-numbered sector. Correspondingly, in my castle-themed version, every knight is next to another knight and every court scholar is in a prime-numbered seat. I created a python program to build up all possible configurations for the game (given 12, 18, or 24 seats).
My NodeJS server handles player interactions. In addition to implementing the basic rules of the game - i.e. how players move around the board, what actions are possible on each turn, how points are assigned, etc - I implemented a few more features for the online version. There is an indicator of when players go "offline" (i.e. by closing their web browser tab), players can vote to "kick" other players out of the game, and players can choose their screen name and player color. Multiple instances of the server are running on a kubernetes cluster, and requests go through a pushpin proxy server that helps facilitate different players' requests going to different servers.
Frontend
The frontend is a reactive app built on Ionic and VueJS/Capacitor. It can be deployed as a mobile app, desktop app, or web application. It communicates to the backend server via HTTP requests and Websockets. I made use of HTML canvases to build a virtual "board" (showing where players are located and if they have placed "theories" down on certain sectors), and a virtual "logic sheet" (where players can record where they think certain objects are and see a list of the current clues they have).
In order to make the application work well on different device sizes, I allow the user to see two panels (the board or logic sheet, and the "game menu" where players can choose which actions to take on their turn) on larger screen sizes. On medium sized screens (i.e. tablets), the extra panel is instead a popout menu that can be toggled on and off so that players can still use the full width of the screen for the logic sheet and game board when the menu is off.
