WIP: fire bullets

html/images/tanks.svg

@@ -57,8 +57,11 @@
         <line x1="0" y1="0" x2="0" y2="8" stroke="black"/>
       </g>
     </g>
+    <g id="bullets">
+      <!-- <circle r="10" x="10" cy="10"/> -->
+    </g>
 
-    <circle id="bullet" cx="0" cy="0" r="1"/>
+    <!-- <circle id="bullet" cx="0" cy="0" r="1"/> -->
 
     <!-- <g id="crosshair"> -->
     <!--   <line x1="-2" y1="0" x2="2" y2="0" stroke="red"/> -->
@@ -81,20 +84,13 @@
   </foreignObject>
 
   <script type="text/javascript">//<![CDATA[
-    const rules = document.styleSheets[0].cssRules;
-    const tank = document.querySelector(".tank");
-    const gun = tank.querySelector('line');
-    const hitbox = document.querySelector(".hitbox");
-    const leftTurnButton = document.querySelector("#turn-left");
-    const rightTurnButton = document.querySelector("#turn-right");
-    const reverseMoveButton = document.querySelector("#move-backward");
-    const forwardMoveButton = document.querySelector("#move-forward");
-    const bullet = document.querySelector("#bullet");
+    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"];
+    let bullets = [];
 
-    const rotateCWButton = document.querySelector("#rotate-cw");
-    const rotateCCWButton = document.querySelector("#rotate-ccw");
-
-    const fps = document.querySelector("#fps");
+    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;
@@ -102,28 +98,64 @@
     let rotate = 0;
     let rotationSpeed = 0.25;
 
-    let bullets = [
-      { x: 0, y: 0, vx: 0, vy: 1, time: 5000 }
-    ];
+    const rules = document.styleSheets[0].cssRules;
+
+    const fps = document.querySelector("#fps");
+    const tank = document.querySelector(".tank");
+    const gun = tank.querySelector('line');
+    const hitbox = document.querySelector(".hitbox");
+    const bulletsContainer = document.querySelector("#bullets");
+
+    const leftTurnButton = document.querySelector("#turn-left");
+    const rightTurnButton = document.querySelector("#turn-right");
+    const reverseMoveButton = document.querySelector("#move-backward");
+    const forwardMoveButton = document.querySelector("#move-forward");
+
+    const rotateCWButton = document.querySelector("#rotate-cw");
+    const rotateCCWButton = document.querySelector("#rotate-ccw");
+
+    const fireButton = document.querySelector("#fire");
 
     gun.style.transform = "rotate(0deg)";
 
     function wrapPos(positionX, positionY) {
       let x, y;
 
-      // if (positionY > 150) positionY += -300;
       if (positionY > 150) y = positionY - 300;
-      // else if (positionY < -150) positionY += 300;
       else if (positionY < -150) y = positionY + 300;
       else y = positionY;
 
-      if (positionX > 200) positionX += -400;
-      else if (positionX < -200) positionX += 400;
+      if (positionX > 200) x = positionX - 400;
+      else if (positionX < -200) x = positionX + 400;
       else x = positionX;
 
       return [x, y];
     }
 
+    function fireBullet(x, y) {
+      const el = document.createElementNS(namespaceURIsvg, 'circle');
+      el.setAttribute('r', 1);
+      el.setAttribute('cx', x);
+      el.setAttribute('cy', y);
+      const node = bulletsContainer.appendChild(el);
+      const bullet = { x: x, y: y, vx: 1, vy: 1, time: 5000, node: node }
+      bullets.push(bullet);
+      console.log("bullet fired", bullet, bullets);
+    }
+
+    function getTransform(el) {
+      let x, y;
+
+      if (el.style.transform.length === 0) {
+        x = 0;
+        y = 0;
+      } else {
+        [[, x], [, y] = def] = [...el.style.transform.matchAll(regex)];
+      }
+
+      return [x, y];
+    }
+
     requestAnimationFrame(firstFrame);
 
     function firstFrame(timestamp) {
@@ -145,8 +177,6 @@
         frameCount++;
       }
 
-      const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;
-
       let [[, degrees]] = [...gun.style.transform.matchAll(degsRegex)];
 
       if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
@@ -168,21 +198,22 @@
       const changeX = 0.001 * elapsed * velocityX;
       const changeY = 0.001 * elapsed * velocityY;
 
-      const regex = /(-?\d*\.{0,1}\d+)px/g;
-      const def = ["0px", "0"];
+      bullets.forEach((bullet, index) => {
+        bullets[index].time -= elapsed;
 
-      bullets[0].time -= elapsed;
+        if (bullets[index].time > 0) {
+          bullets[index].y += 0.1 * elapsed * bullets[index].vy;
+          bullets[index].x += 0.1 * elapsed * bullets[index].vx;
 
-      if (bullets[0].time > 0) {
-        bullets[0].y += 0.1 * elapsed * bullets[0].vy;
-
-        let [bx, by] = wrapPos(bullets[0].x, bullets[0].y)
-        bullets[0].x = bx;
-        bullets[0].y = by;
-        bullet.style.transform = `translate(${bx}px, ${by}px)`;
-      } else {
-        bullet.remove();
-      }
+          let [bx, by] = wrapPos(bullets[index].x, bullets[index].y)
+          bullets[index].x = bx;
+          bullets[index].y = by;
+          bullet.node.style.transform = `translate(${bx}px, ${by}px)`;
+        } else {
+          bullet.node.remove();
+          bullets.splice(index, 1);
+        }
+      });
 
       let x, y;
       if (hitbox.style.transform.length === 0) {
@@ -261,6 +292,10 @@
       rotate = 0;
     });
 
+    fireButton.addEventListener("click", function (e) {
+      const [x, y] = getTransform(hitbox);
+      fireBullet(+x, +y);
+    });
 
 
     // tankTurn.addEventListener("finish", function (e) {