High school was an An experience unique to me, I reckon interesting time for me. I don’t think I have ever been so creatively active without having any skills to actually create what I wanted to make. Today we will learn about a game idea that was conceived in high school, yet developed about 10 years later.

Interested in programming as I was, I did everything to turn some of my homework into programming exercises. For our final year project, we made a Stock Exchange Simulator. It was terrible: We hardcoded everything, shared code through USB sticks, and copy pasted logic everywhere (we only learned about arrays halfway through).

In the last blog we I believe this is what the business boys call 'cross branding' learned about separating content from behaviour, but we did none of that here. Here is a snippet of that project, Yes that is JQuery! Remember JQuery? a true masterpiece.

if(levelUpgrade === 1){
  if (chance > downChance[i]+20 && chance < downChance[i]+45) {
  // Minimal raise
  price2[i]+=chance/10-5
  $("<span style=color:green class=AText id=number> "+price2[i].toFixed(2)+" </span>").appendTo("#stock"+i);                                                                                                     //De nieuwe prijs wordt veranderd door het willekeurige getal te vergelijken met de huidige prijs
}
  else if (chance > downChance[i]+46) {
  // Big raise
  price2[i]+=chance/9     ;
  $("<span style=color:green class=AText id=number> "+price2[i].toFixed(2)+" </span>").appendTo("#stock"+i);
}
  else if (chance < downChance[i]-20 && chance > downChance[i]-44) {
  // Minimal decrease
  price2[i]-=chance/10+2;
  $("<span style=color:red class=AText id=number> "+price2[i].toFixed(2)+" </span>").appendTo("#stock"+i);
}
  else if (chance < downChance[i]-45) {
  // Big decrease
  if (chance <= 5) {
  price2[i]-=chance*3;
}
  else {
  price2[i]-=chance/3;
}
}

By now you should understand how terrible I was at programming in high school. It is integral to the story!

The idea

Back in the day Quiz type games were incredibly popular. You had to guess a movie or a character based on a silhouette and were given a few letters so you could at least guess if you didn’t know. Although that mostly served as a vehicle to buy coins with real money.

Nerdboys that we were, we wanted to create a version where instead of guessing popular things that everyone likes, you would have to guess flags. And instead of guessing the name of each country which would have been doable, the player had to color in the outline of the flag! As there are many flags with an identical outline, you get a trivia clue to help you solve it.

The idea was born: Flaggalicious

Enthousiastically as we were, we compiled a list of countries, their flags and trivia clues that described them. And then we did… nothing.

Or to be more correct, I did nothing. I had bluffed that I would do the programming for this project, but I didn’t. Not because of lazyness or bad will, I simply couldn’t. The project was too difficult for me at the time. As we have seen in the introduction, I just didn’t have the skills.

Current day

10 years later, a fully qualified software engineer, I was To migrate away from it. As everyone should! cleaning up my Google Drive and came across some interesting files. The original designs for Flaggalicious!

It contains all the clues. Thank you Seriously, migrate Google Drive!

It even included my first attempt at making it, a snippet for you code gourmets:

if (colors[0] === answerGermany[0] && colors[1] === answerGermany[1]
  && colors[2] === answerGermany[2] && flag === "Germany"  ) {
  $(".level1").hide();
  $("#France").show();
  flag = "France";
  clicks = 1;
  correct();
}

Flaggalicious

Time to implement it. As I really should be looking for clients (hire me), I gave myself It ended up as two. Not bad! one day to finish building the game.

When I want to share something with the world, a website is the obvious choice. When you want to make a good website, Svelte is the Why the world prefers react baffles me obvious choice.

Implementing the gameplay was a bit of work, but nothing I hadn’t done before. The hard part as always is the user interface. The dragging and dropping of the colors to paint the flags was luckily solved by someone else already!

But the real pain was recreating the flags on the web. I found a relatively complete SVG set of all flags, but there was a big problem.

Simplified, SVG works by drawing shapes on top of each other. Consider the flag of Japan: Spoiler alert! A circle on top of a rectangle. Seems easy enough, but when everything is transparent we run into trouble. When we color the background white, it will bleed through to the circle in the middle, ruining the puzzle.

I had to stick to the original list of 33 countries, which were very much not chosen for their simplicity. I have spend hours recreating the flags in If you have experience with SVG masks, you feel my pain SVG to avoid the visual bleed. It was not fun. I ended up with 20 different flag outlines, out of which 14 were only used Did I mention it was not fun? once.

I used Louter, my content parser designed to handle games with large amounts of content. Each puzzle can be described like this:

id: /flag/the-netherlands
country: The Netherlands
hint: This country is also known by two of its provinces
layout: horizontal-tricolor
solution:
  top: red-dark
  middle: white
  bottom: blue-dark

Which made adding the You might notice the United Kingdom is not in the game. 32 puzzles quite a breeze!

Because of the limited time, I reused the styling from this portfolio website! To top it off I created a logo on Cooltext.com, the and yes I do know about https://pixelsfighting.com best website to ever exist.

After 10 years in development, I am happy to present you Flaggalicious, a vexillological puzzle game!

Conclusion

Don’t give up on your dreams? The right idea might not come at the right time? High school is rough?

I don’t know, but I made a silly game for you to enjoy, go play it here!

Thank you for reading!