Play Hangman Online - Free HTML Game - 常规

<!DOCTYPE html>
<html>
<head>
  <title>Hangman Game</title>
  <style>
    #game{
      margin: 0 auto;
      width: 400px;
      font-family: sans-serif;
      font-size: 16px;
      text-align: center;
    }
    #word{
      font-weight: bold;
    }
    #guesses{
      font-style: italic;
    }
    #guess-container{
      margin: 10px 0;
    }
    #guess-container input{
      width: 30px;
    }
    #message{
      font-weight: bold;
    }
</style>
</head>
<body>
  <div id="game">
    <h1>Hangman Game</h1>
    <p>Guess the word:</p>
    <div>
      <span id="word"></span>
    </div>
    <div>
      <span id="guesses"></span>
    </div>
    <div id="guess-container">
      <input type="text" id="guess" maxlength="1" />
      <button id="submit-guess">Guess</button>
    </div>
    <div>
      <span id="message"></span>
    </div>
  </div>
<script>
  let words = ['javascript', 'python', 'java', 'html', 'css'];
  let secretWord = words[Math.floor(Math.random() * words.length)];
  let guessWord = '';
  for (let i = 0; i < secretWord.length; i++) {
    guessWord += '*';
  }
  document.querySelector('#word').innerHTML = guessWord;
  let incorrectGuesses = [];
  document.querySelector('#submit-guess').addEventListener('click', function(){
    let guess = document.querySelector('#guess').value;
    if (secretWord.indexOf(guess) >= 0) {
      let guessWordArray = guessWord.split('');
      for (let i = 0; i < secretWord.length; i++) {
        if (secretWord[i] === guess) {
          guessWordArray[i] = guess;
        }
      }
      guessWord = guessWordArray.join('');
      document.querySelector('#word').innerHTML = guessWord;
      document.querySelector('#guess').value = '';
      if (guessWord === secretWord) {
        document.querySelector('#message').innerHTML = 'You win!';
      }
    } else {
      incorrectGuesses.push(guess);
      document.querySelector('#guesses').innerHTML = incorrectGuesses.join(', ');
      document.querySelector('#guess').value = '';
      if (incorrectGuesses.length === 5) {
        document.querySelector('#message').innerHTML = 'You lose!';
      }
    }
  });
</script>
</body>
</html>