javascript - 如何为递归循环html Canvas 添加延迟

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

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

Answer 1

您还没有真正解释游戏逻辑是什么样的。但我怀疑您可能需要做的就是将造成损坏的游戏逻辑移动到渲染之上，而不是之后。

编辑:如评论中所述，如果允许玩家生命值变为负数，它也会导致您显示的图像，在这种情况下，您可以在渲染中添加 Math.max(value,0)

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