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

No:37669

←

Prev Next

→

Go time travel
Developer User17087｜Date and time 24/1/21 8:46:57
Build time 8.996 sec｜Game capacity 2.763KB｜

Script

HTML and JavaScript code for a simple game with pictograms, designed for smartphone operation:

Pictogram Game

Score: 0

Game Over!

This HTML file implements a simple pictogram game for smartphones. It contains JavaScript enclosed within script tags. The game displays pictograms one by one, and the player needs to determine whether the pictogram matches a given condition (true or false) by tapping the corresponding button. The player's score is displayed, and the game ends when all pictograms have been shown.

←

Prev　Next

→ 　

Back　

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

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

HTML and JavaScript code for a simple game with pictograms, designed for smartphone operation:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
        background-color: #F0F0F0;
        font-family: Arial, sans-serif;
      }
      #game-area {
        margin: 20px auto;
        text-align: center;
      }
      #score {
        font-size: 24px;
        margin-bottom: 10px;
      }
      #game-over {
        font-size: 40px;
        color: red;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="game-area">
      <h1>Pictogram Game</h1>
      <p id="score">Score: 0</p>
      <img src="pictogram1.png" id="pictogram" width="200px" height="200px">
      <p>
        <button onclick="checkAnswer(true)">✅</button>
        <button onclick="checkAnswer(false)">❌</button>
      </p>
      <p id="game-over">Game Over!</p>
      <button onclick="startGame()">Start Game</button>
    </div>

let currentPictogramIndex = 0;
      let score = 0;

function startGame() {
        currentPictogramIndex = 0;
        score = 0;
        displayNextPictogram();
        document.getElementById("score").textContent = "Score: " + score;
        document.getElementById("game-over").style.display = "none";
      }

function checkAnswer(answer) {
        const pictogram = pictograms[currentPictogramIndex - 1];

if (pictogram.answer === answer) {
          score++;
        }

document.getElementById("score").textContent = "Score: " + score;
        displayNextPictogram();
      }

function endGame() {
        document.getElementById("game-over").style.display = "block";
      }
    </script>
  </body>
</html>
```