2017-08-11 30 views
3

我是JavaScript新手,我创建了一个像游戏一样非常基本的hang子手,但有些事情我遇到了麻烦。我遇到麻烦的一件事是我的字母猜测数组。现在数组每次按下一个键都会显示,它会重复相同的字符(我不想)。无论按下该键多少次,我都希望阵列只显示按下的按键一次。如果按下相同的键,我也无法弄清楚如何使猜测计数器保持不变。Javascript hangman问题

我也不确定为什么游戏结束,然后才能看到条件满足的时间。例如,当您用完猜测时,警报将弹出,您仍然会看到剩余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>

随时给我打电话了任何多余的代码,或任何东西,我可以做的更好。

回答

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("_"); 
 

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

 
\t } 
 
\t \t } 
 

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

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

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

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

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

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

 

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

杉木如果在里面的话,你可以把所有的关键功能放在括号内。并且在你将字母猜成数组后再转换为新字符。

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

在您必须再次创建keyExist布尔值之前,必须先获得keyup侦听器头。并且默认值设置为false。

var keyExist = false; 

毕竟字母里面的所有对象都是数组检查。如果lettersGuessed数组有一个这个字符,keyExist的值返回true。

for (var i = 0; i < lettersGuessed.length; i++) { 
        if (userGuess === lettersGuessed[i]) { 
         keyExist = true; 
        } 
       }