JSでブロック崩しを作りました

作り方は公式のサイトを参考にしました。
https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript

わからなかった所を書いていきます。
まず、パドルの操作で一つ分からなかった所がるんですが、まずは以下のコードを見てください

canvas1.jsが公式のコードでcanvas2.jsが自分が書いたコードです。
パドルを操作すれば分るんですが、自分のコードではパドルがカクカクするんですよね。
どっちのコードでもキーを離したら止まって、またキーを押したら動くという過程は同じはずなんですけどね。この違いってなんなんですかね。

次にゲームオーバーの所です

const Draw = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    DrowBall()
    DrowPaddle()

    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }

    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()
            return //ここを書かないとalertが出続け、リロードが終わらない
        }
    }

    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7
    }

    x += dx
    y += dy
    requestAnimationFrame(Draw)
}
Draw()

公式のコードではreturnしなくてもリロード出来ていたんですが、自分の場合はreturnしないとalertが出続け、リロードが終わらない状態になりました。
setInterval()と requestAnimationFrame()の違いなんでしょうか？
ちなみに、returnを消してcancelAnimationFrame(Draw)を試しましたがダメでした。