WIP: collision detection

html/images/space.svg

@@ -33,9 +33,9 @@
     }
   </style>
 
-  <g>
-    <rect id="bg" x="-200" y="-150" width="400" height="300"/>
+  <rect id="bg" x="-200" y="-150" width="400" height="300"/>
 
+  <g>
     <g class="hitbox">
       <g class="tank">
         <circle cx="0" cy="0" r="5"/>
@@ -43,6 +43,7 @@
       </g>
     </g>
 
+    <rect id="rect1" x="30" y="30" width="20" height="20"/>
     <g id="bullets"></g>
   </g>
 
@@ -86,6 +87,7 @@
     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");
@@ -242,6 +244,17 @@
       if (positionX > 200) positionX += -400;
       else if (positionX < -200) positionX += 400;
 
+      const radius = 5;
+
+      const pt = document.querySelector('svg').createSVGPoint();
+      pt.x = positionX;
+      pt.y = positionY;
+
+      if (r1.isPointInFill(pt))
+        r1.setAttribute('fill', 'red');
+      else
+        r1.setAttribute('fill', 'black');
+
       hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;
 
       // if (+y < 200)
@@ -265,7 +278,6 @@
           if (!spacePressed) {
             spacePressed = true;
             const [x, y] = getTranslate(hitbox);
-            // fireBullet(x, y);
             fireBullet(x, y, velocity);
           }
           break;
@@ -414,7 +426,7 @@
 
     fireButton.addEventListener("click", function (e) {
       const [x, y] = getTranslate(hitbox);
-      fireBullet(x, y);
+      fireBullet(x, y, velocity);
     });
   //]]></script>
 </svg>