按下键时如何为Sprite工作表的特定部分设置动画

Question

我正在做一个游戏，我终于开始使用精灵表了。我希望单击时向Sprite工作表的特定部分添加动画，例如，向左箭头键。我想要这样，当我按左箭头时，面对和向左行走的精灵将被循环播放并设置动画；当我停止按左箭头时，空闲的精灵（看到角色站立的那个）将面向我最后按下的箭头。到目前为止，我得到了一个特定的帧，但是无法使用其他帧进行动画处理。

我曾尝试观看有关该主题的一些视频，但它们似乎都很困难且错综复杂，我真的不太清楚。我也去过一些站点，发现其中一个会遍历Sprite表的地方，但我不知道如何获得Sprite表的特定部分。

这是我从以下网站获得精灵表格代码的网站：https://gamedevelopment.tutsplus.com/tutorials/an-introduction-to-spritesheet-animation--gamedev-13099

这是精灵表：

var img = new Image();

img.src = "Hero.png";

function SpriteSheet( frameWidth, frameHeight,frameSpeed, endFrame) {

    var framesPerRow;
    var currentFrame = 12;  // the current frame to draw
    var counter = 0;       // keep track of frame rate
    framesPerRow = Math.floor(img.width / frameWidth);
    // Update the animation
    this.update = function() {

            // update to the next frame if it is time
        if (counter == (frameSpeed - 1)) {
            currentFrame = (currentFrame + 1) % endFrame;

        // update the counter
        counter = (counter + 1) % frameSpeed;
            }
    }

      this.draw = function(x, y) {
          // get the row and col of the frame
          var row = Math.floor(currentFrame / framesPerRow);
          var col = Math.floor(currentFrame % framesPerRow);

         ctx.drawImage(
             img,
             col * frameWidth, row * frameHeight,
             frameWidth, frameHeight,
             x, y,
             25, 25);
      };
}

var player = new SpriteSheet(16, 16, 3, 14)

function movePlayer() {

    if(keys[65]) {
        player.x -= 5;
    }

    if(keys[68]) {
        player.x += 5;
    }
}

function render() {

    ctx.clearRect(0,0, cw, ch)
    player.update()
    player.draw(15,15)

}

我希望能够单击箭头键，并使播放器看起来像朝那个方向行走。我还希望能够停止按该键，并让播放器处于闲置状态（而不是行走），并以这种方式面对键的方向。