Detect corner collisions

html/images/space.svg

@@ -17,7 +17,6 @@
 
     .ship rect {
       fill: green;
-      transform: translate(-7.5px, -5px);
     }
 
     .ship circle {
@@ -55,12 +54,12 @@
   <g>
     <g class="hitbox">
       <g class="ship">
-        <circle cx="0" cy="0" r="5"/>
         <line x1="0" y1="0" x2="0" y2="8" stroke="black"/>
+        <circle cx="0" cy="0" r="5"/>
       </g>
     </g>
 
-    <polygon points="-20,-20 -20,-30 30,-30 30,30 -20,30 -20,20 20,20 20,-20" />
+    <polygon id="wall" points="-20,-20 -20,-30 30,-30 30,30 -20,30 -20,20 20,20 20,-20" />
     <!-- <rect id="rect1" x="30" y="30" width="20" height="20"/> -->
     <g id="lines">
     </g>
@@ -103,6 +102,8 @@
     const info = document.querySelector("#debug");
     const ship = document.querySelector(".ship");
     const gun = ship.querySelector('line');
+    const shipBody = ship.querySelector("circle");
+
     const hitbox = document.querySelector(".hitbox");
     const bulletsContainer = document.querySelector("#bullets");
 
@@ -116,13 +117,16 @@
 
     const fireButton = document.querySelector("#fire");
     const pt = document.querySelector('svg').createSVGPoint();
-    const polygon = document.querySelector('polygon');
+    const cornerPt = document.querySelector('svg').createSVGPoint();
+    const wall = document.querySelector('#wall');
 
-    const points = polygon.getAttribute('points').split(' ').map(coords => {
+    const points = wall.getAttribute('points').split(' ').map(coords => {
       const [x, y] = coords.split(',');
       return [+x, +y];
     });
 
+    // console.log("points", points);
+
     const lineContainer = document.querySelector('#lines');
 
     // points.forEach(([x, y]) => {
@@ -156,7 +160,11 @@
       triangles.forEach(t => {
         const attr = t.getAttribute('points').split(delim);
         const [[xa, ya], [xb, yb], [xc, yc]] = attr.map(t => t.split(','));
+
+        // https://en.wikipedia.org/wiki/Curve_orientation#Practical_considerations
+        // Determinant for a convex polygon
         const det = (+xb - +xa) * (+yc - +ya) - (+xc - +xa) * (+yb - +ya);
+
         const pos = `${positionX},${positionY}`;
         const cwOrientation = det < 0;
 
@@ -332,14 +340,26 @@
       // updateLines(position);
       updateTriangles(position);
 
-      pt.x = positionX;
-      pt.y = positionY;
+      // can do this after side collision detection
+      // const ts = updateTriangles(position);
+      // const corners = ts.reduce((acc, t) => {
+      //   const [a, b,] = t.getAttribute('points').split(' ');
+      //   // return p.map(t => t.split(','));
+      //   // acc.push(a);
+      //   // acc.push(b);
+      //   return [a, b, ...acc];
+      // }, []);
+      //
+      // const uniqueCorners = [...new Set(corners)].map(n => n.split(',').map(n => +n));
 
-      if (polygon.isPointInFill(pt))
-        polygon.setAttribute('fill', 'red');
-      else
-        polygon.setAttribute('fill', 'black');
+      const cornerCollision = points.some(([x, y]) => {
+        cornerPt.x = x - positionX;
+        cornerPt.y = y - positionY;
 
+        return shipBody.isPointInFill(cornerPt);
+      });
+
+      wall.setAttribute('fill', cornerCollision ? 'red' : 'black');
       hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;
 
       // if (+y < 200)