Simple HTML Hangman Game - Code & Tutorial - 常规

<html>
<head>
  <title>Hangman</title>
  <style>
    #hangman {
      margin: 0 auto;
    }
    #hangman img {
      height: 500px;
      width: 500px;
    }
    #message {
      font-size: 20px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <div id="hangman">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Hangman-0.png" alt="Hangman Picture" />
  </div>
  <div>
    <h2>Hangman</h2>
    <h3>Guess the Word:</h3>
    <p id="message"></p>
  </div>
  <form>
    <input type="text" id="guess-input" placeholder="Enter your guess" />
    <input type="button" id="guess-button" value="Guess" />
  </form>
  <script>
    const hangmanPictures = [
      'https://upload.wikimedia.org/wikipedia/commons/0/06/Hangman-0.png',
      'https://upload.wikimedia.org/wikipedia/commons/2/2b/Hangman-1.png',
      'https://upload.wikimedia.org/wikipedia/commons/3/32/Hangman-2.png',
      'https://upload.wikimedia.org/wikipedia/commons/5/5a/Hangman-3.png',
      'https://upload.wikimedia.org/wikipedia/commons/f/f2/Hangman-4.png',
      'https://upload.wikimedia.org/wikipedia/commons/7/70/Hangman-5.png',
      'https://upload.wikimedia.org/wikipedia/commons/8/80/Hangman-6.png',
    ];
    let word = 'apple';
    let guessedLetters = [];
    let remainingGuesses = 6;
    let displayWord = '';
<pre><code>function updateHangmanPicture() {
  const hangmanImg = document.querySelector('#hangman img');
  hangmanImg.src = hangmanPictures[6 - remainingGuesses];
}

function updateMessage() {
  let message = 'Guess the word: ';      
  for (let i = 0; i &lt; word.length; i++) {
    if (guessedLetters.includes(word[i])) {
      message += word[i];
    } else {
      message += '_';
    }
  }

  document.querySelector('#message').innerHTML = message;
}

function checkGuess(letter) {
  if (guessedLetters.includes(letter)) {
    alert('You already guessed that letter!');
  } else {
    guessedLetters.push(letter);

    if (word.includes(letter)) {
      alert('You got it right!');
    } else {
      alert('That letter is not in the word!');
      remainingGuesses--;
    }

    updateHangmanPicture();
    updateMessage();
  }
}

document.querySelector('#guess-button').addEventListener('click', () =&gt; {
  const guessInput = document.querySelector('#guess-input').value;
  checkGuess(guessInput);
});
</code></pre>
  </script>
</body>
</html>