编写一个简单的字母猜谜游戏,一切正常,但是当剩余的猜谜数变为“ 0”时,它不会显示“ 0”,但是会显示在控制台日志中。没什么大不了,只是想了解我在做错了还是干脆不做。链接:https://groscoe42.github.io/Psychic-Game/代码如下
$(document).ready(function() {
var wins = 0;
var losses = 0;
var remain = 10;
var choices = [
"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",];
var compChoice = choices[Math.floor(Math.random() * choices.length)]
var answer = compChoice;
var wShow = document.getElementById("w");
var lShow = document.getElementById("l");
var rShow = document.getElementById("r");
var gShow = document.getElementById("iGuess");
console.log("C: " + compChoice);
document.onkeyup = function (_event) {
var userGuess = _event.key;
if (userGuess == "a" || userGuess == "b" || userGuess == "c" || userGuess == "d" || userGuess == "e" || userGuess == "f" || userGuess == "g" || userGuess == "h" || userGuess == "i" || userGuess == "j" ||
userGuess == "k" || userGuess == "l" || userGuess == "m" || userGuess == "n" || userGuess == "o" || userGuess == "p" || userGuess == "q" || userGuess == "r" || userGuess == "s" || userGuess == "t" ||
userGuess == "u" || userGuess == "v" || userGuess == "w" || userGuess == "x" || userGuess == "y" || userGuess == "z") {
console.log("g: " + userGuess)
if (userGuess == compChoice) {
alert("Correct! The letter was " + answer + " !");
wins++;
wShow.textContent = wins;
console.log("w " + wins);
// reset
compChoice = choices[Math.floor(Math.random() * choices.length)];
remain = 10;
rShow.textContent = remain;
$("#iGuess").empty();
console.log("C: " + compChoice);
}
else {
// display guess
remain--;
rShow.textContent = remain;
$("#iGuess").append(userGuess + ", ");
console.log("r " + remain);
if (remain === 0) {
rShow.textContent = remain;
losses++;
lShow.textContent = losses;
alert("So close! The letter was " + answer + " !");
console.log("l " + losses);
// reset
compChoice = choices[Math.floor(Math.random() * choices.length)];
remain = 10;
rShow.textContent = remain;
$("#iGuess").empty();
console.log("C: " + compChoice);
};
};
}
else {
alert("Invalid Input!");
};
}; })
答案 0 :(得分:0)
您的alert
正在阻止浏览器-在显示警告框的同时,浏览器无法执行其他任何操作,包括Javascript和窗口重新绘制。因此,即使您将textContent
设置在alert
上方,浏览器也没有机会在alert
出现并阻止所有内容之前进行渲染。最好的解决方案是使用propal modal代替alert
(这对用户非常不友好),但是另一种选择是让alert
在之后出现下一个requestAnimationFrame
(这将使浏览器有机会重新绘制):
if (remain === 0) {
rShow.textContent = remain;
losses++;
lShow.textContent = losses;
window.requestAnimationFrame(() => {
setTimeout(() => {
alert("So close! The letter was " + answer + " !");
console.log("l " + losses);
// reset
compChoice = choices[Math.floor(Math.random() * choices.length)];
remain = 10;
rShow.textContent = remain;
$("#iGuess").empty();
console.log("C: " + compChoice);
});
});
}
$(document).ready(function() {
var wins = 0;
var losses = 0;
var remain = 10;
var choices = [
"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",
];
var compChoice = choices[Math.floor(Math.random() * choices.length)]
var answer = compChoice;
var wShow = document.getElementById("w");
var lShow = document.getElementById("l");
var rShow = document.getElementById("r");
var gShow = document.getElementById("iGuess");
console.log("C: " + compChoice);
document.onkeyup = function(_event) {
var userGuess = _event.key;
if (userGuess == "a" || userGuess == "b" || userGuess == "c" || userGuess == "d" || userGuess == "e" || userGuess == "f" || userGuess == "g" || userGuess == "h" || userGuess == "i" || userGuess == "j" ||
userGuess == "k" || userGuess == "l" || userGuess == "m" || userGuess == "n" || userGuess == "o" || userGuess == "p" || userGuess == "q" || userGuess == "r" || userGuess == "s" || userGuess == "t" ||
userGuess == "u" || userGuess == "v" || userGuess == "w" || userGuess == "x" || userGuess == "y" || userGuess == "z") {
console.log("g: " + userGuess)
if (userGuess == compChoice) {
alert("Correct! The letter was " + answer + " !");
wins++;
wShow.textContent = wins;
console.log("w " + wins);
// reset
compChoice = choices[Math.floor(Math.random() * choices.length)];
remain = 10;
rShow.textContent = remain;
$("#iGuess").empty();
console.log("C: " + compChoice);
} else {
// display guess
remain--;
rShow.textContent = remain;
$("#iGuess").append(userGuess + ", ");
console.log("r " + remain);
if (remain === 0) {
rShow.textContent = remain;
losses++;
lShow.textContent = losses;
window.requestAnimationFrame(() => {
setTimeout(() => {
alert("So close! The letter was " + answer + " !");
console.log("l " + losses);
// reset
compChoice = choices[Math.floor(Math.random() * choices.length)];
remain = 10;
rShow.textContent = remain;
$("#iGuess").empty();
console.log("C: " + compChoice);
});
});
}
};
} else {
alert("Invalid Input!");
};
};
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Psychic Game</h1>
<div>
<h3>I've chosen a letter A-Z, can you guess it?</h3>
<br>
<div>Wins:
<div id="w"></div>
</div>
<div>Losses:
<div id="l"></div>
</div>
<div>Guesses Remaining:
<div id="r"></div>
</div>
<div>Your Guesses:
<div id="iGuess"></div>
</div>
</div>