我正在尝试让游戏先记录最后一个正确的字母来更新HTML，然后再记录并提醒获胜。
示例：“ phi_ co__ins”，按“ l”并将它们全部打印到div，显示“ phil collins”，然后记录/警告胜利，而不是按“ l”并使其记录/警告胜利而不显示所有字母，在游戏重新开始前留下“ phi_ co__ins”。
我的代码将在多词猜测中记录最终字母，但不会记录获胜，而单个单词将不显示最后一个正确的字母，但会记录获胜并刷新。
任何建议将不胜感激。我只发现了2个示例，无法适应我的需要。
我的HTML和JS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hangman</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<header>
<img src="assets/images/background.png" class="header-img" alt="80's picture">
</header>
<div class="container">
<h2>Press a letter to get started!</h2>
<div class="row">
<div class="col-md-5">
<div id="game">
<h4><h4 id="win-counter">Wins: </h4></h4>
<h4><h4 id="loss-counter">Losses: </h4></h4>
<h4>Wrong Guesses: </h4>
<h5 id="wrong-guesses"></h5>
<h4>Guesses Remaining: <span id="guesses-left"></span></h4></h4>
</div>
</div>
<div class="col-md-7">
<div id="play">
<h3>Guess the singer or band!</h3>
<br>
<div><h4 id="wordToGuess"></h4></div>
<br>
<div id="hintClue">
<button id="hint" class="btn btn-sm">Hint</button>
<h5 id="clue">Song: </h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="empty-div"></div>
</div>
</div>
<script type="text/javascript" src="assets/javascript/game.js"></script>
</body>
</html>
// GLOBAL VARIABLES
// ==================================================
// Array of word options
var bands = ["bangles", "pat benatar", "bon jovi", "david bowie", "chicago", "phil collins", "culture club"];
var selectedWord; // Stores random-selected word
var numBlanks; // # of blanks based in "selectedWord"
var letterGuessed; // Stores the letter guessed
var lettersInWord = []; // Stores the individual letters of each word
var blanksAndSuccesses = []; // Stores mix of blanks & solved letters
var wrongGuesses = []; // Stores wrong guesses
// Game counters
var winCounter = 0;
var lossCounter = 0;
var guessesLeft = 15;
// Get Elements
var wordHolder = document.getElementById("wordToGuess");
var showGuessesLeft = document.getElementById("guesses-left");
var wrong = document.getElementById("wrong-guesses");
var win = document.getElementById("win-counter");
var loss = document.getElementById("loss-counter");
var getHint = document.getElementById("hint");
var showClue = document.getElementById("clue");
// FUNCTIONS
// =======================================================
// play() will start and restart game
function play() {
// Reset Variables
guessesLeft = 15;
blanksAndSuccesses = [];
wrongGuesses = [];
showClue.innerHTML = "";
// Solution chosen randomly from bands array
selectedWord = bands[Math.floor(Math.random() * bands.length)];
// Breaks solution word into individual letters
lettersInWord = selectedWord.split("");
// Counts the number of letters in the word
numBlanks = lettersInWord.length;
// Print solution in console (for testing)
// console.log(selectedWord);
// Fill "blanksAndSuccesses" list with appropriate number of blanks, based on number of letters in solution word
for (var i = 0; i < numBlanks; i++) {
if (lettersInWord[i] === " ") {
blanksAndSuccesses.push(" ");
} else {
blanksAndSuccesses.push("_");
}
}
// Print initial blanks in console
console.log(blanksAndSuccesses);
// Reset all HTML variables
showGuessesLeft.innerHTML = guessesLeft;
wordHolder.innerHTML = blanksAndSuccesses.join(" ");
wrong.innerHTML = wrongGuesses.join(" ");
}
// checkLetters() function - holds all comparisons for matches
function checkLetters(letter) {
// Boolean will be toggled based on if user's letter is found anywhere in the word
var letterInWord = false;
// Checks if letter exists inside the array at all
for (var i = 0; i < numBlanks; i++) {
if (selectedWord[i] === letter) {
// If letter exists, then toggle boolean to true, used in next step
letterInWord = true;
}
}
// If letter exists somewhere in word, figure out exactly where (which indices)
if (letterInWord) {
// Loop through the word
for (var i = 0; i < numBlanks; i++) {
// Populate blanksAndSuccesses with every instance of the letter
if (selectedWord[i] === letter) {
// Set specific blank space(s) to equal correct letter when there is a match
blanksAndSuccesses[i] = letter;
}
}
// Log current blanks and successes for testing
console.log(blanksAndSuccesses);
}
// If letter doesn't exist at all...
else {
// Add letter to list of wrong letters
wrongGuesses.push(letter);
// Also subtract one of the guesses
guessesLeft--;
}
}
// hint() will give hint when button is clicked
hint.onclick = function () {
hints = ["Manic Monday", "Love is a Battlefield", "Wanted: Dead or Alive", "Let's Dance", "You're the Inspiration", "Sussudio", "Karma Chameleon"];
var hintIndex = bands.indexOf(selectedWord);
showClue.innerHTML = "Clue: " + hints[hintIndex];
};
// roundComplete() function - will run necessary code after each guess is made
function roundComplete() {
// Log initial status in console re: how many wins, losses, and guesses are left
console.log("Guesses Remaining: " + guessesLeft);
// Update HTML to reflect new number of guesses
showGuessesLeft.innerHTML = guessesLeft;
// Print array of guesses and blanks onto page
wordHolder.innerHTML = blanksAndSuccesses.join(" ");
// Print wrong guesses to page
wrong.innerHTML = wrongGuesses.join(" ");
// If word guess string equals solution
if (lettersInWord.toString() === blanksAndSuccesses.toString()) {
winCounter++; // Add to the win correctGuesses
alert("You Win!"); // Give user "win" alert
// Update win correctGuesses in HTML
win.innerHTML = "Wins: " + winCounter;
// Restart game
play();
}
// if user has run out of guesses
else if (guessesLeft === 0) {
lossCounter++; // Add to loss correctGuesses
alert("You Lose!"); // Give user "lose" alert
// Update loss correctGuesses in HTML
loss.innerHTML = "Losses: " + lossCounter;
// Restart game
play();
}
}
// MAIN PROCESS
// =======================================================
// Starts game
play();
// Then initiates function for capturing key clicks
document.onkeyup = function (event) {
// captures keypress, eliminating repeat letters
if (event.keyCode >= 65 && event.keyCode <= 90) {
letterGuessed = event.key;
if (wrongGuesses.indexOf(letterGuessed) !== -1) {
alert("You already guessed that letter.");
return;
}
// Runs code to check for correct guesses
checkLetters(letterGuessed);
// Runs code that ends each round
roundComplete();
}
};
答案 0 :(得分：0)
看看两个数组的控制台输出：
lettersInWord.toString()
> "p,a,t, ,b,e,n,a,t,a,r"
blanksAndSuccesses.toString()
> "p,a,t, ,b,e,n,a,t,a,r"
所以它们不相等，因为您使用过＆nbsp;代表空间。也许尝试
// If word guess string equals solution
if (!blanksAndSuccesses.includes('_')) {