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(); 。