fix(snake): improve restart experience and resolve concurrent background loops

Author: Mudita-Singh

web-app/js/projects/snake.js

@@ -188,6 +188,9 @@ const CONFIG_DIFFICULTY = {
 };
 
 function main(ctime) {
+    const canvas = document.getElementById('snakeCanvas');
+    if (!canvas) return; // Exit loop if the game modal has been closed
+    
     window.requestAnimationFrame(main);
     if ((ctime - lastPaintTime) / 1000 < 1 / speed) {
         return;
@@ -285,6 +288,18 @@ function gameEngine() {
     ctx.fillRect(food.x * 20, food.y * 20, 18, 18);
 }
 
+function restartGame() {
+    const selector = document.getElementById('difficultySelect');
+    applyDifficultySettings();
+    if (selector) selector.disabled = true;
+    document.getElementById('game-over-overlay').classList.add('hidden');
+    direction = { x: 1, y: 0 };
+    snakeArr = [{ x: 13, y: 10 }];
+    score = 0;
+    document.getElementById('score').innerHTML = score;
+    food = { x: 6, y: 7 };
+}
+
 // Initialize execution listeners
 function initSnakeGame() {
     window.requestAnimationFrame(main);
@@ -304,21 +319,13 @@ function initSnakeGame() {
         applyDifficultySettings();
         // Prevent changing parameter matrices on an active engine run
         if (selector) selector.disabled = true;
+        document.getElementById('game-over-overlay').classList.add('hidden');
         direction = { x: 1, y: 0 }; // Start moving right
     });
 
-    document.getElementById('restartSnakeBtn').addEventListener('click', () => {
-        location.reload();
-    });
+    document.getElementById('restartSnakeBtn').addEventListener('click', restartGame);
 
-    document.getElementById('overlayRestartBtn').addEventListener('click', () => {
-        document.getElementById('game-over-overlay').classList.add('hidden');
-        if (selector) selector.disabled = false;
-        direction = { x: 0, y: 0 };
-        snakeArr = [{ x: 13, y: 10 }];
-        score = 0;
-        document.getElementById('score').innerHTML = score;
-    });
+    document.getElementById('overlayRestartBtn').addEventListener('click', restartGame);
 
     window.addEventListener('keydown', e => {
         // Change difficulty selection dynamic evaluations if arrow key registers