JSFiddle - React, Tailwind, and code Playground

by Manawe

HTML

<canvas id="coinAnimation" width="1000" height="1000"></canvas>

JavaScript

(function () {

    var coin,
    coinImage,
    canvas;

    function gameLoop() {

        window.requestAnimationFrame(gameLoop);

        coin.update();
        coin.render();
    }


    function sprite(options) {

        var that = {},
        frameIndex = 0,
            tickCount = 0,
            ticksPerFrame = options.ticksPerFrame || 0,
            numberOfFrames = options.numberOfFrames || 1;
        that.context = options.context;
        that.width = options.width;
        that.height = options.height;
        that.image = options.image;
        that.a = 0;
        that.b = 54;
        that.c = 34;
        that.update = function () {

            tickCount += 1;
            if (tickCount > frameIndex) {

                tickCount = 0;

                // If the current frame index is in range
                if (frameIndex < numberOfFrames - 1) {
                    // Go to the next frame
                    frameIndex += 1;
                } else {
                    frameIndex = 0;
                }
            }
        };

        that.render = function () {

            // Clear the canvas
            //that.context.clearRect(0, 0, that.width, that.height);

            // Draw the animation
            that.context.drawImage(
            that.image,
            frameIndex * that.width / numberOfFrames,
            //offset from bottom + 34
            that.a,
            that.width / numberOfFrames,
            that.height,
            that.b + 54*tickCount,
            //offset from top -34
            that.c,
            that.width / numberOfFrames,
            that.height);
        };

        return that;
    }

    // Get canvas
    canvas = document.getElementById("coinAnimation");
    canvas.width = 540;
    canvas.height = 340;

    // Create sprite sheet
    coinImage = new Image();

    // Create sprite
    coin = sprite({
        context: canvas.getContext("2d"),
        width: 702,
        height: 1146,
        image: coinImage,
...