ludzki paski animacji wewnątrz płótnie

Question

mój jsfiddle: http://jsfiddle.net/yKvuK/

jak widać, gdy ludzki chód obraz pozostanie w jego miejsce mogę więc zmienić kod po naciśnięciu lewej obraz zmienić jego położenie i wygląda to chodzić w lewo i nie tylko chodzić w miejscu?

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

Answer 1

Spróbuj skrzypce:

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

Zasadniczo, za każdym razem zmieniać ramki, zmienna "left" jest zmniejszana, tak że porusza się w lewo.

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

---

btw, ja nigdy nie widziałem/pracował z płótna. Wygląda na to, że jestem po prostu szczęśliwy, aby wybrać odpowiednią zmienną: P

Answer 2

to będzie działać: FIDDLE

Użyj x zmienną (zamiast dodawać nowy) i będzie można z niego korzystać na move- prawy ruch również. Dodaj go w update().

if (keydown.left) { 
    CurentPos++; 
    x -= 3; // I used 3 but increase this to move faster 
    if (CurentPos == ImgNumb) { 
     CurentPos = 0; 
    } 
} 

i

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