javascript - (Javascript)当被认为不正确时，尝试在刽子手游戏中只允许按键一次

Question

如果我可以添加任何其他信息以帮助更清楚地解决我的问题，请告诉我!

我试图让我的刽子手游戏在被认为不正确的情况下不允许再次按下相同类型的按键。一旦按键被认为不正确，它就会在屏幕上显示为不正确的猜测，我不希望它显示多次或算作另一个不正确的猜测，因为猜测是有限的。这是我网站的链接:https://thy-turk.github.io/Word-Guess-Game/

这是我一直试图操纵的代码。

//if else comparing letter guessed with the current word
if (letterPos.length) {
   for(i = 0; i < letterPos.length; i++) {
         currentWord[letterPos[i]] = lettersGuessed;
   }
   document.getElementById("active-word").innerHTML = currentWord.join(" ");
} else {
   // if (lettersGuessed.includes(letter)) {
   //     return;
   // }
   document.getElementById("letters-guessed").innerHTML += lettersGuessed + " ";
   guessesLeft--;
   document.getElementById("guesses-remain").innerHTML = guessesLeft;
}

我注释掉的内容是我不断返回但永远无法完成的尝试。我知道我设置它的方式不太理想。我一直尝试使用函数，但最终破坏了一切。

这里是完整的代码供引用。

var currentWord = [];
var answerWord = [];
var lettersReset = "";
var i;
var guessesLeft = 15;

// Array for the word bank of possible answers
var wordAnswers = ["vapor", "wave", "keyboard", "javascript", "coding", "practice", "technology", "hangman", "retro", "internet", "lamborgini", "ferrari", "cellphone", "computer", "headphones", "speakers", "vinyl", "record"];

// Math function to randomly pick a word from the wordbank
var answer = wordAnswers[Math.floor(Math.random() * wordAnswers.length)];

// Variable that counts the number of guesses left
document.getElementById("guesses-remain").innerHTML = guessesLeft;

// Variable that counts the number of wins
var wins = 0;
document.getElementById("num-of-wins").innerHTML = wins;

// Loop that creates empty spaces for the words
for (i = 0; i < answer.length; i++) {
  currentWord.push("_");
}
document.getElementById("active-word").innerHTML = currentWord.join(" ");

//Function that will evaluate the position of a letter in the word
function wordLetters(letter) {
  var letterPos = new Array();
  for (i = 0; i < answer.length; i++) {
    if (answer[i] === letter)
      letterPos.push(i);
  }
  return letterPos;
}

//Return letters that arent guessed still
function lettersToGuess() {
  var i;
  var toGuess = 0;
  for (i in currentWord) {
    if (currentWord[i] === "_")
      toGuess++;
  }
  return toGuess;
}

//Function to capture user input
document.onkeyup = function(event) {
  var letter = event.key.toLowerCase();
  var lettersGuessed = letter;
  var i;
  var letterPos = wordLetters(lettersGuessed);
  console.log(letter);


  //if else comparing letter guessed with the current word
  if (letterPos.length) {
    for (i = 0; i < letterPos.length; i++) {
      currentWord[letterPos[i]] = lettersGuessed;
    }
    document.getElementById("active-word").innerHTML = currentWord.join(" ");
  } else {
    // if (lettersGuessed.includes(letter)) {
    //     return;
    // }
    document.getElementById("letters-guessed").innerHTML += lettersGuessed + " ";
    guessesLeft--;
    document.getElementById("guesses-remain").innerHTML = guessesLeft;
  }

  // If user correctly guesses word the game is reset
  if (lettersToGuess() == 0) {
    guessesLeft = 15;
    document.getElementById("guesses-remain").innerHTML = guessesLeft;

    document.getElementById("letters-guessed").innerHTML = lettersReset;

    answer = wordAnswers[Math.floor(Math.random() * wordAnswers.length)];

    currentWord = [];
    for (i = 0; i < answer.length; i++) {
      currentWord.push("_");
    }
    document.getElementById("active-word").innerHTML = currentWord.join(" ");

    wins++;
    document.getElementById("num-of-wins").innerHTML = wins;
  }

  //Resets game if out of guesses
  if (guessesLeft === 0) {
    guessesLeft = 15;
    document.getElementById("guesses-remain").innerHTML = guessesLeft;
    document.getElementById("letters-guessed").innerHTML = lettersReset;

    answer = wordAnswers[Math.floor(Math.random() * wordAnswers.length)];

    currentWord = [];
    for (i = 0; i < answer.length; i++) {
      currentWord.push("_");
    }
    document.getElementById("active-word").innerHTML = currentWord.join(" ");
  }
}

<h1>Press any key to get started!</h1>
<br />

<div class="container">

  <p>Wins: </p>
  <p><span id="num-of-wins"></span></p><br />

  <p>Current Word: </p><br />
  <p><span id="active-word"></span></p>

  <p>Number of guesses remaining: </p><br />
  <p><span id="guesses-remain"></span></p><br />

  <p>Letters already Guessed: </p><br />
  <p><span id="letters-guessed"></span></p>

</div>

Answer 1

好的，所以我要把你的代码的编辑版本放在底部，并在此处进行解释。

首先，您需要在某个地方跟踪您已经按下的字母。我在脚本部分的顶部添加了一个数组以将所有内容放在一起。这也很重要，因为它在 keyup 事件的范围之外

其次，我实际上在其中添加了一些生活质量变化。您没有检查按下的按钮是否真的是一个字母，所以我通过将所有内容包装在 if 语句中然后检查字母代码来解决这个问题。

然后最后所有要做的就是使用 includes() 函数。那将检查是否已经看到按下的字母。如果有，我们什么也不做。如果没有，那么我们会将该字母推送到 pastLetters 数组中，这样如果我们再次看到它，我们就不会因此惩罚用户。由于 pastLetters 数组如果在它的父范围内，它是持久的，并且如果有另一个 keydown 事件也不会被覆盖。

同样重要的是要注意!我也将该数组添加到您的重置部分，这样当游戏重置时，pastLetters 数组也会重置。

var currentWord = [];
var answerWord = [];
// Making an array to put the letters that we've already seen into.
var pastLetters = [];
var lettersReset = "";
var i;
var guessesLeft = 15;

// Array for the word bank of possible answers
var wordAnswers = ["vapor", "wave", "keyboard", "javascript", "coding", "practice", "technology", "hangman", "retro", "internet", "lamborgini", "ferrari", "cellphone", "computer", "headphones", "speakers", "vinyl", "record"];

// Math function to randomly pick a word from the wordbank
var answer = wordAnswers[Math.floor(Math.random() * wordAnswers.length)];

// Variable that counts the number of guesses left

document.getElementById("guesses-remain").innerHTML = guessesLeft;

// Variable that counts the number of wins
var wins = 0;
document.getElementById("num-of-wins").innerHTML = wins;

// Loop that creates empty spaces for the words
for (i = 0; i < answer.length; i++) {
  currentWord.push("_");
}
document.getElementById("active-word").innerHTML = currentWord.join(" ");

//Function that will evaluate the position of a letter in the word
function wordLetters(letter) {
  var letterPos = new Array();
  for (i = 0; i < answer.length; i++) {
    if (answer[i] === letter)
      letterPos.push(i);
  }
  return letterPos;
}

//Return letters that arent guessed still
function lettersToGuess() {
  var i;
  var toGuess = 0;
  for (i in currentWord) {
    if (currentWord[i] === "_")
      toGuess++;
  }
  return toGuess;
}

//Function to capture user input
document.onkeyup = function(event) {
  // Checking to make sure that the key pressed is actually a letter.
  if ((event.keyCode >= 65 && event.keyCode <= 90) || event.keyCode >= 97 && event.keyCode <= 122) {
    var letter = event.key.toLowerCase();
    var lettersGuessed = letter;
    var i;
    var letterPos = wordLetters(lettersGuessed);

    //if else comparing letter guessed with the current word
    if (letterPos.length) {
      for (i = 0; i < letterPos.length; i++) {
        currentWord[letterPos[i]] = lettersGuessed;
      }
      document.getElementById("active-word").innerHTML = currentWord.join(" ");
    } else {
      // If the letter has already been seen don't do it again.
      if (!pastLetters.includes(letter)) {
        // Placing the letter into an array that we can reference outside the scope of the key up event.
        pastLetters.push(letter);
        document.getElementById("letters-guessed").innerHTML += lettersGuessed + " ";
        guessesLeft--;
        document.getElementById("guesses-remain").innerHTML = guessesLeft;
      }
    }

    // If user correctly guesses word the game is reset
    if (lettersToGuess() == 0) {
      guessesLeft = 15;
      document.getElementById("guesses-remain").innerHTML = guessesLeft;

      document.getElementById("letters-guessed").innerHTML = lettersReset;

      answer = wordAnswers[Math.floor(Math.random() * wordAnswers.length)];

      currentWord = [];
      pastLetters = [];
      for (i = 0; i < answer.length; i++) {
        currentWord.push("_");
      }
      document.getElementById("active-word").innerHTML = currentWord.join(" ");

      wins++;
      document.getElementById("num-of-wins").innerHTML = wins;

    }

    //Resets game if out of guesses
    if (guessesLeft === 0) {
      guessesLeft = 15;
      document.getElementById("guesses-remain").innerHTML = guessesLeft;

      document.getElementById("letters-guessed").innerHTML = lettersReset;

      answer = wordAnswers[Math.floor(Math.random() * wordAnswers.length)];

      currentWord = [];
      pastLetters = [];
      for (i = 0; i < answer.length; i++) {
        currentWord.push("_");
      }
      document.getElementById("active-word").innerHTML = currentWord.join(" ");
    }

  }

}

<h1>Press any key to get started!</h1>
<br />

<p>Wins: </p>
<p><span id="num-of-wins"></span></p><br />

<p>Current Word: </p><br />
<p><span id="active-word"></span></p>

<p>Number of guesses remaining: </p><br />
<p><span id="guesses-remain"></span></p><br />

<p>Letters already Guessed: </p><br />
<p><span id="letters-guessed"></span></p>