Draw lines from corners

html/images/space.svg

@@ -31,6 +31,11 @@
     circle.bullet {
       fill: yellow;
     }
+
+    #lines line {
+      stroke: limegreen;
+      stroke-width: 0.5px;
+    }
   </style>
 
   <rect id="bg" x="-200" y="-150" width="400" height="300"/>
@@ -44,6 +49,12 @@
     </g>
 
     <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>
 
@@ -98,6 +109,8 @@
     const rotateCCWButton = document.querySelector("#rotate-ccw");
 
     const fireButton = document.querySelector("#fire");
+    const pt = document.querySelector('svg').createSVGPoint();
+    const lines = document.querySelectorAll('#lines line');
 
     gun.style.transform = "rotate(0deg)";
 
@@ -206,7 +219,6 @@
       velocityY = velocityY > 0 && velocityY + accelerationY < 0 ? 0 : velocityY + accelerationY;
       velocity = [velocityX, velocityY];
 
-
       if (velocity[0] > maxSpeed) velocity[0] = maxSpeed;
       else if (velocity[0] < -maxSpeed) velocity[0] = -maxSpeed
 
@@ -244,9 +256,16 @@
       if (positionX > 200) positionX += -400;
       else if (positionX < -200) positionX += 400;
 
-      const radius = 5;
+      lines.forEach(line => {
+        line.setAttribute('x2', positionX);
+        line.setAttribute('y2', positionY);
+        const firstP = line.getPointAtLength(1);
+        if (r1.isPointInFill(firstP)) {
+          line.setAttribute('x2', line.getAttribute('x1'));
+          line.setAttribute('y2', line.getAttribute('y1'));
+        }
+      });
 
-      const pt = document.querySelector('svg').createSVGPoint();
       pt.x = positionX;
       pt.y = positionY;