香草中的分数计数器和重置功能 JavaScript Hangman

Question

我已经回答了一个关于这个游戏的问题，但我一直坚持跟踪我的 "wins" 和 "losses"，然后在赢或赢后重置我的随机单词失利。这是我目前所拥有的：

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 开始倒数，并在它应该达到 0 时将损失加 1；然而，显示的计数是关闭的（即使记录到控制台的计数似乎是正确的）。

另一个问题是，即使计数器重置并再次达到 0，此 "losses" 计数也不会继续加到 1。

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

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

Answer 1

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

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

//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 而不是损失变量（与上述相反）。你需要两者：

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

香草中的分数计数器和重置功能 JavaScript Hangman

Score Counters and Reset Functions in Vanilla JavaScript Hangman

javascript

random

counter

function