Add additional walls

html/images/space.svg

@@ -159,20 +159,13 @@
       }
     ));
 
-    // console.log(wallCorners);
-    // console.log(allWallCorners);
-
     const edgePts = wallCorners.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]]);
     const allEdgePts = allWallCorners.map(w =>
       w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]])
     );
-    // console.log(edgePts);
-    // console.log(allEdgePts);
 
     const startingEdges = findEdges(edgePts, position);
     const allStartingEdges = findAllEdges(allEdgePts, position);
-    // console.log(startingEdges);
-    // console.log(allStartingEdges);
 
     function distance(x1, y1, x2, y2) {
       return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
@@ -199,13 +192,15 @@
       });
     }
 
-    function drawTriangles(container, pts, [positionX, positionY]) {
-      pts.forEach(([[x1, y1], [x2, y2]]) => {
-        const el = document.createElementNS(namespaceURIsvg, 'polygon');
-        const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
-        el.setAttribute('points', attr);
-        container.appendChild(el)
-      });
+    function drawTriangles(container, walls, [positionX, positionY]) {
+      walls.forEach(pts =>
+        pts.forEach(([[x1, y1], [x2, y2]]) => {
+          const el = document.createElementNS(namespaceURIsvg, 'polygon');
+          const attr = `${x1},${y1} ${x2},${y2} ${positionX},${positionY}`
+          el.setAttribute('points', attr);
+          container.appendChild(el);
+        })
+      );
     }
 
     // Triangle has a clockwise orientation
@@ -252,7 +247,7 @@
       const className = 'clockwise-orientation';
 
       if (!triangleContainer.childElementCount)
-        drawTriangles(triangleContainer, edgePts, position);
+        drawTriangles(triangleContainer, allEdgePts, position);
 
       const triangles = triangleContainer.querySelectorAll('polygon');
 
@@ -344,7 +339,7 @@
         bulletPt.x = x;
         bulletPt.y = y;
 
-        if (bullet.time > 0 && !wall.isPointInFill(bulletPt)) {
+        if (bullet.time > 0 && ![...walls].some(w => w.isPointInFill(bulletPt))) {
           [bullet.x, bullet.y] = wrapPos(x, y);
           bullet.node.style.transform = `translate(${bullet.x}px, ${bullet.y}px)`;
         } else {
@@ -354,33 +349,35 @@
       });
     }
 
-    function detectCollision(corners, [xc, yc], edges) {
+    function detectCollision(corners, [xc, yc], edge) {
       const shipRadius = 5;
+      const [[xa, ya], [xb, yb]] = edge.split(' ').map(n => n.split(',').map(n => +n));
 
-      // const cornerCollision = corners.some(([x, y]) => {
-      //   cornerPt.x = x - xc;
-      //   cornerPt.y = y - yc;
-      //
-      //   return shipBody.isPointInFill(cornerPt);
-      // });
+      const cornerCollision = corners.some(([[ax, ay], [bx, by]]) => {
+        cornerPt.x = ax - xc;
+        cornerPt.y = ay - yc;
 
-      const cornerCollision = false;
+        const collideWithA = shipBody.isPointInFill(cornerPt);
 
-      const sideCollision = edges.reduce((acc, e) => {
-        const [[xa, ya], [xb, yb]] = e.split(' ').map(n => n.split(',').map(n => +n));
+        cornerPt.x = bx - xc;
+        cornerPt.y = by - yc;
 
-        const da = distance(xa, ya, xc, yc);
-        const db = distance(xb, yb, xc, yc);
-        // TODO: calculate this one ahead of time
-        const dc = distance(xa, ya, xb, yb);
+        const collideWithB = shipBody.isPointInFill(cornerPt);
 
-        // https://en.wikipedia.org/wiki/Altitude_(triangle)#Altitude_in_terms_of_the_sides
-        // Find altitude of side c (the base)
-        const s = (1 / 2) * (da + db + dc);
-        const hc = (2 / dc) * Math.sqrt(s * (s - da) * (s - db) * (s - dc));
+        return collideWithA || collideWithB;
+      });
 
-        return [...acc, hc];
-      }, []).some(h => h <= shipRadius);
+      const da = distance(xa, ya, xc, yc);
+      const db = distance(xb, yb, xc, yc);
+      // TODO: calculate this one ahead of time
+      const dc = distance(xa, ya, xb, yb);
+
+      // https://en.wikipedia.org/wiki/Altitude_(triangle)#Altitude_in_terms_of_the_sides
+      // Find altitude of side c (the base)
+      const s = (1 / 2) * (da + db + dc);
+      const hc = (2 / dc) * Math.sqrt(s * (s - da) * (s - db) * (s - dc));
+
+      const sideCollision = hc <= shipRadius;
 
       return cornerCollision || sideCollision;
     }
@@ -486,7 +483,8 @@
 
       // const collision = detectCollision(wallCorners, position, findEdges(edgePts, position));
       const collision = detectAllCollisions(allWallCorners, position, findAllEdges(allEdgePts, position));
-      wall.setAttribute('fill', collision ? 'red' : 'black');
+      // wall.setAttribute('fill', collision ? 'red' : 'black');
+      walls.forEach(w => w.setAttribute('fill', collision ? 'red' : 'black'));
 
       if (collision) {
         // restart game