Float around

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 @@
     <rect id="bg" x="-200" y="-150" width="400" height="300"/>
     <g class="hitbox">
       <g class="tank">
-        <line x1="0" y1="0" x2="0" y2="10" stroke="black"/>
-        <rect width="15" height="10"/>
+        <!-- <line x1="0" y1="0" x2="0" y2="10" stroke="black"/> -->
+        <!-- <rect width="15" height="10"/> -->
+        <circle cx="0" cy="0" r="5"/>
       </g>
     </g>
-    <g id="crosshair">
-      <line x1="-2" y1="0" x2="2" y2="0" stroke="red"/>
-      <line x1="0" y1="-2" x2="0" y2="2" stroke="red"/>
-    </g>
+    <!-- <g id="crosshair"> -->
+    <!--   <line x1="-2" y1="0" x2="2" y2="0" stroke="red"/> -->
+    <!--   <line x1="0" y1="-2" x2="0" y2="2" stroke="red"/> -->
+    <!-- </g> -->
   </g>
 
   <foreignObject x="-200" y="-150" width="100%" height="100%">
@@ -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) {