WIP: multiple walls

html/images/space.svg

@@ -75,7 +75,9 @@
 
   <!-- <polygon id="wall" points="20,20 40,20 40,40 20,40" /> -->
   <!-- <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" /> -->
-  <polygon id="wall" points="-130,-80 -40,-70 -70,-10 -100,40 -120,100" />
+  <!-- <polygon id="wall" points="-130,-80 -40,-70 -70,-10 -100,40 -120,100" /> -->
+  <polygon id="wall" class="wall" points="-130,-80 -40,-70 -70,-10" />
+  <polygon class="wall" points="50,70 90,-10 130,70" />
 
   <g id="triangles"></g>
   <g id="edges"></g>
@@ -94,6 +96,12 @@
       <li xmlns="http://www.w3.org/1999/xhtml">make ship a helicopter</li>
       <li xmlns="http://www.w3.org/1999/xhtml">use paths for walls</li>
       <li xmlns="http://www.w3.org/1999/xhtml">multiple walls</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">no walls</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">stop reading data from elements</li>
+      <li xmlns="http://www.w3.org/1999/xhtml">ability to land</li>
+      <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>
     </ul>
     <pre id="debug" xmlns="http://www.w3.org/1999/xhtml"></pre>
     <div id="pointer" xmlns="http://www.w3.org/1999/xhtml">
@@ -131,6 +139,7 @@
     const gun = ship.querySelector('#cannon');
     const shipBody = ship.querySelector("#body");
     const wall = document.querySelector('#wall');
+    const walls = document.querySelectorAll('.wall');
     const bulletsContainer = document.querySelector("#bullets");
     const triangleContainer = document.querySelector('#triangles');
     const edgeContainer = document.querySelector('#edges');
@@ -143,13 +152,36 @@
       return [+x, +y];
     });
 
+    const allWallCorners = [...walls].map(wall =>
+      wall.getAttribute('points').split(' ').map(coords => {
+        const [x, y] = coords.split(',');
+        return [+x, +y];
+      }
+    ));
+
+    // 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);
     }
 
+    function drawAllEdges(edges) {
+      edges.forEach(edge => drawEdges(edge));
+    }
+
     function drawEdges(lpts) {
       let edges = lpts.map(e => e.join(' '));
 
@@ -204,6 +236,17 @@
       }, []);
     }
 
+    function findAllEdges(verts, [xc, yc]) {
+      return verts.reduce((acc, points) => {
+        points.forEach(([a, b]) => {
+          const isFound = [isClockwise, isAcute].every(c => c(a, b, [xc, yc]));
+          if (isFound) acc.push(`${a[0]},${a[1]} ${b[0]},${b[1]}`);
+        });
+
+        return acc;
+      }, []);
+    }
+
     function updateTriangles([positionX, positionY]) {
       const delim = ' ';
       const className = 'clockwise-orientation';
@@ -314,12 +357,14 @@
     function detectCollision(corners, [xc, yc], edges) {
       const shipRadius = 5;
 
-      const cornerCollision = corners.some(([x, y]) => {
-        cornerPt.x = x - xc;
-        cornerPt.y = y - yc;
+      // const cornerCollision = corners.some(([x, y]) => {
+      //   cornerPt.x = x - xc;
+      //   cornerPt.y = y - yc;
+      //
+      //   return shipBody.isPointInFill(cornerPt);
+      // });
 
-        return shipBody.isPointInFill(cornerPt);
-      });
+      const cornerCollision = false;
 
       const sideCollision = edges.reduce((acc, e) => {
         const [[xa, ya], [xb, yb]] = e.split(' ').map(n => n.split(',').map(n => +n));
@@ -340,6 +385,12 @@
       return cornerCollision || sideCollision;
     }
 
+    function detectAllCollisions(corners, [xc, yc], edges) {
+      return edges.map(edge => {
+        return detectCollision(corners, [xc, yc], edge);
+      }).some(c => c);
+    }
+
     function updateShip(elapsed) {
       const degrees = getRotate(gun);
       if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
@@ -433,7 +484,8 @@
         drawEdges(edgePts);
       }
 
-      const collision = detectCollision(wallCorners, position, findEdges(edgePts, position));
+      // const collision = detectCollision(wallCorners, position, findEdges(edgePts, position));
+      const collision = detectAllCollisions(allWallCorners, position, findAllEdges(allEdgePts, position));
       wall.setAttribute('fill', collision ? 'red' : 'black');
 
       if (collision) {
@@ -451,6 +503,7 @@
     }
 
     drawEdges(edgePts);
+    drawAllEdges(allEdgePts);
 
     let force = 1;
     let spacePressed = false;