AI game creator

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

No:24594

←

Prev Next

→

Anchor
Developer User11701｜Date and time 23/11/10 9:34:49
Build time 57.844 sec｜Game capacity 3.255KB｜

Script

As an AI language model, I'm here to help you with creating a JavaScript game using HTML and pictograms. Below is an example of a simple "Guess the Pictogram" game that you can implement as a single HTML file. The game will show a series of pictograms, and the player's goal is to correctly guess the word associated with each pictogram.

This example uses a few pictogram images and their corresponding solutions (words) in the `pictograms` array. You can update or expand this array with your own pictograms and solutions. The game accepts lowercase guesses and uses a case-insensitive match to determine correctness. Please note that for the images to display correctly, you need to have pictogram image files (e.g., `emozi_all/pictogram.png`, `emozi_chicken.png`, etc.) in the same directory as the HTML file.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Guess the Pictogram</title>
  <style>
    #game-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-size: 48px;
    }
    
    #pictogram-image {
      width: 200px;
      height: 200px;
    }
    
    #input-container {
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div id="game-container">
    <img id="pictogram-image" src="" alt="Pictogram">
    <div id="input-container">
      <input type="text" id="guess-input" placeholder="Enter your guess">
      <button type="button" id="submit-button">Submit</button>
    </div>
  </div>

let currentPictogramIndex = 0;
    let currentPictogram;

const pictogramImage = document.getElementById("pictogram-image");
    const guessInput = document.getElementById("guess-input");
    const submitButton = document.getElementById("submit-button");

function startGame() {
      currentPictogram = pictograms[currentPictogramIndex];
      pictogramImage.src = currentPictogram.image;

submitButton.addEventListener("click", handleGuess);
      guessInput.addEventListener("keydown", handleEnterKey);

guessInput.value = "";
      guessInput.focus();
    }

function handleGuess() {
      const guess = guessInput.value.toLowerCase().trim();
      const solution = currentPictogram.solution.toLowerCase();

if (guess === solution) {
        alert("Correct guess! Next pictogram...");
        currentPictogramIndex++;

if (currentPictogramIndex === pictograms.length) {
          alert("Congrats! You completed all the pictograms.");
          resetGame();
        } else {
          startGame();
        }
      } else {
        alert("Wrong guess. Try again.");
        guessInput.value = "";
        guessInput.focus();
      }
    }

function handleEnterKey(event) {
      if (event.keyCode === 13) {
        handleGuess();
      }
    }

function resetGame() {
      currentPictogramIndex = 0;
      startGame();
    }

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

Please note that for the images to display correctly, you need to have pictogram image files (e.g., `pictogram1.png`, `pictogram2.png`, etc.) in the same directory as the HTML file.