How to add a delay to recursive loop html canvas

Question

I have this game loop where I have a red rectangle and a yellow rectangle on top of it. When a player takes damage, the yellow rectangle's width decreases because it is based on player's life. When player's life reaches zero he loses the game and all animations are cancelled. The issue I am having is that because the loop is so quick, the yellow rectangle does not have time to lower the life to zero and a bit of it is left on the screen when the animations are cancelled. For that reason I need to add a bit of delay before cancelling the animations. Thanks guys.

// DECREASE PLAYER LIFE AND DELETE ENEMY IF IT COLIDES WITH PLAYER
    enemyArray.forEach(function(enemy) {
    if (collides(player, enemy)) {
        player.life += -10;
        enemy.delete();
    }
    });

      // ANIMATION LOOP

      function animate(currentTime) {
        const animation = requestAnimationFrame(animate);
        c.clearRect(0, 0, canvas.width, canvas.height);



        // PLAYER LIFE
        // RED REC
        c.beginPath();
        c.rect(20, 20, 150, 30);
        c.fillStyle = "red";
        c.fillRect(10, 30, 200, 20);
        // YELLOW REC
        c.beginPath();
        c.rect(20, 20, 150, 30);
        c.fillStyle = "yellow";
        c.fillRect(10, 30, player.life, 20);


        // END GAME

       //I need some delay here so that fillRect has time to decrease the yellow bar to 0;
        if (player.life <= 0) {
          console.log("You Lose");
          music.pause();
          paused = true;
          cancelAnimationFrame(animation);
        }
      }
      animate();

Image of player life bar when animations are canceled. There is a bit left still.

It might be that player.life is a non 0, something like a negative number which will cause a visible render. Add this line before cancelAnimationFrame, c.fillRect(10, 30, 0, 20); — Rosmarine Popcorn
– Rosmarine Popcorn, Commented Feb 8, 2019 at 0:52
Hi Burimi, player's life is a variable that I set to be equal 50 and for each hit player takes from enemies, it loses 10 life. So it will never be a negative number. I also logged player life to make sure there no weird thing going on and there isn't. — Randal Andrade Nunes
– Randal Andrade Nunes, Commented Feb 8, 2019 at 1:10

visibleman · Accepted Answer · 2019-02-08 02:23:53Z

1

You haven't really explained what the game logic looks like. But I suspect perhaps all you need to do is to move the game logic that is causing damage to above the rendering, instead of after.

Edit: As mentioned in the comments, if player life is allowed to turn negative, it can also cause the image you are showing, in that case you can add a Math.max(value,0) to the render

 // ANIMATION LOOP

  function animate(currentTime) {
    const animation = requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);

    // Move game logic that decreases player life to here.

    // PLAYER LIFE
    // RED REC
    c.beginPath();
    c.rect(20, 20, 150, 30);
    c.fillStyle = "red";
    c.fillRect(10, 30, 200, 20);
    // YELLOW REC
    c.beginPath();
    c.rect(20, 20, 150, 30);
    c.fillStyle = "yellow";
    c.fillRect(10, 30, Math.max(player.life,0) , 20); // prevent negative value


    // Is game logic that decreases player life here?
    // END GAME

   //I need some delay here so that fillRect has time to decrease the yellow bar to 0;
    if (player.life <= 0) {
      console.log("You Lose");
      music.pause();
      paused = true;
      cancelAnimationFrame(animation);
    }
  }
  animate();

Typically you would organize your code something like this.

var paused=false;
  // Game Logic
function update()
{
  enemyArray.forEach(function(enemy) {
  if (collides(player, enemy)) {
      player.life += -10;
      enemy.delete();
  }
  });
  if (player.life <= 0) {
    console.log("You Lose");
    music.pause();
    paused = true;
  }
}
// Render
function draw()
{
  c.clearRect(0, 0, canvas.width, canvas.height);
  // PLAYER LIFE
  // RED REC
  c.beginPath();
  c.rect(20, 20, 150, 30);
  c.fillStyle = "red";
  c.fillRect(10, 30, 200, 20);
  // YELLOW REC
  c.beginPath();
  c.rect(20, 20, 150, 30);
  c.fillStyle = "yellow";
  c.fillRect(10, 30, Math.max(player.life,0) , 20); // prevent negative value
}
 
 // Animation Loop
function animate(currentTime) {
  update();
  draw();
  if (!paused)
    const animation = requestAnimationFrame(animate);
}
animate();

edited Feb 8, 2019 at 2:23

answered Feb 8, 2019 at 0:53

visibleman

3,3251 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Randal Andrade Nunes Over a year ago

Hello visibleman, below you can see the logic that damages player on collision with enemy (enemies don't shoot at players yet). Since it is a forEach, I don't think I can put it inside the loop. I am going to try though. By the way, is there a way to delay this animation cancelling like I asked? (code doesnt look good here, I will add it to my question.

visibleman Over a year ago

@RandalAndrade, I updated with an example of how you can reorganize your game loop.

Collectives™ on Stack Overflow

How to add a delay to recursive loop html canvas

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related