Eu acabei indo por um caminho completamente diferente e gostaria de saber se há algum empecilho de ter seguido esse caminho.

html-------------------------------------------------

var sprite

    $(function(){

        sprite = createSprite('.sprite');

        setInterval(function(){
            sprite.nextFrame();
        },500);
    });

js-------------------------------------------------------

function createSprite(seletor){
    return {
        frameatual : 1,
        spritePlace: seletor,
        geraPrimeiroQuadro: $(seletor).addClass("frame"+1),
        nextFrame: function(){
            //pega o sprite no html
            let obj = $(this.spritePlace);

            //pega o frame atual do objeto sprite
            let frameatual = this.frameatual;

            //limpa class
            obj.attr('class', 'sprite');

            //reseta frames se chegou ao ultimo
            if(this.frameatual>9){

                this.frameatual=0;
            }else{
                //atualiza o sprite
                obj.addClass("frame"+frameatual);
            }

            //muda o indice do frame atual no objeto sprite
            this.frameatual++;

            //console.log("frameatual: "+ this.frameatual);
        }
    }
}

*alterei o nome de alguns campos após ver a aula/gabarito pois não estava claro(ex: usando x,y,z... segui trocando por seletor como no aula )