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

No:28213

←

Prev Next

→

Supermarket master
Developer User13970｜Date and time 23/12/11 8:31:57
Build time 33.371 sec｜Game capacity 4.726KB｜

Script

Supermarket Master

Score: 0

Time: 60 seconds

To play the game, open the HTML file in a web browser. Click on the "Start Game" button to begin the game. Items represented by pictograms will appear on the screen. Click on the correct item in the given time. The game ends when all items are clicked correctly or when the timer reaches 0. The final score will be displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

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

h1 {
      color: #0059b3;
    }

.pictogram {
      font-size: 50px;
    }

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

#timer {
      font-size: 24px;
      margin-top: 10px;
    }

#start-btn {
      margin-top: 30px;
      padding: 10px 20px;
      background-color: #0059b3;
      color: #fff;
      font-size: 18px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }

#items-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 20px;
    }

.item {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      border-radius: 5px;
      margin: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      cursor: pointer;
    }

.correct {
      background-color: #b3ffcc;
    }

.incorrect {
      background-color: #ff6666;
    }

#game-over {
      font-size: 36px;
      color: #ff6666;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Supermarket Master</h1>
  <div id="score">Score: 0</div>
  <div id="timer">Time: 60 seconds</div>
  <button id="start-btn" onclick="startGame()">Start Game</button>
  <div id="items-container"></div>
  <div id="game-over" style="display: none">Game Over!</div>

let score = 0;
    let time = 60;
    let timerId;

function startGame() {
      const startBtn = document.getElementById("start-btn");
      startBtn.disabled = true; // Disable start button during the game
      startBtn.style.display = "none"; // Hide start button

const itemsContainer = document.getElementById("items-container");
      itemsContainer.innerHTML = ""; // Clear previous items

score = 0;
      time = 60;

timerId = setInterval(countdown, 1000);

// Generate new items
      for (let i = 0; i < 9; i++) {
        const randomIndex = Math.floor(Math.random() * items.length);
        const item = document.createElement("div");
        item.classList.add("item");
        item.innerHTML = items[randomIndex];
        item.addEventListener("click", handleClick);
        itemsContainer.appendChild(item);
      }
    }

function countdown() {
      const timer = document.getElementById("timer");
      time--;
      timer.textContent = `Time: ${time} seconds`;

if (time === 0) {
        clearInterval(timerId);
        endGame();
      }
    }

function handleClick(e) {
      const selected = e.target;
      const itemsContainer = document.getElementById("items-container");

if (selected.textContent === items[score % items.length]) {
        selected.classList.add("correct");
        score++;
        setTimeout(() => {
          selected.classList.remove("correct");
          selected.remove();
          addNewItem();
        }, 500);
      } else {
        selected.classList.add("incorrect");
        setTimeout(() => {
          selected.classList.remove("incorrect");
        }, 500);
      }

if (score === 9) {
        clearInterval(timerId);
        endGame();
      }
    }

function addNewItem() {
      const itemsContainer = document.getElementById("items-container");
      const randomIndex = Math.floor(Math.random() * items.length);
      const newItem = document.createElement("div");
      newItem.classList.add("item");
      newItem.innerHTML = items[randomIndex];
      newItem.addEventListener("click", handleClick);
      itemsContainer.appendChild(newItem);
    }

function endGame() {
      const itemsContainer = document.getElementById("items-container");
      itemsContainer.innerHTML = ""; // Clear items
      const gameOver = document.getElementById("game-over");
      gameOver.style.display = "block";
      gameOver.textContent = "Game Over! Your Score: " + score;
      const startBtn = document.getElementById("start-btn");
      startBtn.disabled = false; // Enable start button
      startBtn.style.display = "block"; // Show start button
    }
  </script>
</body>
</html>
```