At least 200 lines of code's game

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

No:52718

353

←

Prev Next

→

At least 200 lines of code
Developer User14077｜Date and time 24/3/24 7:38:48
Build time 7.642 sec｜Game capacity 2.881KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pictogram Game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        #gameContainer {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }
        .gameCard {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3em;
            border: 1px solid black;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="gameContainer"></div>

let flippedCards = [];
        let matchedCards = [];

function createGame() {
            const gameContainer = document.getElementById('gameContainer');
            pictogramList.forEach((pictogram, index) => {
                const card = document.createElement('div');
                card.classList.add('gameCard');
                card.textContent = '?';
                card.dataset.pictogram = pictogram;
                card.addEventListener('click', flipCard);
                gameContainer.appendChild(card);
            });
        }

function flipCard() {
            if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
                this.textContent = this.dataset.pictogram;
                this.classList.add('flipped');
                flippedCards.push(this);

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

function checkMatch() {
            const [firstCard, secondCard] = flippedCards;
            if (firstCard.dataset.pictogram === secondCard.dataset.pictogram) {
                firstCard.removeEventListener('click', flipCard);
                secondCard.removeEventListener('click', flipCard);
                matchedCards.push(firstCard, secondCard);

if (matchedCards.length === pictogramList.length) {
                    alert('Congratulations! You have won the game!');
                    location.reload();
                }
            } else {
                setTimeout(() => {
                    firstCard.textContent = '?';
                    secondCard.textContent = '?';
                    firstCard.classList.remove('flipped');
                    secondCard.classList.remove('flipped');
                }, 1000);
            }
            
            flippedCards = [];
        }

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