人間ストライプキャンバス

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

---

ところで、私は見たことがない/キャンバスで働きました。 FIDDLE

（代わりに新しい追加の）あなたのx変数を使用して、あなたがmove-上でそれを使用することができます：P

Answer 2

これは動作します：私は右の変数を選択するだけでラッキーだったように見えます右の動きも。 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);