Fire bullets in direction of cannon

html/images/tanks.svg

@@ -133,17 +133,21 @@
     }
 
     function fireBullet(x, y) {
+      const degrees = getRotate(gun);
+      const radians = degrees * Math.PI / 180;
+      const vx = -Math.sin(radians);
+      const vy = Math.cos(radians);
+
       const el = document.createElementNS(namespaceURIsvg, 'circle');
       el.setAttribute('r', 1);
-      el.setAttribute('cx', x);
-      el.setAttribute('cy', y);
+      el.setAttribute('cx', 0);
+      el.setAttribute('cy', 0);
       const node = bulletsContainer.appendChild(el);
-      const bullet = { x: x, y: y, vx: 1, vy: 1, time: 5000, node: node }
+      const bullet = { x: x, y: y, vx: vx, vy: vy, time: 5000, node: node }
       bullets.push(bullet);
-      console.log("bullet fired", bullet, bullets);
     }
 
-    function getTransform(el) {
+    function getTranslate(el) {
       let x, y;
 
       if (el.style.transform.length === 0) {
@@ -153,7 +157,12 @@
         [[, x], [, y] = def] = [...el.style.transform.matchAll(regex)];
       }
 
-      return [x, y];
+      return [+x, +y];
+    }
+
+    function getRotate(el) {
+      let [[, degrees]] = [...el.style.transform.matchAll(degsRegex)];
+      return +degrees;
     }
 
     requestAnimationFrame(firstFrame);
@@ -215,14 +224,7 @@
         }
       });
 
-      let x, y;
-      if (hitbox.style.transform.length === 0) {
-        x = 0;
-        y = 0;
-      } else {
-        [[, x], [, y] = def] = [...hitbox.style.transform.matchAll(regex)];
-      }
-
+      let [x, y] = getTranslate(hitbox);
       let positionX = changeX + +x;
       let positionY = changeY + +y;
 
@@ -233,13 +235,10 @@
       else if (positionX < -200) positionX += 400;
 
       hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;
-      // console.log(hitbox.style.transform);
-      // hitbox.style.transform = `translate(0px, ${position}px)`;
+
       // if (+y < 200)
       // if (timestamp < 10000)
       requestAnimationFrame(t => animate(t));
-
-      // if (velocity[1] < 0)
     }
 
     let force = 10;
@@ -293,7 +292,7 @@
     });
 
     fireButton.addEventListener("click", function (e) {
-      const [x, y] = getTransform(hitbox);
+      const [x, y] = getTranslate(hitbox);
       fireBullet(+x, +y);
     });