这是我正在制作的猜谜游戏的 JSfiddle:http: //jsfiddle.net/JMqxq/13/ 到目前为止一切正常,但显示剩余猜测的部分并没有按照我想要的方式工作。它从 3 开始,每次你有一个不正确的猜测时都会下降 1,这就是我想要的,但是一旦你用完猜测,我希望你恢复到 1 级,让剩余的猜测回到 3,因为你要重新开始了。它成功地开始了游戏,但计数的显示卡在 0(即使它实际上又回到了 3)。我还希望在您得到正确猜测后(向上移动一个级别),剩余的显示猜测数可以回到 3,但事实并非如此。谁能帮我解决这个问题?这是有问题的实际代码:
HTML:
<p id="result">Guess a color.</p>
<p>Remaining guesses: <span id="guesses">3</span></p>
<h2>Level <span id="level">1</span></h2>
Javascript/JQuery:
function correct(){
document.getElementById("result").innerHTML = "You are correct! Guess another color.";
level++;
reset();
}
function incorrect(){
document.getElementById("result").innerHTML = "Sorry, you are incorrect.";
guesses--;
document.getElementById("guesses").innerHTML = guesses;
if (guesses == 0){
level = 1;
reset();
document.getElementById("result").innerHTML = "Guess a color";
}
}
function reset(){
$(".box").animate({"opacity": "1"}, "slow");
guesses = 3;
temp = Math.floor((Math.random()*6)+1);
document.getElementById("level").innerHTML = level;
}
function rand(){
temp = Math.floor((Math.random()*6)+1);
$("div.box").click(function() {
if (temp == $(this).data("id")) {
correct();
} else {
$(this).animate({"opacity": "0.25"}, "slow");
incorrect();
}
});
}