用Java的Hangman游戲中的對應單詞字母替換下划線

Question

我一直在尋找有關我正在從事的Hangman游戲的幾個問題的答案，但似乎找不到適合我的解決方案。 從我發現的結果看來，我可能不得不使用全局正則表達式，以便以此方式替換匹配字母的每個實例？

這是我遇到的3個主要問題：

1. 我不確定如何使字母顯示在下划線所對應的位置。 因此，例如，如果單詞是“ apple”，我的代碼會將空格推為__ __ __ __ __，那么當用戶按下P鍵時，我希望它將單詞更新為__ PP __ __，然后如果他們按A鍵，我希望將其更改為A __ PP __ __。 目前我已經設置好了，所以如果您在單詞中按任何正確的字母，它將顯示完整的單詞，我不確定如何將相應的字母推入單詞的正確索引中...

2. 如果onKeyUp事件僅注冊字母並且在按下任何其他字符時不執行任何操作，那將是很好的。

3. 我似乎找不到一種方法來確保您只能猜一次每個字母。 例如，如果單詞是“ apple”並且我按Z鍵，則字母Z將顯示在頁面的“我的字母已猜測”部分中，但是如果再次按Z，則將第二次顯示。 我想要這樣，以便在您第一次按鍵時不注冊重復項，或者什么都不做，或者提醒您您已經使用了該字母。

這是下面的代碼，我知道可以通過使用更少的代碼行來完成某些事情，但是我仍在學習，基本上是在4周前開始使用HTML和CSS。 對於冗長的帖子，我們深表歉意，我只是想確保將所有詳細信息都放在這里。

  // 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時，請記住變量聲明在其作用域內是“全局”的，因此在for語句中使用多個var i指向同一i變量！

2. 您在文檔范圍內聲明了所有代碼變量-這通常是不良行為-我沒有更改它，但您應該閱讀有關制作JavaScript模塊的信息。

    <!DOCTYPE html> 

   正文{padding：0; 背景顏色：; }

     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>