Я пытаюсь создать игру для палача для курса веб-разработчиков. У меня это в основном работает, но когда вы вводите последнюю букву, она отображается на консоли, но не на экране и выдает предупреждение о том, что вы выиграли. Точно так же, если у вас заканчиваются догадки, он никогда не показывает 0 оставшихся догадок. Это просто указывает на то, что вы потеряли, и показывает 1 предположение.
github: https://github.com/PSpraggins/patricia-spraggins-prework/tree/master/Module-2_Assessment
Вот мой игровой объект (здесь не показаны некоторые глобальные переменные и слушатель событий):
//game object
const hangman = {
//artist names to be guessed
words: [
"BLAKE SHELTON",
"JASON ALDEAN",
"TIM MCGRAW",
"MIRANDA LAMBERT",
"CARRIE UNDERWOOD",
"KEITH URBAN",
"GARTH BROOKS",
"DOLLY PARTON",
"WILLIE NELSON",
"GEORGE STRAIT"
],
//songs to play after winning guess
songs: [
"GOD GAVE ME YOU BY BLAKE SHELTON",
"DIRT ROAD ANTHEM BY JASON ALDEAN",
"HUMBLE AND KIND BY TIM MCGRAW",
"THE HOUSE THAT BUILT ME BY MIRANDA LAMBERT",
"SOMETHING IN THE WATER BY CARRIE UNDERWOOD",
"COP CAR BY KEITH URBAN",
"FRIENDS IN LOW PLACES BY GARTH BROOKS",
"JOLENE BY DOLLY PARTON",
"ALWAYS ON MY MIND BY WILLIE NELSON",
"LOVE WITHOUT END, AMEN BY GEORGE STRAIT"
],
wins: 0,
guessesRemaining: 12,
//method to return the current word
//checks to see if it is the last word to display it
currentWord: function () {
if(num > this.words.length - 1){
imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
this.words[this.words.length - 1]
}.jpg" alt= "image of ${
this.words[this.words.length - 1]
}">`;
songTitle.innerText = this.songs[this.words.length - 1];
audio.src = `assets/songs/${songTitle.innerText}.mp3`;
num = 0;
this.guessesRemaining = 12;
displayFirst = [];
displayLast = [];
}
return this.words[num];
},
//start method to set up first word with hangman image
start: function () {
imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/HANGMAN.jpg" alt= "image of hangman game">`;
guessesRemainingId.innerText = this.guessesRemaining;
this.wordDisplay(this.currentWord());
},
//wordDisplay method displays the spaces for each word
wordDisplay: function (currentWord) {
displaySpaces = ' ';
wordSpaces.innerText = '';
word = currentWord.split(" ");
firstName = word[0];
lastName = word[1];
for (let i = 0; i < firstName.length; i++) {
displayFirst.push(' _ ');
}
for (let i = 0; i < lastName.length; i++) {
displayLast.push(' _ ');
}
displaySpaces = displayFirst.join("") + '\n' + displayLast.join("");
wordSpaces.innerText = displaySpaces;
},
//updateWordDisplay method puts letters where they belong after each letter guess
updateWordDisplay: function (letter) {
for(let i = 0; i < firstName.length; i++){
if (firstName[i] === letter) {
displayFirst[i] = letter;
}
}
for(let i = 0; i < lastName.length; i++){
if(lastName[i] === letter){
displayLast[i] = letter;
}
}
displaySpaces = displayFirst.join("") + '\n' + displayLast.join("");
wordSpaces.innerText = displaySpaces;
console.log(wordSpaces.innerText);
this.winnerOrLoser();
},
//guess method makes the letter pressed uppercase and checks to see if it is in the
//word and then determines if you have completed the word and won
guess: function (event) {
let letter = event.key.toUpperCase();
this.lettersArr(letter);
},
//checks to see if there is a win or loss
//****should decide after it updates on the screen, but it still goes into win and lose
//****before the last letter pops up or it shows 0 guesses.
winnerOrLoser: function(){
if(!displaySpaces.includes('_')){
this.win();
} else if (this.guessesRemaining < 1) {
this.lose();
}
},
//lettersArr method updates the letters guessed area on the screen to show
//player which letters they have guessed
//also prevents guessing a letter more than once
lettersArr: function (letter) {
// console.log("lettersArr: " + letter);
if (! lettersGuessed.innerText.includes(letter)) {
lettersGuessed.innerText += letter;
this.guessesRemaining = this.guessesRemaining - 1;
guessesRemainingId.innerText = this.guessesRemaining;
this.updateWordDisplay(letter);
console.log("lettersArr: " + letter);
console.log(guessesRemainingId.innerText + " guesses left");
}
},
//win method alerts player they won and resets the board with the next word
win: function () {
console.log("win");
alert(`Winner! ${firstName} ${lastName} was correct!`);
this.wins += 1;
winsTotal.innerText = this.wins;
num++;
displayFirst = [];
displayLast = [];
this.currentWord();
this.guessesRemaining = 12;
guessesRemainingId.innerText = this.guessesRemaining;
this.lettersGuessed = [];
lettersGuessed.innerText = '';
this.wordDisplay(this.currentWord());
if (num === 0){
imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
this.words[this.words.length - 1]
}.jpg" alt= "image of ${
this.words[this.words.length - 1]
}">`;
songTitle.innerText = this.songs[this.words.length - 1];
} else {
imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
this.words[num - 1]
}.jpg" alt= "image of ${
this.words[num - 1]
}">`;
songTitle.innerText = this.songs[num - 1];
}
audio.src = `assets/songs/${songTitle.innerText}.mp3`;
},
//lose method alerts player if they lose and resets the board for the current word
lose: function(){
alert(`Sorry, You lost that one. ${firstName} ${lastName} was the correct answer.`);
num++;
displayFirst = [];
displayLast = [];
this.currentWord();
this.guessesRemaining = 12;
guessesRemainingId.innerText = this.guessesRemaining;
this.lettersGuessed = [];
lettersGuessed.innerText = '';
this.wordDisplay(this.currentWord());
if(num === 0) {
imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
this.words[this.words.length - 1]
}.jpg" alt= "image of ${
this.words[this.words.length - 1]
}">`;
} else {
imgDiv.innerHTML = `<img class= "img-fluid" src= "assets/images/${
this.words[num - 1]
}.jpg" alt= "image of ${
this.words[num - 1]
}">`;
}
}
}