Chrome中出现警报后如何重新加载javascript中的页面

Question

我正在浏览游戏Breakout的MDN canvas游戏教程。 当球通过球拍时，游戏应结束，页面重新加载，重新开始。

代码如下：

 if (y + dy < ballRadius) {
     dy = -dy;
 } else if(y + dy > canvas.height-ballRadius) {
     if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
     } else {
        alert("GAME OVER");
        document.location.reload();
     }
 }

在FireFox和Safari中，此操作按预期运行，在消除警报后，页面将重新加载，脚本从头开始。

但是，在Chrome中，当球碰到画布的y边界的末端并显示警报时，如果您单击Ok使其消失，该页面似乎不会重新加载。 取而代之的是，球继续移动，并且在每次迭代之后，都会显示一个新的警报（如果您单击“ Ok关闭该警报，它将继续而不会重新加载）。

任何人都知道发生了什么，为什么页面无法重新加载？

这是完整的代码

在JSFiddle中可以观察到与Chrome中相同的功能

更新：在Chrome的控制台中，如果尝试使用document.location.reload() ，则会得到undefined 。 document.location将按预期结果在localhost中。

Answer 1

调用重新加载后清除间隔。

更改setInterval(draw, 10); 到var interval = setInterval(draw, 10); 。

添加clearInterval(interval); 在document.location.reload(); 。