Building a Simple JavaScript Interactive Memory Game: A Beginner’s Guide

Written by

FixTechToday

in

Memory games, also known as concentration, are a classic for a reason. They’re fun, challenging, and a great way to exercise your brain. But have you ever considered building one yourself? In this guide, we’ll walk through the process of creating a simple, interactive memory game using JavaScript. This project is perfect for beginners, providing a hands-on learning experience that solidifies your understanding of fundamental JavaScript concepts. We’ll break down each step, explain the underlying logic, and address common pitfalls to ensure you can build your own version of this timeless game.

Why Build a Memory Game?

Creating a memory game is more than just a fun exercise; it’s a fantastic way to learn and reinforce core JavaScript principles. You’ll gain practical experience with:

  • DOM Manipulation: Interacting with HTML elements to display the game board, cards, and user interface.
  • Event Handling: Responding to user clicks and other interactions.
  • Arrays and Data Structures: Managing card data and game state.
  • Control Flow: Using conditional statements and loops to implement game logic.
  • Functions: Creating reusable code blocks to organize your game.

Furthermore, building a complete project from start to finish boosts your confidence and provides a tangible demonstration of your coding abilities. This project is also easily customizable, allowing you to experiment with different card designs, game difficulties, and scoring systems.

Setting Up the Project

Before diving into the code, let’s establish the basic structure of our project. We’ll need three main files:

  • index.html: This file will contain the HTML structure of our game, including the game board, cards, and any UI elements like a score counter or timer.
  • style.css: This file will handle the styling of our game, such as card dimensions, colors, and layout.
  • script.js: This file will hold all the JavaScript code that powers our game’s logic and functionality.

Create these three files in a new project directory. It’s good practice to keep your code organized from the beginning.

Building the HTML Structure (index.html)

Let’s start with the HTML. We’ll create a basic structure with a container for the game board. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div id="game-board"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

This HTML provides the basic structure. We have a container (`container`) to center the game on the page and an element with the ID `game-board` where we’ll dynamically generate the cards using JavaScript. We also link to our CSS file (`style.css`) and our JavaScript file (`script.js`).

Styling the Game (style.css)

Next, let’s add some basic styling to make our game visually appealing. Here’s a starting point for your `style.css` file:

body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.container {
    width: 80%;
    max-width: 600px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.card {
    width: 100%;
    padding-bottom: 100%; /* Maintain square aspect ratio */
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    background-color: #ccc;
}

.card-front, .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
}

.card-front {
    background-color: #fff;
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
}

.card-back {
    background-color: #3498db;
    transition: transform 0.6s;
}

.card.flipped .card-back {
    transform: rotateY(180deg);
}

.card.flipped .card-front {
    transform: rotateY(0deg);
}

This CSS provides a basic layout and styling for the game board and cards. It defines the card dimensions, colors, and the flip animation. The `grid-template-columns` property in `#game-board` determines the number of cards per row. The `card-front` and `card-back` elements use `backface-visibility: hidden` to ensure that only one side is visible at a time during the flip animation. We’ll use JavaScript to add the `flipped` class to cards when they are clicked.

Implementing the JavaScript Logic (script.js)

Now, let’s get to the heart of our memory game – the JavaScript code. We’ll break it down into manageable sections.

1. Setting up the Game Data

First, we need to define the cards and their corresponding values. We’ll use an array of objects to store this information. Each object will represent a card and contain a value (used for matching) and an image URL (optional, for more visually appealing cards). For simplicity, we’ll use a set of numbers as the card values.

const cardValues = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6]; // Example values

This array contains pairs of numbers, representing the matching pairs for the game. We’ll shuffle this array later to randomize the card positions.

2. Shuffling the Cards

To randomize the card positions, we’ll use a shuffling algorithm. Here’s a common implementation of the Fisher-Yates shuffle algorithm:

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

const shuffledCardValues = shuffleArray([...cardValues]); // Create a copy to shuffle without modifying the original

This function shuffles the `cardValues` array in place. We create a copy of the array using the spread operator (`…`) to avoid modifying the original `cardValues` array. This is a good practice to prevent unexpected side effects.

3. Creating the Cards on the Game Board

Now, let’s create the cards and add them to the game board. We’ll iterate through the `shuffledCardValues` array and generate the HTML for each card.

const gameBoard = document.getElementById('game-board');

function createCard(value) {
    const card = document.createElement('div');
    card.classList.add('card');
    card.dataset.value = value; // Store the card value in a data attribute

    const cardFront = document.createElement('div');
    cardFront.classList.add('card-front');
    cardFront.textContent = value; // Display the value on the front

    const cardBack = document.createElement('div');
    cardBack.classList.add('card-back');

    card.appendChild(cardFront);
    card.appendChild(cardBack);

    card.addEventListener('click', flipCard);

    return card;
}

function renderCards() {
    shuffledCardValues.forEach(value => {
        const card = createCard(value);
        gameBoard.appendChild(card);
    });
}

renderCards();

This code creates a `createCard` function that generates the HTML structure for each card. It also adds a click event listener to each card, which will call the `flipCard` function when a card is clicked. The `renderCards` function then iterates over the shuffled card values and calls `createCard` for each one, appending the created card elements to the `gameBoard` element.

4. Flipping the Cards

The `flipCard` function handles what happens when a card is clicked. It should flip the card over and check if two cards are flipped. If they match, they stay flipped. If they don’t, they flip back over after a short delay.

let flippedCards = [];
let lockBoard = false; // Prevent clicking while cards are being matched

function flipCard() {
    if (lockBoard) return; // Prevent clicks during the matching process
    if (this === flippedCards[0]) return; // Prevent double-clicking the same card

    this.classList.add('flipped');
    flippedCards.push(this);

    if (flippedCards.length === 2) {
        checkForMatch();
    }
}

This function does the following:

  • Checks if the board is locked (cards are being matched). If so, it returns.
  • Checks if the card is already flipped. If so, it returns.
  • Adds the `flipped` class to the clicked card, which triggers the flip animation.
  • Adds the card to the `flippedCards` array.
  • If two cards are flipped, it calls the `checkForMatch` function.

5. Checking for a Match

The `checkForMatch` function is responsible for determining if the two flipped cards match.

function checkForMatch() {
    lockBoard = true;

    const [card1, card2] = flippedCards;
    const match = card1.dataset.value === card2.dataset.value;

    if (match) {
        disableCards(card1, card2);
    } else {
        unflipCards(card1, card2);
    }
}

This function:

  • Sets `lockBoard` to `true` to prevent further clicks during the matching process.
  • Gets the two flipped cards from the `flippedCards` array.
  • Compares the `dataset.value` of the two cards to check for a match.
  • If there’s a match, it calls the `disableCards` function.
  • If there’s no match, it calls the `unflipCards` function.

6. Disabling and Unflipping Cards

The `disableCards` and `unflipCards` functions handle the actions after a match or a mismatch.

function disableCards(card1, card2) {
    card1.removeEventListener('click', flipCard);
    card2.removeEventListener('click', flipCard);
    resetBoard();
}

function unflipCards(card1, card2) {
    setTimeout(() => {
        card1.classList.remove('flipped');
        card2.classList.remove('flipped');
        resetBoard();
    }, 1000); // Delay for 1 second before flipping back
}

The `disableCards` function removes the click event listeners from the matched cards, preventing them from being flipped again. The `unflipCards` function uses `setTimeout` to flip the cards back over after a short delay (1 second in this example). This gives the user time to see the mismatched cards before they are hidden again. Both functions call `resetBoard` to clear the `flippedCards` array and unlock the board.

7. Resetting the Board

The `resetBoard` function is called after either a match or a mismatch to prepare for the next turn.

function resetBoard() {
    flippedCards = [];
    lockBoard = false;
}

This function clears the `flippedCards` array and sets `lockBoard` to `false`, allowing the user to click cards again.

8. Putting it All Together

Here’s the complete `script.js` code, combining all the functions we’ve discussed:

const cardValues = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6];
const gameBoard = document.getElementById('game-board');
let flippedCards = [];
let lockBoard = false;

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

function createCard(value) {
    const card = document.createElement('div');
    card.classList.add('card');
    card.dataset.value = value;

    const cardFront = document.createElement('div');
    cardFront.classList.add('card-front');
    cardFront.textContent = value;

    const cardBack = document.createElement('div');
    cardBack.classList.add('card-back');

    card.appendChild(cardFront);
    card.appendChild(cardBack);

    card.addEventListener('click', flipCard);

    return card;
}

function renderCards() {
    const shuffledCardValues = shuffleArray([...cardValues]);
    shuffledCardValues.forEach(value => {
        const card = createCard(value);
        gameBoard.appendChild(card);
    });
}

function flipCard() {
    if (lockBoard) return;
    if (this === flippedCards[0]) return;

    this.classList.add('flipped');
    flippedCards.push(this);

    if (flippedCards.length === 2) {
        checkForMatch();
    }
}

function checkForMatch() {
    lockBoard = true;
    const [card1, card2] = flippedCards;
    const match = card1.dataset.value === card2.dataset.value;

    if (match) {
        disableCards(card1, card2);
    } else {
        unflipCards(card1, card2);
    }
}

function disableCards(card1, card2) {
    card1.removeEventListener('click', flipCard);
    card2.removeEventListener('click', flipCard);
    resetBoard();
}

function unflipCards(card1, card2) {
    setTimeout(() => {
        card1.classList.remove('flipped');
        card2.classList.remove('flipped');
        resetBoard();
    }, 1000);
}

function resetBoard() {
    flippedCards = [];
    lockBoard = false;
}

renderCards();

This comprehensive code encompasses all the necessary components for a functional memory game. We set up the game data, shuffle the cards, create the cards on the game board, handle card flips, check for matches, and reset the board after each turn. This structure allows for easy modification and expansion of the game’s features.

Common Mistakes and How to Fix Them

As you build your memory game, you might encounter some common issues. Here’s a look at some of them and how to resolve them:

  • Cards Not Flipping: Double-check your HTML to ensure that the `card-front` and `card-back` elements are correctly nested within the `card` element. Also, verify that the `flipped` class is being added to the correct card elements in your JavaScript.
  • Cards Flipping Too Quickly: If the cards flip back immediately after being clicked, the `setTimeout` function in the `unflipCards` function might not be working correctly. Ensure that the delay time (e.g., 1000 milliseconds) is sufficient for the user to see the cards before they flip back.
  • Incorrect Matching: Make sure you’re comparing the correct card values. Access the value using `card.dataset.value` or however you’ve chosen to store the card value.
  • Cards Clicking During Match Check: If you can click on cards while the game is checking for a match, you likely haven’t set the `lockBoard` variable to `true` at the beginning of the `checkForMatch` function and back to `false` in `resetBoard`.
  • Shuffling Not Working: Ensure that you are calling the `shuffleArray` function and using the shuffled array when rendering the cards. Also, make sure that you are creating a copy of the `cardValues` array before shuffling to avoid modifying the original array.

Debugging your code is a crucial part of the development process. Use the browser’s developer tools (right-click on the page and select “Inspect”) to examine your HTML, CSS, and JavaScript. You can also use `console.log()` statements to output variable values and track the flow of your code.

Adding More Features (Optional)

Once you’ve built the basic memory game, you can enhance it with additional features:

  • Scoring: Keep track of the number of attempts or the time taken to complete the game.
  • Timer: Add a timer to the game to increase the challenge.
  • Difficulty Levels: Allow the user to choose the number of card pairs (e.g., easy, medium, hard).
  • Custom Card Designs: Replace the numbers on the cards with images or icons.
  • Game Over Screen: Display a message when the player wins, along with their score and time.

These features will not only make the game more engaging but also give you more practice with JavaScript. Experiment with different features to customize your game and improve your coding skills.

Key Takeaways

Building a memory game in JavaScript is a rewarding project that provides a solid foundation in fundamental programming concepts. By understanding the core principles discussed in this guide, you’ll be well-equipped to tackle more complex JavaScript projects. Remember to break down the problem into smaller, manageable steps, test your code frequently, and don’t be afraid to experiment. The key to mastering JavaScript is practice, so keep building and exploring!

The journey of creating this memory game, from the initial HTML structure to the interactive card flipping, offers a valuable lesson in how different programming components come together. You’ve learned to manipulate the DOM, handle user interactions, manage game state, and implement conditional logic, all while creating something fun and engaging. The skills you’ve acquired extend far beyond this specific project, providing a solid base for future coding endeavors. The ability to break down a complex problem into smaller, solvable pieces is a skill that will serve you well in any software development project you undertake.

More posts