Polishing and releasing my Reef.js game

Last week, I took on the challenge of creating a country flags game for Brush Ninja using Reef.js. It was an interesting project, and I shared my process in the blog post. Today, I am pleased to announce that the game is complete and available to play on the Brush Ninja website. In this post, I will walk you through the final touches I made to polish and release the game.

A screenshot of the country flags game in action. Do you know the answer?

A screenshot of the country flags game in action. Do you know the answer?

Tweaking Small Elements

To make the game more user-friendly, I started by tweaking some small elements. For example, I replaced html anchors with buttons to improve accessibility and enhance the overall user experience. Additionally, I made adjustments to the layout to ensure that everything looked appealing and well-organized.

Adding Key Features

Next, it was time to add some key features that would elevate the gameplay. One essential addition was a one-minute countdown timer. This added a sense of urgency and excitement as players race against the clock to answer as many questions as possible.

I also introduced a menu screen that allows players to start or replay the game easily. This way, they can enjoy multiple rounds without any hassle or interruptions.

I also added confetti explosions (using confetti.js) whenever players answer questions correctly. This small touch added an element of celebration and rewards players for their knowledge.

Tracking Progress

To enhance engagement and provide feedback to players, I implemented a feature that tracked their answers throughout the game. At the end of each session, there is now a display showing which questions were answered correctly and incorrectly along with the corresponding correct answers.

This feature not only gives users an opportunity to review their performance but also helps them learn from their mistakes and improve their knowledge about country flags.

Optimizing Flag Images

One interesting change involved optimizing flag images used in the game. Initially, I used PNG files sourced from Flagpedia. However, this added a significant amount of weight to the page, approximately 1.5MB.

To tackle this issue, I received a suggestion, on Mastodon, from Brian Richards to use emojis instead. It turns out it is possible to generate country flags using the two-letter country code. There’s info on how to get country code emoji do this on dev.to. By using this approach, I was able to reduce the page weight substantially while maintaining visual appeal and accuracy.

Looking Ahead

Now that the game is polished and released, I am looking forward to seeing if people play it. I am also excited to explore new possibilities and features that could be added to the game in the future.

One idea that has been on my mind is adding the ability to quiz people based on flags from specific continents. This would provide players with an even more comprehensive learning experience and further enhance their understanding of world geography.

Overall, I am proud of what I have accomplished with Reef.js and my country flags game for Brush Ninja. It was a fun project that allowed me to learn more about the framework and its capabilities. I am also pleased with the final result and hope that others will enjoy playing the game as much as I enjoyed creating it.

If you haven’t already tried out the game, head over to the Brush Ninja website now! Give it a go and see how well you know your country flags.

Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).

Link to this page

Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.

Related Posts

28 Sep 2023

Using Reef.js to Make a Country Flag Game

When I build things for the web, I prefer using vanilla JavaScript as much as possible. However, for more complex projects, I also like to use Reef.js. The Brush Ninja animated gif maker is built with Reef.js, as are the...
28 Jul 2006

New Miniclip website

The old Miniclip website was a nostalgic playground for gamers, filled with simple flash games ideal for wasting time on. Unfortunately it is no more. This post was written in 2006. As of 2015 I no longer work at Miniclip....
30 May 2005

My Next Game

I have been working on my next game for a while now. It’s going to be an updated version of Bubble Bomb. This may seem like a strange choice since Bubble Bomb is essentially ‘Yet Another Colour Matching Game’ (YACMG?)....
20 Jul 2016

Empathy in Web Design

I wasn’t able to make WordCamp Europe this year, but they’ve been really quick at getting all of the talks online, and so I have been watching some of them – and this one stood out.Morten Rand-Hendriksen is an experienced...
02 Oct 2005

Dev Diary : Game Design

Before working out what sort of game to make I need to find out what is in a design document. These are new to me so a quick Google threw up a handful of sites. The most likely was found...
24 Jul 2005

New Game Release Soon!

I received the music for Bubble Blitz (ooh look – it has a name!) last weekend and adding it into the game has made everything seem much more complete. There are a couple of small bits of art to finish...