How to Make A Simple Matching Game Using Vanilla JS & CSS
Before I enrolled as a student in the Flatiron Coding School (highly recommended), I was just someone who had developed an interest in web development and was trying to utilize any resources available to teach myself the craft. I bought a course on Udemy titled, “The Complete Web Developer in 2020: Zero To Mastery”, by Andrei Neagoie (no affiliation, but also highly recommended). I was following along with the course, watching all of the lecture videos and taking notes, but as anyone who has attempted to self-teach programming can attest, the only way to really learn and improve your skills is to try to actually make something.
After spending way too long on the beginning part of the course, which taught HTML and CSS, I finally made it to the meat of the course, which was the JavaScript section. I was really enjoying this part of the class because it felt like real programming, you know like logic and stuff, but again I found myself not really knowing if I truly was improving because you can’t really gauge your progress by just watching videos of someone else code.
Then I came to find out the course offered a monthly challenge to everyone enrolled. The new challenge that was issued was to build a matching memory game using only vanilla JavaScript (no frameworks). You can check the challenge out here.
This was the first real thing I built with JavaScript and I think it is a great exercise for any beginner trying to hone their JavaScript/DOM Manipulation skills.
This blog will outline how to build the matching functionality for a game such as this:
You can check the game out here.
CSS
First, you are going to want to grab an image file that will serve as the back of your cards when they are face down, and also grab all of the images that people will match when playing your game. Make the images the same size as each other, you can use CSS classes and assign them properties “height” and “width”. I will use these two images as example:
The HTML structure for these images should look like this:
The front image of the card (the one the user sees before they flip the card) will be nested in a DIV with a class of “flip-card-front”. Right next to that DIV, the back image of the card should be nested in it’s own DIV with a class of “flip-card-back”. Both of these DIV’s should then be housed in a DIV with a class of “flip-card-inner”, which in turn should then be housed by a final DIV with a class of “flip-card”.
Arranging the “flip-card-front” and “flip-card-back” DIV’s on top of each other in the HMTL will cause them to sit on top of each other like this:
Now we can start making the card. Assign your “flip-card” class in your CSS properties a background color, and make it’s “height” and “width”, the same size as the two images. Also, add a border and make it any color and as thick as you want. I also used the “border-radius” property to give my card rounded edges.
Now we have to move the back image onto the card. On both your “flip-card-front” & “flip-card-back” class, assign them both a property of “position” with a value of “absolute”. This moves the back image onto the card.
But we are going to want to flip the back image we just put onto the card, because otherwise, when we flip the card, the back image will come up reversed. So on our “flip-card-back” class, we are going to apply a “transform” property with a value of “rotateY(180deg)” to achieve this effect:
So far so good, but we still need to make it so that the user only sees the front of the card and not the back. Now we will add a “backface-visibility” property to our “flip-card-front” and “flip-card-back” class, and assign it a property of “hidden”, to hide the back of the card.
Congratulations! At this point you have successfully created a flip card with a front and back face!
JavaScript
In order to have this fully function as a flip-card, you will have to attach an event listener to each DIV with a class of “flip-card-inner”. These event listeners will be listening for “click” events, and when they detect one, they should run a function that performs the following:
The first line of the above function will rotate the “flip-card-inner” DIV 180 degrees about the Y-axis. The second line dictates how long you want your flip animation to last, which you can change to your hearts content.
However, there is one last issue. At this point, with our current CSS and JavaScript code, our card will flip like this:
As we can see, the card is flipping but it is still showing us the front face of the card. We need to add one more CSS property our class.
Adding the “transform-style” property to our “flip-card-inner” class, and assigning it a value of “preserve-3d” will allow it to retain 3D like behavior, meaning when we flip it, it shows us the back of the card, instead of just flipping the front of it’s face. After adding this property we can see that:
It works!
Now all you have to do is make as many cards as you want, and you have a full board of flip cards to play with!