画布内的人体条纹动画

Question

我的jsfiddle:http: //jsfiddle.net/yKvuK/

你可以看到当人类行走时图像保留在它的位置我可以改变代码所以当我向左按下图像改变它的位置并且看起来它向左走而不仅仅是走到位？

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

Answer 1

试试这个小提琴：

http://jsfiddle.net/yKvuK/1/

基本上，每次更改框架时，“ 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);
 }

顺便说一句，我从未见过/使用过画布。看起来我很幸运选择了正确的变量：P