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?
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.
Let me know what you think 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.