How to write a loop that will check if lives === 0? - html

Question

I am making a very simple html5 canvas game. I wish to make it so that when the player loses all 3 lives the game resets.
I was thinking I could do a while loop where it always checks for Lives === 0 then run a function but this breaks the game and nothing shows up on the canvas.
here is my code.
var lives = 3;
while (lives <= 0) {
var fullReset = function () {
// Throw the monster somewhere on the screen randomly
monster.x = 1 + (Math.random() * (canvas.width - 64));
monster.y = 1 + (Math.random() * (canvas.height - 64));
monster2.x = 1 + (Math.random() * (canvas.width - 100));
monster2.y = 1 + (Math.random() * (canvas.height - 100));
// player start again
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
//score resets
monstersCaught() = 0;
lives() = 3;
}
fullReset();
}

Answer 1

I think there is a conceptual bug in your approach. You start with 3 lives (initialization that is missing in your example). Then, every time the monster attacks, you reduce the lives by one and check the new value. When the new value is zero, then it is time to reset the game.
So, your loop should only handle moving your object while you would trigger an event whenever the monster attacks and apply the above logic.

Answer 2

function gameLoop() {
var lives = 3;
if(lives <= 0) {
var fullReset = function () {
// Throw the monster somewhere on the screen randomly
monster.x = 1 + (Math.random() * (canvas.width - 64));
monster.y = 1 + (Math.random() * (canvas.height - 64));
monster2.x = 1 + (Math.random() * (canvas.width - 100));
monster2.y = 1 + (Math.random() * (canvas.height - 100));
// player start again
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
//score resets
monstersCaught() = 0;
lives() = 3;
}
fullReset();
}
requestAnimationFrame(gameLoop);
}
have you tried the requestAnimationFrame() this way you might not even depend on the while loop and draw canvas over and over again with changed positions of objects everytime.

Answer 3

That isn't a very practical way to solve your problem.
I would handle that with an OnEvent trigger such as when a monster attacks or when the player touches the monster