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

No:3097

1117

←

Prev Next

→

Lost Arc
Developer User3660｜Date and time 23/6/23 21:25:14
Build time 33.377 sec｜Game capacity 3.835KB｜

Script

失われたアーク

アークを見つけるためにカードをめくって探そう！

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>失われたアーク</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 24px;
            text-align: center;
        }
        button {
            background-color: yellow;
            color: black;
            padding: 10px;
            font-weight: bold;
            border-radius: 5px;
        }
        #game-board {
            width: 80vw;
            margin: 0 auto;
        }
        .card {
            border: 1px solid black;
            width: 25%;
            height: 150px;
            display: inline-block;
            margin: 5px;
            cursor: pointer;
        }
        .card img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <h1>失われたアーク</h1>
    <p>アークを見つけるためにカードをめくって探そう！</p>
    <button id="start-button">スタート</button>
    <div id="game-board">
    </div>
    <script>
        const cards = [
            '🌊', '🌊', '🌵', '🌵', '🌲', '🌲', '🌸', '🌸', '🍉', '🍉', '🌎', '🌎', '🌞', '🌞', '🌈', '🌈',
        ];
        let hasFlippedCard = false;
        let lockBoard = false;
        let firstCard, secondCard;
        let numFlippedCards = 0;
        const startButton = document.getElementById('start-button');

function flipCard() {
            console.log('Card flipped!');
            if (lockBoard) return;
            if (this === firstCard) return;
            this.classList.add('flip');

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

checkForMatch();
        }

function checkForMatch() {
            let isMatch = firstCard.innerHTML === secondCard.innerHTML;

if (isMatch) {
                disableCards();
                numFlippedCards += 2;
                if (numFlippedCards === cards.length) {
                    alert('ゲームクリア！');
                }
            } else {
                unflipCards();
            }
        }

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

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

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

function shuffleCards() {
            for (let i = cards.length - 1; i > 0; i--) {
                let j = Math.floor(Math.random() * (i + 1));
                [cards[i], cards[j]] = [cards[j], cards[i]];
            }
        }

startButton.addEventListener('click', () => {
            createGameBoard();
            startButton.disabled = true;
        });
    </script>
</body>
</html>