javascript - 使先前选定的单词在 html 上消失，并在 javascript 的 Hangman 游戏中替换为新单词

Question

我目前正在使用 javascript 制作一个刽子手游戏，我正在努力解决如何删除并用新单词替换之前选择的单词。目前，我已经设置了代码，以便当玩家正确猜测单词时，会弹出一条消息并询问用户是否想再次玩。如果他们按 Y，我会调用从数组中随机选择一个单词的函数，并使用 push 方法用与所选单词相同长度的空白行填充和清空数组。但是，当我在按下 Y 后调用此函数时，前一个单词不会消失，并且按键也不会注册。

    var hangmanObject = {
    randomWords: ['rock','paper','modular synthesizer', 'led zeppelin'],
    chosenWord: "",
    numWins: 0,
    numLives: 10,

    empty: [],
    incorrect: [],
    splitArray: []

    }
   function startFunction() 
   {
    document.getElementById("numLives").innerHTML = hangmanObject.numLives;
    displayChosenWord();
   }

   function displayChosenWord()
   {
   hangmanObject.chosenWord =  hangmanObject.randomWords[Math.floor(Math.random()*hangmanObject.randomWords.length)]
   hangmanObject.splitArray = hangmanObject.chosenWord.split("");
   for (x = 0; x < hangmanObject.chosenWord.length; x++)
   {
    if (hangmanObject.chosenWord.charAt(x) === " ")
        hangmanObject.empty.push(" ");
    else
        hangmanObject.empty.push(" _ ");
    }

        document.getElementById("blanks").innerHTML = hangmanObject.empty.join("");
    }



    document.onkeyup = function(event) 
    {      

   var userGuess = String.fromCharCode(event.keyCode).toLowerCase();


   for (x = 0; x < hangmanObject.chosenWord.length; x++)
        {
            if (hangmanObject.chosenWord.charAt(x) === userGuess)
            {
                hangmanObject.empty[x] = userGuess;
                document.getElementById("blanks").innerHTML = hangmanObject.empty.join("");
            }

        }
        if (hangmanObject.splitArray.indexOf(userGuess) === -1) //checking to see if wrong letter chosen
        {
                hangmanObject.numLives--;
                document.getElementById("numLives").innerHTML = hangmanObject.numLives;
                hangmanObject.incorrect.push(userGuess);
                document.getElementById("LettersGuessed").innerHTML = hangmanObject.incorrect;
        }
        console.log(hangmanObject.empty);
        if (hangmanObject.empty.indexOf(" _ ") === -1) 
        {
            hangmanObject.numWins++;

            // console.log("i won");
            document.getElementById("wins").innerHTML = hangmanObject.numWins;
            document.getElementById("Play").innerHTML = "Play Again? Y/N";
            document.onkeyup = function(event) 
            {      
               // Determines which exact key was selected. Make it lowercase
               var Choice = String.fromCharCode(event.keyCode).toLowerCase();
               if (Choice === 'y')
               {
                    hangmanObject.numLives = 10;
                    displayChosenWord();
               }
            }

        }
        if (hangmanObject.numLives <= 0)
        {
            document.getElementById("lose").innerHTML = "You Lose";
        }
        }

Answer 1

您正在回调中设置 document.onkeyup 回调，从而有效地禁用它进行字母猜测。

此外，empty 数组永远不会被清空，因此下一个单词会附加到前一个单词的空字母数组中。这是一种更简单的方法，通过使用 gameState 标志，您可以决定用户是输入字母来猜测，还是决定再次玩。另外，可以使用单个 div 来表示状态；)

var hangmanObject = {
  gameState: 'playing',
  randomWords: [
    'rock',
    'paper',
    'modular synthesizer',
    'led zeppelin'
  ],
  chosenWord: "",
  numWins: 0,
  numLives: 10,

  empty: [],
  incorrect: [],
  splitArray: []
}

function startFunction() {
  document.getElementById("numLives").innerHTML = hangmanObject.numLives;

  chooseNewWord();
}

function chooseNewWord() {
  hangmanObject.chosenWord = hangmanObject.randomWords[Math.floor(Math.random() * hangmanObject.randomWords.length)]
  hangmanObject.splitArray = hangmanObject.chosenWord.split("");

  // Reset guesses and misses
  hangmanObject.empty = [];
  hangmanObject.incorrect = [];

  for (x = 0; x < hangmanObject.chosenWord.length; x++) {
    if (hangmanObject.chosenWord.charAt(x) === " ")
      hangmanObject.empty.push(" ");
    else
      hangmanObject.empty.push("_");
  }

  document.getElementById("blanks").innerHTML = hangmanObject.empty.join(" ");
}


document.onkeyup = function(event) {
  var userGuess = String.fromCharCode(event.keyCode).toLowerCase();

  // Game status is "playing"
  if (hangmanObject.gameState === 'playing') {
    for (x = 0; x < hangmanObject.chosenWord.length; x++) {
      if (hangmanObject.chosenWord.charAt(x) === userGuess) {
        hangmanObject.empty[x] = userGuess;

        document.getElementById("blanks").innerHTML = hangmanObject.empty.join(" ");
      }
    }

    // checking to see if wrong letter chosen
    if (hangmanObject.splitArray.indexOf(userGuess) === -1) {
      hangmanObject.numLives--;

      document.getElementById("numLives").innerHTML = hangmanObject.numLives;

      hangmanObject.incorrect.push(userGuess);

      document.getElementById("LettersGuessed").innerHTML = hangmanObject.incorrect.join(",");
    }

    // Some debug
    console.log(hangmanObject.empty);

    // WIN situation
    if (hangmanObject.empty.indexOf("_") === -1) {
      hangmanObject.numWins++;

      // Set status message and game state
      document.getElementById("status").innerHTML = "You won " + hangmanObject.numWins + " times";
      hangmanObject.gameState = 'finished';
    }

    // LOSE situation
    if (hangmanObject.numLives <= 0) {
      // Set status message and game state
      document.getElementById("status").innerHTML = "You Lose";
      hangmanObject.gameState = 'finished';
    }

    // Set message if game finished
    if (hangmanObject.gameState === 'finished') {
      document.getElementById("Play").innerHTML = "Play Again? Y/N";
    }

    // Game status is "finished"
  } else {
    // If user selects play again
    if (userGuess === 'y') {
      // Set status back to "playing"
      hangmanObject.gameState = 'playing';

      // Reset lives and messages
      hangmanObject.numLives = 10;

      document.getElementById("status").innerHTML = "";
      document.getElementById("LettersGuessed").innerHTML = "";
      document.getElementById("Play").innerHTML = "";

      // Choose new word
      chooseNewWord();
    } else {
      // Set message
      document.getElementById("status").innerHTML = "Goodbye!";

      // Disable key handler
      document.onkeyup = null;
    }
  }
}

startFunction();

<div id="numLives"></div>

<div id="blanks"></div>

<div id="LettersGuessed"></div>

<div id="status"></div>

<div id="Play"></div>