Question

我试图创建这个精神游戏，其中程序基本上选择和随机字母，用户有9个猜测尝试猜测随机字母。

我觉得我编写的这么多代码并没有得到认可，而且我感到非常迷茫和迷茫。

这是我到目前为止所做的。

基本上我希望每当用户没有正确猜出字母时，猜测应该显示和下降，当用户尝试9次时，损失会增加。

当我运行它时，唯一发生的事情是字母存储在数组中。

＆＃13;

var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
var wins = 0;
var losses = 0;
var guesses = 9;
var computerGuess = letters[Math.floor(Math.random() * letters.length)];
var userGuessSoFar = [];

document.onkeyup = function(event) {
  var userGuess = event.key;
  document.getElementById("guess-so-far").textContent = userGuess;
  if (userGuess == computerGuess) {
    wins++;
  } else {
    guesses--;
    userGuessSoFar.push(userGuess);
    document.getElementById("guess-so-far").textContent = userGuessSoFar;
  }
  updateWins();
  updateGuesses();
  updateLosses();
}
if (userGuessSoFar.length > 8) {
  losses++;
  userGuessSoFar = [];
  guesses = 9;
  updateLosses();
}

function updateWins() {
  var winPoints = document.getElementById("wins").textContent;
  updateWins.textContent = wins;
}

function updateGuesses() {
  var guessesLeft = document.getElementById("guessLeft").textContent;
  updateGuesses.textContent = guesses;
}

function updateLosses() {
  var losePoints = document.getElementById("losses").textContent;
  updateLosses.textContent = losses;
}

＆＃13;

<h1>Psychic Game</h1>
<h2>Guess what letter I'm thinking of...</h2>
<p>Wins: </p><span id="wins"></span>
<p>Losses: <span id="losses"></span></p>
<p>Guesses Left: </p><span id="guessLeft"></span>
<p>Your guesses so far: </p><span id="guess-so-far"></span>

＆＃13;

Answer 1

我发现了几个直接的问题：

检查userGuessSoFar的部分应位于onkeyup处理程序中。
“update”函数分别定义一个元素的textContent变量。但是另一个变量（实际上是函数的名称）被设置为字符串值。

以下是一些优化：

只要您定义全局变量，就不需要在每次刷新值时定义“更新”显示元素。
我还实现了@EliRichardson的评论建议，这是一种定义字母数组的简短方法。
还实施了@LucaKiebel建议，在第一次运行时调用显示功能。
更新了“获胜”逻辑以重置猜测并选择一封新信。
将所有显示更新器合并为一个功能。

var letters = "abcdefghijklmnopqrstuvwxyz".split("");
var wins = 0;
var losses = 0;
var guesses = 9;
var computerGuess = letters[Math.floor(Math.random() * letters.length)];
var userGuessSoFar = [];
var winPoints = document.getElementById("wins");
var guessesLeft = document.getElementById("guessLeft");
var losePoints = document.getElementById("losses");
var guessSoFar = document.getElementById("guess-so-far");

function updateDisplays() {
  winPoints.textContent = wins;
  guessesLeft.textContent = guesses;
  losePoints.textContent = losses;
}

document.onkeyup = function(event) {

  var userGuess = event.key;
  userGuessSoFar.push(userGuess);
  guessSoFar.textContent = userGuessSoFar;

  if (userGuess == computerGuess) {

    wins++;
    guesses = 9
    userGuessSoFar = [];
    computerGuess = letters[Math.floor(Math.random() * letters.length)];

  } else {

    guesses--;

    if (guesses == 0) {
      losses++;
      userGuessSoFar = [];
      guesses = 9;
    }

  }

  updateDisplays();

}


updateDisplays();

<p>Guess what letter I'm thinking of...</p>
Wins: <span id="wins"></span><br>
Losses: <span id="losses"></span><br>
Guesses Remaining: <span id="guessLeft"></span>
<p>Guesses: <span id="guess-so-far"></span></p>

为什么这个javascript猜谜游戏无法正常运行？

1 个答案: