Fix velocity by making a vector

html/images/tanks.svg

@@ -78,7 +78,7 @@
     const reverseMoveButton = document.querySelector("#move-backward");
     const forwardMoveButton = document.querySelector("#move-forward");
     const fps = document.querySelector("#fps");
-    const velocity = [0, 20]; // meters per second
+    const velocity = [-100, -50]; // meters per second
 
     let previous, zero, frameCount = 0;
 
@@ -118,11 +118,20 @@
         [[, x], [, y] = def] = [...hitbox.style.transform.matchAll(regex)];
       }
 
-      const positionX = changeX + +x;
-      const positionY = changeY + +y;
+      let positionX = changeX + +x;
+      let positionY = changeY + +y;
+
+      if (positionY > 150) positionY = positionY - 150 - 150;
+      else if (positionY < -150) positionY = -1 * positionY - 150 + 150;
+
+      if (positionX > 200) positionX += -400;
+      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 < 100) requestAnimationFrame(t => animate(t));
+      // if (+y < 200)
+      if (timestamp < 10000) requestAnimationFrame(t => animate(t));
     }
 
     function moveTank(el) {