我一直在寻找关于我正在进行的Hangman游戏的几个问题的答案，但我似乎无法找到适合我的解决方案。从我发现它看起来似乎我可能必须使用全局正则表达式，以便它替换匹配字母的每个实例???
以下是我遇到的3个主要问题：
我不确定如何让这些字母显示在与下划线对应的位置。因此，例如，如果单词是'apple'，我的代码会将空白推出为 __ __ __ __ __，然后当用户按下P键时，我希望它将单词更新为__ PP __ __，然后如果按下A键，我希望它更改为A __ PP __ __ 。目前我设置了它，所以如果你按下任何一个字母正确的字母，它会显示完整的单词，我不知道如何将相应的字母推入正确的单词索引，因为它们猜对了......
如果onKeyUp事件只会注册字母并且在按下任何其他字符时不执行任何操作，那将是很好的。
我似乎无法找到确保您只能猜出一次字母的方法。例如，如果单词是'apple'并且我按下Z键，则字母Z将显示在我的页面中的Letters Guessed部分中，但是如果我再次按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>
答案 0 :(得分：0)
这里有很多事情，但我会尝试帮助它的一部分，检查字母是否存在，如果确实存在，请用字母替换_。
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
答案 1 :(得分：0)
我根据您的代码创建了一个简单的网页，可以完成您想要的大部分内容 - 请参阅下文。
我的一般评论：
您在文档范围内声明了所有代码变量 - 这通常是一种不良行为 - 我没有更改它，但您应该阅读有关制作JavaScript模块等的内容。
<!DOCTYPE html>
身体 { 填充：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>