Question

我正在玩弄创建一个猜谜游戏，它给用户一定数量的尝试，使用Javascript和HTML猜测正确的字母。

当他们猜测时，我想让他们之前猜到的字母显示在屏幕上。

但是，当用户键入错误的字母时，它会显示逗号。

总之，我认为以下就足够了：

var guessedLetters = []; //Array to capture user letter input
var yourGuess = event.key; //variable to capute user's guess
guessedLetters.push(yourGuess); //This is suppose to capture letters entered by the user
.
.
.
"<p>Guessed Letter: " +  guessedLetters.join(', '); //Show guessed letters here

请注意，赢/输部分仍在处理......是的我是Javascript的菜鸟：）

以下是我到目前为止的代码（已经为理解代码做了评论）

<!DOCTYPE html>
<html lang="en-us">
  <head>
  <meta charset="UTF-8">
  <title>The Guessing Game</title>
</head>
<body>
  <div id="psychicAct">
    <h1>The Guessing Game</h1>
    <p>Guess what letter I'm thinking of:</p>
  </div>
  <script type="text/javascript">
  var psychicLetters = ['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 youWin = 0;
  var youLose = 0;
  var guessesLeft = 13;
  var guessedLetters = []; //Array to capture user letter input

  document.onkeyup = function(event) {
    var yourGuess = event.key; //variable to capute user's guess
    guessedLetters.push(yourGuess); //This is suppose to capture letters     entered by the user    
    var psychicAns = psychicLetters[Math.floor(Math.random() *    psychicLetters.length)];

    //If your guess matches the psychic's guess,
    //a point is added to the "Wins" tally and the guesses tally restarts.
    if (yourGuess === psychicAns) {
      youWin++;
      guessesLeft = 12;
    }
    //If your does not not match the psychic's guess, your number of  guesses remaining are deducted.
    else {
      guessesLeft--;
    }

    //If the guesses remaining equals 0, you lose, an increment is added to  the "Losses" tally and the points restart.
    if (guessesLeft === 0){
      youLose++;
      guessesLeft = 12;
    }

    var html = "<p>Guess what letter I'm thinking of:</p>" + "<p>Wins: " + youWin + "</p>" + "<p>Loses: "+ youLose + "<p>Guesses Remaining: " + guessesLeft + "<p>Guessed Letter: " +  guessedLetters.join(', '); //Show guessed letters here
    document.querySelector("#psychicAct").innerHTML = html;
  }
  </script>
</body>
</html>

Answer 1

这是一个简化的代码。我创建了不同的功能，使其更具可读性和清晰度，因此您可以更轻松地理解。

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 loses = 0;
var guessesLeft, guessedLetters, letterToGuess;

resetGame();
display();

document.onkeyup = function(event) {
  var guess = event.key;
  if (guess === letterToGuess) {
    win();
  } else if (guessesLeft - 1 === 0) {
    lost();
  } else {
    fail(guess);
  }

  display();
}

function display() {
  var winsP = document.getElementById("wins");
  var losesP = document.getElementById("loses");
  var guessLeft = document.getElementById("guessLeft");
  var letterGuessed = document.getElementById("guessed");
  winsP.innerHTML = wins;
  losesP.innerHTML = loses;
  guessLeft.innerHTML = guessesLeft;
  letterGuessed.innerHTML = guessedLetters.join(',');
}

function win() {
  wins++;
  resetGame();
}

function lost() {
  loses++;
  resetGame();
}

function fail(letter) {
  guessesLeft--;
  guessedLetters.push(letter);
}

function resetGame() {
  guessesLeft = 12;
  guessedLetters = [];
  letterToGuess = letters[Math.floor(Math.random() * letters.length)];
  console.log("Letter to guess: " + letterToGuess);
}

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="UTF-8">
  <title>The Guessing Game</title>
</head>

<body>
  <div id="psychicAct">
    <h1>The Guessing Game</h1>
    <h3>Wins:
      <p id="wins"></p>
    </h3>
    <h3>Loses:
      <p id="loses"></p>
    </h3>
    <h3>Guess left:
      <p id="guessLeft"></p>
    </h3>
    <p>Guess what letter I'm thinking of:</p>
    <p id="guessed"></p>
  </div>
</body>

</html>

Answer 2

一些事情：

您需要一个占位符来显示结果。
html变量中缺少几个结束标记
您需要找到该占位符并在结果更改时显示结果：

  <div id="psychicAct">
    <h1>The Guessing Game</h1>    
    <div id="results"><p>Guess what letter I'm thinking of:</p></div>
  </div>
  <script type="text/javascript">
    var psychicLetters = ['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 youWin = 0;
    var youLose = 0;
    var guessesLeft = 13;
    var guessedLetters = []; //Array to capture user letter input
    document.onkeyup = function(event) {
      var yourGuess = event.key; //variable to capute user's guess
      guessedLetters.push(yourGuess); //This is suppose to capture letters     entered by the user    
      var psychicAns = psychicLetters[Math.floor(Math.random() * psychicLetters.length)];
      //If your guess matches the psychic's guess,
      //a point is added to the "Wins" tally and the guesses tally restarts.
      if (yourGuess === psychicAns) {
        youWin++;
        guessesLeft = 12;
      }
      //If your does not not match the psychic's guess, your number of  guesses  remaining are deducted.
      else {
        guessesLeft--;
      }
      //If the guesses remaining equals 0, you lose, an increment is added to  the "Losses" tally and the points restart.
      if (guessesLeft === 0) {
        youLose++;
        guessesLeft = 12;
      }
      var html = "<p>Guess what letter I'm thinking of:</p>" +
        "<p>Wins: " + youWin + "</p>" +
        "<p>Loses: " + youLose + "</p>" +
        "<p>Guesses Remaining: " + guessesLeft + "</p>" +
        "<p>Guessed Letter: " + guessedLetters.join(', ') + "</p>" ; //Show guessed     letters heredocument.querySelector("#psychicAct").innerHTML = html;
        
        document.getElementById("results").innerHTML = html;
    }
  </script>

使用Javascript显示猜测的字母

2 个答案: