Click here for free DL of the app version that can save data.

No:15542

158

←

Prev Next

→

complete game
Developer User6662｜Date and time 23/9/9 22:06:05
Build time 42.493 sec｜Game capacity 4.575KB｜

Script

لعبة الذاكرة

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>لعبة الذاكرة</title>
    <style>
        body {
            background-color: #F7F7F7;
            font-family: Arial, sans-serif;
        }
        h1 {
            text-align: center;
            color: #333333;
        }
        #game-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
        }
        .card {
            width: 80px;
            height: 80px;
            border-radius: 5px;
            background-color: #FFFFFF;
            margin: 5px;
            display: inline-block;
            text-align: center;
            font-size: 40px;
            line-height: 80px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>لعبة الذاكرة</h1>
    <div id="game-container">
        <div id="cards-container"></div>
        <button id="restart-button" style="display: none;">إعادة</button>
    </div>

let firstCard = null;
        let secondCard = null;
        let lockBoard = false;
        let pairsFound = 0;

// Randomly shuffle the pictograms
        function shuffle(array) {
            let currentIndex = array.length;
            let temporaryValue, randomIndex;

while (currentIndex !== 0) {
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;
                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }

return array;
        }

// Create the game board
        function createBoard() {
            const cardsContainer = document.getElementById('cards-container');
            const shuffledPictograms = shuffle([...pictograms, ...pictograms]);

for (let i = 0; i < shuffledPictograms.length; i++) {
                const card = document.createElement('div');
                card.className = 'card';
                card.dataset.pictogram = shuffledPictograms[i];
                card.addEventListener('click', flipCard);
                cardsContainer.appendChild(card);
            }
        }

// Flip the card when clicked
        function flipCard() {
            if (lockBoard) return;

if (this === firstCard) return;

this.classList.add('flipped');

if (!firstCard) {
                firstCard = this;
            } else {
                secondCard = this;

if (firstCard.dataset.pictogram === secondCard.dataset.pictogram) {
                    disableCards();
                    pairsFound++;

if (pairsFound === (pictograms.length / 2)) {
                        endGame();
                    }
                } else {
                    unflipCards();
                }
            }
        }

// Disable the matched cards
        function disableCards() {
            firstCard.removeEventListener('click', flipCard);
            secondCard.removeEventListener('click', flipCard);
            resetBoard();
        }

// Unflip the unmatched cards
        function unflipCards() {
            lockBoard = true;
            setTimeout(() => {
                firstCard.classList.remove('flipped');
                secondCard.classList.remove('flipped');
                resetBoard();
            }, 1000);
        }

// Reset variables for the next turn
        function resetBoard() {
            [firstCard, secondCard, lockBoard] = [null, null, false];
        }

// Restart the game
        function restartGame() {
            const cardsContainer = document.getElementById('cards-container');
            cardsContainer.innerHTML = '';
            pairsFound = 0;
            createBoard();
            document.getElementById('restart-button').style.display = 'none';
        }

// End the game
        function endGame() {
            document.getElementById('restart-button').style.display = 'block';
        }

// Call the createBoard function to initialize the game
        createBoard();

// Event listener for the restart button
        document.getElementById('restart-button').addEventListener('click', restartGame);
    </script>
</body>
</html>