Estoy tratando de hacer un juego 2d. Estoy usando esta hoja de sprites:

Quiero hacer la animación del personaje cuando se mueve, pero cada vez que muevo el personaje (con las flechas del teclado), el personaje se mueve al lado elegido, pero con fallas y no se mueve con la animación.

Ahí está mi código:

 let walkCycle = [0, 1, 2, 3]; let walkIndex = 0; let width = 50; let height = 60; let SCALE = 2; let SCALED_WIDTH = SCALE * width; let SCALED_HEIGHT = SCALE * height; function drawFrame(frameX, frameY, canvasX, canvasY) { context.drawImage( heroImg, frameX * width, frameY * height, width, height, canvasX, canvasY, SCALED_WIDTH, SCALED_HEIGHT ); } let DOWN = 0; let UP = 2; let LEFT = 3; let RIGHT = 1; let currentDirection = DOWN; function moveHero() { let hasMoved = false; if (38 in keysDown) { moveChar(0, -1, UP); hasMoved = true; } if (40 in keysDown) { moveChar(0, 1, DOWN); hasMoved = true; } if (37 in keysDown) { moveChar(-1, 0, LEFT); hasMoved = true; } if (39 in keysDown) { moveChar(1, 0, RIGHT); hasMoved = true; } if (!hasMoved) { walkInex = 0; } if (hasMoved) { walkIndex++; if (walkIndex >= walkCycle.length) { walkIndex = 0; } } drawFrame(walkCycle[walkIndex], 0, hero.x, hero.y); }