logo标签列表

JavaScript 绞刑游戏问题

javascriptjqueryhtml
3
我刚开始学习JavaScript，做了一个基本的类似“猜词游戏”的小游戏，但是我遇到了一些问题。其中之一是我的lettersGuessed数组。现在每次按键时数组都会显示，并且会重复相同的字符（这不是我想要的）。我想让数组仅在第一次按下键时显示一次，不管按下多少次该键。我还无法弄清楚如何让猜测计数器在按下相同的键时保持不变。
此外，我不确定为什么游戏会在满足条件之前结束。例如，当你用完所有猜测时，警报将弹出，但你仍然可以看到你还有1次猜测的机会。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<link rel="stylesheet" type="text/css" href="style.css">
<body>

<div id="placeholders"> </div>
<div id="guessesRemaining"></div>
<div id="wins"></div>
<div id="losses"></div>
<div id="pressedLetters"></div>

<script type="text/javascript">
    var arrayOfWords = ["alpha", "bravo", "charlie", "delta", "echo"];
    var pickedWord;
    var pickedWordArray = [];
    var pickedWordPlaceholders = [];
    var wins = 0;
    var losses = 0;
    var lettersGuessed;
    var guessesLeft;

    function newGame() {
        guessesLeft = 10;
        lettersGuessed = [];
        pickedWord = arrayOfWords[Math.floor(Math.random() * arrayOfWords.length)];
        pickedWordArray = pickedWord.split("");
        pickedWordPlaceholders = [];

        for (var i = 0; i < pickedWordArray.length; i++) {
            pickedWordPlaceholders.push("_");
            var placeHolderString = pickedWordPlaceholders.join(' ');
            document.querySelector("#guessesRemaining").innerHTML ="Lives: " + guessesLeft;
            document.querySelector("#placeholders").innerHTML = placeHolderString;
            document.querySelector("#wins").innerHTML = "Wins: " + wins;
            document.querySelector("#losses").innerHTML = "Losses: " + losses;
        }
    }

    document.onkeyup = function(event) {
        var userGuess = event.key;
        lettersGuessed.push(userGuess);

        for (var i = 0; i < pickedWordArray.length; i++) {
            if (userGuess === pickedWordArray[i]) {
                pickedWordPlaceholders[i] = userGuess;
            }
        }
        document.querySelector("#placeholders").innerHTML = pickedWordPlaceholders.join(" ");
        document.querySelector("#pressedLetters").innerHTML = lettersGuessed;

        if (pickedWordPlaceholders.indexOf(userGuess) === -1) {
            guessesLeft--;
        }
        document.querySelector("#guessesRemaining").innerHTML ="Lives: " + guessesLeft;
        if (guessesLeft === 0){
            losses++;
            alert("You lose!");
            newGame();
        }
        document.querySelector("#losses").innerHTML = "Losses: " + losses;

        if (pickedWordPlaceholders.join("") === pickedWord){
            wins++;
            alert("You win!");
            newGame();
        }
        document.querySelector("#wins").innerHTML = "Wins: " + wins;
    }

    newGame();

</script>

</body>
</html>

请随时指出我重复的代码或者我可以做得更好的地方。

2个回答
1

你需要检查用户是否已经猜测过这个字母，如果是，就返回false。

更改你的document.keyup方法，并在var userGuess = event.key;之后添加以下内容。

 for(var i = 0; i <= lettersGuessed.length-1; i++)
 {
    if(lettersGuessed[i].indexOf(userGuess) != -1)
       {
        return false;
       }
 }

你可以在这里检查它：

https://jsfiddle.net/7e61yz2r/

0

var arrayOfWords = ["alpha", "bravo", "charlie", "delta", "echo"];
    var pickedWord;
    var pickedWordArray = [];
    var pickedWordPlaceholders = [];
    var wins = 0;
    var losses = 0;
    var guessesLeft;
var lettersGuessed = [];

    function newGame() {
      guessesLeft = 10;
      lettersGuessed = [];
      pickedWord = arrayOfWords[Math.floor(Math.random() * arrayOfWords.length)];
      pickedWordArray = pickedWord.split("");
      pickedWordPlaceholders = [];


      for (var i = 0; i < pickedWordArray.length; i++) {
        pickedWordPlaceholders.push("_");

 var placeHolderString = pickedWordPlaceholders.join(' ');
 document.querySelector("#guessesRemaining").innerHTML ="Lives: " + guessesLeft;
 document.querySelector("#placeholders").innerHTML = placeHolderString;
 document.querySelector("#wins").innerHTML = "Wins: " + wins;
 document.querySelector("#losses").innerHTML = "Losses: " + losses;

 }
  }

  document.onkeyup = function(event) {
     var userGuess = event.key;
     
          var keyExist = false;
   for (var i = 0; i < lettersGuessed.length; i++) {
     if (userGuess === lettersGuessed[i]) {
      keyExist = true;
     } 
    }

      if (!keyExist) {
      lettersGuessed.push(userGuess);
    for (var i = 0; i < pickedWordArray.length; i++) {
     if (userGuess === pickedWordArray[i]) {
      pickedWordPlaceholders[i] = userGuess;
     }
    }
      document.querySelector("#placeholders").innerHTML = pickedWordPlaceholders.join(" ");
      document.querySelector("#pressedLetters").innerHTML = lettersGuessed;

     if (pickedWordPlaceholders.indexOf(userGuess) === -1) {
              guessesLeft--;

             }
              document.querySelector("#guessesRemaining").innerHTML ="Lives: " + guessesLeft;

             if (guessesLeft === 0){
              losses++;
              alert("You lose!");
              newGame();
             }
              document.querySelector("#losses").innerHTML = "Losses: " + losses;

             if (pickedWordPlaceholders.join("") === pickedWord){
              wins++;
              alert("You win!");
              newGame();
             }
              document.querySelector("#wins").innerHTML = "Wins: " + wins;
                }
  }


newGame();
<div id="placeholders"> </div>
<div id="guessesRemaining"></div>
<div id="wins"></div>
<div id="losses"></div>
<div id="pressedLetters"></div>

首先，如果您的按键函数在括号内，请将其全部放入括号内。然后，将新字符推送到lettersGuessed数组中。

 if (!keyExist) {
      lettersGuessed.push(userGuess);

在执行keyup监听器之前，您必须再次创建keyExist布尔值，并将默认值设置为false。

 var keyExist = false;

在检查lettersGuessed数组中的所有对象之后，如果lettersGuessed数组具有此字符keyExist值，则返回true。

for (var i = 0; i < lettersGuessed.length; i++) {
                    if (userGuess === lettersGuessed[i]) {
                        keyExist = true;
                    } 
                }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接