This is one meme that perfectly underlines my process with Flippy.

Idea

It was a pet project I chose to do while learning Javascript a few years ago. My main focus was to figure out how to do stuff with Web Audio API. I have never done any CSS animations before and the only app I made with Javascript (erm Jquery..) was this guy. I wanted this new project to output some sounds when I interact, but also wanted the interaction to have a meaning. I used to play memory matching games a lot when I was a kid so picking this concept was no brainer, something I also believe in. I mean it is good for your brain right? 

The idea of  matching cards only with audio came at a later stage. I can't recall properly but it must be somewhere around not having any images but only testing whether the audio works times.

I believe I managed to create a proof of concept version in about 2 weeks. All animations were using Jquery .animate function at the time and it was working in all 3 major browsers, such a beautiful moment! I was mainly building Flippy on Safari since it was the lowest common denominator of browsers (at the time). If it works in Safari it can work in anywhere right? Oh boy was I wrong! I was so focused on designing the animations, I forgot to check other browsers at each stage, which in turn affected my backend design decisions. Apparently at the time of my development Safari did not implement recent implementations of how opacity and transform animations work on grouped objects. I won't go into technical details but the way I designed my animations were broken in Chrome. So this fixing has cost me 1 week. There was no scoreboard or rounds. You would just match  the cards and it could go forever! I did not touch the project afterwards.

Evolution

Recently I came to a mindset of sharing stuff I built, because internet is for sharing. Then I realised Flippy's animations  did not stand well with some browser updates. I am looking at you Safari! This unfortunate event has forced me to get rid of some of the Jquery animations and using stricly css animations simply by adding and removing classes. Such a breeze! 

Then I added a scoring system, nothing fancy, just some math in the background that I find fair! For each minute you spent, you lose -10 points. This is how I implemented a time bonus.

At the top of the screen where it says "Match lost animals", there was a banner saying "Score" and below you could track your rounds. I have changed the banner what it is now in order to give an indicator about what this game is about. It is about matching. I kind of sacrificed the intelligibility of the purpose of those 3 blue lines but that's ok. I made matching points go up, so I thought it should be enough of an indicator. Points rise up and those blue Zeros at the top are updated. I decided to trust on the gamer.

Then I figured if you have a scoring system, people should be able to share them to mock on their friend's faces. I support competitiveness in games so I added a Final scoreboard giving you statistics about your performance as well as a Share button that copies your score. The simplicity of Wordle's sharing system was my influence at this point.

Happy accidents

Then I figured when you win points and if you don't have audio, it did not seem like winning. Simply popping the characters in a matching situation was not enough. Then I said ok one more thing and implemented those flying points. The way they rotate during escalation you might ask; oh that was also another happy accident. I was trying to adjust the initial position of the points, a starting point for their animations. Because of a flip, the points initial location was also flipped horizontally and it was not normal. That initial reversed position gave me the idea of animating points during the reveal to their correct positions, giving it some style.

Initially when a match happened I wanted the card to disappear completely, keeping the background clean. This is how it looked then:

Then while creating an element for match points to rest before they reveal themselves and rise up, another happy accident occurred. Due to the way I designed animations, after a matching happens, that middle compartment I reserved for match points did not disappear. I was using a background colour for that compartment which was the same size as the card, so even after a match and the animal disappears, there remained a card sized object with some colour in it. I decided to follow up on that and made that colour closer to the white background as if it was engraved. I mean who does not like the idea of something looking engraved in a digital canvas even at this day an age! You may not approve it but you can not take your eyes of it either! I did some fiddling with the animation and the way it is presented and the final result happened. Why I decided to go with final design? Well it gave me the impression of achievement much like seeing your empty plate after you had your dinner. A weird satisfaction of obsessive behaviour maybe like cleaning a surface with patterns. It did not disappear to be nothing, your actions left a mark and you can keep track of your trophies.  

Final words

Have fun!