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

No:42851

←

Prev Next

→

Molang - Matching Masters
Developer User18971｜Date and time 24/2/13 2:09:03
Build time 13.343 sec｜Game capacity 3.6KB｜

Script

Molang - Matching Masters

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Molang - Matching Masters</title>
</head>
<body>
    <h1>Molang - Matching Masters</h1>
    <div id="game-board">
        
    </div>
    <script>
        // Array of pictogram images
        const pictograms = [
            "🐰", "🐻", "🐸", "🐼", "🐧",
            "🐤", "🐛", "🐞", "🦋", "🌼"
        ];

// Shuffle the pictograms array
        const shufflePictograms = () => {
            for (let i = pictograms.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [pictograms[i], pictograms[j]] = [pictograms[j], pictograms[i]];
            }
        };

// Function to generate game board
        const generateGameBoard = () => {
            const gameBoard = document.getElementById("game-board");
            // Clear previous game board
            gameBoard.innerHTML = "";

// Shuffle the pictograms array
            shufflePictograms();

// Create card elements and append to the game board div
            for (let i = 0; i < pictograms.length; i++) {
                const card = document.createElement("div");
                card.classList.add("card");
                card.innerHTML = pictograms[i];
                gameBoard.appendChild(card);
            }
        };

// Function to handle card click
        const handleCardClick = (event) => {
            const card = event.target;
            card.classList.toggle("flipped");

const flippedCards = document.querySelectorAll(".flipped");

if (flippedCards.length === 2) {
                const [firstCard, secondCard] = flippedCards;

if (firstCard.innerHTML === secondCard.innerHTML) {
                    // Match found
                    firstCard.removeEventListener("click", handleCardClick);
                    secondCard.removeEventListener("click", handleCardClick);
                    firstCard.classList.add("matched");
                    secondCard.classList.add("matched");
                } else {
                    // No match, flip the cards back after a delay
                    setTimeout(() => {
                        firstCard.classList.remove("flipped");
                        secondCard.classList.remove("flipped");
                    }, 1000);
                }
            }
        };

// Function to start the game
        const startGame = () => {
            generateGameBoard();

const cards = document.querySelectorAll(".card");
            cards.forEach((card) => {
                card.addEventListener("click", handleCardClick);
            });
        };

// Start the game on page load
        window.addEventListener("load", startGame);
    </script>
    <style>
        /* CSS styles for the game */
        #game-board {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            margin: 0 auto;
        }

.card {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;
            height: 50px;
            width: 50px;
            margin: 5px;
            font-size: 24px;
            cursor: pointer;
            transition: transform 0.3s;
        }

.card.flipped {
            transform: rotateY(180deg);
        }

.card.matched {
            cursor: default;
            background-color: lightgreen;
        }
    </style>
</body>
</html>