Board writer with UI restart button's game

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

No:39342

113

←

Prev Next

→

Board writer with UI restart button
Developer User17562｜Date and time 24/1/28 3:02:47
Build time 8.888 sec｜Game capacity 1.829KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript, including a restart button:

Click on the pictograms to score points!

Score: 0

This game has a game area with a message, score display, and pictogram images. When you click on a pictogram, the score increases accordingly. There is a restart button at the bottom to reset the score. The game starts automatically and lasts for 60 seconds. After the time is up, the message is updated with the final score, and the pictogram images are hidden. The restart button becomes visible, allowing the player to start a new game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript, including a restart button:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Simple Game</title>
</head>
<body>
  <div id="gameArea">
    <div id="message">Click on the pictograms to score points!</div>
    <div id="score">Score: 0</div>
    <div id="pictogramContainer">
      <img src="pictogram1.png" id="pictogram1" onClick="scorePoint(1)">
      <img src="pictogram2.png" id="pictogram2" onClick="scorePoint(2)">
      <img src="pictogram3.png" id="pictogram3" onClick="scorePoint(3)">
    </div>
  </div>
  <button id="restartButton" onClick="restartGame()">Restart</button>

function scorePoint(pictogram) {
      score += pictogram;
      document.getElementById("score").innerText = "Score: " + score;
    }

function restartGame() {
      score = 0;
      document.getElementById("score").innerText = "Score: " + score;
    }

document.getElementById("restartButton").style.display = "none";
    setTimeout(function() {
      document.getElementById("message").innerText = "Time's up! Final score: " + score;
      document.getElementById("pictogramContainer").style.display = "none";
      document.getElementById("restartButton").style.display = "block";
    }, 60000); // 60 seconds
  </script>
</body>
</html>
```

The game starts automatically and lasts for 60 seconds. After the time is up, the message is updated with the final score, and the pictogram images are hidden. The restart button becomes visible, allowing the player to start a new game.