在cancelAnimationFrame被调用之后，动画似乎恢复了

Question

我正在教自己如何编码，并编写了一个小鼠标精确游戏。为了测试的目的，当用户的分数(精确点击收缩框)达到3时，他们就赢了(转到win屏幕)。如果两个框消失了，那么用户就会丢失(转到一个丢失的屏幕)。

这是我在JSFiddle上的游戏。

我在用

requestframeref = requestAnimationFrame(draw);

...to将HTML5画布动画化。我在用

cancelAnimationFrame(requestframeref);

...to停止动画，此时代码应该将播放器带到一个双赢的屏幕上。我遇到了一个错误，其中的胜利屏幕工作良好，但几秒钟后，失去屏幕消失，并被取代的游戏。显示丢失屏幕所需的时间与其中一个方块/目标缩小所需的时间大致相同，因此我设想，在某个时候，正在再次调用绘图函数方法中的trgt.reset和trgt.draw方法，但我无法确定原因。

我已经阅读了每一个以requestAnimationFrame和更多的在线资源为特色的问题，但似乎仍然无法理解这一点--据我所见，我在cancelAnimationFrame方法和cancelAnimationFrame()函数中使用的方式都是相同的。

在此之前，非常感谢您。如果有什么我可以做的，使这个问题更好/更清楚，那么请告诉我。

Answer 1

这个问题很简单:即使玩家输了游戏，你也要再次打电话给draw。

if (disses == dissesMax) {
  cancelAnimationFrame(requestframeref);
  scene_lose();
}

应改为

if (disses == dissesMax) {
  cancelAnimationFrame(requestframeref);
  return scene_lose();
}

问题是在if ( dissess == dissesMax ) { .. }之后不久，您将调用requestframeref = requestAnimationFrame(draw); //add movement，它将重新启动游戏。

将return添加到if饱和可以确保如果满足了失败条件，您就不会用玩游戏状态重新调用draw。