2017-08-11 13 views
3

私はjavascriptを初めて使っています。私はゲームのような非常に基本的なハングマンを作成しましたが、問題がいくつかあります。私が問題を抱えていることの1つは、私の手紙です。今、私はキーを押すたびに配列が表示され、同じ文字(私は欲しくない)が繰り返されます。私は配列に、押されたキーを何回押しても、そのキーを何度押せても表示させたい。私はまた、同じキーが押された場合、推測のカウンタを同じに保つ方法を理解できません。Javascript hangman issues

条件が満たされる前にゲームが終了する理由もわかりません。たとえば、推測を使い果たしたときにアラートがポップアップし、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を返します。

var userGuess = event.key;

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

後、あなたがここでそれを確認することができ、あなたのdocument.keyup方法を変更し、この権利を追加

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>

ファーを内側にある場合は、すべてのキーアップ機能を大括弧で囲んでください。そして、あなたが文字に推測した配列を新しい文字にプッシュした後。

keyExistブール値を作成する前に、再度キーアップリスナーヘッドを作成する必要があります。デフォルト値はfalseに設定されています。

var keyExist = false; 

すべてのオブジェクトは内側にあると考えられます。 if lettersGuested arrayにはこの文字がありますkeyExist value trueを返します。

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