Some animations

lib/Animation.ts

@@ -0,0 +1,38 @@
+import { drawSprite, type Sprite } from "#/lib/Sprite.ts";
+
+export type Animation = {
+	xIndex: number;
+	yIndex: number;
+	frameTime: number;
+	frameDelta: number;
+};
+
+export function createAnimation(yIndex: number, frameTime: number): Animation {
+	return {
+		xIndex: 0,
+		yIndex,
+		frameTime,
+		frameDelta: 0,
+	};
+}
+
+export function animateSprite(
+	ctx: CanvasRenderingContext2D,
+	sprite: Sprite,
+	animation: Animation,
+	x: number,
+	y: number,
+	delta: number,
+): void {
+	drawSprite(ctx, sprite, animation.xIndex, animation.yIndex, x, y);
+
+	animation.frameDelta += delta;
+	if (animation.frameDelta >= animation.frameTime) {
+		animation.frameDelta = animation.frameDelta - animation.frameTime;
+
+		animation.xIndex += 1;
+		if (animation.xIndex >= sprite.xFrames) {
+			animation.xIndex = 0;
+		}
+	}
+}

lib/Sprite.ts

@@ -4,8 +4,6 @@ export type Sprite = {
 	yFrames: number;
 	frameWidth: number;
 	frameHeight: number;
-	xIndex: number;
-	yIndex: number;
 };
 
 export function createSprite(
@@ -19,26 +17,28 @@ export function createSprite(
 		yFrames,
 		frameWidth: image.width / xFrames,
 		frameHeight: image.height / yFrames,
-		xIndex: 0,
-		yIndex: 0,
 	};
 }
 
 export function drawSprite(
 	ctx: CanvasRenderingContext2D,
 	sprite: Sprite,
+	xIndex: number,
+	yIndex: number,
 	x: number,
 	y: number,
+	width?: number,
+	height?: number,
 ): void {
 	ctx.drawImage(
 		sprite.image,
-		sprite.xIndex * sprite.frameWidth,
-		sprite.yIndex * sprite.frameHeight,
+		xIndex * sprite.frameWidth,
+		yIndex * sprite.frameHeight,
 		sprite.frameWidth,
 		sprite.frameHeight,
 		x,
 		y,
-		sprite.frameWidth,
-		sprite.frameHeight,
+		width || sprite.frameWidth,
+		height || sprite.frameHeight,
 	);
 }