Как добавить задержку в рекурсивный цикл HTML-холст

Question

У меня есть этот игровой цикл, где у меня есть красный прямоугольник и желтый прямоугольник поверх него.Когда игрок получает урон, ширина желтого прямоугольника уменьшается, потому что он основан на жизни игрока.Когда жизнь игрока достигает нуля, он проигрывает игру, и все анимации отменяются.Проблема, с которой я столкнулся, заключается в том, что из-за того, что цикл очень быстрый, у желтого прямоугольника нет времени понизить жизнь до нуля, и ее часть остается на экране при отмене анимации.По этой причине мне нужно добавить немного задержки перед отменой анимации.Спасибо, ребята.

// 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();

Изображение строки жизни игрока, когда анимация отменена.Еще немного осталось.

Answer 1

Вы действительно не объяснили, как выглядит игровая логика.Но я подозреваю, что, возможно, все, что вам нужно сделать, это переместить игровую логику, которая наносит ущерб выше уровня рендеринга, а не после.

Редактировать: Как упоминалось в комментариях, если жизнь игрока может стать отрицательной, это также может привести к изображению, которое вы показываете, в этом случае вы можете добавить Math.max (значение, 0) к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();

Обычно вы бы организовали свой код примерно так.

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();