Untitled

<!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>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .board {
            display: grid;
            grid-template-columns: repeat(4, 100px);
            grid-template-rows: repeat(4, 100px);
            gap: 10px;
        }
        .card {
            width: 100px;
            height: 100px;
            background-color: #2e3d49;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
            color: white;
            cursor: pointer;
            border-radius: 10px;
        }
        .card.flipped {
            background-color: #fff;
            color: #000;
            cursor: default;
        }
    </style>
</head>
<body>
    <div class="board" id="board"></div>
    <script>
        const boardElement = document.getElementById('board');
        const cards = [
            'A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 
            'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H'
        ];
        let flippedCards = [];
        let matchedCards = 0;

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

        function createBoard() {
            const shuffledCards = shuffle(cards);
            shuffledCards.forEach(card => {
                const cardElement = document.createElement('div');
                cardElement.classList.add('card');
                cardElement.dataset.card = card;
                cardElement.addEventListener('click', flipCard);
                boardElement.appendChild(cardElement);
            });
        }

        function flipCard() {
            if (this.classList.contains('flipped') || flippedCards.length === 2) {
                return;
            }

            this.classList.add('flipped');
            this.textContent = this.dataset.card;
            flippedCards.push(this);

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

        function checkForMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.card === card2.dataset.card) {
                matchedCards += 2;
                flippedCards = [];
                if (matchedCards === cards.length) {
                    setTimeout(() => alert('Congratulations! You won!'), 500);
                }
            } else {
                setTimeout(() => {
                    card1.classList.remove('flipped');
                    card2.classList.remove('flipped');
                    card1.textContent = '';
                    card2.textContent = '';
                    flippedCards = [];
                }, 1000);
            }
        }

        createBoard();
    </script>
</body>
</html>
Editor is loading...