javascript - キャンバス内の人間の縞模様のアニメーション

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

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