Play the Word Guessing Game Online - HTML Game - 常规

<!DOCTYPE html>
<html>
  <head>
    <title>Word Guessing Game</title>
    <style>
      body {
        background-color: #F0E68C;
        text-align: center;
      }
      h1 {
        margin-top: 30px;
        font-family: sans-serif;
      }
      #game {
        margin-top: 20px;
        width: 400px;
        height: 200px;
        border: 1px solid black;
        border-radius: 5px;
        position: relative;
      }
      #word {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3em;
        font-family: sans-serif;
      }
      #message {
        font-size: 1.2em;
        font-family: sans-serif;
        color: #4F4F4F;
        margin-top: 10px;
      }
      #input {
        font-size: 1.2em;
        font-family: sans-serif;
        padding: 10px;
        width: 300px;
        border: 1px solid #d3d3d3;
      }
      #guess {
        padding: 10px;
        width: 100px;
        background-color: #F0E68C;
        color: #4F4F4F;
        border: 1px solid #d3d3d3;
        font-size: 1.2em;
        font-family: sans-serif;
      }
      #guess:hover {
        background-color: #FFEC8B;
      }
    </style>
  </head>
  <body>
    <h1>Word Guessing Game</h1>
    <div id='game'>
      <div id='word'></div>
    </div>
    <div id='message'></div>
    <input type='text' id='input'>
    <button id='guess'>Guess</button>
    <script>
      // Create an array of words
      const words = ['javascript', 'programming', 'computer', 'network', 'software'];
      // Choose word randomly
      let randNum = Math.floor(Math.random() * words.length);
      let chosenWord = words[randNum];
      let rightWord = [];
      let wrongWord = [];
      let underScore = [];
      // DOM manipulation
      let docUnderScore = document.getElementById('word');
      let docRightGuess = document.getElementById('message');
      let docWrongGuess = document.getElementById('message');
      // Create underscores based on length of word
      let generateUnderscore = () => {
        for(let i = 0; i < chosenWord.length; i++) {
          underScore.push('_');
        }
        return underScore;
      }
      // Get users guess
      document.addEventListener('keypress', (event) => {
        let keyword = String.fromCharCode(event.keyCode);
        // If users guess is right
        if(chosenWord.indexOf(keyword) > -1) {
          // Add to right words array
          rightWord.push(keyword);
          // Replace underscore with right letter
          underScore[chosenWord.indexOf(keyword)] = keyword;
          docUnderScore.innerHTML = underScore.join(' ');
          docRightGuess.innerHTML = 'You guessed right!';
          // Checks to see if user word matches guesses
          if(underScore.join('') == chosenWord) {
            docRightGuess.innerHTML = `You win! The word was ${chosenWord}`;
          }
        }
        else {
          wrongWord.push(keyword);
          docWrongGuess.innerHTML = 'You guessed wrong!';
        }
      })
      docUnderScore.innerHTML = generateUnderscore().join(' ');
    </script>
  </body>
</html>