Light up bg on collision

html/images/space.svg

@@ -156,6 +156,7 @@
     let isReadingKeys = true;
 
     const svg = document.querySelector('svg');
+    const bg = svg.querySelector('#bg');
     const fps = document.querySelector("#fps");
     const time = document.querySelector("#time");
     const debug = document.querySelector("#debug");
@@ -465,6 +466,7 @@
       allStartingEdges = findAllEdges(edgePts, position);
       ship.style.transform = "";
       walls.forEach(w => w.setAttribute('fill', 'black'));
+      bg.style.fill = 'black';
       time.innerText = "0";
     }
 
@@ -502,13 +504,12 @@
       if (drawCollisionLines) updateTriangles(position);
 
       const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position));
-      walls.forEach(w => w.setAttribute('fill', collision ? 'red' : 'black'));
 
       if (collision) {
-        // restart game
-      //   zeroForTimer = timestamp;
         started = false;
         isReadingKeys = false;
+        walls.forEach(w => w.setAttribute('fill', 'red'));
+        bg.style.fill = 'red';
       }
 
       if (restart) {
@@ -521,11 +522,10 @@
       const finished = edgeContainer.childElementCount <= 0;
       if (finished) started = false;
 
-      // if (+y < 200)
-      // if (timestamp < 10000)
       if (started) {
         time.innerText = ((timestamp - zeroForTimer) * 0.001).toFixed(3);
-        requestAnimationFrame(t => animate(t));
+        // requestAnimationFrame(t => animate(t));
+        requestAnimationFrame(animate);
       }
     }
 
@@ -655,7 +655,6 @@
       }
     });
 
-    const bg = svg.querySelector('#bg');
     const pointer = svg.querySelector('#pointer');
     const xp = pointer.querySelector('.x');
     const yp = pointer.querySelector('.y');