Introduction
Landing Page
The GREAT Dot Spot (www.thegreatdotspot.com) is a single or multiplayer game of that puts a player's memory and speed to the test.
Basic Layout
Intermediate Layout
Advanced Layout
The basic idea of the game is that player's go through a series of increasingly difficult rounds where they are all presented with the same, identical layout. When a player taps on the first dot, the remaining ones all disappear. The player then needs to remember where they all were and complete the grid. When all players have completed the round the game progresses.
As the game progresses, all of the players are given feedback on the scoring with the results table as shown below.
As the game progresses, all of the players are given feedback on the scoring with the results table as shown below.
Results Table
The top section of the table contains the overall score for the game whereas the lower section shows the result for the last round.
The Game in a Nutshell
After entering your player name on the landing page shown in the screenshot at the top of this page, the player is then presented with the option to be a host for a new game or to wait for an invitation from a host.
Host or Invitee
Sending invitations
When a player chooses to be a host they are then brought to the second page shown above where the following buttons appear for them.
| 1. | Share an invitation link for the game either directly via Whatsapp or using a URL you can forward via SMS or email. |
| 2. | Open the settings dialog for the game where you can set the game type and the difficulty level. |
| 3. | Start the game for all players. A countdown will appear for all of the players before the first grid appears for them. |
The game settings dialog mentioned above in item 2 above looks like this.
Game Settings Dialog
There are two game types, Standard & Round Robin, which are described below
Standard
Round Robin
Standard
The players progress through a series of rounds where they attempt to locate all of the dots as quickly as they can. Each round is scored and after progressing through a series of levels, the overall scores are calculated and presented to the players as shown in the "Results Table" screenshot at the top of this page.
Round Robin
Again, all players are presented with the same grid layout but this time the players take turns in locating the dots in the grid. A random play order is generated for the players and when the first player taps a dot, the remaining dots disappear for all the players. Each player takes a turn in locating the remaing dots until the grid is filled.
Current Player's Turn
Other Player's turn
As players tap on incorrect dots their error count is incremented and these errors are represented in the player disc at the top of the page. The red section of the disc increases as errors are registered.
Errors
How it's Done
The game frontend is built on the React framework which communicates with a backend built on Kotlin via websockets. The websockets are handled by the StompJS library on the frontend and on the backend they are handled bySpring Boot Messaging
When a new game is initiated by the host player, it gets assigned a unique game id from the server. This game id is used in the invitation links that are then passed to other players. When the game is started by the host, the server starts the countdown for all the players and timers are shown on-screen. Before a round begins, a grid layout is selected (rectangle, triangle, hexagon) and random dots in the grid are selected. At the end of the countdown, the layout and selected indices of the grid are sent to each of the players. When a player completes the grid, their results are sent back to the server and when the last player's results are received, the round's results are calculated and combined with the overall game's results.
What's with all the dots???
The idea for a dot based challenge game came about over 13-14 years ago when I sat down to show my then, 10 year old son Seán, some basic programming skills. I was always, and still am, a big fan of Javascript and how accessible it is to anyone. Getting started is easy, all you need is a text editor and a browser. Also, the combination of a language (Javascript) with a UI (HTML, CSS) makes it much easier to visualise what the code is doing.
Original Layout
This is approximately what the original game looked like. It was a very simple interface that we (well, just me mainly) managed to put together in a morning. The laptop I had at the time was touchscreen so it could be played much like a tablet. This simple game helped to demonstrate how the various elements of a webpage can be constructed... HTML, CSS, arrays, math randomizers, basic loops, event handlers, DOM manipulation, etc.
What happened next was probably more interesting that the coding exercise that we were engrossed in that morning. Some of Seán's friends called around and were in the kitchen where we had the laptop setup. We showed them the game and they all took turns in trying it out. They found it amusing and engaged with it. But when one of the guys tried a ten by ten grid with multiple selected dots, he was able to remember where they all were. Everyone looked at him amazed and wondered out loud "How did you do that?". He just shrugged.
Fast forward to last Christmas when we were all sitting around after dinner with our family including some of Seán's aunts and uncles. The story of the game came up and we remembered how it revealed a hidden ability that one friend had. It wasn't something that he was aware of before then and it probably still isn't an ability he uses consciously in his everyday life.
Anyway, I decided over that Christmas break to try to make a multiplayer challenge game that used that original memory / speed test. Check out www.thegreatdotspot.com and see what you think.