simple game that works perfectly on both mobile phones and desktop browsers.
And of course, I’m sharing the source code with everyone hoping it’d help someone learn more
The main idea came to me when I was on vacation in Jordan.
No. They don’t ride camels for work.
I’m doing something with my life. Finally.
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.
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!
After I managed to make the first proof of concept, I decided to try making it responsive to test it on my mobile phone.First responsive proof of concept
Mobile first they say. I say second, third… do whatever is easier for you.
💩 It’s going to get very technical from here on. Run if you’re not a nerd.
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!Images for emoji’s prototype
After doing a lot of expermients I thought it’s time to give that game a name and a better user interface.Play Catch the Emojis
I know! That neon red is ridiculous. I mean awesome.
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.
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 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.
I had to do something about it.
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.
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.Try the control panel
I wanted this version of the game to have a better animation, so
I tried designing and animating the blue circle first, and I wanted to do that the simplest way possible using a single div element!
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.
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.
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.
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.
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).
I love you too, but I’m sorry :( I’m already taken.
But hey, I accept gifts. Gifts are awesome.
I wouldn’t be able to do it without you!
First of all, thank you for not devorsing me. And also for helping me debug the game, and for testing it a million times. And most importantly, for keeping up and believing in all my crazy ideas!
Thank you for believing in me and for listening to my stupid ideas!
Thank you for letting me rubber-duck you. I know. That might sound weird if you’re not a computer geek. But again, thanks Benjamin for answering my programming questions and supporting me.
Thank you for helping me understand more about game developement. I won’t forget our discussion about the sound pool.
Thank you for testing the game, for inspiring me while designing it, and for the help choosing some of the sound effects!