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

No:19703

47

Xxx
Developer User8787｜Date and time 23/10/6 1:57:29
Build time 22.907 sec｜Game capacity 3.929KB｜

Pictogram Game

Score: 0

→ 　

0　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>My Pictogram Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        #game-board {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        .pictogram {
            width: 100px;
            height: 100px;
            margin: 10px;
            cursor: pointer;
        }
        #score {
            font-size: 20px;
            margin-top: 20px;
        }
        #restart-button {
            padding: 10px 20px;
            margin-top: 20px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Pictogram Game</h1>
    <div id="game-board"></div>
    <div id="score">Score: <span id="score-value">0</span></div>
    <button id="restart-button">Restart</button>

<script>
        // Pictograms
        const pictograms = [
            { symbol: "🐶", name: "Dog" },
            { symbol: "🐱", name: "Cat" },
            { symbol: "🐭", name: "Mouse" },
            { symbol: "🐹", name: "Hamster" },
            { symbol: "🐰", name: "Rabbit" },
            { symbol: "🐻", name: "Bear" },
            { symbol: "🦊", name: "Fox" },
            { symbol: "🐸", name: "Frog" },
            { symbol: "🐵", name: "Monkey" },
            { symbol: "🐼", name: "Panda" },
            { symbol: "🐨", name: "Koala" },
            { symbol: "🐯", name: "Tiger" }
        ];

// Game variables
        let score = 0;
        let selectedPictogram = null;

// Function to initialize the game
        function initializeGame() {
            const gameBoard = document.getElementById("game-board");
            const pictogramElements = document.createElement("div");
            pictogramElements.classList.add("pictogram-element");
            pictograms.forEach(pictogram => {
                const pictogramButton = document.createElement("button");
                pictogramButton.classList.add("pictogram");
                pictogramButton.innerText = pictogram.symbol;
                pictogramButton.addEventListener("click", () => selectPictogram(pictogram));
                pictogramElements.appendChild(pictogramButton);
            });
            gameBoard.appendChild(pictogramElements);
            document.getElementById("restart-button").addEventListener("click", restartGame);
        }

// Function to select a pictogram
        function selectPictogram(pictogram) {
            selectedPictogram = pictogram;
            const pictogramButtons = document.querySelectorAll(".pictogram");
            pictogramButtons.forEach(button => button.disabled = true);
        }

// Function to check if the selected pictogram matches the target pictogram
        function checkAnswer(targetPictogram) {
            if (selectedPictogram && selectedPictogram.name === targetPictogram.name) {
                score++;
                document.getElementById("score-value").innerText = score;
                alert("Correct!");
            } else {
                alert("Wrong answer!");
            }
            resetSelection();
        }

// Function to reset the game selection
        function resetSelection() {
            selectedPictogram = null;
            const pictogramButtons = document.querySelectorAll(".pictogram");
            pictogramButtons.forEach(button => button.disabled = false);
        }

// Function to restart the game
        function restartGame() {
            score = 0;
            document.getElementById("score-value").innerText = score;
        }

// Start the game
        initializeGame();
    </script>
</body>
</html>