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

No:32946

113

←

Prev Next

→

Gib keine Erklärungen, nur den Code.
Developer User14077｜Date and time 24/1/1 20:44:37
Build time 16.06 sec｜Game capacity 1.95KB｜

Script

Pictogram Game

←

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>
  <h1>Pictogram Game</h1>

// Pictograms
    const pictograms = [
      {
        image: "🍎",
        answer: "apple"
      },
      {
        image: "🐶",
        answer: "dog"
      },
      {
        image: "🚗",
        answer: "car"
      },
      {
        image: "🌞",
        answer: "sun"
      },
      {
        image: "⚽",
        answer: "soccer"
      }
    ];

// Game state
    let currentPictogram;
    let guessInput;
    let score;

function startGame() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

guessInput = document.createElement("input");
      guessInput.type = "text";
      guessInput.placeholder = "Enter your guess";
      document.body.appendChild(guessInput);

score = 0;
      generatePictogram();
      drawPictogram();
    }

function generatePictogram() {
      const randomIndex = Math.floor(Math.random() * pictograms.length);
      currentPictogram = pictograms[randomIndex];
    }

function drawPictogram() {
      context.clearRect(0, 0, canvas.width, canvas.height);

context.font = "100px Arial";
      context.textAlign = "center";
      context.fillText(currentPictogram.image, canvas.width / 2, canvas.height / 2 + 20);
    }

function checkGuess() {
      const guess = guessInput.value.toLowerCase();

if (guess === currentPictogram.answer) {
        score++;
        alert("Correct guess! Your score: " + score);
      } else {
        alert("Wrong guess! Your score: " + score);
      }

guessInput.value = "";
      generatePictogram();
      drawPictogram();
    }

canvas.addEventListener("click", checkGuess);

startGame();
  </script>
</body>

</html>