diff --git a/assets/fox-sprite-sheet.png b/assets/fox-sprite-sheet.png new file mode 100644 index 0000000..b393ff9 Binary files /dev/null and b/assets/fox-sprite-sheet.png differ diff --git a/fox.js b/fox.js new file mode 100644 index 0000000..1dd3ab1 --- /dev/null +++ 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 index 5074b9b..b758cc4 100644 --- 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 @@ +

ろくしぃ / lokxii

@@ -204,5 +211,7 @@ Build with plain HTML / CSS / JS in a single file.
+ +