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

No:20489

←

Prev Next

→

Pictograph game
Developer User9082｜Date and time 23/10/10 2:34:32
Build time 23.593 sec｜Game capacity 4.105KB｜

Script

To play, look at the photo, press the butt- on that looks like it

Pictograph Game

Score: 0

In this game, the user is presented with pictogram questions and needs to select the correct answer from the given options. When the user selects an option, the game checks if it is the correct answer and updates the score accordingly. The game continues until all the questions are answered, and then the final score is displayed. You can expand the `questions` array with more question objects, each containing an image, options, and the correct answer in the form of pictograms. Please note that this is a basic example and can be expanded and customized according to your requirements.

←

Prev　Next

→ 　

Back　

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

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

To play, look at the photo, press the butt-
on that looks like it

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pictograph Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }

#score {
      font-size: 24px;
      margin-bottom: 20px;
    }

#question {
      font-size: 48px;
      margin-bottom: 20px;
    }

#options {
      display: flex;
      justify-content: center;
    }

.option {
      border: 2px solid black;
      border-radius: 8px;
      margin: 10px;
      padding: 10px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

.option:hover {
      background-color: lightgray;
    }
  </style>
</head>

<body>
  <h1>Pictograph Game</h1>
  <div id="score">Score: 0</div>
  <div id="question"></div>
  <div id="options"></div>

var questions = [
      {
        id: 1,
        image: "🍎",
        options: ["🍎", "🍇", "🍌"],
        answer: "🍎"
      },
      {
        id: 2,
        image: "🍕",
        options: ["🥦", "🍕", "🌽"],
        answer: "🍕"
      },
      {
        id: 3,
        image: "🚗",
        options: ["🏍️", "🚗", "🚂"],
        answer: "🚗"
      }
      // Add more questions here...
    ];

function showNextQuestion() {
      if (questionIndex >= questions.length) {
        endGame();
        return;
      }

var currentQuestion = questions[questionIndex];
      var optionsContainer = document.getElementById("options");

// Clear previous options
      optionsContainer.innerHTML = "";

// Display question image
      var questionImage = document.createElement("div");
      questionImage.innerHTML = currentQuestion.image;
      questionImage.style.fontSize = "96px";
      document.getElementById("question").innerHTML = "";
      document.getElementById("question").appendChild(questionImage);

// Display options
      currentQuestion.options.forEach(function(option) {
        var optionDiv = document.createElement("div");
        optionDiv.innerHTML = option;
        optionDiv.className = "option";
        optionDiv.addEventListener("click", function() {
          checkAnswer(option, currentQuestion.answer);
        });
        optionsContainer.appendChild(optionDiv);
      });

questionIndex++;
    }

function checkAnswer(selectedOption, correctAnswer) {
      var scoreElement = document.getElementById("score");

if (selectedOption === correctAnswer) {
        score++;
        scoreElement.style.color = "green";
        scoreElement.innerHTML = "Score: " + score;
      } else {
        scoreElement.style.color = "red";
        scoreElement.innerHTML = "Score: " + score + " (Wrong answer)";
      }

setTimeout(function() {
        showNextQuestion();
      }, 1000);
    }

function endGame() {
      var questionContainer = document.getElementById("question");
      questionContainer.innerHTML = "Game Over";
      var optionsContainer = document.getElementById("options");
      optionsContainer.innerHTML = "";
      var scoreContainer = document.getElementById("score");
      scoreContainer.innerHTML = "Final Score: " + score;
    }

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

You can expand the `questions` array with more question objects, each containing an image, options, and the correct answer in the form of pictograms.

Please note that this is a basic example and can be expanded and customized according to your requirements.