精灵动画闪烁答案

【问题标题】：Sprite animation flashing精灵动画闪烁
【发布时间】：2019-06-04 18:46:16
【问题描述】：

我正在做一个基于 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;
            }
        }

【问题讨论】：

标签： javascript animation sprite

【解决方案1】：

我已经解决了这个程序，它与管理方向有关。使用上面的代码，发生的事情是帧数会超出我在图片中的实际帧数，所以我所做的就是添加这个：

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

【讨论】：

非常感谢@GhostCat