AI game creator

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

No:15249

←

Prev Next

→

Match
Developer User6626｜Date and time 23/9/8 2:29:04
Build time 18.671 sec｜Game capacity 3.494KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file, enclosed in script tags and written in JavaScript:

To play the game, the user needs to match pairs of pictograms by clicking on them. When two pictograms are clicked, they are flipped and checked for a match. If they match, the cards are marked as "matched" and if all the cards are matched, the user wins the game. If the flipped cards don't match, they are automatically flipped back after a short delay. The game can be reset by clicking the okay button after winning. Please note that this is a basic implementation and can be expanded upon to include additional features such as levels, timers, or score tracking based on your specific requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of a simple game implemented as a single HTML file, enclosed in script tags and written in JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
<title>Pictogram Matching Game</title>
<style>
    #game-container {
        display: flex;
        flex-wrap: wrap;
    }
    .card {
        width: 80px;
        height: 80px;
        margin: 10px;
        border: 1px solid black;
        text-align: center;
        line-height: 80px;
        font-size: 24px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div id="game-container"></div>

// Shuffle the array using Fisher-Yates algorithm
    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

// Handle card click event
    function handleCardClick(card) {
        if (card.classList.contains("matched")) {
            return;
        }

card.classList.add("flipped");

if (flippedCards.length === 0) {
            flippedCards.push(card);
        } else if (flippedCards.length === 1) {
            flippedCards.push(card);

if (flippedCards[0].textContent === flippedCards[1].textContent) {
                flippedCards.forEach((flippedCard) => {
                    flippedCard.classList.add("matched");
                });
                flippedCards = [];

if (document.querySelectorAll(".flipped.matched").length === pictograms.length) {
                    setTimeout(() => {
                        alert("Congratulations! You've matched all pictograms.");
                        resetGame();
                    }, 500);
                }
            } else {
                setTimeout(() => {
                    flippedCards.forEach((flippedCard) => {
                        flippedCard.classList.remove("flipped");
                    });
                    flippedCards = [];
                }, 500);
            }
        }
    }

// Reset the game
    function resetGame() {
        const gameContainer = document.getElementById("game-container");
        gameContainer.innerHTML = "";

const shuffledPictograms = shuffleArray(pictograms.concat(pictograms));

shuffledPictograms.forEach((pictogram) => {
            const card = document.createElement("div");
            card.classList.add("card");
            card.textContent = pictogram;
            card.addEventListener("click", () => handleCardClick(card));
            gameContainer.appendChild(card);
        });
    }

// Initialize the game
    let flippedCards = [];
    resetGame();
    </script>
</body>
</html>
```

Please note that this is a basic implementation and can be expanded upon to include additional features such as levels, timers, or score tracking based on your specific requirements.