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

No:19707

←

Prev Next

→

The alphabet
Developer User7893｜Date and time 23/10/6 3:14:38
Build time 21.238 sec｜Game capacity 3.602KB｜

Script

Sure, here's an example of a simple game implemented as a single HTML file using JavaScript. This game is based on the classic "Guess the Word" concept. It includes pictograms and is designed for smartphone operation:

Guess the Word Game

In the code, there is an array of words from which a random word is selected. The game initializes the displayed word as underscore characters and prompts the player to guess by clicking on the alphabet buttons. The game also displays a pictogram that changes as the player makes incorrect guesses. When the game ends, a message is displayed to notify the player if they won or lost. You can replace the `emozi_all/mark.png` and `emozi_all/pictogram.png` placeholders with your own pictogram images to match the game theme.

←

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 Word Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    img {
      width: 50%;
      max-width: 200px;
    }
  </style>
</head>
<body>
  <h1>Guess the Word Game</h1>
  
  <img id="pictogram" src="pictograms/question-mark.png" alt="Question Mark">
  
  <h2 id="word"></h2>
  
  <div id="alphabet"></div>
  
  <script>
    // Define an array of words for the game
    const words = ['apple', 'banana', 'cat', 'dog', 'elephant'];

// Select a random word from the array
    const randomIndex = Math.floor(Math.random() * words.length);
    const selectedWord = words[randomIndex];

// Initialize the game state
    let remainingLetters = selectedWord.length;
    let displayedWord = '';
    
    for (let i = 0; i < selectedWord.length; i++) {
      displayedWord += '_';
    }

// Display the initial word state
    document.getElementById('word').textContent = displayedWord;

// Generate alphabet buttons
    const alphabetButtons = [];
    for (let i = 0; i < 26; i++) {
      const letter = String.fromCharCode(65 + i);
      const button = document.createElement('button');
      button.textContent = letter;
      button.addEventListener('click', handleButtonClick);
      document.getElementById('alphabet').appendChild(button);
      alphabetButtons.push(button);
    }

function handleButtonClick(event) {
      const selectedLetter = event.target.textContent.toLowerCase();
      event.target.disabled = true;

let letterFound = false;
      let newDisplayedWord = '';

for (let i = 0; i < selectedWord.length; i++) {
        if (selectedWord[i] === selectedLetter && displayedWord[i] === '_') {
          letterFound = true;
          newDisplayedWord += selectedLetter;
          remainingLetters--;
        } else {
          newDisplayedWord += displayedWord[i];
        }
      }

displayedWord = newDisplayedWord;
      document.getElementById('word').textContent = displayedWord;

if (!letterFound) {
        // Incorrect guess, update pictogram
        const incorrectGuesses = selectedWord.length - remainingLetters;
        document.getElementById('pictogram').src = `pictograms/pictogram-${incorrectGuesses}.png`;

if (incorrectGuesses >= 7) {
          endGame(false); // Game over, player lost
        }
      } else if (remainingLetters === 0) {
        endGame(true); // Game over, player won
      }
    }

function endGame(playerWon) {
      // Disable all alphabet buttons
      alphabetButtons.forEach(button => button.disabled = true);

if (playerWon) {
        alert('Congratulations! You won the game!');
      } else {
        alert(`Game over! The word was "${selectedWord}". Try again!`);
      }
    }
  </script>
</body>
</html>
```

You can replace the `pictograms/question-mark.png` and `pictograms/pictogram-X.png` placeholders with your own pictogram images to match the game theme.