Jak zacząć pracę z Canvasem? (2)

W poprzedniej części omówiliśmy, jak narysować poruszający się prostokąt. Okej, a co jeśli mielibyśmy więcej takich prostokątów? Jak zwykle w pytaniu programistycznym "co jeśli chcę więcej rzeczy mieć i robić coś z nimi?" odpowiedzią jest tablica + pętle.

Każdy prostokąt może być reprezentowany przez jakiś obiekt. Np. może mieć współrzędną x oraz y, czy inne parametry (np. prędkość, kolor). To od nas zależy. Rysując będziemy pobierali te parametry oraz uaktualniali pozycję wg prędkości, następnie będziemy to rysować. Zacznijmy od zdefiniowania tablicy z obiektami:

    const objects = [
        {x: 100, y: 100, vx: 1, vy: 0, color: 'purple'},
        {x: 100, y: 50, vx: 0, vy: 0.5, color: 'red'},    
    ];

Mamy tu 2 obiekty. Pierwszy jest fioletowy ma współrzędne (100, 100) i prędkość (1, 0), czyli jedzie w prawo. Drugi jest czerwony i ma współrzędne (100, 50) i prędkość (0, 0.5), czyli jedzie w dół.

Wyświetlmy to teraz na ekranie. Skasuj tamten poprzedni setInterval i napisz coś takiego:

    setInterval(() => {  
      ctx.clearRect(0, 0, canvas.width, canvas.height);	  
      objects.forEach(obj => {
          ctx.fillStyle = obj.color;
          ctx.fillRect(obj.x, obj.y, 40, 40);
      });
    }, 16);

No dobra, ale tu się nic nie animuje.

Dodajmy więc animację. Jak widzisz w obiektach mamy właściwość vx oraz vy. Będzie to nasza prędkość pozioma i pionowa.

Dodaj na początku funckji obsługującej setInterval takie coś:

      objects.forEach(obj => {
      	obj.x += obj.vx;
      	obj.y += obj.vy;
      });

Czyli przejeżdżamy przez obiekty za pomocą forEach i dla każdego obiektu dodajemy do współrzędnej x prędkość vx, a do współrzędnej y dodajemy vy. I jak odpalisz, to ruszy z miejsca:

Nawet możesz dodać grawitację. Po prostu musisz uwzględnić przyśpieszenie pionowe. Czyli dodawać jakąś wartość do zmiennej vy, cały czas przyśpieszając prędkość np.

obj.vy += 0.03;

I tak to wygląda "na żywo" (możesz wcisnąć przycisk restart, żeby odpalić od początku):

Możesz poeksperymentować z różnymi wartościami przyśpieszenia.

Cały nasz kod w JS na tym etapie wygląda tak:

    const objects = [
        {x: 100, y: 30, vx: 1, vy: 0, color: 'purple'},
        {x: 100, y: 100, vx: 0, vy: 0.5, color: 'red'},
    ];
    const canvas = document.createElement('canvas');
    canvas.style.border = '1px solid red'; // możesz usunąć tę linijkę
    canvas.width = 500;
    canvas.height = 500;
    document.body.append(canvas);

    const ctx = canvas.getContext('2d');

    let x = 100;
    setInterval(() => {  
      objects.forEach(obj => {
      	obj.x += obj.vx;
      	obj.y += obj.vy;
      	obj.vy += 0.03;
      });

      ctx.clearRect(0, 0, canvas.width, canvas.height);	  
      objects.forEach(obj => {
          ctx.fillStyle = obj.color;
          ctx.fillRect(obj.x, obj.y, 40, 40);
      });
    }, 16);
    

A tutaj możesz się pobawić na jsfiddle.