使用Javascript显示猜测的字母_Javascript_Html_Arrays

使用Javascript显示猜测的字母

javascript html arrays

使用Javascript显示猜测的字母,javascript,html,arrays,Javascript,Html,Arrays,我正在玩一个猜谜游戏，让用户尝试使用Javascript和HTML猜出正确的字母当他们猜的时候，我想让他们之前猜到的字母显示在屏幕上但是，当用户键入错误的字母时，它会显示逗号总之，我认为以下几点就足够了： var guessedLetters = []; //Array to capture user letter input var yourGuess = event.key; //variable to capute user's guess guessedLetters.push(y

我正在玩一个猜谜游戏，让用户尝试使用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

var guessedLetters=[]//用于捕获用户字母输入的数组
var yourGuess=event.key//根据用户的猜测调整变量
猜字母。推（你猜）//假设这是为了捕获用户输入的字母
.
.
.
猜字母：“+guessedLetters.join（'，'）//在这里显示猜测的字母

请注意，赢/输部分仍在处理中……是的，我是Javascript的noob:）

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


猜谜游戏
猜谜游戏
猜猜我在想什么字母：
字母=['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 Guessleft=13；
var guessedLetters=[]//用于捕获用户字母输入的数组
document.onkeyup=函数（事件）{
var yourGuess=event.key；//根据用户猜测的变量
push（yourGuess）；//这是用来捕获用户输入的字母
var Psycholians=PsycholineLetters[Math.floor（Math.random（）*PsycholineLetters.length）]；
//如果你的猜测与通灵者的猜测相符，
//一个点被添加到“胜利”计数中，猜测计数重新开始。
如果（你的猜测===通灵者）{
优胜++；
猜左=12；
}
//如果你的猜测与通灵者的猜测不符，你剩余的猜测次数将被扣除。
否则{
猜左——；
}
//如果剩余的猜测值等于0，则您将失败，并在“损失”计数中添加一个增量，然后重新开始积分。
如果（猜测左===0）{
youLose++；
猜左=12；
}
var html=“猜猜我在想什么字母：
”+“赢：“+youWin+”“+”输：“+youLose+”猜猜剩余：“+GuessLeft+”猜猜字母：“+guessedLetters.join（“，”）；//在此处显示猜猜字母
document.querySelector（“#心灵行为”）.innerHTML=html；
}

有几件事：

您需要一个占位符来显示结果

html

变量中缺少几个结束标记

您需要找到该占位符，并在结果更改时显示结果：


猜谜游戏
猜猜我在想什么字母：
字母=['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 Guessleft=13；
var guessedLetters=[]//用于捕获用户字母输入的数组
document.onkeyup=函数（事件）{
var yourGuess=event.key；//根据用户猜测的变量
push（yourGuess）；//这是用来捕获用户输入的字母
var Psycholians=PsycholineLetters[Math.floor（Math.random（）*PsycholineLetters.length）]；
//如果你的猜测与通灵者的猜测相符，
//一个点被添加到“胜利”计数中，猜测计数重新开始。
如果（你的猜测===通灵者）{
优胜++；
猜左=12；
}
//如果你的猜测与通灵者的猜测不符，你剩余的猜测次数将被扣除。
否则{
猜左——；
}
//如果剩余的猜测值等于0，则您将失败，并在“损失”计数中添加一个增量，然后重新开始积分。
如果（猜测左===0）{
youLose++；
猜左=12；
}
var html=“猜猜我在想什么字母：”+
“获胜：“+youWin+””+
“失去：“+youLose+””+
剩余猜测数：“+GuessLeft+””+
猜字母：“+guessedLetters.join（'，）+”“；//显示猜字母HeredDocument.querySelector（“#Psycholicact”）。innerHTML=html；
document.getElementById（“结果”）.innerHTML=html；
}

这里是一个简化的代码。我创建了不同的函数，使其更可读、更清晰，因此您可以更容易地理解。

var字母=['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=0；
var=0；
var GuessLeft、guessedLetters、letterToGuess；
重置游戏（）；
显示（）；
document.onkeyup=函数（事件）{
var guess=event.key；
如果（猜测===字母）{
赢（）；
}else if（猜测左-1==0）{
丢失（）；
}否则{
失败（猜测）；
}
显示（）；
}
函数显示（）{
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=丢失；
guessLeft.innerHTML=guessLeft；
letterGuessed.innerHTML=guessedLetters.join（'，'）；
}
函数win（）{
wins++；
重置游戏（）；
}
函数丢失（）{
丢失++；
重置游戏（）；
}
功能失效（字母）{
猜左——；
猜字母。推（字母）；
}
函数resetGame（）{
猜左=12；
猜字母=[]；
letterToGuess=字母[Math.floor（Math.random（）*letters.length）]；
console.log（“猜字母：+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>
    <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>