Add additional maps

html/images/space.svg

@@ -73,11 +73,13 @@
     </g>
   </g>
 
-  <!-- <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" class="wall" points="-130,-80 -40,-70 -70,-10" />
-  <polygon class="wall" points="50,70 90,-10 130,70" />
+  <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" /> -->
+  <!-- <polygon class="wall" points="-130,-80 -40,-70 -70,-10 -100,40 -120,100" /> -->
+  <!-- <g> -->
+  <!--   <polygon class="wall" points="-130,-80 -40,-70 -70,-10" /> -->
+  <!--   <polygon class="wall" points="50,70 90,-10 130,70" /> -->
+  <!-- </g> -->
 
   <g id="triangles"></g>
   <g id="edges"></g>
@@ -138,7 +140,6 @@
     const ship = document.querySelector(".ship");
     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');
@@ -147,11 +148,6 @@
     const bulletPt = svg.createSVGPoint();
     const cornerPt = svg.createSVGPoint();
 
-    const wallCorners = wall.getAttribute('points').split(' ').map(coords => {
-      const [x, y] = coords.split(',');
-      return [+x, +y];
-    });
-
     const allWallCorners = [...walls].map(wall =>
       wall.getAttribute('points').split(' ').map(coords => {
         const [x, y] = coords.split(',');
@@ -159,24 +155,22 @@
       }
     ));
 
-    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]])
     );
 
-    const startingEdges = findEdges(edgePts, position);
     const allStartingEdges = findAllEdges(allEdgePts, position);
 
     function distance(x1, y1, x2, y2) {
       return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
     }
 
-    function drawAllEdges(edges) {
-      edges.forEach(edge => drawEdges(edge));
+    function drawAllEdges(walls) {
+      walls.forEach(edges => drawEdges(edges));
     }
 
-    function drawEdges(lpts) {
-      let edges = lpts.map(e => e.join(' '));
+    function drawEdges(pts) {
+      let edges = pts.map(e => e.join(' '));
 
       edges.forEach(e => {
         const [x, y] = e.split(' ');
@@ -422,7 +416,9 @@
     }
 
     function updateEdges(position) {
-      const collisionEdges = findEdges(edgePts, position);
+      const collisionEdges = findAllEdges(allEdgePts, position);
+
+      // console.log(collisionEdges);
 
       [...edgeContainer.children].forEach(l => {
         const x1 = l.getAttribute('x1');
@@ -433,8 +429,8 @@
 
         if (collisionEdges.includes(edge))
           if ([
-            edgeContainer.childElementCount <= startingEdges.length,
-            !startingEdges.includes(edge)
+            edgeContainer.childElementCount <= allStartingEdges.length,
+            !allStartingEdges.includes(edge)
           ].some(c => c))
             l.remove();
       });
@@ -478,7 +474,8 @@
       if (restart) {
         restart = false;
         [...edgeContainer.children].forEach(c => c.remove());;
-        drawEdges(edgePts);
+        // drawEdges(edgePts);
+        drawAllEdges(allEdgePts);
       }
 
       // const collision = detectCollision(wallCorners, position, findEdges(edgePts, position));
@@ -500,7 +497,7 @@
         requestAnimationFrame(t => animate(t));
     }
 
-    drawEdges(edgePts);
+    // drawEdges(edgePts);
     drawAllEdges(allEdgePts);
 
     let force = 1;