Hangman Game: Play Online - Free HTML Game - 常规

<html>
  <head>
    <title>Hangman Game</title>
  </head>
  <style>
    h1 { 
      font-family: sans-serif; 
    }
    #words {
      font-family: sans-serif; 
      font-size: 2em;
    }
    #gallows {
      margin-left: auto;
      margin-right: auto;
      width: 300px;
      height: 300px;
    }
    #buttons {
      font-family: sans-serif;
      font-size: 1.2em;
    }
    #message {
      font-family: sans-serif;
      font-size: 1.2em;
    }
  </style>
  <body>
    <h1>Hangman</h1>
    <div id='words'></div>
    <div id='gallows'>
      <img src='hangman.jpg' alt='Gallows' />
    </div>
    <div>
      <button id='buttons'>A</button>
      <button id='buttons'>B</button>
      <button id='buttons'>C</button>
      <button id='buttons'>D</button>
      <button id='buttons'>E</button>
      <button id='buttons'>F</button>
      <button id='buttons'>G</button>
      <button id='buttons'>H</button>
      <button id='buttons'>I</button>
      <button id='buttons'>J</button>
      <button id='buttons'>K</button>
      <button id='buttons'>L</button>
      <button id='buttons'>M</button>
      <button id='buttons'>N</button>
      <button id='buttons'>O</button>
      <button id='buttons'>P</button>
      <button id='buttons'>Q</button>
      <button id='buttons'>R</button>
      <button id='buttons'>S</button>
      <button id='buttons'>T</button>
      <button id='buttons'>U</button>
      <button id='buttons'>V</button>
      <button id='buttons'>W</button>
      <button id='buttons'>X</button>
      <button id='buttons'>Y</button>
      <button id='buttons'>Z</button>
    </div>
    <div id='message'></div>
    <script>
      // Hangman game logic goes here
      // set a variable to store the answer
      let answer = 'elephant';
<pre><code>  // set a variable to store remaining lives
  let lives = 5;

  // set a variable to store the correct guessed letters
  let correctGuesses = [];

  // set a variable to store the wrong guessed letters
  let wrongGuesses = [];

  // set a variable to store the hangman image
  let hangmanImg = document.querySelector('img');

  // set a variable to store the message
  let message = document.querySelector('#message');

  // set a variable to store the word
  let word = document.querySelector('#words');

  // set a variable to store the buttons
  let buttons = document.querySelectorAll('button');

  // create a function to reset the game
  function resetGame() {
    lives = 5;
    correctGuesses = [];
    wrongGuesses = [];
    hangmanImg.src = 'hangman.jpg';
    message.textContent = '';
    buttons.forEach(button =&gt; {
      button.disabled = false;
    })
    updateWord();
  }

  // create a function to update the word
  function updateWord() {
    word.textContent = '';
    answer.split('').forEach(letter =&gt; {
      const letterEl = document.createElement('span');
      if (correctGuesses.includes(letter)) {
        letterEl.textContent = letter;
      } else {
        letterEl.textContent = '_';
      }
      word.appendChild(letterEl);
    })
  }

  // create a function to check if the game is over
  function checkGameOver() {
    if (answer.split('').every(letter =&gt; correctGuesses.includes(letter))) {
      message.textContent = 'You Win!';
      buttons.forEach(button =&gt; {
        button.disabled = true;
      })
    } else if (lives === 0) {
      message.textContent = 'You Lose!';
      buttons.forEach(button =&gt; {
        button.disabled = true;
      })
    }
  }

  // create a function to check the letter guessed
  function checkLetter(letter) {
    if (answer.includes(letter)) {
      if (!correctGuesses.includes(letter)) {
        correctGuesses.push(letter);
        updateWord();
        checkGameOver();
      }
    } else {
      if (!wrongGuesses.includes(letter)) {
        wrongGuesses.push(letter);
        lives--;
        hangmanImg.src = `hangman-${lives}.jpg`;
        checkGameOver();
      }
    }
  }

  // add an event listener to the buttons
  buttons.forEach(button =&gt; {
    button.addEventListener('click', () =&gt; {
      const letter = button.textContent;
      button.disabled = true;
      checkLetter(letter);
    })
  })

  // call the reset game function
  resetGame();
&lt;/script&gt;
</code></pre>
  </body>
</html>