Vanilla JavaScript Hangman 中的计分器和重置功能答案

【问题标题】：Score Counters and Reset Functions in Vanilla JavaScript HangmanVanilla JavaScript Hangman 中的计分器和重置功能
【发布时间】：2017-09-09 19:28:20
【问题描述】：

我已经回答了有关此游戏的一个问题，但我一直坚持跟踪我的“赢”和“输”，然后在赢或输后重置我的随机词。这是我目前所拥有的：

var guess; //user guess
var letters = []; //correctly guessed letters
var wrongLetters = []; //incorrectly guessed letters
var counter = 7; //counts correct letters
var losses = 0;
var wins = 0;

document.getElementById("counter").innerHTML = counter;
document.getElementById("losses").innerHTML = losses;
document.getElementById("wins").innerHTML = wins;

var wordList = ["cat", "dog", "wolf", "laser", "apple"]; //FILL LIST LATER!!

//randomly chooses a word from wordList
var word = wordList[Math.floor(Math.random() * wordList.length)];

//choosen word is replaced with
function start() {
  for (i = 0; i < word.length; i++) {
    letters[i] = "__";
  }

  document.getElementById("answer").innerHTML = letters.join(" ");
  console.log(word);
}


//checks if letter is in the word or not
function checkLetter() {
  document.onkeyup = function(event) {
    guess = event.key.toLowerCase();
    var found = false;
    for (i = 0; i < word.length; i++) {
      if (guess === word[i]) {
        letters[i] = guess;
        document.getElementById("answer").innerHTML = letters.join(" ");
        found = true;
      }
    }
    //wrong letters go into the wrongLetters array and are displayed
    if (found) return;
    if (wrongLetters.indexOf(guess) < 0) {
      wrongLetters.push(guess);
      document.getElementById("wrongGuesses").innerHTML = wrongLetters.join(" ");
      counter--;
      console.log(counter);
      //+1 to the losses if 7 words are missed
      if (counter === 0) {
        document.getElementById("losses").innerHTML = losses + 1;
        console.log(losses);
        confirm("play again?"); {
          counter = 7;
          letters = [];
          wrongLetters = [];
          start();
        }
      }
    }
  }
}

//need the counter to subtract 1 with every wrong guess
//when counter hits zero losses = losses + 1
//make a wins var that adds 1 when word is guessed
//reset if either are 


start();
checkLetter();

<!DOCTYPE html>
<html>

<head>
  <title>Hangman</title>
</head>

<body>
  <h1>Hangman!</h1>
  <span>Just start writing to play.</span>

  <p>
    <font size="+3"><span id="answer"></span></font>
  </p>
  <p id="counter"></p>
  <p id="wrongGuesses"></p>
  <p>Wins: <span id="wins"></span></p>
  <p>Losses: <span id="losses"></span></p>

</body>

</html>

计数器几乎可以工作了！它似乎从 7 开始倒计时，并在达到零时将损失加 1；但是，显示的计数已关闭（即使记录到控制台的计数似乎正确）。

另一个问题是，即使计数器重置并再次达到 0，这个“损失”计数也不会继续超过 1。

另外，当我在玩家第一个回答失败后尝试抓取一个新的随机单词时，游戏会选择与之前相同的单词。

我觉得这些问题中的大多数都必须处理我的变量范围，但我尝试的所有返工似乎都没有任何影响（如果它不会让事情变得更糟的话）。我知道我在这里问了很多，但如果有人能指出我正确的方向，我将不胜感激！

【问题讨论】：

在 Confirm("play again") 下添加 loss++ 似乎已经解决了损失不加起来的问题，但由于某种原因，我无法改变这个词......我试过了将随机生成器放在 start 函数中，但这只会让事情变得更糟。

标签： javascript function random counter

【解决方案1】：

让我们从修复随机词开始。

变量word 需要被多个函数访问，因此需要在当前函数之外的范围内定义它。但是您希望每次在 start() 函数中都将其设置为新的。您可以通过在函数外部声明它现在所在的变量来做到这一点，但在函数内部设置它。您还应该在此处重置计数器。

//randomly chooses a word from wordList
var word

//choosen word is replaced with
function start() {
    word = wordList[Math.floor(Math.random() * wordList.length)];
    counter = 7;
    document.getElementById("counter").innerHTML = counter;
    for (i = 0; i < word.length; i++) {
        letters[i] = "__";
    }

    document.getElementById("answer").innerHTML = letters.join(" ");
    console.log(word);
}

计数器不工作，因为当计数器发生变化时，您看起来并没有更新 html。每次猜测都需要这样的东西：

document.getElementById("counter").innerHTML = counter;

counter--;
console.log(counter);

损失并没有增加，因为您只是更改了 HTML，而不是 loss 变量（与上述相反）。两者都需要：

losses++
document.getElementById("losses").innerHTML = losses;

还有一个微妙的问题——当你第一次启动时，你会捕捉到所有的keyups，包括一个回车键。你只能用这样的方式捕捉字母：

document.onkeyup = function(event) {
    // don't catch numbers, punctuation, enter, etc.
    if (!(event.which <= 90 && event.which >= 65)) return

【讨论】：

现在我只是在搞清楚如何让游戏知道用户说出正确的单词时遇到了麻烦。计数器从 7 倒数很容易弄错这个词，击中 0 会触发失败。显然计数器必须> 0，但它还需要以某种方式检查是否已填写完整的单词。我想我只是不太确定如何表达
是的，这似乎是下一个挑战。也许围绕if(letters.join('') == word){ } 构建的东西会起作用。
好主意！我试过 if (guess == word) 但没用，但我会坚持下去！