Fox idle looking around

lokxii · Sep 29, 2024 · 7849574 · 7849574
1 parent 2618c06
commit 7849574
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 0 deletions.
diff --git a/assets/fox-sprite-sheet.png b/assets/fox-sprite-sheet.png
diff --git a/fox.js b/fox.js
@@ -0,0 +1,73 @@
+// https://elthen.itch.io/2d-pixel-art-fox-sprites
+
+const canvas = document.querySelector(".fox-animation");
+const ctx = canvas.getContext("2d");
+
+const sprite = {
+    sheet: (function () {
+        const i = new Image();
+        i.src = "assets/fox-sprite-sheet.png";
+        return i; })(),
+    width: 96,
+    frames: {
+        idle: 5,
+        idle2: 14,
+        movement: 8,
+        catch: 11,
+        damage: 5,
+        sleep: 6,
+        death: 7,
+    },
+    fps: 10
+};
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function x_offset(frame) {
+    return sprite.width * frame
+}
+
+function y_offset(name) {
+    const indicies = {
+        idle: 0,
+        idle2: 1,
+        movement: 2,
+        catch: 3,
+        damage: 4,
+        sleep: 5,
+        death: 6,
+    };
+    return indicies[name] * sprite.width;
+};
+
+async function fox_loop() {
+    var frame = 0;
+    var animation = "idle";
+    while (true) {
+        ctx.drawImage(
+            sprite.sheet,
+            x_offset(frame), y_offset(animation), sprite.width, sprite.width,
+            0, 0, canvas.width, canvas.height);
+
+        frame += 1;
+        if (frame == sprite.frames[animation]) {
+            frame = 0;
+            if (animation == "idle") {
+                animation = "idle2";
+            } else {
+                animation = "idle";
+            }
+        }
+
+        await sleep(1000/sprite.fps);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+}
+
+sprite.sheet.addEventListener("load", () => {
+    setTimeout(async () => {
+        await fox_loop();
+    });
+});
diff --git a/index.html b/index.html
@@ -12,6 +12,12 @@
             font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
             margin: 0;
         }
+        .fox-animation {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+        }
         .top-container {
             background: #a7dee5;
             text-align: center;
@@ -93,6 +99,7 @@
     </head>
 
     <body>
+        <canvas width="96" height="96" class="fox-animation"></canvas>
         <div class="top-container">
             <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:p7gnw6dyxzd2m5tmy7ucpiut/bafkreicu2hkyuvojwzss367fycu33hr4wfqvfszbwwc4optoghesxnuw4u@jpeg">
             <div class="top-container-name"><p>ろくしぃ / lokxii</p></div>
@@ -204,5 +211,7 @@
                 Build with plain HTML / CSS / JS in a single file.
             </div>
         </div>
+
+        <script src="fox.js"></script>
     </body>
 </html>