Restart after crashing with a keydown event

html/images/space.svg

@@ -65,6 +65,16 @@
     #legs {
       display: none;
     }
+
+    #triangles polygon.obtuse {
+      stroke: orangered;
+      stroke-dasharray: 5 10;
+    }
+
+    #triangles polygon.anti-clockwise {
+      stroke: orange;
+      stroke-dasharray: 1 5;
+    }
   </style>
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
@@ -123,6 +133,7 @@
     let rotate = 0;
     let rotationSpeed = 0.25;
     const maxSpeed = 100;
+    let started = false;
 
     const fps = document.querySelector("#fps");
     const time = document.querySelector("#time");
@@ -228,6 +239,8 @@
         }
 
         t.classList[isClockwise && isAcute ? "add" : "remove"](className);
+        t.classList[isClockwise && !isAcute ? "add" : "remove"]("obtuse");
+        t.classList[!isClockwise ? "add" : "remove"]("anti-clockwise");
         if (isClockwise && isAcute) visible.push(t);
       });
 
@@ -352,44 +365,7 @@
       return cornerCollision || sideCollision;
     }
 
-    requestAnimationFrame(firstFrame);
-
-    let start;
-    let restart = false;
-    function firstFrame(timestamp) {
-      zero = timestamp;
-      zeroForTimer = timestamp;
-      previous = timestamp;
-      animate(timestamp);
-    }
-
-    function distance(x1, y1, x2, y2) {
-      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
-    }
-
-    function animate(timestamp) {
-      const elapsed = timestamp - previous;
-      const delta = timestamp - zero;
-      let degrees = getRotate(gun);
-
-      previous = timestamp;
-      time.innerText = ((timestamp - zeroForTimer) * 0.001).toFixed(3);
-
-      if (delta >= 1000) {
-        fps.innerText = frameCount;
-
-        // info.innerText = `velocity ${velocity}\n`
-        //   + 'bullets\nx\ty\tvx\tvy\n'
-        //   + bullets.map(b => {
-        //     return `${b.x.toFixed(2)}\t${b.y.toFixed(2)}\t${b.vx.toFixed(2)}\t${b.vy.toFixed(2)}`;
-        //   }).join("\n");
-
-        zero = timestamp;
-        frameCount = 0;
-      } else {
-        frameCount++;
-      }
-
+    function updateShip(elapsed) {
       if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
       else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`;
 
@@ -417,7 +393,50 @@
 
       let [x, y] = getTranslate(hitbox);
       let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
+      hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;
+      return position;
+    }
 
+
+    let start;
+    let restart = false;
+    function firstFrame(timestamp) {
+      zero = timestamp;
+      zeroForTimer = timestamp;
+      previous = timestamp;
+      animate(timestamp);
+    }
+
+    function distance(x1, y1, x2, y2) {
+      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    }
+
+    let isReadingKeys = true;
+
+    function animate(timestamp) {
+      const elapsed = timestamp - previous;
+      const delta = timestamp - zero;
+      let degrees = getRotate(gun);
+
+      previous = timestamp;
+      time.innerText = ((timestamp - zeroForTimer) * 0.001).toFixed(3);
+
+      if (delta >= 1000) {
+        fps.innerText = frameCount;
+
+        // info.innerText = `velocity ${velocity}\n`
+        //   + 'bullets\nx\ty\tvx\tvy\n'
+        //   + bullets.map(b => {
+        //     return `${b.x.toFixed(2)}\t${b.y.toFixed(2)}\t${b.vx.toFixed(2)}\t${b.vy.toFixed(2)}`;
+        //   }).join("\n");
+
+        zero = timestamp;
+        frameCount = 0;
+      } else {
+        frameCount++;
+      }
+
+      position = updateShip(elapsed);
       updateBullets(elapsed);
 
       const visibleTriangles = updateTriangles(position);
@@ -447,19 +466,19 @@
       }
 
       const collision = detectCollision(points, visibleTriangles);
-
       wall.setAttribute('fill', collision ? 'red' : 'black');
-      hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;
 
       if (collision) {
         // restart game
         zeroForTimer = timestamp;
         restart = true;
+        started = false;
+        isReadingKeys = false;
       }
 
       // if (+y < 200)
       // if (timestamp < 10000)
-      if (lineContainer.childElementCount > 0)
+      if (lineContainer.childElementCount > 0 && started)
         requestAnimationFrame(t => animate(t));
     }
 
@@ -473,7 +492,33 @@
     let rotateCWPressed = false;
     let rotateCCWPressed = false;
 
+    const pressed = [
+      spacePressed,
+      upPressed,
+      downPressed,
+      leftPressed,
+      rightPressed,
+      rotateCWPressed,
+      rotateCCWPressed,
+    ];
+
+
     document.addEventListener("keydown", function(e) {
+      // console.log(isReadingKeys, pressed.every(k => k));
+
+      if (!isReadingKeys && pressed.some(k => k)) {
+        return;
+      } else {
+        isReadingKeys = true;
+      }
+
+      if (!started && !restart) {
+        started = true;
+        requestAnimationFrame(firstFrame);
+      } else if (restart) {
+        requestAnimationFrame(firstFrame);
+      }
+
       switch (e.code) {
         case "Space":
           if (!spacePressed) {