<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Memory Game</title>
</head>
<body>
    <div id="memory-game">
        <h1>משחק זיכרון</h1>
        <div id="game-board" class="board"></div>
        <p id="message">!בהצלחה</p>
    </div>

    <script src="script.js"></script>
</body>
</html>
body {
    font-family: 'Arial', sans-serif;
    text-align: center;
}

#memory-game {
    margin: 50px auto;
    max-width: 600px;
}

h1 {
    color: #333;
}

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

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

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

#message {
    color: #900;
    font-weight: bold;
}
const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'brown'];
const totalPairs = colors.length;

let cards = [];
let flippedCards = [];
let matchedPairs = 0;
let isCardFlipping = false;

function initializeGame() {
    cards = [];
    flippedCards = [];
    matchedPairs = 0;
    isCardFlipping = false;

    // Create pairs of cards with colors
    for (let i = 0; i < totalPairs; i++) {
        cards.push({ color: colors[i], isFlipped: false, isMatched: false });
        cards.push({ color: colors[i], isFlipped: false, isMatched: false });
    }

    // Shuffle the cards
    cards = shuffle(cards);

    // Render the game board
    renderBoard();
}

function renderBoard() {
    const gameBoard = document.getElementById('game-board');
    gameBoard.innerHTML = '';

    cards.forEach((card, index) => {
        const cardElement = document.createElement('div');
        cardElement.classList.add('card');
        cardElement.dataset.index = index;
        cardElement.style.backgroundColor = card.isFlipped ? card.color : '';
        cardElement.addEventListener('click', () => flipCard(index));

        gameBoard.appendChild(cardElement);
    });
}

function flipCard(index) {
    if (isCardFlipping || flippedCards.length >= 2 || cards[index].isFlipped || cards[index].isMatched) {
        return;
    }

    cards[index].isFlipped = true;
    flippedCards.push(index);

    renderBoard();

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

function checkMatch() {
    const [index1, index2] = flippedCards;
    const color1 = cards[index1].color;
    const color2 = cards[index2].color;

    if (color1 === color2) {
        cards[index1].isMatched = true;
        cards[index2].isMatched = true;
        matchedPairs++;

        if (matchedPairs === totalPairs) {
            document.getElementById('message').innerText = 'Congratulations! You matched all pairs.';
        }
    } else {
        cards[index1].isFlipped = false;
        cards[index2].isFlipped = false;
    }

    flippedCards = [];
    isCardFlipping = false;
    renderBoard();
}

function shuffle(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;
}

document.addEventListener('DOMContentLoaded', initializeGame);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.