在劊子手遊戲對應的單詞字母更換下劃線在Javascript

Question

我在這裏新和新編碼，如果你能這樣與我裸露。我一直在尋找關於我正在開發的Hang子手遊戲的幾個問題的答案，但我似乎無法找到適合我的解決方案。從我發現它看起來也許我不得不使用全局正則表達式，這樣它會取代每個匹配字母的實例？

下面是我在3個主要問題：

1）我不知道如何讓字母代替，他們用下劃線對應顯示。因此，舉例來說，如果字是「蘋果」我有我的代碼，推出空白視爲 __ __ __ __ __，那麼當用戶按下P鍵，我想它來更新這個詞來__ PP __ __，那麼如果他們按下A鍵，我希望它變成A __ PP __ __。目前我已經設置了，所以如果你按下任何字母正確的字母，它會顯示完整的單詞，我不知道如何去推動相應的字母到正確的單詞索引，因爲他們被猜測...

2）如果事件的onkeyup只能註冊字母和當按下任何其它字符什麼也不做這將是很好。

3）我似乎無法找到一種方法，以確保您可以一次只能猜測每個字母。例如，如果單詞是'apple'，並且按Z鍵，則字母Z將顯示在我的頁面的我已預測的字母部分中，但如果再次按Z，則會顯示第二次。我喜歡它，這樣在第一次按下按鍵後，它不會註冊重複項，也不會執行任何操作，也不會提醒您已經使用了該字母。

這裏是我下面的代碼，我知道有一些事情，我大概可以用更少的代碼完成同樣的事情，但我仍然在學習，基本上開始與HTML和CSS約4周前。對於這個長期的帖子感到抱歉，我只是想確保我把所有的細節都放在那裏。

在此先感謝！

// This is our array of words for the game 
 
     var words = ['grey', 'school', 'warrior', 'thunder', 'real', 'shark', 'butter', 'tomato', 'potato', 'university', 
 
      'popcorn', 'progress', 'elephant', 'phone', 'artist', 'handkerchief', 'chemistry', 'picture', 'camera', 'alternate', 
 
      'sandwich', 'water', 'traitor', 'america', 'basketball', 'personal', 'homerun', 'apple', 'banana', 'monster', 
 
      'lightning', 'microphone', 'door', 'monitor', 'television', 'prisoner', 'detective', 'breaking', 'solution', 
 
      'fantasy', 'ocean', 'president', 'patio', 'titanic', 'candy', 'hamburger', 'currency', 'copper', 'buffalo', 
 
      'cowboy']; 
 

 
     console 
 
     var currentWord = words[Math.floor(Math.random() * words.length)].toUpperCase(); 
 

 
    // This variable holds the number of guesses left 
 
     var guessesLeft = 6; 
 
     document.getElementById("guesses-left").innerHTML = guessesLeft; 
 

 
     // This variable will count the number of times we won 
 
     var wins = 0; 
 
     document.getElementById("wins").innerHTML = wins; 
 

 
     var resetLettersGuessed = "" 
 

 
     // This is an empty array that we will push our blanks to 
 
     var progressWord = []; 
 

 
     // This is an array that we will push the letters from the current word to 
 
     // for comparison of whether the player's guess is correct or not 
 
     var mysteryWord = []; 
 

 
     // This will store our random generated word so we can see the answer in the console 
 
     // for our reference 
 
     for (i = 0; i < currentWord.length; i++) {} 
 

 
     console.log(currentWord.toUpperCase()); 
 

 
     // This is the code that will push out blank spaces for the letters of the current 
 
     // word so the player can see the word and begin to guess letters 
 
     for (var i = 0; i < currentWord.length; i++) { 
 
      progressWord.push("__"); 
 
      progressWord.toString() 
 
      document.getElementById("word-guess").innerHTML = progressWord.join(" "); 
 
     } 
 

 
     console.log(progressWord); 
 

 
     // This is the code that will push out the letters of the current word 
 
     // to the new variable fo comparison 
 
     for (var i = 0; i < currentWord.length; i++) { 
 
      mysteryWord.push(currentWord.charAt(i)); 
 
      mysteryWord.toString(i) 
 
     } 
 

 
     console.log(mysteryWord) 
 

 

 

 
     // These are the key events used to play and to document the letters already used and/or 
 
     // letters in the answers 
 
     document.onkeyup = function(onKeyUp) { 
 
      letter = onKeyUp.keyCode; 
 
      lettersGuessed = String.fromCharCode(letter); 
 
      console.log(lettersGuessed); 
 

 
      // This will alert correct and compare the letter guessed with the current word 
 
      if (lettersGuessed === mysteryWord[0] || lettersGuessed === mysteryWord[1] || 
 
      lettersGuessed === mysteryWord[2] || lettersGuessed === mysteryWord[3] || 
 
      lettersGuessed === mysteryWord[4] || lettersGuessed === mysteryWord[5] || 
 
      lettersGuessed === mysteryWord[6] || lettersGuessed === mysteryWord[7] || 
 
      lettersGuessed === mysteryWord[8] || lettersGuessed === mysteryWord[9] || 
 
      lettersGuessed === mysteryWord[10] || lettersGuessed === mysteryWord[11] || 
 
      lettersGuessed === mysteryWord[12] || lettersGuessed === mysteryWord[13] || 
 
      lettersGuessed === mysteryWord[14] || lettersGuessed === mysteryWord[15] || 
 
      lettersGuessed === mysteryWord[16] || lettersGuessed === mysteryWord[17] || 
 
      lettersGuessed === mysteryWord[18] || lettersGuessed === mysteryWord[19] || 
 
      lettersGuessed === mysteryWord[20]) { 
 
      // alert("CORRECT!"); 
 

 
      // replace progress Word underscore with letter pressed 
 
      document.getElementById("word-guess").innerHTML = mysteryWord.join(" "); 
 
      } else { 
 
      // alert("WRONG!"); 
 
      document.getElementById("letters-guessed").innerHTML += lettersGuessed + " "; 
 

 
      // subtract a point from guesses left 
 
      guessesLeft--; 
 
      document.getElementById("guesses-left").innerHTML = guessesLeft; 
 
      } 
 

 
      // This code will tell the user the game is over along with a message about 
 
      // their win streak, then it will reset the game while quickly showing 
 
      // what the word was 
 
      if (guessesLeft === 0) { 
 
      alert("Game Over! You finished with a streak of " + wins + " wins! The word was " + currentWord); 
 
      location.reload(); 
 
      document.getElementById("word-guess").innerHTML = currentWord; 
 
      } 
 

 
      // this is the code that alerts you when you've won the game, then it will reset 
 
      // the current word to begin another round 
 
      if (currentWord === progressWord) { 
 
      var phrases = ['Yup! Onto the next one!', 'Leggo!','You like the Air Jordan of Hangman!', 'Dont hurt em!', 'Turn up!', 
 
      'Go and brush ya shoulders off!', 'In the zone!'] 
 
      var nextRound = phrases[Math.floor(Math.random() * phrases.length)]; 
 
      alert(nextRound); 
 

 

 
      // reset guesses left 
 
      guessesLeft = 6; 
 
      document.getElementById("guesses-left").innerHTML = guessesLeft; 
 

 
      // reset letters guessed 
 
      document.getElementById("letters-guessed").innerHTML = resetLettersGuessed; 
 

 
      // This code generates a new word to guess and then pushes out the blanks again 
 
      currentWord = words[Math.floor(Math.random() * words.length)].toUpperCase(); 
 

 
      progressWord = []; 
 
      for (var i = 0; i < currentWord.length; i++) { 
 
       progressWord.push("__"); 
 
       progressWord.toString() 
 
       document.getElementById("word-guess").innerHTML = progressWord.join(" "); 
 
      } 
 

 
      mysteryWord = [] 
 
      for (var i = 0; i < currentWord.length; i++) { 
 
       mysteryWord.push(currentWord.charAt(i)); 
 
       mysteryWord.toString(i) 
 
      } 
 
      console.log(currentWord); 
 
      console.log(progressWord); 
 
      console.log(mysteryWord); 
 

 
      // Add to the win total 
 
      wins++; 
 
      document.getElementById("wins").innerHTML = wins; 
 
      } 
 
     }

body { 
 
    padding: 0; 
 
    background-color: ; 
 
} 
 

 
header { 
 
    margin-bottom: 2.5%; 
 
    border-bottom: 0px solid black; 
 
    background-image: url("../images/hangman-header.jpg"); 
 
    background-size: 100% 125px; 
 
    height: 125px; 
 
} 
 

 
footer { 
 
    background-image: url("../images/hangman-footer.jpg"); 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 7%; 
 
    width: 100%; 
 
    color: black; 
 
    font-weight: 500; 
 
    text-align: center; 
 
    position: fixed; 
 
    line-height: 3em; 
 
    border-top: 3px solid lightgray; 
 
} 
 

 
hr { 
 
    width: 90%; 
 
    margin-bottom: 3%; 
 
    margin-top: 0%; 
 
} 
 

 
h1 { 
 
    margin-top: -2%; 
 
    margin-bottom: 0%; 
 
    text-align: center; 
 
    font-size: 28px; 
 
    line-height: 50px; 
 
} 
 

 
h2 { 
 
    margin-bottom: 0%, 0%, 0%, 20%; 
 
    font-size: 29px; 
 
    text-align: center; 
 
} 
 

 
h3 { 
 
    padding: 0%; 
 
    margin-top: 0%; 
 
    margin-bottom: 2%; 
 
    background-color: #FFFFFF; 
 
    border: 0px solid black; 
 
    font-size: 18px; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    margin-bottom: 15%; 
 
    margin-top: 10%; 
 
    word-break: break-all; 
 
} 
 

 
li { 
 
    padding: 1%; 
 
    margin-bottom: -3%; 
 
    margin-top: -7.5%; 
 
    list-style: none; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    border: 0px solid black; 
 
    font-weight: 600; 
 
    color: #9ca6ba; 
 
    background-color: white; 
 
} 
 

 
.main-section { 
 
     border: 0px solid black; 
 
     height: 55%; 
 
     margin-bottom: 0%; 
 
     margin-top: -3%; 
 
     padding-left: 5%; 
 
     padding-right: 5%; 
 
} 
 

 
.top-label { 
 
    border: 1px solid black; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Hangman!</title> 
 

 
<!-- Latest compiled and minified CSS --> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Modified CSS file --> 
 

 
<link rel="stylesheet" type="text/css" href="assets/css/hangman-style.css"> 
 

 
<!-- CSS for Google Fonts --> 
 

 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
 

 
<!-- Javascript is enabled --> 
 

 
    </head> 
 

 
<body> 
 

 
    <header> </header> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-md-offset-4 top-label"> 
 
     <br> 
 
      <h1>Press any key to get started!</h1> 
 
       <hr>  
 

 
        <ul> 
 
         <li>Total Wins: </li> 
 
         <br> 
 
         <center><h3><span id="wins"></span></h3></center> 
 
         <br> 
 
         <br> 
 
         <li># of Guesses Remaining: </li>  
 
         <br> 
 
         <center><h3><span id="guesses-left"></span></h3></center> 
 
         <br> 
 
         <br> 
 
         <li>Letters Already Guessed: </li> 
 
         <br> 
 
         <center><h3><span id="letters-guessed"></span></h3></center> 
 
         <br> 
 
         <br> 
 
         <li>Current Word: </li> 
 
         <center> 
 
         <br> 
 
         <h3><span id="word-guess"></span></h3></center> 
 
         </ul>   
 
     </div>  
 
     </div> 
 
    </div> 
 

 
<footer>Copyright 2017</footer> 
 
</div> 
 
<script type="text/javascript" src="assets/javascript/game.js"></script> 
 
</body> 
 
</html>

Answer 1

有很多事情在這裏，但我只是盡力幫助它的一個部分，將不檢查，看看是否在詞中存在的字母，如果是，請更換帶字母的_。

const words = ['John', 'Jacob', 'Jingleheimersmith'] 

function chooseWord(array) { 
    return array[Math.floor(Math.random() * array.length)].toUpperCase() 
} 

function fillInWordWithLetter(letter, word) { 
    return word.toLowerCase().split('').map(l => { 
    if (l === letter) { 
     return l.toUpperCase() 
    } 
    return '_' 
    }).join(' ') 
} 

fillInWordWithLetter('j', chooseWord(words)) 

如果你在，你會看到這個詞是怎麼用，如果字母詞存在信更新控制檯運行它，否則返回_。這應該有助於你朝正確的方向發展，並且你可能必須擺弄它才能使它做到你需要的東西。在將字母填入單詞後，您應該能夠使用插入字母的新單詞更新DOM。

這是REPL.it：https://repl.it/IVO3/1

Answer 2

我已經根據你的代碼，一個簡單的網頁，做你最想要的東西 - 見下文。

我的一般性評論：

1. 當僅使用ES5的JavaScript記住變量聲明是在其範圍內的「全球」，因此使用幾個變種我在發言指的是同我變！

2. 你宣佈對文件範圍內的所有代碼的變量 - 這是一般的不良行爲 - 我沒有改變，但你應該閱讀有關製作的JavaScript模塊等

   <!DOCTYPE html> 
   

   body {paddle：0; background-color :; }

   header { 
        margin-bottom: 2.5%; 
        border-bottom: 0px solid black; 
        background-image: url("../images/hangman-header.jpg"); 
        background-size: 100% 125px; 
        height: 125px; 
       } 
   
       footer { 
        background-image: url("../images/hangman-footer.jpg"); 
        bottom: 0; 
        left: 0; 
        height: 7%; 
        width: 100%; 
        color: black; 
        font-weight: 500; 
        text-align: center; 
        position: fixed; 
        line-height: 3em; 
        border-top: 3px solid lightgray; 
       } 
   
       hr { 
        width: 90%; 
        margin-bottom: 3%; 
        margin-top: 0%; 
       } 
   
       h1 { 
        text-align: center; 
        font-size: 28px; 
        line-height: 50px; 
       } 
   
       h2 { 
        font-size: 29px; 
        text-align: center; 
       } 
   
       h3 { 
        padding: 0%; 
        background-color: #FFFFFF; 
        font-size: 18px; 
       } 
   
       ul { 
        padding: 0; 
        margin-bottom: 15%; 
        margin-top: 10%; 
        word-break: break-all; 
       } 
   
       li { 
        list-style: none; 
        font-size: 20px; 
        text-align: center; 
        border: 0px solid black; 
        font-weight: 600; 
        color: #9ca6ba; 
        background-color: white; 
       } 
   
       .main-section { 
        border: 0px solid black; 
        height: 55%; 
        margin-bottom: 0%; 
        padding-left: 5%; 
        padding-right: 5%; 
       } 
   
       .top-label { 
        border: 1px solid black; 
       } 
   </style> 
   

   <header> </header> 
   
   <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-4 col-md-offset-4 top-label"> 
         <br> 
         <h1>Press any key to get started!</h1> 
         <hr> 
   
         <ul> 
          <li> 
           Total Wins: 
           <h3><span id="wins"></span></h3> 
          </li> 
   
          <li> 
           # of Guesses Remaining: 
           <h3><span id="guesses-left"></span></h3> 
          </li> 
          <li> 
           Letters Already Guessed: 
           <h3><span id="letters-guessed"></span></h3> 
          </li> 
          <li> 
           Current Word: 
           <br /> 
           <h3><span id="word-guess"></span></h3> 
          </li> 
         </ul> 
        </div> 
       </div> 
   </div> 
   
   <footer>Copyright XYZ 2017</footer> 
   
   <script type="text/javascript"> 
       // This is our array of words for the game 
       var words = ['grey', 'school', 'warrior', 'thunder', 'real', 'shark', 'butter', 'tomato', 'potato', 'university', 
        'popcorn', 'progress', 'elephant', 'phone', 'artist', 'handkerchief', 'chemistry', 'picture', 'camera', 'alternate', 
        'sandwich', 'water', 'traitor', 'america', 'basketball', 'personal', 'homerun', 'apple', 'banana', 'monster', 
        'lightning', 'microphone', 'door', 'monitor', 'television', 'prisoner', 'detective', 'breaking', 'solution', 
        'fantasy', 'ocean', 'president', 'patio', 'titanic', 'candy', 'hamburger', 'currency', 'copper', 'buffalo', 
        'cowboy']; 
   
       var currentWord = words[Math.floor(Math.random() * words.length)].toUpperCase(); 
   
       // This variable holds the number of guesses left 
       var guessesLeft = 6; 
       document.getElementById("guesses-left").innerHTML = guessesLeft; 
   
       // This variable will count the number of times we won 
       var wins = 0; 
       document.getElementById("wins").innerHTML = wins; 
   
       var resetLettersGuessed = "" 
   
       // This is an empty array that we will push our blanks to 
       var progressWord = []; 
   
       // This is an array that we will push the letters from the current word to 
       // for comparison of whether the player's guess is correct or not 
       var mysteryWord = []; 
       var i; 
   
       console.log("Current word is: " + currentWord); 
   
       // This is the code that will push out blank spaces for the letters of the current 
       // word so the player can see the word and begin to guess letters 
       for (i = 0; i < currentWord.length; i++) { 
        progressWord.push("__"); 
       } 
       document.getElementById("word-guess").innerHTML = progressWord.join(" "); 
   
       // function evaluating the positions of the given letter in the currentWord string 
       // return empty array in case of failure 
       function letterInWord(letter) { 
        // the array that will contain the char positions in the currentWord that has the 
        var positions = new Array(); 
        for (i = 0 ; i < currentWord.length; i++) { 
         if (currentWord[i] === letter) 
          positions.push(i); 
        } 
        return positions; 
       } 
   
       // return number of letters that is still not guessed 
       function lettersToGuess() { 
        var i ; 
        var toGess = 0 ; 
        for (i in progressWord) { 
         if (progressWord[i] === "__") 
          toGess++; 
        } 
        return toGess; 
       } 
   
       // These are the key events used to play and to document the letters already used and/or 
       // letters in the answers 
       document.onkeyup = function (event) { 
        var letter = event.key; 
        var lettersGuessed = letter.toLocaleUpperCase(); 
        var i; 
   
        console.log("You have typed a letter: ".concat(letter)); 
   
        var positions = letterInWord(lettersGuessed); 
   
   
        // This will alert correct and compare the letter guessed with the current word 
        if (positions.length) { 
         console.log("User has pressed a letter from word: " + letter); 
   
         for (i = 0 ; i < positions.length; i++) { 
          progressWord[positions[i]] = lettersGuessed; 
         } 
   
         // replace progress Word underscore with letter pressed 
         document.getElementById("word-guess").innerHTML = progressWord.join(" "); 
        } else { 
         // alert("WRONG!"); 
         document.getElementById("letters-guessed").innerHTML += lettersGuessed + " "; 
   
         // subtract a point from guesses left 
         guessesLeft--; 
         document.getElementById("guesses-left").innerHTML = guessesLeft; 
        } 
   
        // This code will tell the user the game is over along with a message about 
        // their win streak, then it will reset the game while quickly showing 
        // what the word was 
        if (guessesLeft === 0) { 
         alert("Game Over! You finished with a streak of " + wins + " wins! The word was " + currentWord); 
         location.reload(); 
        } 
   
        // this is the code that alerts you when you've won the game, then it will reset 
        // the current word to begin another round 
        if (lettersToGuess() == 0) { 
         var phrases = ['Yup! Onto the next one!', 'Leggo!', 'You like the Air Jordan of Hangman!', 'Dont hurt em!', 'Turn up!', 
         'Go and brush ya shoulders off!', 'In the zone!'] 
         var nextRound = phrases[Math.floor(Math.random() * phrases.length)]; 
         alert(nextRound); 
   
   
         // reset guesses left 
         guessesLeft = 6; 
         document.getElementById("guesses-left").innerHTML = guessesLeft; 
   
         // reset letters guessed 
         document.getElementById("letters-guessed").innerHTML = resetLettersGuessed; 
   
         // This code generates a new word to guess and then pushes out the blanks again 
         currentWord = words[Math.floor(Math.random() * words.length)].toUpperCase(); 
   
         progressWord = []; 
         for (i = 0; i < currentWord.length; i++) { 
          progressWord.push("__"); 
         } 
         document.getElementById("word-guess").innerHTML = progressWord.join(" "); 
   
         // Add to the win total 
         wins++; 
         document.getElementById("wins").innerHTML = wins; 
        } 
       } 
   </script>