Logo

Creating a Simple Memory Card Game with HTML, CSS, and JavaScript

Codewithhridoy

Codewithhridoy

· 2 min read
Creating a Simple Memory Card Game with HTML, CSS, and JavaScript

Are you looking for a fun way to challenge your memory and improve your front-end development skills? Look no further! In this blog post, we'll walk you through the process of creating a simple yet engaging memory card game using HTML, CSS, and JavaScript.

What We're Building

Our memory card game consists of a 4x4 grid of cards, each hiding a fruit emoji. The player's goal is to match all pairs of fruits by flipping the cards. It's a classic game that's not only entertaining but also helps improve concentration and memory.

The HTML Structure

We start with a basic HTML structure that includes a title and a container for our game board:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Card Game</title>
</head>
<body>
    <h1>Memory Card Game</h1>
    <div class="game-board"></div>
</body>
</html>

Styling with CSS

Next, we add some CSS to make our game visually appealing:

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f0f0f0;
}
.game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 20px;
}
.card {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s;
}
.card:hover {
    transform: scale(1.05);
}
.card.flipped {
    background-color: #2ecc71;
}

This CSS creates a responsive grid layout for our cards and adds some visual effects like hover animations.

The JavaScript Logic

The real magic happens in our JavaScript code. Here's a breakdown of the main functions:

  1. shuffleArray(): Randomizes the order of cards.
  2. createCard(): Generates a new card element.
  3. flipCard(): Handles the card flipping logic.
  4. checkMatch(): Verifies if two flipped cards match.
  5. initGame(): Sets up the game board.
const gameBoard = document.querySelector('.game-board');
        const symbols = ['🍎', '🍌', '🍇', '🍊', '🍓', '🍉', '🍍', '🥑'];
        let cards = [...symbols, ...symbols];
        let flippedCards = [];
        let matchedPairs = 0;

        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]];
            }
        }

        function createCard(symbol) {
            const card = document.createElement('div');
            card.classList.add('card');
            card.dataset.symbol = symbol;
            card.addEventListener('click', flipCard);
            return card;
        }

        function flipCard() {
            if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
                this.classList.add('flipped');
                this.textContent = this.dataset.symbol;
                flippedCards.push(this);

                if (flippedCards.length === 2) {
                    setTimeout(checkMatch, 500);
                }
            }
        }

        function checkMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.symbol === card2.dataset.symbol) {
                matchedPairs++;
                if (matchedPairs === symbols.length) {
                    alert('Congratulations! You won!');
                }
            } else {
                card1.classList.remove('flipped');
                card2.classList.remove('flipped');
                card1.textContent = '';
                card2.textContent = '';
            }
            flippedCards = [];
        }

        function initGame() {
            shuffleArray(cards);
            cards.forEach(symbol => {
                const card = createCard(symbol);
                gameBoard.appendChild(card);
            });
        }

        initGame();

How It Works

  1. When the page loads, initGame() is called, shuffling the cards and creating the game board.
  2. Players click on cards to flip them over.
  3. If two flipped cards match, they stay face-up. If not, they flip back over.
  4. The game continues until all pairs are matched.

Conclusion

Creating this memory card game is a great way to practice your HTML, CSS, and JavaScript skills while building something fun and interactive. You can easily expand on this basic version by adding features like a timer, move counter, or difficulty levels.

Why not give it a try and see how you can customize and improve the game? Happy coding!

Comments

No approved comments available yet