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

No:34911

←

Prev Next

→

Lu do pro
Developer User16382｜Date and time 24/1/12 14:27:09
Build time 16.174 sec｜Game capacity 4.065KB｜

Script

Sure, I'm glad to help you create a game using HTML, JavaScript, and pictograms. Below is a simple example of a game where you need to match pairs of pictograms. It can be played on a smartphone. Please note that you should save the code as an HTML file and open it in a web browser to play the game.

Pictogram Matching Game

🌞

🌛

🌈

In this game, you can replace the pictograms inside the `gameBoard` div with your desired symbols or pictograms. When you click on a card, it flips over, and if you match two cards with the same symbol, they stay open and turn green. The game is completed when all cards have been matched. When the game is completed, a congratulatory message will be displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pictogram Matching Game</title>
    <style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
    }
    
    .card {
        display: inline-block;
        width: 80px;
        height: 80px;
        margin: 5px;
        background-color: lightgray;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .matched {
        background-color: green;
    }
    </style>
</head>
<body>
    <h1>Pictogram Matching Game</h1>
    <div id="gameBoard">
        
        <div class="card">🌞</div>
        <div class="card">🌞</div>
        <div class="card">🌛</div>
        <div class="card">🌛</div>
        <div class="card">🌈</div>
        <div class="card">🌈</div>
    </div>
    
    <script>
    // Array to store card objects
    let cards = [];
    // Stores the number of currently flipped cards
    let flippedCardsCount = 0;
    // Stores the IDs of the currently flipped cards
    let flippedCardsIDs = [];
    // Prevents more than 2 cards being flipped at a time
    let preventFlipping = false;
    
    // Function to handle card flipping
    function flipCard(index) {
        if (preventFlipping || cards[index].isMatched) {
            return;
        }
        
        const cardElement = document.getElementById(`card${index}`);
        cardElement.classList.add("flipped");
        
        flippedCardsCount++;
        flippedCardsIDs.push(index);
        
        if (flippedCardsCount === 2) {
            const matchingPair =
                cards[flippedCardsIDs[0]].symbol === cards[flippedCardsIDs[1]].symbol;
            
            if (matchingPair) {
                cards[flippedCardsIDs[0]].isMatched = true;
                cards[flippedCardsIDs[1]].isMatched = true;
                cardElement.classList.add("matched");
            }
            
            preventFlipping = true;
            setTimeout(() => {
                if (!matchingPair) {
                    flipBackCards();
                }
                checkGameCompletion();
                flippedCardsCount = 0;
                flippedCardsIDs = [];
                preventFlipping = false;
            }, 1000);
        }
    }
    
    // Function to flip back unmatched cards
    function flipBackCards() {
        const card1Element = document.getElementById(`card${flippedCardsIDs[0]}`);
        const card2Element = document.getElementById(`card${flippedCardsIDs[1]}`);
        
        card1Element.classList.remove("flipped");
        card2Element.classList.remove("flipped");
    }
    
    // Function to check if all cards have been matched
    function checkGameCompletion() {
        const allMatched = cards.every(card => card.isMatched);
        if (allMatched) {
            setTimeout(() => {
                alert("Congratulations! You've completed the game!");
            }, 500);
        }
    }
    
    // Attach click event handlers to the cards
    window.onload = () => {
        const cardElements = document.getElementsByClassName("card");
        for (let i = 0; i < cardElements.length; i++) {
            cards.push({ symbol: cardElements[i].innerText, isMatched: false });
            cardElements[i].addEventListener("click", () => flipCard(i));
        }
    }
    </script>
</body>
</html>
```