我有一个 switch 语句,它将根据歌曲显示获胜图像。该功能有效,它只是在为下一个单词重置屏幕后显示图像。我希望它在您输入正确的单词时和屏幕重置之前显示。
我试过将它以不同的顺序放在代码中,在与警报相同的 setTimeout() 函数中,并将它放在它自己的 setTimeout() 中。在研究这个问题时,我无法提出任何其他建议。
//Global Variables===========================================================
// Used to check if the letters were already used
let lettersAlpha;
let songArr = ["caliente"];
// let songArr = ["caliente", "imposible", "bloqueo", "amanece", "desconocidos"];
let wins = 0;
let losses = 0;
let blanksAndSuccesses = [];
let userGuess;
let guessesLeft = 12;
let lettersUsed = [];
let randSong;
//Reset========================================================================
const reset = () => {
lettersAlpha = ['a', 'b', 'c',
'd', 'e', 'f',
'g', 'h', 'i',
'j', 'k', 'l',
'm', 'n', 'o',
'p', 'q', 'r',
's', 't', 'u',
'v', 'w', 'x',
'y', 'z'
];
//Erase word from last game
blanksAndSuccesses.splice(0);
//Clear the letters used last game
lettersUsed.splice(0);
//Get random song
randSong = songArr[Math.floor(Math.random() * songArr.length)];
console.log(randSong);
//Create underscores based on number of letters
for (let i = 0; i < randSong.length; i++) {
blanksAndSuccesses.push("_");
}
//Reset Game Area
$("#wordToGuess").html(blanksAndSuccesses.join(" "));
//Reset Letters Guessed
guessesLeft = 12;
$("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
$("#lettersGuessed").html("Letters Guessed: ");
};
//Check guess right/wrong
let guessChecker = userGuess => {
//True means letter is NOT used
if (
lettersAlpha.indexOf(userGuess) != -1 &&
randSong.indexOf(userGuess) != -1
) {
//Check against word
for (let i = 0; i < randSong.length; i++) {
if (userGuess === randSong[i]) {
blanksAndSuccesses[i] = userGuess;
}
}
//Remove the letter from the unused letters array
lettersAlpha.splice(lettersAlpha.indexOf(userGuess), 1);
//Update board
$("#wordToGuess").html(blanksAndSuccesses.join(" ").toUpperCase());
//Update guesses left (numGuesses)
guessesLeft--;
$("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
//Update letters guessed
lettersUsed.push(userGuess);
$("#lettersGuessed").html(
"Letters Guessed: " + lettersUsed.join(",").toUpperCase()
);
} else if (
lettersAlpha.indexOf(userGuess) != -1 &&
randSong.indexOf(userGuess) == -1
) {
//Remove from usable letters
lettersAlpha.splice(lettersAlpha.indexOf(userGuess), 1);
//Update numGuesses
guessesLeft--;
$("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
//Update letters guessed
lettersUsed.push(userGuess);
$("#lettersGuessed").html(
"Letters Guessed: " + lettersUsed.join(",").toUpperCase()
);
}
};
//Display Album Art
let winImage = function(song) {
switch (song) {
case "caliente":
console.log("Here");
$("#albumIMG").html('<img src="assets/images/caliente_album_art.jpg" />');
break;
case "imposible":
$("#albumIMG").prepend(
'<img src="assets/images/imposible_album_art.png" />'
);
break;
case "bloqueo":
$("#albumIMG").prepend(
'<img src="assets/images/bloqueo_album_art.jpg" />'
);
break;
case "desconocido":
$("#albumIMG").prepend(
'<img src="assets/images/desconocidos_album_art.jpg" />'
);
break;
case "#amanence":
$("albumIMG").prepend(
'<img src="assets/images/amenece_album_art.jpg" />'
);
}
};
//Check win condition
let winCondtion = function() {
if (blanksAndSuccesses.join("") === randSong) {
//Update wins
wins++;
$("#numWins").html(`Wins: ${wins}`);
setTimeout(function() {
winImage(randSong)
}, 1);
setTimeout(function() {
alert(`Congrats! You've won. The song was ${randSong.toUpperCase()}.`);
reset();
}, 0);
// alert(`Congrats! You've won. The song was ${randSong.toUpperCase()}.`)
} else if (guessesLeft == 0) {
//Update losses
losses++;
$("#numLosses").html(`Losses: ${losses}`);
setTimeout(function() {
alert(`Sorry! You've lost. The song was ${randSong.toUpperCase()}.`);
reset();
}, 0);
// alert(`Congrats! You've won. The song was ${randSong.toUpperCase()}.`)
//Reset game board
}
};
//Keypress function/Play Game
$(document).keyup(e => {
userGuess = e.key;
guessChecker(userGuess);
winCondtion();
});
reset();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wordToGuess"></div>
<div id="numGuesses"></div>
<div id="lettersGuessed"></div>
<div id="albumIMG"></div>
最佳答案
在 winCondtion 中的第一个 if block 中,从 setTimeout 回调中删除 winImage(randsong)
amd alert 并将 reset()
函数放在 setTimeout 中打回来。这将允许您的图像出现 - 重置将在延迟后运行,在本例中为 1000 毫秒。
let winCondtion = function() {
if (blanksAndSuccesses.join("") === randSong) {
//Update wins
wins++;
$("#numWins").html(`Wins: ${wins}`);
alert(`Congrats! You've won. The song was ${randSong.toUpperCase()}.`);
winImage(randSong)
setTimeout(() => {
reset();
}, 1000);
} else if (guessesLeft == 0) {
//Update losses
losses++;
$("#numLosses").html(`Losses: ${losses}`);
alert(`Sorry! You've lost. The song was ${randSong.toUpperCase()}.`);
}
};
关于 setTimeout 的更多信息:https://javascript.info/settimeout-setinterval
关于javascript - 在 Hangman Game 中屏幕重置后显示我的获胜图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55288092/