Question

我正在做一项基于javascript的基本游戏，作为作业。虽然动画向好，但按左键时，我发现并没有理解如何使代码正确地获取图像的第二行，就像它的右侧一样图片在这里： https://imgur.com/aQLPd5X

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

  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

我已经解决了该程序，而且是管理方向。使用上面的代码，发生的是帧号将超出图片中我拥有的实际帧号，所以我要做的就是添加这个：

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

雪碧动画闪烁

1 个答案: