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

No:18002

←

Prev Next

→

Flashing and shaking text
Developer User6472｜Date and time 23/9/25 22:10:18
Build time 39.25 sec｜Game capacity 3.595KB｜

Script

Sure! Here's an example of a simple game implemented using JavaScript within a single HTML file. It involves selecting the correct pictogram based on the displayed word.

Pictogram Game

😄

😂

😇

😈

Copy the entire code into an HTML file (e.g., `game.html`), open the file in a web browser, and you'll be able to play the game. Each word will be displayed, and you need to click on the corresponding pictogram to score points. The correct pictogram will have a green border, while the incorrect ones will have a red border and shake as a hint. The game ends after all the words have been displayed, and your score will be shown. Enjoy playing!

←

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 using JavaScript within a single HTML file. It involves selecting the correct pictogram based on the displayed word.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Pictogram Game</title>
  <style>
    body {
      text-align: center;
    }
    
    #wordDisplay {
      font-size: 24px;
      margin: 20px;
    }
    
    #pictograms {
      display: flex;
      justify-content: center;
    }
    
    .pictogram {
      margin: 10px;
      width: 100px;
      height: 100px;
      border: 2px solid grey;
    }
    
    .correct {
      border-color: green;
    }
    
    .wrong {
      border-color: red;
    }
    
    .hint {
      animation: shake 0.5s infinite alternate;
    }
    
    @keyframes shake {
      from { transform: translate(0, 0); }
      to { transform: translate(5px, 0); }
    }
  </style>
</head>
<body>
  <h1>Pictogram Game</h1>
  <div id="wordDisplay"></div>
  <div id="pictograms">
    <div class="pictogram" onclick="checkAnswer(this)">😄</div>
    <div class="pictogram" onclick="checkAnswer(this)">😂</div>
    <div class="pictogram" onclick="checkAnswer(this)">😇</div>
    <div class="pictogram" onclick="checkAnswer(this)">😈</div>
  </div>
  
  <script>
    // List of words and their corresponding correct pictogram index
    const words = [
      { word: 'Happy', correctIndex: 0 },
      { word: 'Sad', correctIndex: 1 },
      { word: 'Angry', correctIndex: 2 },
      { word: 'Surprised', correctIndex: 3 }
    ];
    
    let currentWordIndex = 0;
    let score = 0;
    
    function startGame() {
      showWord();
    }
    
    function showWord() {
      const wordDisplay = document.getElementById('wordDisplay');
      const currentWord = words[currentWordIndex];
      wordDisplay.textContent = currentWord.word;
      resetPictograms();
    }
    
    function resetPictograms() {
      const pictograms = Array.from(document.getElementsByClassName('pictogram'));
      pictograms.forEach(pictogram => {
        pictogram.classList.remove('correct', 'wrong', 'hint');
      });
    }
    
    function checkAnswer(selectedPictogram) {
      const currentWord = words[currentWordIndex];
      const correctPictogram = document.getElementsByClassName('pictogram')[currentWord.correctIndex];
      
      if (selectedPictogram === correctPictogram) {
        selectedPictogram.classList.add('correct');
        score++;
      } else {
        selectedPictogram.classList.add('wrong');
        correctPictogram.classList.add('hint');
      }
      
      setTimeout(nextWord, 1000);
    }
    
    function nextWord() {
      currentWordIndex++;
      
      if (currentWordIndex < words.length) {
        showWord();
      } else {
        endGame();
      }
    }
    
    function endGame() {
      const wordDisplay = document.getElementById('wordDisplay');
      wordDisplay.textContent = `Game Over! Your score: ${score}`;
      const pictograms = document.getElementById('pictograms');
      pictograms.style.display = 'none';
    }
    
    startGame();
  </script>
</body>
</html>
```