在刽子手游戏对应的单词字母更换下划线在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>