Main Idea

The main idea came to me when I was on vacation in Jordan.

No. They don’t ride camels for work.

Tiny Project

I wanted to make a tiny project to prove that I’ve learned something in Javascript.

I’m doing something with my life. Finally.

My Childhood Friend Loved My Idea!

While I was in Jordan, I went out to see my childhood friend, Amr. I told him about a stupid idea for a game. Amr loved the idea! And that’s when I decided I should go ahead and work on it!

I know. Amr looks like Pitbull in this photo.

Whac-A-Mole

The idea was a simple tiny game,very similar to the famous Whac-A-Mole game. The main difference is that my game will use Emoji’s instead of moles.

Wow! Such Genius! Much Smartness! Cool!

Proof of Concept

I wanted to make a small project to prove to myself that it’s doable in Javascript.

Responsive Love

After I managed to make the first proof of concept, I decided to try making it responsive to test it on my mobile phone.

Mobile first they say. I say second, third… do whatever is easier for you.

Emoji’s Photos & Random Sounds

I was using regluar emoji characters, and these have unpredictable width and height, so I though I’d better use images instead. I also tried spicing things up by making the clicking sound change everytime you click on an emoji!

Catch the Emojis

After doing a lot of expermients I thought it’s time to give that game a name and a better user interface.

I know! That neon red is ridiculous. I mean awesome.

Sound Pool

The game of course, has to have some sound effects.

I managed to get one sound to play at a time, but I needed to be able play multiple sounds at the same time, so I had to program my own audio pool.

The End of Catch the Emojis!

I finally implemented the sound pool, and also made it super easy to a new level.
And that was the final version of Catch the Emojis!

I Hate It!

I woke up a few days after finishing that game with a weird feeling. I hated it. I hated everything about.

I asked a few people to try playing the game, and I noticed that I made a lot of mistakes.
The interface wasn’t intuitive, and my Javascript code wasn’t the best either.

I had to do something about it.

New Game!

I decided that the new game is going to be very similar to the old one, but with a little bit more logic in it.

I wanted to make something more challenging, and more fun to play.

Debugging Panel

This time, I decided to take things a bit more serious. I created a simpel debugging panel to help me show/hide the pages real quick which made my life 10 times better when I'm debugging a sprcific page.

Animation

I wanted this version of the game to have a better animation, so I’ve used a lot of CSS3 animation with Javascript to control it.

I tried designing and animating the blue circle first, and I wanted to do that the simplest way possible using a single div element!

Sound Effects

I spent sometime to choosing the right sound effects because I know that they’ll compliment the interface if they were choosen right.

DJ Mahdi van Buuren. Such a multi-talents guy.

Big Objects (OOP)

Back to the technical stuff; to make it easier for me and whoever is going to work on this project in the future, I’ve created a bunch of objects, each one these controls 1 big task, such as creating levels, changing pages, managing audio… etc.

Fun fact: I re-wrote my code for this project 7 times at least, and still, I feel like I need to re-write it again.

Infinite Levels

In the beginning I made an object that you would call and pass a few parameters to setup a new level, but later I thought it’s a lot of work to pass different parameters for each level manually, so I automated it using simple math.

I love math! It empowers lazy people like me.

What’s Next?

I always wanted to learn React Native, and I think this game is a great opportunity for that. I’d be able to make an app out of it, and then publish it to the app stores.

Then I’ll be rich. So rich. So so rich. I’ll even buy a small island. hmmm… okay, island are a bit too expensive. I’ll buy a big house then. hmmm… a big house is super expensive… hmmm… I’ll rent a small apartment?…. hmmm okay.. I’ll stay where I am. Damn it.

Loved the Game?

If you loved the game, you can use it the way you want, but please, mention my name somewhere. Like you know, I worked really hard to get this done.

Hey! Why don't you share this website on your Twitter, Facebook or even Snapchat if that's your thing (not judging).

Loved Me?!

I love you too, but I’m sorry :( I’m already taken.

But hey, I accept gifts. Gifts are awesome.