Play Hangman Game Online - Guess the Word - 常规

<!DOCTYPE html>
<html>
<head>
  <title>Hangman Game</title>
</head>
<body>
  <div>
    <h1>Hangman Game</h1>
    <h2>Guess the word:</h2>
    <p>_ _ _ _ _ _ _ _</p>
    <h3>Please guess a letter:</h3>
    <input type="text" name="letter" />
    <input type="button" value="Guess" onclick="guess();" />
  </div>
  <script>
    // create a word list
    var wordList = ['computer', 'javascript', 'hangman'];
    // choose a random word from the list
    var word = wordList[Math.floor(Math.random() * wordList.length)];
    // set the number of guesses
    var guessesLeft = 5;
    // set the letters already guessed
    var lettersGuessed = [];
    // set the number of correct guesses
    var correctGuesses = 0;
<pre><code>// guess function
function guess() {
  // get the letter user guessed
  var letter = document.getElementsByName('letter')[0].value;
  // if letter is empty, alert user
  if (letter == '') {
    alert('Please enter a letter.');
  }
  // if the letter is already guessed, alert user
  else if (lettersGuessed.includes(letter)) {
    alert('You have already guessed this letter.');
  }
  // if letter is not empty and not guessed yet
  else {
    // add letter to lettersGuessed array
    lettersGuessed.push(letter);
    // check if letter is in the word
    if (word.includes(letter)) {
      // if yes, replace the underscore with the letter
      for (var i = 0; i &lt; word.length; i++) {
        if (word[i] == letter) {
          document.querySelectorAll('p')[0].innerHTML =
            document.querySelectorAll('p')[0].innerHTML.substr(0, i) +
            letter +
            document.querySelectorAll('p')[0].innerHTML.substr(i + 1);
          correctGuesses++;
        }
      }
    }
    // if letter is not in the word, decrease guessesLeft by 1
    else {
      guessesLeft--;
    }
  }
  // if all underscores are gone, user won
  if (correctGuesses == word.length) {
    alert('You won!');
  }
  // if guessesLeft is 0, user lost
  else if (guessesLeft == 0) {
    alert('You lost! The word was ' + word);
  }
  // reset the input field
  document.getElementsByName('letter')[0].value = '';
}
</code></pre>
  </script>
</body>
</html>