Question

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

我正在使用

requestframeref = requestAnimationFrame(draw);

...为HTML5画布设置动画。我正在使用

cancelAnimationFrame(requestframeref);

...要停止动画，此时代码应将玩家带到赢/输屏幕。我遇到了一个错误，在该错误中获胜屏幕可以正常工作，但是几秒钟后输掉的屏幕消失了，由游戏取代了。丢失屏幕出现的时间与正方形/目标之一缩小所花费的时间大致相同，因此我想在某个时候，在内部的trgt.reset和trgt.draw方法绘制函数方法被再次调用，但是我不知道为什么。

我已经阅读了每个带有requestAnimationFrame和更多在线资源的SO问题，但似乎仍然无法深入了解-就我所知，我在trgt.hit方法和我的方法中都以相同的方式使用cancelAnimationFrame draw（）函数。

非常感谢。如果可以采取任何措施使这个问题更好/更清楚，请告诉我。

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。

取消cancelAnimationFrame被调用后，动画似乎恢复了

1 个答案: