Javascript 画布内的人体条纹动画

我的朋友：

正如你所看到的，当人类行走时，图像保持在原来的位置，我可以更改代码吗？因此，当我按left时，图像会更改其位置，看起来像是向左行走，而不仅仅是原地行走

            function update() {
            canvas.clearRect(0, 0, CanvasWidth, CanvasHeight);
            if (keydown.left) {
                    CurentPos++;
                    if (CurentPos == ImgNumb) {
                        CurentPos = 0;
                    }
            }
        } // end update

试试这把小提琴：

基本上，每次更改帧时，“

left

”变量都会递减，因此他会向左移动

 // I draw the "init" picture at x=250, so he has more space to walk.

 var left = 250;

 function update() {
     canvas.clearRect(0, 0, CanvasWidth, CanvasHeight);
     if (keydown.left) {
         CurentPos++;
         if (CurentPos == ImgNumb) {
             CurentPos = 0;
         }
         left -= 5; // <----
     }
 } // end update

 ...
 ...


 function draw() {
     canvas.drawImage(characterImg, CurentPos * 64, 0, 64, 64, left, 200, 64, 64);
 }

//我在x=250处绘制了“init”图，这样他就有了更多的行走空间。
左向量=250；
函数更新（）{
canvas.clearRect（0，0，画布宽度，画布高度）；
如果（向下键。左）{
currentpos++；
if（currentpos==ImgNumb）{
currentpos=0；
}
左-=5；//这将起作用：

使用
x
变量（而不是添加新变量），您也可以在向右移动时使用它。将其添加到
update（）
中

及

呸！别客气。仅供参考，已经有
x
和
y
变量声明用于此目的，因此您可以使用它们。我修改了小提琴：哦，您说得对！我没有注意到变量，因为它没有被使用过……当然比声明另一个更好。我已经编辑了我的jsfiddle，现在角色可以走到同样正确，但翻转图像时有一个问题，因此他看起来像是在向右行走。请您提供帮助：您正在翻转整个画布，这不起作用。您将需要两个猴子图像，一个左，一个右（可能通过在开始时翻转左一个来制作右一个）。然后，您只需根据上一个移动方向选择要使用的图像（将其存储在按键功能中的一个变量中：-1左，1右）我已编辑了我的JSFIDLE，现在角色也可以向右行走，但翻转图像时出现问题，使其看起来像向右行走。请提供帮助：
if (keydown.left) {
    CurentPos++;
    x -= 3;  // I used 3 but increase this to move faster
    if (CurentPos == ImgNumb) {
         CurentPos = 0;
    }
}

canvas.drawImage(characterImg, CurentPos * 64, 0, 64, 64, 200 + x, 200, 64, 64);