精灵动画闪烁

Question

我正在做一个基于JavaScript的游戏，从我的学习作为家庭作业。虽然动画正常，但是当按下左键时，我没有找到理解如何使代码正确地拍摄图像的第二行，就像它的移动一样，就像在右侧一样。在这里：https://imgur.com/aQLPd5X

使游戏中的字符左右移动，并根据上面给出的链接拍摄正确的图像。

  function Draw(){
    context.clearRect(0,0,canvas.width,canvas.height);
    context.save();
            context.translate(x,0);
            context.drawImage(backgroundImg,0,0,canvas.width,canvas.height); // Backround image.
            context.drawImage(backgroundImg,canvas.width,0,canvas.width,canvas.height); // Backround image.
             x-=10;
        if( x <- canvas.width ){x=0;}
                context.restore();  
        if(Direction==0){ // Right Direction.
            frameNumber++;
        if(frameNumber==8){frameNumber=0};
            xSprite=(frameNumber%8) * frameWidth;
            context.drawImage(char2,xSprite,0,frameWidth,frameHeight,charx,chary,frameWidth,frameHeight); // Char going right.
                        }
        if(Direction==1){ // Left Direction.
            frameNumber--;
            context.drawImage(char2,xSprite*(frameNumber * frameHeight),frameHeight,frameWidth,frameHeight*2,charx,chary,frameWidth,frameHeight*2); // Char going left.
        if(frameNumber==0){frameNumber=8};
                xSprite=(frameNumber * frameWidth)*frameHeight;
            }
        }

Answer 1

我已经解决了这个计划，而且是在管理方向。上面的代码所发生的事情是framenumber会超出我在图片中拥有的实际帧数，所以我所做的就是添加：

if(frameNumber==0) {
  frameNumber=8
};
xSprite=(frameNumber%8) * frameWidth;
context.drawImage(char2,xSprite,***140***,frameWidth,frameHeight,charx,chary,frameWidth,frameHeight);