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

No:16717

←

Prev Next

→

Make a game
Developer User7437｜Date and time 23/9/20 8:25:46
Build time 35.178 sec｜Game capacity 3.638KB｜

Script

Sure! Here's a sample HTML file containing a simple game implemented with JavaScript. The game simulates a basic "Guess the Pictogram" game where the player needs to guess the word represented by the provided pictogram. You can paste this code into a single HTML file and open it in a browser to play the game:

Pictogram Game

To play the game: 1. Open the HTML file in a browser (preferably on a smartphone for an optimal experience). 2. The game will display a pictogram at the top (e.g., 🍎). 3. Enter your guess of the word represented by the pictogram in the text input field. 4. Click on the 'Guess' button. 5. The game will display either "Correct guess! 🎉" or "Wrong guess! Try again. 🙁" below the input field. 6. After a brief delay, the game will either proceed to the next pictogram or display a "Game Over!" alert if all pictograms have been used. Feel free to add more pictograms to the `pictograms` array to expand the game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Pictogram Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    h1 {
      margin-top: 50px;
    }
    .game-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 50px;
    }
    .pictogram {
      font-size: 48px;
      margin-bottom: 20px;
    }
    .input-section {
      margin-top: 20px;
    }
    input[type="text"] {
      width: 200px;
      height: 30px;
      font-size: 16px;
    }
    button {
      margin-top: 15px;
      padding: 10px 20px;
      border: none;
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Pictogram Game</h1>
  <div class="game-container">
    <div class="pictogram" id="pictogram"></div>
    <div class="input-section">
      <input type="text" id="guessInput" placeholder="Enter your guess">
      <button onclick="checkGuess()">Guess</button>
    </div>
    <div id="result" style="display: none;"></div>
  </div>

let currentPictogramIndex = 0;

function startGame() {
      displayPictogram();
    }

function displayPictogram() {
      const pictogramElement = document.getElementById('pictogram');
      pictogramElement.innerText = pictograms[currentPictogramIndex].pictogram;
    }

function checkGuess() {
      const guessInput = document.getElementById('guessInput');
      const guess = guessInput.value.toLowerCase();
      const word = pictograms[currentPictogramIndex].word.toLowerCase();

const resultElement = document.getElementById('result');
      if (guess === word) {
        resultElement.style.color = 'green';
        resultElement.innerText = 'Correct guess! 🎉';
      } else {
        resultElement.style.color = 'red';
        resultElement.innerText = 'Wrong guess! Try again. 🙁';
      }

resultElement.style.display = 'block';
      guessInput.value = '';

setTimeout(function() {
        resultElement.style.display = 'none';
        if (currentPictogramIndex < pictograms.length - 1) {
          currentPictogramIndex++;
          displayPictogram();
        } else {
          alert('Game Over!');
        }
      }, 2000);
    }

startGame();
  </script>
</body>
</html>
```

To play the game:
1. Open the HTML file in a browser (preferably on a smartphone for an optimal experience).
2. The game will display a pictogram at the top (e.g., 🍎).
3. Enter your guess of the word represented by the pictogram in the text input field.
4. Click on the 'Guess' button.
5. The game will display either "Correct guess! 🎉" or "Wrong guess! Try again. 🙁" below the input field.
6. After a brief delay, the game will either proceed to the next pictogram or display a "Game Over!" alert if all pictograms have been used.

Feel free to add more pictograms to the `pictograms` array to expand the game.