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

No:30858

←

Prev Next

→

Un Juego De Alemania
Developer User14947｜Date and time 23/12/24 7:20:20
Build time 15.577 sec｜Game capacity 3.692KB｜

Script

Un Juego de Alemania

Encuentra los pares de pictogramas

🐶

🐱

🐭

🦁

🐰

🐲

🐸

🐙

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Un Juego de Alemania</title>
    <style>
        body {
            background-color: #efefef;
            font-family: Arial, sans-serif;
        }

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

.card {
            font-size: 50px;
            background-color: #ffffff;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.card:hover {
            background-color: #f2f2f2;
        }

.card.flipped {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Un Juego de Alemania</h1>
    <h3>Encuentra los pares de pictogramas</h3>
    <div id="game-board">
        <div class="card" onclick="flipCard(0)">🐶</div>
        <div class="card" onclick="flipCard(1)">🐶</div>
        <div class="card" onclick="flipCard(2)">🐱</div>
        <div class="card" onclick="flipCard(3)">🐱</div>
        <div class="card" onclick="flipCard(4)">🐭</div>
        <div class="card" onclick="flipCard(5)">🐭</div>
        <div class="card" onclick="flipCard(6)">🦁</div>
        <div class="card" onclick="flipCard(7)">🦁</div>
        <div class="card" onclick="flipCard(8)">🐰</div>
        <div class="card" onclick="flipCard(9)">🐰</div>
        <div class="card" onclick="flipCard(10)">🐲</div>
        <div class="card" onclick="flipCard(11)">🐲</div>
        <div class="card" onclick="flipCard(12)">🐸</div>
        <div class="card" onclick="flipCard(13)">🐸</div>
        <div class="card" onclick="flipCard(14)">🐙</div>
        <div class="card" onclick="flipCard(15)">🐙</div>
    </div>

function flipCard(index) {
            if (lockBoard) return;
            if (this === firstCard) return;

cards[index].classList.add('flipped');

if (!hasFlippedCard) {
                hasFlippedCard = true;
                firstCard = this;
                return;
            }

secondCard = this;
            checkForMatch();
        }

function checkForMatch() {
            let isMatch = firstCard.innerHTML === secondCard.innerHTML;
            isMatch ? disableCards() : unflipCards();
        }

function disableCards() {
            firstCard.removeEventListener('click', flipCard);
            secondCard.removeEventListener('click', flipCard);
            resetBoard();
        }

function unflipCards() {
            lockBoard = true;
            setTimeout(() => {
                firstCard.classList.remove('flipped');
                secondCard.classList.remove('flipped');
                resetBoard();
            }, 1500);
        }

function resetBoard() {
            [hasFlippedCard, lockBoard] = [false, false];
            [firstCard, secondCard] = [null, null];
        }

(function shuffle() {
            cards.forEach(card => {
                let randomPos = Math.floor(Math.random() * 16);
                card.style.order = randomPos;
            });
        })();

cards.forEach(card => card.addEventListener('click', flipCard));
    </script>
</body>
</html>