JavaScript Games Galore: Developing a Memory Match Game

📁JavaScript | 📅 March 1, 2024

Developing a Memory Match Game using JavaScript is a fun project. Here’s a step-by-step guide to help you create a simple Memory Match Game:

Step 1: Set Up Your HTML Structure

Create the basic structure for your HTML file. Include a grid to display the cards and a score counter.




    
    
    Memory Match Game
    



    
        Score: 0

Step 2: Style Your Game (styles.css)

Create a simple CSS file to style your game. Add styles for the cards, grid, and score.

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}

.memory-game {
    text-align: center;
}

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

.card {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
}

.score {
    font-size: 24px;
    margin-bottom: 10px;
}

Step 3: Write JavaScript Code (script.js)

Create a JavaScript file to handle the game logic.

document.addEventListener('DOMContentLoaded', () => {
    const grid = document.getElementById('grid');
    const scoreDisplay = document.querySelector('.score');

    const cardArray = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H'];

    let cardsChosen = [];
    let cardsChosenId = [];
    let cardsWon = [];
    let score = 0;

    // Shuffle the cards
    cardArray.sort(() => 0.5 - Math.random());

    // Create the game board
    function createBoard() {
        for (let i = 0; i < cardArray.length; i++) {
            const card = document.createElement('div');
            card.classList.add('card');
            card.dataset.id = i;
            card.addEventListener('click', flipCard);
            grid.appendChild(card);
        }
    }

    // Check for matches
    function checkForMatch() {
        const cards = document.querySelectorAll('.card');
        const [optionOneId, optionTwoId] = cardsChosenId;

        if (cardsChosen[0] === cardsChosen[1] && optionOneId !== optionTwoId) {
            cardsWon.push(cardsChosen);
            cards[optionOneId].classList.add('matched');
            cards[optionTwoId].classList.add('matched');
            score++;
        } else {
            cards[optionOneId].textContent = '';
            cards[optionTwoId].textContent = '';
        }

        cardsChosen = [];
        cardsChosenId = [];
        scoreDisplay.textContent = `Score: ${score}`;

        if (cardsWon.length === cardArray.length / 2) {
            scoreDisplay.textContent = 'Congratulations! You won!';
        }
    }

    // Flip the card
    function flipCard() {
        const cardId = this.dataset.id;
        this.textContent = cardArray[cardId];
        cardsChosen.push(cardArray[cardId]);
        cardsChosenId.push(cardId);
        this.removeEventListener('click', flipCard);

        if (cardsChosen.length === 2) {
            setTimeout(checkForMatch, 500);
        }
    }

    createBoard();
});