Add velocity

html/images/tanks.svg

@@ -78,19 +78,24 @@
     const reverseMoveButton = document.querySelector("#move-backward");
     const forwardMoveButton = document.querySelector("#move-forward");
     const fps = document.querySelector("#fps");
+    const velocity = [0, 20]; // meters per second
 
-    let zero;
-    let frameCount = 0;
+    let previous, zero, frameCount = 0;
 
     requestAnimationFrame(firstFrame);
 
     function firstFrame(timestamp) {
       zero = timestamp;
+      previous = timestamp;
       animate(timestamp);
     }
 
     function animate(timestamp) {
-      if (timestamp - zero >= 1000) {
+      const delta = timestamp - zero;
+      const elapsed = timestamp - previous;
+      previous = timestamp;
+
+      if (delta >= 1000) {
         fps.innerText = frameCount;
         zero = timestamp;
         frameCount = 0;
@@ -98,7 +103,26 @@
         frameCount++;
       }
 
-      requestAnimationFrame(t => animate(t));
+      const [velocityX, velocityY] = velocity;
+      const changeX = 0.001 * elapsed * velocityX;
+      const changeY = 0.001 * elapsed * velocityY;
+
+      const regex = /(-?\d*\.{0,1}\d+)px/g;
+      const def = ["0px", "0"];
+
+      let x, y;
+      if (hitbox.style.transform.length === 0) {
+        x = 0;
+        y = 0;
+      } else {
+        [[, x], [, y] = def] = [...hitbox.style.transform.matchAll(regex)];
+      }
+
+      const positionX = changeX + +x;
+      const positionY = changeY + +y;
+      hitbox.style.transform = `translate(${positionX}px, ${positionY}px)`;
+      // hitbox.style.transform = `translate(0px, ${position}px)`;
+      if (+y < 100) requestAnimationFrame(t => animate(t));
     }
 
     function moveTank(el) {
@@ -135,8 +159,8 @@
       return tankTurn;
     }
 
-    const tankTurn = turnTank(tank);
-    const tankMove = moveTank(hitbox);
+    // const tankTurn = turnTank(tank);
+    // const tankMove = moveTank(hitbox);
 
     function degsToRads(degrees) {
       return degrees * Math.PI / 180;