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

No:34476

135

←

Prev Next

→

CHALLENGE!: I Will Show You 4 Versions Of The Cart..ALL
Developer User13970｜Date and time 24/1/10 19:10:47
Build time 18.266 sec｜Game capacity 3.911KB｜

Script

Sure! Here's a simple game that presents four versions of cartoon characters and asks the user to identify the real one. The game will keep track of the user's score and display a message after each selection.

Which is the real cartoon character?

Click on the real cartoon character to start the game!

Note: Please replace `"emozi_rabbit.png"`, `"emozi_hamuster.png"`, `"emozi_dog.png"`, and `"emozi_himawari.png"` with the relative paths to your actual cartoon character images. This game randomly selects a correct answer (1-4) and keeps track of the user's score using `localStorage`. The user can click on one of the character images to make a selection, and the game will display a message indicating whether the selection was correct or not. The score is updated accordingly, and after a brief delay, the game resets for the next round.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

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

img {
      width: 200px;
      height: 200px;
      margin: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Which is the real cartoon character?</h1>
  <div id="characters">
    <img src="character1.png" alt="Character 1" id="character1">
    <img src="character2.png" alt="Character 2" id="character2">
    <img src="character3.png" alt="Character 3" id="character3">
    <img src="character4.png" alt="Character 4" id="character4">
  </div>
  <h2 id="message">Click on the real cartoon character to start the game!</h2>

// Get the user's score from localStorage or set it to 0
    let score = localStorage.getItem("score") || 0;

// Update the score display
    const updateScoreDisplay = () => {
      document.getElementById("scoreDisplay").textContent = `Score: ${score}`;
    };

// Handle user selection
    const handleSelection = (selectedCharacter) => {
      if (selectedCharacter === correctIndex) {
        score++;
        localStorage.setItem("score", score);
        document.getElementById("message").textContent = "Correct! Well done!";
      } else {
        document.getElementById("message").textContent = "Oops! Try again.";
      }

// Disable further selection after a choice is made
      const characterElements = document.querySelectorAll("#characters img");
      characterElements.forEach((element) => {
        element.removeEventListener("click", handleClick);
        element.style.cursor = "not-allowed";
      });

// Show the correct answer
      document.getElementById(`character${correctIndex}`).style.border = "2px solid green";

// Show the score after a brief delay
      setTimeout(() => {
        updateScoreDisplay();
        document.getElementById(`character${correctIndex}`).style.border = "";
        resetGame();
      }, 1500);
    };

// Re-enable selection and reset the game
    const resetGame = () => {
      const characterElements = document.querySelectorAll("#characters img");
      characterElements.forEach((element) => {
        element.addEventListener("click", handleClick);
        element.style.cursor = "pointer";
      });

document.getElementById("message").textContent = "Click on the real cartoon character to continue playing!";
      correctIndex = Math.floor(Math.random() * 4) + 1;
    };

// Click event handler for character selection
    const handleClick = (event) => {
      const selectedCharacter = parseInt(event.target.id.slice(-1));
      handleSelection(selectedCharacter);
    };

// Add click event listeners to character elements
    const characterElements = document.querySelectorAll("#characters img");
    characterElements.forEach((element) => {
      element.addEventListener("click", handleClick);
    });

// Start the game by updating the score display
    updateScoreDisplay();
  </script>
</body>
</html>
```

Note: Please replace `"character1.png"`, `"character2.png"`, `"character3.png"`, and `"character4.png"` with the relative paths to your actual cartoon character images.

This game randomly selects a correct answer (1-4) and keeps track of the user's score using `localStorage`. The user can click on one of the character images to make a selection, and the game will display a message indicating whether the selection was correct or not. The score is updated accordingly, and after a brief delay, the game resets for the next round.