Camera momentum implemented.

js/Camera.js

@@ -13,6 +13,7 @@ export default class Camera
         this.borderRight = undefined;
         this.speedX = 0;
         this.speedY = 0;
+        this.speedMax = 12;
     }
 
     centerCamera(x, y)
@@ -33,28 +34,84 @@ export default class Camera
         }
     }
 
-    facePosition(x, y, delta, reactionSpeed = 1)
+    centerCameraX(x)
     {
-        let positionX = x - this.width * 0.5;
+        this.position.x = x - this.width * 0.5;
-        let positionY = y - this.height * 0.5;
 
-        let distanceX = this.position.x - positionX;
+        if (this.position.x < this.borderLeft) {
-        let distanceY = this.position.y - positionY;
+            this.position.x = this.borderLeft;
+        } else if (this.borderRight !== undefined && this.position.x + this.width > this.borderRight) {
+            this.position.x = this.borderRight - this.width;
+        }
+    }
 
-        if (this.position.x !== positionX) {
+    lockCameraIntoBorders()
-            this.position.x += distanceX * delta * reactionSpeed;
+    {
+        this.lockCameraIntoHorizontalBorders();
+        this.lockCameraIntoVerticalBorders();
+    }
+
+    lockCameraIntoHorizontalBorders()
+    {
+        let hasBeenLocked = false;
+
+        if (this.position.x < this.borderLeft) {
+            this.position.x = this.borderLeft;
+            hasBeenLocked = true;
+        } else if (this.borderRight !== undefined && this.position.x + this.width > this.borderRight) {
+            this.position.x = this.borderRight - this.width;
+            hasBeenLocked = true;
         }
 
-        if (distanceX < 0.01) {
+        return hasBeenLocked;
-            this.position.x = positionX;
+    }
+
+    lockCameraIntoVerticalBorders()
+    {
+        let hasBeenLocked = false;
+
+        if (this.position.y < this.borderTop) {
+            this.position.y = this.borderTop;
+            hasBeenLocked = true;
+        } else if (this.borderBottom !== undefined && this.position.y + this.height > this.borderBottom) {
+            this.position.y = this.borderBottom - this.height;
+            hasBeenLocked = true;
         }
 
-        if (this.position.y !== positionY) {
+        return hasBeenLocked;
-            this.position.y += distanceY * delta * reactionSpeed;
+    }
-        }
 
-        if (distanceY < 0.01) {
+    focusPosition(x, y, reactionLatency = 1)
-            this.position.y = positionY;
+    {
+        this.focusPositionX(x, reactionLatency);
+        this.focusPositionY(y, reactionLatency);
+    }
+
+    focusPositionX(x, reactionLatency = 1)
+    {
+        let centerX = this.position.x + this.width * 0.5;
+        let distanceX = x - centerX;
+
+        if (!this.lockCameraIntoHorizontalBorders() && distanceX !== 0) {
+            if (Math.abs(distanceX) < 1) {
+                this.position.x = x - this.width * 0.5;
+            } else {
+                this.position.x += distanceX * (1 / reactionLatency);
+            }
+        }
+    }
+
+    focusPositionY(y, reactionLatency = 1)
+    {
+        let centerY = this.position.y + this.height * 0.5;
+        let distanceY = y - centerY;
+
+        if (distanceY !== 0) {
+            if (Math.abs(distanceY) < 1) {
+                this.position.y = y - this.height * 0.5;
+            } else {
+                this.position.y += distanceY * (1 / reactionLatency);
+            }
         }
     }
 }

js/module.js

@@ -128,11 +128,18 @@ function MainLoop(timestamp)
         )
     }
 
+    camera.focusPosition(
+        mrCroc.position.x - mrCroc.getWidth() * 0.5,
+        mrCroc.position.y - mrCroc.getHeight() * 0.5,
+        20
+    );
+    camera.lockCameraIntoBorders();
+
     /* Drawing */
     if (timestamp - lastRendered >= FRAME_DURATION) {
         context.clearRect(0, 0, window.innerWidth, window.innerHeight);
 
-        camera.centerCamera(mrCroc.position.x - mrCroc.getWidth() * 0.5, mrCroc.position.y - mrCroc.getHeight() * 0.5);
+        // camera.centerCamera(mrCroc.position.x - mrCroc.getWidth() * 0.5, mrCroc.position.y - mrCroc.getHeight() * 0.5);
         architecture.draw(context, camera);
         mrCroc.draw(context, camera);
         gisela.draw(context, camera);