Create a Fun Memory Card Game with HTML, CSS, and JavaScript | Free Source Code

Learn how to build a Memory Card Game using HTML, CSS, and JavaScript. This beginner-friendly tutorial includes step-by-step instructions and free source code to help you create an engaging game for kids. Perfect for enhancing memory skills!

Wednesday, September 25, 2024
Create a Fun Memory Card Game with HTML, CSS, and JavaScript | Free Source Code

Create a Fun Memory Card Game with HTML, CSS, and JavaScript

Welcome to this exciting tutorial! In this post, we’ll guide you through building a simple yet engaging Memory Card Game using HTML, CSS, and JavaScript. This project is perfect for children and can help improve their memory and concentration skills. Plus, you’ll receive the complete source code and a step-by-step tutorial to create it from scratch!

What is the Memory Card Game?

The Memory Card Game is a classic game where players try to find matching pairs of cards. The cards are laid out face down, and players take turns flipping two cards at a time. If the cards match, they remain face up; if they don't, they flip back down. The objective is to remember the locations of the cards and find all the matching pairs.

Why Create This Game?

  • Fun and Educational: The game is not only enjoyable but also helps kids develop their memory and attention skills.
  • Beginner-Friendly: This project is ideal for beginners wanting to practice their HTML, CSS, and JavaScript skills.
  • Easily Customizable: You can modify the game with different images, sounds, or difficulty levels to suit your audience.

Getting Started

Step 1: Set Up Your HTML

Create a file named index.html. This file will serve as the backbone of our game. Here’s the HTML structure you need:

Explanation:

  • The

    element displays the game title.

  • The button with the ID start-btn will start the game.
  • The
    with the ID game-container is where our cards will be dynamically generated.
  • The score display keeps track of the player’s score.

Step 2: Style the Game with CSS

Next, create a file named styles.css. This stylesheet will define how our game looks visually. Here’s a sample style sheet:

Explanation:

  • The body is styled to center align all elements with a pleasant background color.
  • The game container uses a grid layout to arrange the cards.
  • Each card has a default appearance and changes color when flipped.

Step 3: Add Game Logic with JavaScript

Create a file named script.js. This script will handle the game mechanics, including card flipping and match checking. Here’s the JavaScript code:

Explanation:

  • The script generates card pairs and shuffles them for a random layout.
  • The flipCard function allows cards to be flipped, while checkMatch verifies if two flipped cards match.
  • The score is updated accordingly, and a success message appears when all pairs are found.

Customizing Your Game

Once you've built the basic game, consider customizing it to make it more engaging:

  1. Different Themes: Change the images used for the cards. Instead of emojis, you could use cartoon characters, animals, or objects.

  2. Sound Effects: Add sound effects for flipping cards and matching pairs to enhance the gameplay experience.

  3. Difficulty Levels: Introduce different difficulty levels by changing the number of cards. For younger children, start with fewer pairs, and as they get better, increase the number.

  4. Timer: Add a timer to create a sense of urgency. Players must find all pairs before the time runs out.

  5. Responsive Design: Ensure the game works well on mobile devices by using media queries in your CSS.

HTML Code

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Memory Card Game</h1>
    <button id="start-btn">Start Game</button>
    <div class="game-container" id="game-container"></div>
    <div class="score">Score: <span id="score">0</span></div>
    <script src="script.js"></script>
</body>
</html>

CSS Code

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e0f7fa;
    font-family: Arial, sans-serif;
}

h1 {
    color: #00796b;
}

.game-container {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    gap: 10px;
    margin-top: 20px;
}

.card {
    width: 100px;
    height: 100px;
    background-color: #ffb300;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    border-radius: 5px;
    user-select: none;
}

.card.flipped {
    background-color: #ffffff;
}

.score {
    margin-top: 20px;
    font-size: 20px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #00796b;
    color: white;
    border: none;
    border-radius: 5px;
}

JavaScript Code

const startButton = document.getElementById('start-btn');
const gameContainer = document.getElementById('game-container');
const scoreDisplay = document.getElementById('score');

let cards = [];
let flippedCards = [];
let matchedPairs = 0;
let score = 0;

// Generate card pairs
function generateCards() {
    const images = ['🍎', '🍌', '🍇', '🍉', '🍓', '🍊', '🍒', '🍍'];
    cards = [...images, ...images];
    cards.sort(() => 0.5 - Math.random());
}

// Create card elements
function createCards() {
    cards.forEach((image, index) => {
        const card = document.createElement('div');
        card.classList.add('card');
        card.dataset.index = index;
        card.dataset.image = image;

        card.addEventListener('click', flipCard);
        gameContainer.appendChild(card);
    });
}

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

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

// Check for match
function checkMatch() {
    const [card1, card2] = flippedCards;

    if (card1.dataset.image === card2.dataset.image) {
        matchedPairs++;
        score++;
        scoreDisplay.textContent = score;
        resetFlippedCards();
        if (matchedPairs === cards.length / 2) {
            alert('You found all pairs! Great job!');
            resetGame();
        }
    } else {
        card1.textContent = '';
        card2.textContent = '';
        card1.classList.remove('flipped');
        card2.classList.remove('flipped');
        resetFlippedCards();
    }
}

// Reset flipped cards array
function resetFlippedCards() {
    flippedCards = [];
}

// Start game
function startGame() {
    gameContainer.innerHTML = '';
    score = 0;
    matchedPairs = 0;
    scoreDisplay.textContent = score;
    generateCards();
    createCards();
}

startButton.addEventListener('click', startGame);

PHP Code

NO Need
Show Result

Conclusion

Congratulations! You’ve successfully created a Memory Card Game using HTML, CSS, and JavaScript. This project is not only a great way to practice coding but also offers a fun and educational experience for kids.


FAQ Section

1. What is a Memory Card Game?

A Memory Card Game is a fun and educational game where players try to find matching pairs of cards that are placed face down. Players take turns flipping over two cards at a time, aiming to match pairs while improving their memory skills.

2. Do I need to know programming to build this game?

No, this tutorial is designed for beginners. We provide clear, step-by-step instructions and all the necessary code, so even those with minimal coding experience can follow along.

3. Can I customize the game?

Absolutely! You can change the card images, add sound effects, introduce different difficulty levels, or even create a timer to make the game more challenging.

4. What tools do I need to get started?

All you need is a basic text editor (like VSCode or Sublime Text) and a web browser to run your game. You can create three files: index.html, styles.css, and script.js.

5. How can I improve the game after building it?

Consider adding features such as score tracking, a timer, different themes, and animations. These enhancements can make the game more engaging and fun for players.

6. Where can I find the source code?

You can find the complete source code in the article above. It includes all the necessary HTML, CSS, and JavaScript code to create the Memory Card Game.


Share Your Experience

We hope you enjoyed this tutorial! If you have any questions, suggestions, or if you’d like to share your customized version of the game, please leave a comment below. Happy coding, and enjoy playing your new Memory Card Game!






Leave a Comment: 👇