Memorise Emojis- JS End Game!

sakshi jain
3 min readNov 21, 2020

How the game looks like? So what we first observe according to the UI is we flip , using some method for flip ,success , fail , reset the event thing and a shuffling method to shuffle the cards and so on .

So to start with , first let us just grab all the cards . Observe the <card> class in every card which can be selected using querySelectorAll() .

Function flip() is used to flip the cards but we don’t want to flip all, so for that we need some variables to control and track the flipped cards.

So now we would modify the flip() method:~

Checking It will check if two cards are same or not??

But now after console… we need to approach for how to check actually two cards when flipped? So for that we need to grab data-image @!!

Basic and Fundamental functions are done!

But we also want to do some shuffling as well using function shuffle():~

So till now we have covered all the basic and fundamental functionalities of game ! But some corner cases are still missing? Guess what?

So the smooth functionality of flipping of cards intervened when the “this “ keyword context is messed up.

So when we re running fail() and it is running after 1s , “this” is constantly getting overloaded. So easy fix is to use reset() method AFTER removing flip class.

And now the end game works!!!

You can find its HTML code on github.com/sakshijainn

--

--

sakshi jain

Coding empowers magic to my thought with a wing of programming!