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

No:24281

←

Prev Next

→

Roblox
Developer User11394｜Date and time 23/11/7 3:24:58
Build time 70.517 sec｜Game capacity 3.58KB｜

Script

Pictogram Game

This HTML code represents a simple pictogram game implemented in a single HTML file. The game uses JavaScript enclosed in script tags to handle the logic. The game starts automatically when the page loads and can be played on a smartphone. The game consists of a container div which holds the question and options. Every question is displayed as a pictogram image, and the user needs to select the correct answer from the provided options. The correct answer selection increments the score, and at the end of the game, the final score is displayed, allowing the player to play again. The game can be customized by adding more questions and pictograms to the `questions` array.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Pictogram Game</title>
  </head>
  <body>
    <div id="game-container">
      <h1>Pictogram Game</h1>
      <div id="question-container">
        <img id="question-image" src="" alt="Question Image" />
      </div>
      <div id="options-container"></div>
    </div>
    
    <script>
      // Define game questions and answers as pictograms
      const questions = [
        {
          image: "pictogram1.png",
          options: ["Answer 1", "Answer 2", "Answer 3"],
          correctAnswer: 0
        },
        {
          image: "pictogram2.png",
          options: ["Answer 1", "Answer 2", "Answer 3"],
          correctAnswer: 1
        },
        {
          image: "pictogram3.png",
          options: ["Answer 1", "Answer 2", "Answer 3"],
          correctAnswer: 2
        }
        // Add more questions here...
      ];
      
      let currentQuestion = 0;
      let score = 0;
      
      // Function to initialize the game
      function startGame() {
        score = 0;
        currentQuestion = 0;
        showQuestion();
      }
      
      // Function to display the current question
      function showQuestion() {
        const questionContainer = document.getElementById("question-container");
        const questionImage = document.getElementById("question-image");
        const optionsContainer = document.getElementById("options-container");
        
        questionImage.src = questions[currentQuestion].image;
        optionsContainer.innerHTML = '';
        
        for (let i = 0; i < questions[currentQuestion].options.length; i++) {
          const optionButton = document.createElement("button");
          optionButton.innerText = questions[currentQuestion].options[i];
          optionButton.addEventListener("click", checkAnswer);
          optionsContainer.appendChild(optionButton);
        }
      }
      
      // Function to check the selected answer
      function checkAnswer(event) {
        const selectedAnswer = event.target.innerText;
        const correctAnswerIndex = questions[currentQuestion].correctAnswer;
        const correctAnswer = questions[currentQuestion].options[correctAnswerIndex];
        
        if (selectedAnswer === correctAnswer) {
          score++;
        }
        
        currentQuestion++;
        
        if (currentQuestion < questions.length) {
          showQuestion();
        } else {
          endGame();
        }
      }
      
      // Function to display the final score
      function endGame() {
        const gameContainer = document.getElementById("game-container");
        gameContainer.innerHTML = `
          <h2>Game Over</h2>
          <p>Your Score: ${score} / ${questions.length}</p>
          <button onclick="startGame()">Play Again</button>
        `;
      }
      
      // Start the game
      startGame();
    </script>
  </body>
</html>
```

The game consists of a container div which holds the question and options. Every question is displayed as a pictogram image, and the user needs to select the correct answer from the provided options. The correct answer selection increments the score, and at the end of the game, the final score is displayed, allowing the player to play again.

The game can be customized by adding more questions and pictograms to the `questions` array.