Add friction

html/images/tanks.svg

@@ -86,6 +86,7 @@
     let velocity = [0, 0]; // meters per second
     let acceleration = [0, 0]; // meters per second per second
     let previous, zero, frameCount = 0;
+    let friction = 7.5;
 
     requestAnimationFrame(firstFrame);
 
@@ -109,10 +110,17 @@
       }
 
       let [velocityX, velocityY] = velocity;
+      let [accelerationX, accelerationY] = acceleration;
 
-      const [accelerationX, accelerationY] = acceleration;
+      if (velocityX > 0) accelerationX += -friction;
+      else if (velocityX < 0) accelerationX += friction;
 
-      velocity = [velocityX + accelerationX, velocityY + accelerationY];
+      if (velocityY > 0) accelerationY += -friction;
+      else if (velocityY < 0) accelerationY += friction;
+
+      velocityX = velocityX > 0 && velocityX + accelerationX < 0 ? 0 : velocityX + accelerationX;
+      velocityY = velocityY > 0 && velocityY + accelerationY < 0 ? 0 : velocityY + accelerationY;
+      velocity = [velocityX, velocityY];
 
       const changeX = 0.001 * elapsed * velocityX;
       const changeY = 0.001 * elapsed * velocityY;
@@ -312,8 +320,10 @@
       // console.log("after", pkf.transform, fkf.transform);
     }
 
+    let force = 10;
+
     leftTurnButton.addEventListener("mousedown", function (e) {
-      acceleration[0] = -1;
+      acceleration[0] = -force;
       // tankTurn.playbackRate = 1;
       // tankTurn.play();
     });
@@ -326,7 +336,7 @@
     });
 
     rightTurnButton.addEventListener("mousedown", function (e) {
-      acceleration[0] = 1;
+      acceleration[0] = force;
 
       // tankTurn.playbackRate = -1;
       // tankTurn.play();
@@ -340,7 +350,7 @@
     });
 
     reverseMoveButton.addEventListener("mousedown", function (e) {
-      acceleration[1] = -1; // meters per second per second
+      acceleration[1] = -force; // meters per second per second
 
       // tankMove.playbackRate = -1;
       // tankMove.play();
@@ -356,7 +366,7 @@
     forwardMoveButton.addEventListener("mousedown", function (e) {
       // tankMove.playbackRate = 1;
       // tankMove.play();
-      acceleration[1] = 1; // meters per second per second
+      acceleration[1] = force; // meters per second per second
     });
 
     forwardMoveButton.addEventListener("mouseup", function (e) {