Published on June 07, 2024
Hello everyone, and welcome back to our channel! Today, we have an exciting tutorial for you. We’re going to learn how to create a simple Memory Card Game using HTML, CSS, and JavaScript.
Let’s start by looking at the HTML structure of our game. Here, we have the basic setup for our Memory Card Game. It’s contained within the <div> element with a class of “wrapper“.
Inside this wrapper, we have a list (<ul>) with each card represented as a list item (<li>). Each card has two sides: a front view and a back view. The front view initially shows a question mark icon, indicating that the card is face-down and not yet revealed. The back view contains an image specific to that card.
At the bottom of our game area, we have a details section which displays the time remaining and the number of flips the player has made. This adds a bit of interactivity and feedback to the game.
Lastly, we have a refresh button at the end. This button will allow the player to reset the game if they want to start over.
To add functionality to our game, we’ll be using JavaScript. We’ve linked our JavaScript file at the bottom of the HTML, so let’s dive into that next.
Moving on to our JavaScript file, which is responsible for making our game interactive and functional.
We’ll start by defining the game logic. This includes actions like flipping cards, checking for matches, and keeping track of time and flips.
We’ll set up event listeners to handle interactions such as clicking on cards and clicking the refresh button.
CSS
We’ll break down the CSS code step by step, explaining each line to understand how we’re styling our game.
Firstly, we have styles for the wrapper element which contains our game. We’ve set padding, background colour, border radius, and box shadow to give it a visually appealing look.
Moving on, we’ve defined styles for our cards. We’re using Flexbox to arrange them in a grid-like layout. Each card has a cursor pointer, indicating it’s clickable. We’ve also added some animation effects using keyframes to make the cards shake when there’s an action like mismatching.
The .view class styles represent the front and back views of the cards. These views are absolutely positioned to overlap each other, creating the flip effect. The backface-visibility property ensures that the back face of the card is hidden until it’s flipped.
We’ve added styles for flipping the cards when they’re clicked. This involves rotating them along the Y-axis.
Next, we have styles for the details section that display information like time and flips. It’s positioned below the cards and styled with padding, border radius, and box shadow for a neat appearance.
Finally, we’ve styled the refresh button. It’s given a background colour, padding, border radius, and shadow to make it stand out and look clickable.
JAVASCRIPT
We’ll break down the JavaScript code step by step, explaining each line to understand how we’re making our game interactive.
First, we’re declaring variables to select elements from our HTML document. We’re targeting the cards, time tag, flips tag, and the refresh button.
Next, we’re initialising various game-related variables such as maximum time, time left, flips count, matched cards count, and flags to control game states.
We define a function initTimer to handle the game timer. It decreases the time left every second and stops the timer when time runs out.
The flipCard function handles the flipping of cards when they are clicked. It also starts the game timer if it’s not already running.
The matchCards function checks if the flipped cards match. If they match, the cards remain face-up. If not, they shake briefly before flipping back.
The shuffleCard function resets the game state, shuffles the cards, and starts a new game.
We call the shuffleCard function to initialise the game when the page loads.
We add event listeners to the refresh button and all the cards to trigger the shuffling and flipping functions respectively.
So, there you have it! With this JavaScript code, we’ve successfully incorporated all the necessary functionality into our Memory Card Game, transforming it into a fully playable experience. Now, it’s time to put our game to the test. Stay tuned for more updates and let’s see how our game performs!