Question

所以我的问题是我想插入一个自定义动画，但我不想破坏我的游戏循环。

我的初始游戏循环在这里说明：

function init(){

      if(!gameOver){
        if(resetInterval>-1) clearInterval(resetInterval);
        createBlock();
        resetInterval = setInterval(moveDownCheck,gameSpeed);
      }
    }

我的游戏是类似游戏的俄罗斯方块，除了不丢弃tetriminos，我丢弃2x1不同颜色的块。 moveDownCheck方法检查我的2x1块下是否有任何块，然后将其丢弃1行。这样可以正常工作，直到我连接了一块没有块的块，因为连接了2x1块。我想插入一个大约需要一秒钟的拖放动画，然后将挂起块拖放相同的gameSpeed增量。这是我的尝试不起作用：

function moveFallingDown(){
      fbDownFlag = false;
      clearInterval(resetInterval);
      fbInterval = setInterval(function(){
        fallingBlock.row++;
        console.log("Dropped One Row");
        },gameSpeed);
      while(landscape[fallingBlock.row+1][fallingBlock.col]==0){
        console.log("Waiting to Drop Falling Block");
      }
      clearInterval(fbInterval);
      resetInterval = setInterval(moveDownCheck,gameSpeed);
}

我试图等待function(){fallingBlock.row++;}，但我的游戏只是崩溃而且在控制台"Dropped One Row"中"Waiting to Drop Falling Block"会显示数千次。我想我不应该在这里使用while循环，但我能想到的唯一其他解决方案是完全重新设计我的设计，或者嵌套的setInterval方法会让我的头部受到太大的伤害。

Answer 1

你不能用while循环执行此操作，需要使用递归函数。 window.setTimeout可行，但这似乎是requestAnimationFrame的一个很好的用例。请在此处查看：https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

您可以使用它来调用moveFallingDown方法，并检查自上一个动画帧以来经过多长时间，根据游戏速度将动画移动到正确的数量，方法是使用传递给它的高精度时间戳。 requestAnimationFrame回调。

Answer 2

@Adrien Delessert的建议是正确的，但我只是补充一点，你肯定会混淆setTimeout和setInterval。

首先，您不需要while循环。

setInterval是一个循环。因此，如果你想使用它，你需要（基本上）将整个游戏包装在一个向前移动游戏的方法中（无论这意味着什么）并将其传递给setInterval。

然而，你正在做的事情（这实际上并不是一种可怕的方法）是用它作为动画特定事物的手段。在这种情况下，如果满足另一轮动画的条件，你应该有一个递归（ish）函数，当它完成时一直调用setTimeout。

我从来没有使用过requestAnimationFrame，但这听起来像是一个更优雅的问题解决方法。

它更好的原因是它利用浏览器自己的刷新计时器（大约每秒60次）并将动画帧插入其自己的刷新。

所以是的，你会听取那个回调，然后在必要时做出反应。如果每秒60x太快，您需要在基于％的计数器中输入您希望实际响应的帧数。

等待SetInterval游戏循环中的动画

2 个答案: