在Vanilla JavaScript Hangman中计算计数器和重置函数

时间:2017-09-09 19:28:20

标签: javascript function random counter

我已经有一个关于这个游戏回答的问题,但我一直在坚持跟踪我的胜利"和"损失"然后在赢或输之后重置我的随机单词。以下是我到目前为止的情况:



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();
&#13;
<!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>
&#13;
&#13;
&#13;

计数器几乎正常工作!它似乎从7开始倒计时,当损失达到零时,它将损失加1;但是,显示的计数是关闭的(即使记录到控制台的计数似乎正确)。

另一个问题是这个&#34;损失&#34;即使计数器重置并再次击中0,计数也不会继续添加过去。

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

我觉得这些问题中的大多数都必须处理我的变量范围,但我尝试的任何改造似乎都没有任何影响(如果它不会使事情变得更糟)。我知道我在这里问了很多,但如果有人能指出我正确的方向,我将不胜感激!

1 个答案:

答案 0 :(得分:0)

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

变量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而不是损失变量(与上述相反的类型)。你需要两个:

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