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;