Add R key to restart

html/images/space.svg

@@ -73,18 +73,23 @@
     </g>
   </g>
 
-  <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
+  <polygon class="wall" points="20,20 40,20 40,40 20,40" />
   <!-- <polygon class="wall" points="-10,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" /> -->
   <!-- <g> -->
   <!--   <polygon class="wall" points="-130,-80 -40,-70 -70,-10" /> -->
   <!--   <polygon class="wall" points="50,70 90,-10 130,70" /> -->
   <!-- </g> -->
+  <!-- <g> -->
+  <!--   <polygon class="wall" points="-130,-80 -40,-70 -70,-10" /> -->
+  <!--   <polygon class="wall" points="50,70 90,-10 130,70" /> -->
+  <!--   <polygon class="wall" points="-130,100 -70,50 -40,110" /> -->
+  <!-- </g> -->
+  <!-- <g> -->
+  <!--   <polygon class="wall" points="-5,-25 -20,-40 20,-40 5,-25" /> -->
+  <!--   <polygon class="wall" points="-30,20 -20,30 -20,50 -50,20" /> -->
+  <!--   <polygon class="wall" points="20,30 30,20 50,20 20,50" /> -->
+  <!-- </g> -->
 
-  <g>
-    <polygon class="wall" points="-130,-80 -40,-70 -70,-10" />
-    <polygon class="wall" points="50,70 90,-10 130,70" />
-    <polygon class="wall" points="-130,100 -70,50 -40,110" />
-  </g>
   <g id="triangles"></g>
   <g id="edges"></g>
   <g id="bullets"></g>
@@ -108,6 +113,10 @@
       <li xmlns="http://www.w3.org/1999/xhtml">gravity</li>
       <li xmlns="http://www.w3.org/1999/xhtml">limited fuel</li>
       <li xmlns="http://www.w3.org/1999/xhtml">additional cannon firing modes</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">collision detection inside a shape</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">only light up the collided wall</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">keep ship position at 0,0 actual</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">only start on movement not just any keypress</li>
     </ul>
     <pre id="debug" xmlns="http://www.w3.org/1999/xhtml"></pre>
     <div id="pointer" xmlns="http://www.w3.org/1999/xhtml">
@@ -127,9 +136,13 @@
     const drawCollisionLines = false;
 
     let previous, zero, frameCount = 0;
-    let position = [0, 0]; // meters
+    // let position = [0, 0]; // meters
-    let velocity = [0, 0]; // meters per second
+    // let velocity = [0, 0]; // meters per second
-    let acceleration = [0, 0]; // meters per second per second
+    // let acceleration = [0, 0]; // meters per second per second
+    let position; // meters
+    let velocity; // meters per second
+    let acceleration; // meters per second per second
+
     let friction = 0;
     let rotate = 0;
     let rotationSpeed = 0.25;
@@ -163,7 +176,8 @@
       w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]])
     );
 
-    const allStartingEdges = findAllEdges(allEdgePts, position);
+    let allStartingEdges;
+    init(allEdgePts);
 
     function distance(x1, y1, x2, y2) {
       return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
@@ -229,6 +243,7 @@
       }, []);
     }
 
+    // function findAllEdges(verts, [xc, yc] = [0, 0]) {
     function findAllEdges(verts, [xc, yc]) {
       return verts.reduce((acc, points) => {
         points.forEach(([a, b]) => {
@@ -414,8 +429,6 @@
     function updateEdges(position) {
       const collisionEdges = findAllEdges(allEdgePts, position);
 
-      // console.log(collisionEdges);
-
       [...edgeContainer.children].forEach(l => {
         const x1 = l.getAttribute('x1');
         const y1 = l.getAttribute('y1');
@@ -432,6 +445,21 @@
       });
     }
 
+    function init(edgePts) {
+      started = false;
+      position = [0, 0]; // meters
+      velocity = [0, 0]; // meters per second
+      acceleration = [0, 0]; // meters per second per second
+      rotate = 0;
+
+      [...edgeContainer.children].forEach(c => c.remove());;
+      drawAllEdges(edgePts);
+      allStartingEdges = findAllEdges(edgePts, position);
+      ship.style.transform = "";
+      walls.forEach(w => w.setAttribute('fill', 'black'));
+      time.innerText = "0";
+    }
+
     function firstFrame(timestamp) {
       zero = timestamp;
       zeroForTimer = timestamp;
@@ -443,9 +471,7 @@
       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;
@@ -467,34 +493,37 @@
       updateEdges(position);
       if (drawCollisionLines) updateTriangles(position);
 
-      if (restart) {
-        restart = false;
-        [...edgeContainer.children].forEach(c => c.remove());;
-        drawAllEdges(allEdgePts);
-      }
-
       const collision = detectCollisions(position, allWallCorners, findAllEdges(allEdgePts, position));
       walls.forEach(w => w.setAttribute('fill', collision ? 'red' : 'black'));
 
       if (collision) {
         // restart game
-        zeroForTimer = timestamp;
+      //   zeroForTimer = timestamp;
-        restart = true;
         started = false;
         isReadingKeys = false;
       }
 
+      if (restart) {
+        started = false;
+        restart = false;
+        init(allEdgePts);
+        time.innerText = 0;
+      }
+
+      const finished = edgeContainer.childElementCount <= 0;
+      if (finished) started = false;
+
       // if (+y < 200)
       // if (timestamp < 10000)
-      if (edgeContainer.childElementCount > 0 && started)
+      if (started) {
+        time.innerText = ((timestamp - zeroForTimer) * 0.001).toFixed(3);
         requestAnimationFrame(t => animate(t));
+      }
     }
 
-    // drawEdges(edgePts);
-    drawAllEdges(allEdgePts);
-
     let force = 1;
     let spacePressed = false;
+    let restartPressed = false;
     let upPressed = false;
     let downPressed = false;
     let leftPressed = false;
@@ -505,10 +534,9 @@
     document.addEventListener("keydown", function(e) {
       if (!isReadingKeys) return;
 
-      if (!started && !restart) {
+      if (!started) {
         started = true;
-        requestAnimationFrame(firstFrame);
+        frameCount = 0;
-      } else if (restart) {
         requestAnimationFrame(firstFrame);
       }
 
@@ -566,12 +594,14 @@
     });
 
     document.addEventListener("keyup", function(e) {
-      isReadingKeys = true;
-
       switch (e.code) {
         case "Space":
           spacePressed = false;
           break;
+        case "KeyR":
+          isReadingKeys = true;
+          !started ? init(allEdgePts) : restart = true;
+          break;
         case "KeyW":
         case "ArrowUp":
           if (upPressed) {