Whiteboard Multiplayer Web Game

Today I am writing about the digital experience that mirrors our company’s transformative journey where every idea initiates with a mockup or a storyboard. This helps us and our clients understand the flow of the story and also lets them visualize and lets us know if they have any changes in design before we move to the UI UX , that is to designed in Figma.

So here are some unique features about the game:

Team Dynamics:
This was a Role based game – 4 players with 4 different roles, each member assuming a vital role with specific, initially hidden tasks. As the game progresses, these tasks become visible to all team members, promoting a unified strategy.

The Game has 2 Major Rounds. In round 1, users play turn wise while in round 2, users play simultaneously and can see each others activity on the screen.

Interactive Whiteboard:
The heart of the game lies in the interactive whiteboard equipped with a color palette, variable-thickness pens, a paint bucket, text tools, and geometric shapes. Here, creativity and collaboration come alive as teams use 2D cutouts to construct their visions within a time limit.

Scoring System:
Success is measured by the accuracy and speed of task completion, with a scoring system that rewards based on Cutouts used as per tasks assigned to a user. The shared whiteboard allows all participants to witness the evolution of their collective masterpiece, each cursor contributing in its unique hue.

Role-Specific Challenges:
Each role, from Bricklayer to Decorator, comes with a bespoke set of 2D cutouts, encouraging players to build according to their assigned tasks. The game’s design phase is yours to shape, with roles serving as mere guidelines to inspire a LEGO-like environment.

Creative Freedom:
Tasks are intentionally open-ended, allowing players to unleash their creativity. The scoring should reflect this flexibility, avoiding any single ‘correct’ solution.

Back-End Features:
Administrators can manage users, review past game outcomes, and analyze overall survey results through a comprehensive dashboard.

When it comes to Visualizing it becomes difficult at times because everyone has their own perspective of looking at things. So our approach is simple yet direct

So the first step was Brainstorming the Concept of how Participants will embark on an immersive adventure by joining a game through an invitation link, a unique game code, or by creating a new game. Upon entering their names and emails, players gather in a virtual lobby, eagerly awaiting the start of a collaborative challenge. Once the lobby is full, the game begins, led by the first user or a designated moderator.

UI UX was something which we had to go back and forth a lot of times. As the Application was totally concept based, we had to test multiple times until we realised that some changes in UI were necessary

Fabric JS,Three JS HTML, CSS, AJAX, JQuery, MySQL, CakePHP.

Which technologies are to be used was another question in mind as a Realtime game was to be developed, where time was ticking and users have to finish their task in given time. Choosing the Right Technology for a Real Time Game and a Role based game was the task. The Game being real time plus a Whiteboard where the succeeding player could see the results of previous player in Round 1 and also see other players  Real time screen in Round 2 was the main challenge

With lots and lots of Testing, we were able to find new culprits every time while getting rid of old culprits. The game was actually boring in the sense that we had to wait for other players to finish their game and each player got time of 4-5 mins to finish their task. So, the testing along with Scoring would take around 45 mins every time and sometimes we would take multiple roles as we had a small team 🙂

The Application was ready to setup on clients Azure Portal. Phew!! Why do we have to take up challenging projects every time 😀 because its fun!

The Actual Game looks something like this: