Restart if ship touches wall

html/images/space.svg

@@ -57,6 +57,10 @@
       fill: white;
       stroke: red;
     }
+
+    #legs {
+      display: none;
+    }
   </style>
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
@@ -66,10 +70,14 @@
       <g class="ship">
         <line id="cannon" x1="0" y1="0" x2="0" y2="8" stroke="black"/>
         <circle id="body" cx="0" cy="0" r="5"/>
+        <g id="legs">
+          <path d="M 3 2 l 2 2 v 2 m -2 0 h 4" stroke="black" fill="none" />
+          <path d="M -3 2 l -2 2 v 2 m -2 0 h 4" stroke="black" fill="none" />
+        </g>
       </g>
     </g>
 
-    <polygon id="wall" points="-20,-30 -10,-40 30,-50 60,-30 80,0 150,0 150,10 60,50 -10,40 -20,20 20,20 20,-20" />
+    <polygon id="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" />
     <!-- <rect id="rect1" x="30" y="30" width="20" height="20"/> -->
     <g id="lines">
     </g>
@@ -79,6 +87,7 @@
 
   <foreignObject x="-200" y="-150" width="100%" height="100%">
     <div id="frames" xmlns="http://www.w3.org/1999/xhtml">
+      <span id="time" xmlns="http://www.w3.org/1999/xhtml">0</span> s
       <span id="fps" xmlns="http://www.w3.org/1999/xhtml">0</span> fps
     </div>
 
@@ -109,6 +118,7 @@
     const maxSpeed = 100;
 
     const fps = document.querySelector("#fps");
+    const time = document.querySelector("#time");
     const info = document.querySelector("#debug");
     const ship = document.querySelector(".ship");
     const gun = ship.querySelector('#cannon');
@@ -135,19 +145,6 @@
       return [+x, +y];
     });
 
-    // console.log("points", points);
-
-    const lineContainer = document.querySelector('#lines');
-
-    // points.forEach(([x, y]) => {
-    //   const el = document.createElementNS(namespaceURIsvg, 'line');
-    //   el.setAttribute('x1', x);
-    //   el.setAttribute('y1', y);
-    //   el.setAttribute('x2', x);
-    //   el.setAttribute('y2', y);
-    //   lineContainer.appendChild(el)
-    // });
-
     const triangleContainer = document.querySelector('#lines');
     const trianglePts = points.map((pt, i) => [pt, points[(i + 1) % points.length]]);
 
@@ -190,9 +187,11 @@
           const db = distance(bx, by, shipx, shipy);
           const dc = distance(ax, ay, bx, by);
 
-          const alpha = Math.acos((db**2 + dc**2 - da**2) / (2 * db * dc));
+          // https://en.wikipedia.org/wiki/Law_of_cosines
-          const beta = Math.acos((da**2 + dc**2 - db**2) / (2 * da * dc));
+          // Solve for angles α and β with inverse cosine (arccosine)
-          isAcute = alpha < PI && beta < PI;
+          const α = Math.acos((db ** 2 + dc ** 2 - da ** 2) / (2 * db * dc));
+          const β = Math.acos((da ** 2 + dc ** 2 - db ** 2) / (2 * da * dc));
+          isAcute = α < PI && β < PI;
         }
 
         if (pos !== attr.pop()) {
@@ -202,19 +201,11 @@
 
         t.classList[isClockwise && isAcute ? "add" : "remove"](className);
         if (isClockwise && isAcute) visible.push(t);
-
-        // return isClockwise ? [t, ...acc] : acc;
-        // i think i can also discard obtuse triangles?
-
-        // if all the triangles are obtuse, i only need to check the nearest corner for a collision
-        // otherwise, i need to check only the acute triangles
       });
 
       return visible;
     }
 
-    const lines = lineContainer.querySelectorAll('line');
-
     function wrapPos(positionX, positionY) {
       let x, y;
 
@@ -314,8 +305,12 @@
 
     requestAnimationFrame(firstFrame);
 
+
+    let start;
+    let restart = false;
     function firstFrame(timestamp) {
       zero = timestamp;
+      zeroForTimer = timestamp;
       previous = timestamp;
       animate(timestamp);
     }
@@ -326,6 +321,8 @@
 
     function animate(timestamp) {
       const delta = timestamp - zero;
+      time.innerText = ((timestamp - zeroForTimer) * 0.001).toFixed(3);
+      // time.innerText = time.inner
       const elapsed = timestamp - previous;
       previous = timestamp;
 
@@ -349,8 +346,8 @@
       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)`;
 
-      let [velocityX, velocityY] = velocity;
+      let [velocityX, velocityY] = restart ? [0, 0] : velocity;
-      let [accelerationX, accelerationY] = acceleration;
+      let [accelerationX, accelerationY] = restart ? [0, 0] : acceleration;
 
       if (velocityX > 0) accelerationX += -friction;
       else if (velocityX < 0) accelerationX += friction;
@@ -372,7 +369,8 @@
       const changeY = 0.001 * elapsed * velocityY;
 
       let [x, y] = getTranslate(hitbox);
-      let position = [positionX, positionY] = wrapPos(changeX + x, changeY + y);
+      let position = [positionX, positionY] = restart ? [0, 0] : wrapPos(changeX + x, changeY + y);
+      if (restart) restart = false;
 
       updateBullets(elapsed);
       // updateLines(position);
@@ -437,6 +435,14 @@
       wall.setAttribute('fill', cornerCollision || sideCollision ? 'red' : 'black');
       hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;
 
+      if (cornerCollision || sideCollision) {
+        // restart game
+        zeroForTimer = timestamp;
+        restart = true;
+        // position = [0, 0];
+        // acceleration = [0, 0];
+      }
+
       // if (+y < 200)
       // if (timestamp < 10000)
       requestAnimationFrame(t => animate(t));