我已经一遍又一遍地检查代码。我试图用JQuery显示最终的游戏屏幕(结果屏幕),然后再次通过定义全局变量来显示。我把它称为另一个函数的一部分,并且在它自己的函数中。我想出来的任何组合都不会显示我的最终结果屏幕。
var welcome = $("#welcome-screen")
var gameOver = $("#result-screen")
var game = $("#game-screen")
var playerInteract = {
correctAnswers: 0,
incorrectAnswers: 0,
unanswered: 8,
seconds: 10,
//done: false,
welcome: function() {
gameOver.toggle();
game.hide();
},
initiate: function() {
welcome.hide();
game.show();
playerInteract.timer();
},
timer: function() {
var windowTimeout = setTimeout(function() {
//playerInteract.gameOver()
game.hide()
playerInteract.answerCheck()
playerInteract.gameOverLoad()
}, 10000);
var intervalVariable = setInterval(playerInteract.decrement, 1000);
var seconds = playerInteract.seconds;
},
decrement: function () {
if (playerInteract.seconds >= 2) {
playerInteract.seconds--;
console.log("seconds: " + playerInteract.seconds);
$("#countdown").text(playerInteract.seconds);
}
},
gameOverLoad: function() {
gameOver.show();
console.log("gameover");
}
};
window.onload = playerInteract.welcome;
$("#start-button").on("click", function(event) {
//event.preventDefault()
playerInteract.initiate()
});
$("#countdown").text(playerInteract.seconds);
<----HTML--->
<div id="welcome-screen" class="container">
<img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">
<h1>Take a stab at it!</h1>
<button id=start-button><h2>STAB!</h2></button>
</div>
<div id="game-screen" class="container">
<img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">
<h2>Take a stab at it!</h2>
<h3>Time Remaining: <div id="countdown"></div></h3>
<img id="penny" src="assets/images/penny.png" alt="Pennywise the clown.">
<h4>What's the name of the killer clown in Stephen King's novel, <em>IT</em>?</h4>
<div class="answer-boxes">
<input type="radio" name="q1" class="radio-button" id="wrongA"> Torchy
<input type="radio" name="q1" class="radio-button" id="wrongB"> Quarterdumb
<input type="radio" name="q1" class="radio-button" id="correct1"> Pennywise
<input type="radio" name="q1" class="radio-button" id="wrongC"> Boinko
</div>
<img id="georgie" src="assets/images/georgie.png" alt="Georgie from 'It'">
<h4>Which King protagonist went crazy and killed<br> most of her classmates and teachers during prom?</h4>
<div class="answer-boxes">
<input type="radio" name="q2" class="radio-button" id="wrongD"> Sandy
<input type="radio" name="q2" class="radio-button" id="wrongE"> Dolores
<input type="radio" name="q2" class="radio-button" id="wrongF"> Sherrie
<input type="radio" name="q2" class="radio-button" id="correct2"> Carrie
</div>
<h4>Stephen King regularly contributed to <em>Dave's Rag</em> in high school.</h4>
<div class="answer-boxes">
<input type="radio" name="q3" class="radio-button" id="correct3"> True
<input type="radio" name="q3" class="radio-bitton" id="wrongG"> False
</div>
<h4>What year and model car was featured <br>in the movie <em>Christine</em> based on a Stephen King book?</h4>
<div class="answer-boxes">
<input type="radio" name="q4" class="radio-button" id="wrongH"> 1962 Ford Mustang
<input type="radio" name="q4" class="radio-button" id="wrongI"> 1957 Chevy Chevelle
<input type="radio" name="q4" class="radio-button" id="wrongJ"> 1951 Jaquar XK 120
<input type="radio" name="q4" class="radio-button" id="corrcet4"> 1958 Plymouth Fury
</div>
<h4>Mike Hanlon made seven phone calls in Stephen King's novel, <em>IT</em>.</h4>
<div class="answer-boxes">
<input type="radio" name="q5" class="radio-button" id="wrongK"> True
<input type="radio" name="q5" class="radio-button" id="correct5"> False
</div>
<h4>What's the name of Stephen King's western/fantasy saga?</h4>
<div class="answer-boxes">
<input type="radio" name="q6"class="radio-button" id="correct6"> <em>The Dark Tower</em>
<input type="radio" name="q6"class="radio-button" id="wrongL"> <em>The Darkest Hour</em>
<input type="radio" name="q6"class="radio-button" id="wrongM"> <em>The Dark Knight</em>
<input type="radio" name="q6"class="radio-button" id="wrongN"> <em>The Dark Travels</em>
</div>
<h4>Which of the below is a Stephen King pseudonym?</h4>
<div class="answer-boxes">
<input type="radio" name="q7" class="radio-button" id="wrongO"> Dick Hallorann
<input type="radio" name="q7" class="radio-button" id="correct7"> Richard Bachman
<input type="radio" name="q7" class="radio-button" id="wrongP"> Sam Paul
<input type="radio" name="q7" class="radio-button" id="wrongQ"> Benjamin Sanders
</div>
<h4>One of Stephen King's jobs prior to publication was as a high school teacher.</h4>
<div class="answer-boxes">
<input type="radio" name="q8" class="radio-button" id="correct8"> True
<input type="radio" name="q8" class="radio-button" id="wrongR"> Flase
</div>
<div id="result-screen" class="container">
<img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">
<h1>All Done!</h1>
<h4>Correct Answers: <div id="correct-answers"></div></h4>
<h4>Incorrect Answers: <div id="incorrect-answers"></div></h4>
<h4>Unanswered: <div id="unanswered"></div></h4>
</div>
我从JS中删除的唯一代码是answerCheck函数。
setTimeout结束后,我希望隐藏游戏屏幕,并显示结果屏幕。隐藏、显示、切换代码中的所有工作,直到超时结束。
游戏屏幕隐藏起来,只剩下背景可见。控制台。log将游戏打印到日志运行。控制台中没有错误。