diff --git a/html/images/tanks.svg b/html/images/tanks.svg
index 116aa77..66457cc 100644
--- a/html/images/tanks.svg
+++ b/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;