Poppy Playtime chapter 2 Memory Game's game

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

No:49131

←

Prev Next

→

Poppy Playtime chapter 2 Memory Game
Developer User20944｜Date and time 24/3/3 22:45:48
Build time 7.536 sec｜Game capacity 2.578KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Poppy Playtime Memory Game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f3f3f3;
            font-family: Arial, sans-serif;
        }

.game {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

.card {
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
            color: #333;
            cursor: pointer;
        }

.flipped {
            background-color: #333;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="game"></div>

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 createGame() {
            const gameContainer = document.querySelector('.game');
            const shuffledPictograms = shuffle([...pictograms, ...pictograms]);

shuffledPictograms.forEach(pictogram => {
                const card = document.createElement('div');
                card.classList.add('card');
                card.innerHTML = pictogram;
                card.addEventListener('click', () => {
                    if (flippedCards.length < 2 && !flippedCards.includes(card)) {
                        card.classList.add('flipped');
                        flippedCards.push(card);

if (flippedCards.length === 2) {
                            setTimeout(() => {
                                if (flippedCards[0].innerHTML !== flippedCards[1].innerHTML) {
                                    flippedCards.forEach(card => card.classList.remove('flipped'));
                                }

flippedCards = [];
                            }, 1000);
                        }
                    }
                });

cards.push(card);
                gameContainer.appendChild(card);
            });
        }

createGame();
    </script>
</body>
</html>