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

No:6378

526

←

Prev Next

→

Super Market
Developer User3889｜Date and time 23/7/2 11:14:57
Build time 21.408 sec｜Game capacity 2.03KB｜

Script

Super Market Game

Score: 0

Find all the items!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Super Market Game</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      .pictogram {
        width: 100px;
        height: 100px;
        margin: 10px;
      }
      #score {
        font-size: 24px;
        margin-bottom: 20px;
      }
      #message {
        font-size: 18px;
        margin-bottom: 20px;
      }
      #game-board {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <h1>Super Market Game</h1>
    <div id="score">Score: 0</div>
    <div id="message">Find all the items!</div>
    <div id="game-board">
      <img src="path_to_pictogram1.png" class="pictogram" id="item1" onclick="checkItem('item1')">
      <img src="path_to_pictogram2.png" class="pictogram" id="item2" onclick="checkItem('item2')">
      <img src="path_to_pictogram3.png" class="pictogram" id="item3" onclick="checkItem('item3')">
      <img src="path_to_pictogram4.png" class="pictogram" id="item4" onclick="checkItem('item4')">
      <img src="path_to_pictogram5.png" class="pictogram" id="item5" onclick="checkItem('item5')">
    </div>
    <script>
      // Item IDs
      var items = ['item1', 'item2', 'item3', 'item4', 'item5'];
      
      // Randomly select an item
      var targetItem = items[Math.floor(Math.random() * items.length)];
      
      // Initialize score
      var score = 0;
      
      // Function to check if the selected item matches the target item
      function checkItem(item) {
        if (item === targetItem) {
          score = score + 1;
          document.getElementById('score').innerHTML = 'Score: ' + score;
          document.getElementById('message').innerHTML = 'Correct! Find the next item.';
          targetItem = items[Math.floor(Math.random() * items.length)];
        } else {
          document.getElementById('message').innerHTML = 'Wrong item! Try again.';
        }
      }
    </script>
  </body>
</html>