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

Question

我运行通过了游戏Breakout的MDNcanvas游戏教程。当球越过桨时，游戏应该结束并且页面重新加载，重新开始。

代码如下所示：

 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 中，在球击中 canvas 的 y 边界的末端并显示警报后，如果您击中 Ok关闭它，页面似乎没有重新加载。相反，球会继续移动，并且在每次迭代后都会显示一个新警报（如果您使用 Ok 关闭它，它会继续而不会重新加载）。

有人知道发生了什么事以及为什么页面不会重新加载吗？

Here's the full code

可以在 JSFiddle

中观察到与 Chrome 中相同的功能

Update: In the console in Chrome, if I try document.location.reload() I get undefined. document.location results in localhost as expected.

Answer 1

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

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

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

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

How to reload page in javascript after an alert in Chrome

javascript

google-chrome

reload

ecmascript-5