AI game creator

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

No:39820

←

Prev Next

→

Playstation 6
Developer User17815｜Date and time 24/1/30 12:13:13
Build time 15.603 sec｜Game capacity 4.486KB｜

Script

🍕

🌮

🍔

🍣

🍦

🥞

🍩

🍎

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Jogo da Memória</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        .memory-card {
            width: 150px;
            height: 150px;
            perspective: 1000px;
            display: inline-block;
            margin: 10px;
        }
        
        .memory-card .card {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
            transition: transform 0.5s;
            cursor: pointer;
        }
        
        .memory-card .card div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
            position: absolute;
        }
        
        .memory-card .card .front {
            background-color: lightgray;
            transform: rotateY(0deg);
        }
        
        .memory-card .card .back {
            background-color: #2f3640;
            transform: rotateY(180deg);
            color: #fff;
            font-size: 60px;
        }
        
        .matched {
            opacity: 0.5;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="memory-card" onclick="flipCard(this)">
        <div class="card">
            <div class="front"></div>
            <div class="back">🍕</div>
        </div>
    </div>
    
    <div class="memory-card" onclick="flipCard(this)">
        <div class="card">
            <div class="front"></div>
            <div class="back">🌮</div>
        </div>
    </div>
    
    <div class="memory-card" onclick="flipCard(this)">
        <div class="card">
            <div class="front"></div>
            <div class="back">🍔</div>
        </div>
    </div>
    
    <div class="memory-card" onclick="flipCard(this)">
        <div class="card">
            <div class="front"></div>
            <div class="back">🍣</div>
        </div>
    </div>
    
    <div class="memory-card" onclick="flipCard(this)">
        <div class="card">
            <div class="front"></div>
            <div class="back">🍦</div>
        </div>
    </div>
    
    <div class="memory-card" onclick="flipCard(this)">
        <div class="card">
            <div class="front"></div>
            <div class="back">🥞</div>
        </div>
    </div>

<div class="memory-card" onclick="flipCard(this)">
        <div class="card">
            <div class="front"></div>
            <div class="back">🍩</div>
        </div>
    </div>
    
    <div class="memory-card" onclick="flipCard(this)">
        <div class="card">
            <div class="front"></div>
            <div class="back">🍎</div>
        </div>
    </div>
    
    <script>
        const cards = document.querySelectorAll('.memory-card');
        let hasFlippedCard = false;
        let lockBoard = false;
        let firstCard, secondCard;

function flipCard(card) {
            if (lockBoard) return;
            if (card === firstCard) return;

card.children[0].style.transform = 'rotateY(180deg)';

if (!hasFlippedCard) {
                hasFlippedCard = true;
                firstCard = card;
            } else {
                hasFlippedCard = false;
                secondCard = card;

if (firstCard.children[1].innerHTML === secondCard.children[1].innerHTML) {
                    disableCards();
                } else {
                    unflipCards();
                }
            }
        }

function disableCards() {
            firstCard.classList.add('matched');
            secondCard.classList.add('matched');

resetBoard();
        }

function unflipCards() {
            lockBoard = true;

setTimeout(() => {
                firstCard.children[0].style.transform = 'rotateY(0deg)';
                secondCard.children[0].style.transform = 'rotateY(0deg)';

resetBoard();
            }, 1000);
        }

function resetBoard() {
            hasFlippedCard = false;
            lockBoard = false;
            firstCard = null;
            secondCard = null;
        }
    </script>
</body>
</html>