mr-crocs-adventures/js/retro/RetroAnimation.js

import RetroSprite from "./RetroSprite.js";
import GeometryRect from "../geometry/GeometryRect.js";

export default class RetroAnimation extends RetroSprite
{
    constructor(image, frames, scale = 1, fps = 6)
    {
        super(image, scale);
        this.frames = frames;
        this.fps = fps;
        this.frameDuration = 1000 / this.fps;
        this.currentFrame = 0;
        this.lastUpdate = undefined;
        this.frameWidth = this.canvas.width / this.frames;
        this.isPlaying = false;
    }

    getWidth() {
        return this.frameWidth;
    }

    getRect() {
        return new GeometryRect(this.position.x, this.position.y, this.frameWidth, this.canvas.height);
    }

    setFootPosition(x, y) {
        this.position.x = x - this.frameWidth * 0.5;
        this.position.y = y - this.canvas.height;
    }

    play(timestamp)
    {
        this.isPlaying = true;

        if (this.lastUpdate === undefined) {
            this.lastUpdate = timestamp;
        }

        if (timestamp - this.lastUpdate >= this.frameDuration) {
            this.currentFrame = (this.currentFrame + 1) % this.frames;
            this.lastUpdate = timestamp;
        }
    }

    draw(context)
    {
        if (!this.isPlaying) {
            this.currentFrame = 0;
        }

        context.drawImage(
            this.canvas,
            this.frameWidth * this.currentFrame,
            0,
            this.frameWidth,
            this.canvas.height,
            this.position.x,
            this.position.y,
            this.frameWidth,
            this.canvas.height
        );

        this.isPlaying = false;
    }
}