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

No:42868

104

←

Prev Next

→

Just build CHAT-GPT
Developer User18984｜Date and time 24/2/13 3:40:18
Build time 9.475 sec｜Game capacity 2.557KB｜

Script

Pictogram Game

Guess the name of the animal represented by the pictogram:

←

Prev　Next

→ 　

Back　

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

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

<html>
   <head>
      <title>Pictogram Game</title>
   </head>
   <body>
      <script>
         // Array of pictograms
         const pictograms = [
            {
               img: '🐶',
               name: 'Dog',
            },
            {
               img: '🐱',
               name: 'Cat',
            },
            {
               img: '🐔',
               name: 'Chicken',
            },
            {
               img: '🐸',
               name: 'Frog',
            },
            {
               img: '🐢',
               name: 'Turtle',
            },
         ];

// Function to display random pictogram
         function displayPictogram() {
            // Get random pictogram from the array
            const randomIndex = Math.floor(Math.random() * pictograms.length);
            const randomPictogram = pictograms[randomIndex];
            
            // Display the pictogram on the page
            const pictogramElement = document.getElementById('pictogram');
            pictogramElement.innerHTML = randomPictogram.img;
            
            // Store the correct answer in a global variable
            window.correctAnswer = randomPictogram.name;
         }

// Function to check the user's answer
         function checkAnswer() {
            // Get the user's input
            const userAnswer = document.getElementById('answer').value.toLowerCase();
            
            // Get the message element
            const messageElement = document.getElementById('message');
            
            // Check if the user's answer is correct
            if (userAnswer === window.correctAnswer.toLowerCase()) {
               messageElement.innerHTML = 'Correct!';
            } else {
               messageElement.innerHTML = 'Incorrect! Try again.';
            }
            
            // Clear the user's input
            document.getElementById('answer').value = '';
            
            // Display a new pictogram
            displayPictogram();
         }
      </script>
      
      <h1>Pictogram Game</h1>
      
      <p>Guess the name of the animal represented by the pictogram:</p>
      
      <div id="pictogram" style="font-size: 80px;"></div>
      
      <input type="text" id="answer" placeholder="Enter your answer" autofocus>
      <button onclick="checkAnswer()">Submit</button>
      
      <p id="message"></p>
      
      <script>
         // Start the game by displaying a random pictogram
         displayPictogram();
      </script>
   </body>
</html>