javascript - 初めての h5 キャンバス ゲームに取り組んでいますが、ゲーム ループに問題があります (snake)

Question

ゲームループはこんな感じです。setInterval() を介して設定するだけで、画面をクリアして hud を描画することから始まります。動きを計算し、すべてを描画し、衝突をチェックした後 (私はこれらで問題はありませんでした)、プレーヤーが負けたらゲームを再開できることを望んでいました。

現在のところ、window.location.reload() を呼び出してスタート メニューに戻るだけです。プレイヤーは、壁にぶつかったり、自分自身と衝突したりすると負けになります。

これは checkcollision() 関数で計算され、 clearInterval(game); を試しました。そしてそれはほとんど機能しません。ゲームループ内にある checkcollision() に関係があると思い、一連の return ステートメントを使用してみました。それはうまくいきませんでした。また、ゲームの統計と関数 (スコアなど) をゲーム オブジェクトに移動し、新しいゲーム オブジェクトを作成してゲームを再起動しようとしました。しかし、同じ参照であっても、それらをオーバーラップさせただけです。

私は非常に混乱しており、間違った道を進みすぎたのではないかと思っています。私はそれが正常に動作することを意味します (chome/safari/ff で、canvas を IE で動作させる方法はありますか?) しかし、適切な一時停止/再起動システムを取得したいだけです。

これが私のコードですが、これまでに取り組んだことをチェックして、ここで完全なコードを調べることもできます

var game=setInterval(function(){
                ctx.clearRect(0,0,c.width,c.height);
                if(score>localStorage.highscore){localStorage.highscore=score}
                hud();
                snakeMove();
                draw();
                checkCollision();
                },1000/60);