I am attempting to reset the state of the game. However, when I call on the event listener that triggers the start of the game, I get caught in a state between the endstate and the beginning state.
The animation is frozen. The end-game menu displays, and I request the user to press a button in order to start a new game.
In the new game, the old end game frame persists within the animation.
Post any code you think might be relevant (one fenced block per file)
function countDownTimer () {
let oneMinute = 60
setInterval(() => {
timeBoard.innerText = oneMinute.toString()
oneMinute--
if (oneMinute <= 0) {
timeBoard.innerText = "Times Up."
clearInterval(countDownTimer)
//! END GAME LOOP
cancelAnimationFrame(animation)
endGameMenu()
}
}, 1000);
}
countDownTimer();
//! END GAME MENU
function endGameMenu(){
ctx.fillStyle = "#000000"
ctx.font = "40px Fira Mono"
ctx.textAlign = 'center';
ctx.fillText(`Your Score Was: ${clickScore}`, canvas.width / 2, canvas.height / 3);
ctx.fillText(`Your Missed: ${missTargets.length} times.`, canvas.width / 2, canvas.height / 2);
ctx.fillText(`Press Spacebar to Play again.`, canvas.width / 2, canvas.height / 1.5);
ctx.clearRect(0, 0, canvas.width, canvas.height)
}
If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?
No error messages. The unexpected behavior I am seeing is that clearRect should be wiping the endgamestate frame away, but it persists in the background even though i've stopped animating the game.
What is your best guess as to the source of the problem?
I am not resetting state correctly.
What things have you already tried to solve the problem?
I have attempted to clear the display. I have attempted to write a function that would bring us back to the beginning of the loop. I am unsure how to reset state for the game.
What's the problem you're trying to solve?
I am attempting to reset the state of the game. However, when I call on the event listener that triggers the start of the game, I get caught in a state between the endstate and the beginning state.
The animation is frozen. The end-game menu displays, and I request the user to press a button in order to start a new game. In the new game, the old end game frame persists within the animation.
Post any code you think might be relevant (one fenced block per file)
If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?
No error messages. The unexpected behavior I am seeing is that clearRect should be wiping the endgamestate frame away, but it persists in the background even though i've stopped animating the game.
What is your best guess as to the source of the problem?
I am not resetting state correctly.
What things have you already tried to solve the problem?
I have attempted to clear the display. I have attempted to write a function that would bring us back to the beginning of the loop. I am unsure how to reset state for the game.