Working on cattoland

diff --git a/public/cattoland/cattoland.js b/public/cattoland/cattoland.js
index e447164e4f01bbd0a4e3d9c4965e8e8dd8bca99f..550f639a0b018519033624d3a3eefc7d2a458df7 100644 (file)
--- a/public/cattoland/cattoland.js
+++ b/public/cattoland/cattoland.js
@@ -12,6 +12,29 @@ let context;
 
 let events = new Map();
 
+let anims = {
+    idle_right: {
+        from: 16 * 0,
+        frame_count: 1,
+        length: 0,  
+    },
+    idle_left: {
+        from: 16 * 2,
+        frame_count: 1,
+        length: 0,  
+    },
+    move_right: {
+        from: 16 * 0,
+        frame_count: 2,
+        length: 5,
+    },
+    move_left: {
+        from: 16 * 2,
+        frame_count: 2,
+        length: 5,
+    },
+};
+
 let camera = camera_init();
 let images = new Map();
 let entities = [];
@@ -34,9 +57,42 @@ const entity_init = (x, y, width, height, sheet_rect, image) => {
         sheet_rect: sheet_rect,
         image: image,
         speed: 3,
+        anim: "idle_right",
+        anim_frame_size: 16,
+        anim_frame: 0,
+        anim_counter: 0,
     };
 };
 
+const entity_play_anim = (entity, anim) => {
+    entity.anim = anim;
+    entity.anim_frame = 0;
+    entity.anim_counter = 0;
+};
+
+const entity_update_anim = (entity) => {
+    let anim = anims[entity.anim];
+
+    if (anim.length === 0) {
+        return;
+    }
+
+    entity.anim_counter += 1;
+
+    if (entity.anim_counter < anim.length) {
+        return;
+    }
+
+    entity.anim_counter = 0;
+    entity.anim_frame += 1;
+
+    if (entity.anim_frame < anim.frame_count) {
+        return;
+    }
+
+    entity.anim_frame = 0;
+};
+
 const catto_init = () => {
     let image = images.get("cattoland/catto.png");
     let entity = entity_init(0, 0, 48, 48, { x: 0, y: 0, width: 16, height: 16 }, image);
@@ -72,20 +128,56 @@ const main = () => {
 
 const loop = (delta) => {
     { // Events.
+        let moving = false;
+
         if (events.get("KeyW") === "down") {
             player.y -= player.speed;
+            moving = true;
         }
 
         if (events.get("KeyA") === "down") {
             player.x -= player.speed;
+            moving = true;
+
+            if (player.anim !== "move_left") {
+                entity_play_anim(player, "move_left");
+            }
         }
 
         if (events.get("KeyS") === "down") {
             player.y += player.speed;
+            moving = true;
         }
 
         if (events.get("KeyD") === "down") {
             player.x += player.speed;
+            moving = true;
+
+            if (player.anim !== "move_right") {
+                entity_play_anim(player, "move_right");
+            }
+        }
+
+        if (!moving) {
+            if (player.anim === "move_right") {
+                entity_play_anim(player, "idle_right");
+            }
+
+            if (player.anim === "move_left") {
+                entity_play_anim(player, "idle_left");
+            }
+        }
+
+        for (let entity of entities) {
+            if (entity.anim === undefined) {
+                continue;
+            }
+
+            let anim = anims[entity.anim];
+
+            entity_update_anim(entity);
+
+            entity.sheet_rect.x = anim.from + entity.anim_frame_size * entity.anim_frame;
         }
     }