Change terrain shape; clean up some

html/images/space.svg

@@ -48,13 +48,11 @@
       </g>
     </g>
 
-    <rect id="rect1" x="30" y="30" width="20" height="20"/>
+    <polygon 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">
-      <line x1="30" y1="30" x2="30" y2="30"/>
-      <line x1="30" y1="50" x2="30" y2="50"/>
-      <line x1="50" y1="30" x2="50" y2="30"/>
-      <line x1="50" y1="50" x2="50" y2="50"/>
     </g>
+
     <g id="bullets"></g>
   </g>
 
@@ -77,28 +75,24 @@
     const namespaceURIsvg = 'http://www.w3.org/2000/svg';
     const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;
     const regex = /(-?\d*\.{0,1}\d+)px/g;
-    const def = ["0px", "0"];
+    const bullets = [];
-    let bullets = [];
 
+    let previous, zero, frameCount = 0;
     let position = [0, 0]; // meters
     let velocity = [0, 0]; // meters per second
     let acceleration = [0, 0]; // meters per second per second
-    let previous, zero, frameCount = 0;
     // let friction = 7.5;
     let friction = 0;
     let rotate = 0;
     let rotationSpeed = 0.25;
     const maxSpeed = 100;
 
-    const rules = document.styleSheets[0].cssRules;
-
     const fps = document.querySelector("#fps");
     const info = document.querySelector("#debug");
     const tank = document.querySelector(".tank");
     const gun = tank.querySelector('line');
     const hitbox = document.querySelector(".hitbox");
     const bulletsContainer = document.querySelector("#bullets");
-    const r1 = document.querySelector("#rect1");
 
     const leftTurnButton = document.querySelector("#turn-left");
     const rightTurnButton = document.querySelector("#turn-right");
@@ -110,9 +104,25 @@
 
     const fireButton = document.querySelector("#fire");
     const pt = document.querySelector('svg').createSVGPoint();
-    const lines = document.querySelectorAll('#lines line');
+    const polygon = document.querySelector('polygon');
 
-    gun.style.transform = "rotate(0deg)";
+    const points = polygon.getAttribute('points').split(' ').map(coords => {
+      const [x, y] = coords.split(',');
+      return [+x, +y];
+    });
+
+    const lineContainer = document.querySelector('#lines');
+
+    points.forEach(([x, y]) => {
+      const el = document.createElementNS(namespaceURIsvg, 'line');
+      el.setAttribute('x1', x);
+      el.setAttribute('y1', y);
+      el.setAttribute('x2', x);
+      el.setAttribute('y2', y);
+      lineContainer.appendChild(el)
+    });
+
+    const lines = lineContainer.querySelectorAll('line');
 
     function wrapPos(positionX, positionY) {
       let x, y;
@@ -162,14 +172,14 @@
         x = 0;
         y = 0;
       } else {
-        [[, x], [, y] = def] = [...el.style.transform.matchAll(regex)];
+        [[, x], [, y] = ["0px", "0"]] = [...el.style.transform.matchAll(regex)];
       }
 
       return [+x, +y];
     }
 
     function getRotate(el) {
-      let [[, degrees]] = [...el.style.transform.matchAll(degsRegex)];
+      let [[, degrees] = ["0deg", "0"]] = [...el.style.transform.matchAll(degsRegex)];
       return +degrees;
     }
 
@@ -201,7 +211,7 @@
         frameCount++;
       }
 
-      let [[, degrees]] = [...gun.style.transform.matchAll(degsRegex)];
+      let degrees = getRotate(gun);
 
       if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
       else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`;
@@ -247,20 +257,18 @@
       });
 
       let [x, y] = getTranslate(hitbox);
-      let positionX = changeX + +x;
+      let [positionX, positionY] = wrapPos(changeX + x, changeY + y);
-      let positionY = changeY + +y;
-
-      if (positionY > 150) positionY += -300;
-      else if (positionY < -150) positionY += 300;
-
-      if (positionX > 200) positionX += -400;
-      else if (positionX < -200) positionX += 400;
 
       lines.forEach(line => {
         line.setAttribute('x2', positionX);
         line.setAttribute('y2', positionY);
+
+        // let slope = (+line.getAttribute('y2') - +line.getAttribute('y1')) / (+line.getAttribute('x2') - +line.getAttribute('x1'));
+        // slope = +slope.toFixed(15);
+        // console.log('slope', slope);
+
         const firstP = line.getPointAtLength(1);
-        if (r1.isPointInFill(firstP)) {
+        if (polygon.isPointInFill(firstP)) {
           line.setAttribute('x2', line.getAttribute('x1'));
           line.setAttribute('y2', line.getAttribute('y1'));
         }
@@ -269,10 +277,10 @@
       pt.x = positionX;
       pt.y = positionY;
 
-      if (r1.isPointInFill(pt))
+      if (polygon.isPointInFill(pt))
-        r1.setAttribute('fill', 'red');
+        polygon.setAttribute('fill', 'red');
       else
-        r1.setAttribute('fill', 'black');
+        polygon.setAttribute('fill', 'black');
 
       hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;