Question

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

            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

Answer 2

这将有效： FIDDLE

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

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);

画布内的人体条纹动画

2 个答案: