取消后动画似乎恢复动画帧被调用

Question

我正在自学编码，并编写了一个小型鼠标精度游戏。出于测试目的，当用户的分数(准确点击缩小框(达到 3 时，他们获胜(转到获胜屏幕(。如果 2 个框消失，则用户丢失(转到丢失屏幕(。

这是我在JSFiddle上的游戏。

我正在使用

requestframeref = requestAnimationFrame(draw);

。为 HTML5 画布添加动画效果。我正在使用

cancelAnimationFrame(requestframeref);

。以停止动画，此时代码应将玩家带到赢/输屏幕。我遇到了一个错误，获胜屏幕工作正常，但几秒钟后丢失的屏幕消失并被游戏取代。丢失屏幕出现的时间与其中一个方块/目标缩小所需的时间大致相同，因此我想在某些时候再次调用绘制函数方法中的trgt.reset和trgt.draw方法，但我无法弄清楚原因。

我已经阅读了每个以requestAnimationFrame和更多在线资源为特色的SO问题，但似乎仍然无法深入了解这一点 - 据我所知，我在trgt.hit方法和draw((函数中使用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。