diff --git a/html/images/tanks.svg b/html/images/tanks.svg
index b401f9f..1780d5c 100644
--- a/html/images/tanks.svg
+++ b/html/images/tanks.svg
@@ -29,6 +29,10 @@
transform: translate(-7.5px, -5px);
}
+ .tank circle {
+ fill: white;
+ }
+
#crosshair {
opacity: 0.5;
}
@@ -48,14 +52,15 @@
-
-
+
+
+
-
-
-
-
+
+
+
+
@@ -78,8 +83,8 @@
const reverseMoveButton = document.querySelector("#move-backward");
const forwardMoveButton = document.querySelector("#move-forward");
const fps = document.querySelector("#fps");
- const velocity = [-100, -50]; // meters per second
-
+ let velocity = [0, 0]; // meters per second
+ let acceleration = [0, 0]; // meters per second per second
let previous, zero, frameCount = 0;
requestAnimationFrame(firstFrame);
@@ -103,7 +108,12 @@
frameCount++;
}
- const [velocityX, velocityY] = velocity;
+ let [velocityX, velocityY] = velocity;
+
+ const [accelerationX, accelerationY] = acceleration;
+
+ velocity = [velocityX + accelerationX, velocityY + accelerationY];
+
const changeX = 0.001 * elapsed * velocityX;
const changeY = 0.001 * elapsed * velocityY;
@@ -121,8 +131,8 @@
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 (positionY > 150) positionY += -300;
+ else if (positionY < -150) positionY += 300;
if (positionX > 200) positionX += -400;
else if (positionX < -200) positionX += 400;
@@ -131,7 +141,10 @@
// console.log(hitbox.style.transform);
// hitbox.style.transform = `translate(0px, ${position}px)`;
// if (+y < 200)
- if (timestamp < 10000) requestAnimationFrame(t => animate(t));
+ // if (timestamp < 10000)
+ requestAnimationFrame(t => animate(t));
+
+ // if (velocity[1] < 0)
}
function moveTank(el) {
@@ -300,43 +313,56 @@
}
leftTurnButton.addEventListener("mousedown", function (e) {
- tankTurn.playbackRate = 1;
- tankTurn.play();
+ acceleration[0] = -1;
+ // tankTurn.playbackRate = 1;
+ // tankTurn.play();
});
leftTurnButton.addEventListener("mouseup", function (e) {
- tankTurn.pause();
- afterTurn();
+ acceleration[0] = 0;
+
+ // tankTurn.pause();
+ // afterTurn();
});
rightTurnButton.addEventListener("mousedown", function (e) {
- tankTurn.playbackRate = -1;
- tankTurn.play();
+ acceleration[0] = 1;
+
+ // tankTurn.playbackRate = -1;
+ // tankTurn.play();
});
rightTurnButton.addEventListener("mouseup", function (e) {
- tankTurn.pause();
- afterTurn();
+ acceleration[0] = 0;
+
+ // tankTurn.pause();
+ // afterTurn();
});
reverseMoveButton.addEventListener("mousedown", function (e) {
- tankMove.playbackRate = -1;
- tankMove.play();
+ acceleration[1] = -1; // meters per second per second
+
+ // tankMove.playbackRate = -1;
+ // tankMove.play();
});
reverseMoveButton.addEventListener("mouseup", function (e) {
- tankMove.pause();
- afterMove();
+ acceleration[1] = 0; // meters per second per second
+
+ // tankMove.pause();
+ // afterMove();
});
forwardMoveButton.addEventListener("mousedown", function (e) {
- tankMove.playbackRate = 1;
- tankMove.play();
+ // tankMove.playbackRate = 1;
+ // tankMove.play();
+ acceleration[1] = 1; // meters per second per second
});
forwardMoveButton.addEventListener("mouseup", function (e) {
- tankMove.pause();
- afterMove();
+ // tankMove.pause();
+ // afterMove();
+ acceleration[1] = 0; // meters per second per second
});
// tankTurn.addEventListener("finish", function (e) {