Fox following mouse

fox.js

@@ -18,15 +18,16 @@ const sprite = {
         sleep: 6,
         death: 7,
     },
-    fps: 10
+    fps: 9,
+    velocity: 15,
 };
 
 function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
 
 function x_offset(frame) {
-    return sprite.width * frame
+    return sprite.width * frame;
 }
 
 function y_offset(name) {
@@ -42,22 +43,106 @@ function y_offset(name) {
     return indicies[name] * sprite.width;
 };
 
+function set_idle_loop_count() {
+    return Math.floor(Math.random() * 8) + 2;
+}
+
+function is_mouse_touching_fox(current, mouse, width) {
+    return mouse.x >= current.x + width * 0.3 &&
+        mouse.x < current.x + width * 0.7 &&
+        mouse.y >= current.y + width * 0.5 &&
+        mouse.y < current.y + width;
+}
+
+function find_angle(current, mouse, width) {
+    const dx = (mouse.x - (current.x + width / 2));
+    const dy = (mouse.y - (current.y + width / 2));
+    return Math.atan2(dy, dx);
+}
+
+function fox_direction(current, mouse, width) {
+    return mouse.x >= current.x + width * 0.5 ? 1 : -1
+}
+
 async function fox_loop() {
     var frame = 0;
+    var count = 0;
+    var idle_loop = set_idle_loop_count();
     var animation = "idle";
+    var mode = "idle";
+    var direction = 1;
+    var currPos = { y: 0, x: 0, };
+    var mousePos = { y: sprite.width * 0.5, x: sprite.width * 0.5 };
+
+    document.addEventListener("mousemove", (event) => {
+        mousePos = {
+            x: event.clientX,
+            y: event.clientY,
+        };
+    });
+
     while (true) {
+        ctx.save();
+        ctx.scale(direction, 1);
         ctx.drawImage(
             sprite.sheet,
             x_offset(frame), y_offset(animation), sprite.width, sprite.width,
-            0, 0, canvas.width, canvas.height);
+            0, 0, canvas.width * direction, canvas.height);
+        ctx.restore();
 
         frame += 1;
+
+        switch (mode) {
+            case "idle": {
+                if (!is_mouse_touching_fox(currPos, mousePos, sprite.width)) {
+                    mode = "chase";
+                    animation = "movement";
+                    frame = 0;
+                }
+                break;
+            }
+            case "chase": {
+                if (is_mouse_touching_fox(currPos, mousePos, sprite.width)) {
+                    mode = "idle";
+                    animation = "idle";
+                    frame = 0;
+                }
+                break;
+            }
+        }
+
+        // movement
+        if (fox_direction(currPos, mousePos, sprite.width) != direction) {
+            direction *= -1;
+        }
+        if (mode == "chase") {
+            const angle = find_angle(currPos, mousePos, sprite.width);
+            const dy = Math.sin(angle) * sprite.velocity;
+            const dx = Math.cos(angle) * sprite.velocity;
+            currPos.y += dy;
+            currPos.x += dx;
+            canvas.style.top = currPos.y + "px";
+            canvas.style.left = currPos.x + "px";
+        }
+
+        // animation
         if (frame == sprite.frames[animation]) {
             frame = 0;
-            if (animation == "idle") {
-                animation = "idle2";
-            } else {
-                animation = "idle";
+            switch (animation) {
+                case "idle": {
+                    if (count == idle_loop) {
+                        animation = "idle2";
+                        count = 0;
+                    } else {
+                        count++;
+                    }
+                    break;
+                }
+                case "idle2": {
+                    idle_loop = set_idle_loop_count();
+                    animation = "idle";
+                    break;
+                }
             }
         }
 

index.html

@@ -13,7 +13,7 @@
             margin: 0;
         }
         .fox-animation {
-            position: absolute;
+            position: fixed;
             top: 0;
             left: 0;
             z-index: 1;