Is it possible!?Whack-a-Mole in your browser？

https://www.youtube.com/watch?v=lUHN48dhACY

A few months ago, I shared a proof of concept for a whack-a-mole game online, and I didn’t expect so many people to ask me how I did it. To be honest, I know that the extension I made is far from being comparable to the real game, and I am not obsessed with whack-a-mole myself. But I can’t resist everyone’s curiosity, so today I will reveal the secrets behind this game with everyone.

If you know something about the extension platform, you may have already noticed that I used several extension icons in this game. But according to common sense, an extension can only have one icon. The trick is that each icon actually corresponds to a separate extension, and these extensions communicate with each other to track the real-time status of the game.

The game architecture is like this: there is a main controller extension, which is like the “housekeeper” of the game, using the management API to search for various whack-a-mole extensions. Every once in a while, it will randomly select one of these whack-a-mole extensions like a lottery, and then send it a command to show the whack-a-mole. When the gopher extension receives this instruction, it will immediately update its icon and “release” the gopher. At this time, if the player is quick and clicks the icon when the gopher appears, the gopher extension will send a message back to the main controller, and the player’s score will increase. But if the player is slow to react and does not click within the specified time, the icon will return to its original state, and clicking again will be useless.

Let’s take a look at the code of these two extensions. Let’s talk about the code of the main controller first. When installing, we set a timer alarm for it, which will be triggered every few seconds. When the alarm rings, the main controller starts working. It uses the management API to search for extensions with “whack-a-ole” in the name, and then randomly selects one and sends a message through the chrome.runtimes send message API, plus the ID of the selected extension. Of course, there is still room for optimization in this code. Now there is a bad thing, that is, we only judge whether this extension is what we want to use by the name, which is not very reliable. If it can be optimized through some configuration, the judgment will be more accurate.

Next, let’s look at the code for the mole extension. You can see that we register a listener for the onmessage external event. Since this extension is receiving messages from other extensions, this event is triggered instead of the more common onmessage event. Once the event is triggered, we use the action set icon API method to update the icon. We also record the ID of the main controller so that we can reply to the message later, and set a countdown to change the icon back to its original state when the time is up. We also update a variable to mark whether the mole is currently displayed. When the player clicks the icon, if the mole is displayed, we send a message to the main controller with the ID we saved earlier to update the score. In the main controller extension, updating the score is simple and can be easily done with the set badge text API. In my original example, I also drew the icon I wanted to display on the canvas myself, which gave me more control, but this is a bit complicated, so I won’t talk about it for now.

Loading this game in the browser is also not difficult. But Chrome has a limitation that only one instance of an extension can be loaded from any given directory, so we have to copy several copies of the Whack-a-Mole extension. Then, go to the Chrome extension page, turn on developer mode, and drag these extensions in one by one.

However, it seems that there is something missing when playing this way. To make the game more interesting, I added a penalty mechanism. If the player fails to click the Whack-a-Mole in time, the browser will automatically close a tab. In this way, a simple and fun Whack-a-Mole game is completed, and everyone can enjoy it.

After playing it, someone said: “Whack-a-Mole, it looks like a fun little toy. If you don’t click the Whack-a-Mole, it will close a tab, and you can see the score. It’s really interesting!”
Although this game is not powerful enough to change the world, and I don’t plan to release it to the Chrome Web Store as it is now, it is definitely a good way to learn and try new things. If you want to try this game or delve into the code, I have attached all the relevant links below. See you next time!