Add inverse walls

html/images/space.svg

@@ -20,7 +20,7 @@
     }
 
     rect#bg {
-      fill: gray;
+      fill: black;
     }
 
     .ship circle {
@@ -62,13 +62,15 @@
     }
 
     .wall.inverse {
-      stroke: blue;
-      fill: white;
-      fill-opacity: 0.5;
+      /* stroke: blue; */
+      /* fill: lightgray; */
+      fill: gray;
+      /* fill-opacity: 0.5; */
     }
   </style>
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
+  <polygon class="wall inverse" points="-180,-40 -170,-120 40,-130 170,-120 180,40 170,130 -40,130 -170,120" />
 
   <g class="ship">
     <line id="cannon" x1="0" y1="0" x2="0" y2="8" stroke="black"/>
@@ -80,9 +82,8 @@
   </g>
 
   <!-- <polygon class="wall" points="20,20 40,20 40,40 20,40" /> -->
-  <polygon class="wall" points="10,10 20,10 20,20 10,20" />
-  <polygon class="wall inverse" points="-40,-40 40,-40 40,40 -40,40" />
-  <!-- <polygon class="wall" points="20,-50 -50,-50 -60,-70 -50,-100 80,-100 80,-90 -20,-90 -20,-60 40,-60 40,40 20,40" /> -->
+  <!-- <polygon class="wall" points="10,10 20,10 20,20 10,20" /> -->
+  <polygon class="wall" points="20,-50 -50,-50 -60,-70 -50,-100 80,-100 80,-90 -20,-90 -20,-60 40,-60 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" /> -->
   <!-- <g> -->
   <!--   <polygon class="wall" points="-130,-80 -40,-70 -70,-10" /> -->
@@ -142,7 +143,7 @@
     const halfPi = Math.PI / 2;
     const maxSpeed = 100;
 
-    const drawCollisionLines = true;
+    const drawCollisionLines = false;
 
     let previous, zero, frameCount = 0;
     // let position = [0, 0]; // meters
@@ -166,6 +167,7 @@
     const ship = document.querySelector(".ship");
     const gun = ship.querySelector('#cannon');
     const shipBody = ship.querySelector("#body");
+    // const walls = document.querySelectorAll('.wall:not(.inverse)');
     const walls = document.querySelectorAll('.wall');
     const bulletsContainer = document.querySelector("#bullets");
     const triangleContainer = document.querySelector('#triangles');
@@ -174,12 +176,14 @@
     const bulletPt = svg.createSVGPoint();
     const cornerPt = svg.createSVGPoint();
 
-    const allWallCorners = [...walls].map(wall =>
-      wall.getAttribute('points').split(' ').map(coords => {
+    const allWallCorners = [...walls].map(wall => {
+      const cs = wall.getAttribute('points').split(' ').map(coords => {
         const [x, y] = coords.split(',');
         return [+x, +y];
-      }
-    ));
+      });
+
+      return wall.classList.contains("inverse") ? cs.reverse() : cs;
+    });
 
     const allEdgePts = allWallCorners.map(w =>
       w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]])