Lekcja 9

Obiekty i listy w JS

1. obiekty
2. tworzenie
3. listy
4. animacja

Programowanie obiektowe
Zmienne niezbędne do przesuwania obiektem po ekranie możemy tworzyć tak jak do tej pory w programie głównym. Jeśli jednak musimy symulować ruch kilku obiektów niezbędne staje się definiowanie kolejnych zmiennych, albo zmiennych złożonych, jak np. tablice.

Możemy jednak inaczej. Definiujemy funkcję, a w jej wnętrzu niezbędne parametry opisujące obiekt, a także inne funkcje, które zarządzają tymi parametrami, na przykład sposób poruszania się, odbijania, itp. W ten sposób powstaje złożona funkcja – obiekt. Jest to jakby foremka, za pomocą której możemy tworzyć nowe obiekty. Zmienne we wnętrzu obiektu nazywamy własnościami, a funkcje metodami. Odwołanie do danego obiektu w jego wnętrzu realizujemy za pomocą instrukcji this. Sam sposób programowania nazywamy programowaniem obiektowym, gdyż wiąże się z zupełnie odmiennym podejściem do algorytmiki.

Tworzenie obiektu
Obiekt Kwadrat jest funkcją, w której wnętrzu opisujemy własności kwadratu: x,y - lewy górny róg i bok i przypisujemy im wartości przekazane przez parametry funkcji: x1,y2,bok0 za pomocą słowa this. We wnętrzy obiektu Kwadrat tworzymy funkcję rysującą, korzystającą z utworzonych zmiennych wewnętrznych - własności.

Nowe obiekty (zmienne obiektowe) tworzymy za pomocą instrukcji new. A metody zdefiniowane wewnątrz obiektu uruchamiamy za pomocą „kropki”, Na przykład instrukcja  b1.rysuj() narysuje kwadrat o boku 120.

<canvas width="400" height="400" id="can"></canvas>
<script>
  var c = can.getContext("2d");

function Kwadrat(x0,y0,bok0) 
{
  // zmienne WŁASNOŚCI
  this.x = x0;
  this.y = y0;
  this.bok = bok0;
  // funkcja METODA rysująca
  this.rysuj = function() {
    c.strokeRect(this.x, this.y, this.bok, this.bok); 
  }
}

//tworzenie zmiennej obiektowej
var b1 = new Kwadrat(30, 30, 120); 
//rysowanie kwadratu
b1.rysuj();

</script>

Listy
Gdzie zapamiętać kilka kwadratów? Oczywiście w tablicy, która, ze względu na specyficzny sposób tworzenia nazywana jest listą. Typowa tablica ma od początku zdefiniowaną liczbę komórek. Lista jest tablicą, do której możemy dokładać lub usuwać komórki w trakcie działania programu.

Dodawanie nowego obiektu realizowane jest za pomocą instrukcji push. Nie musimy pamiętać ile jest obiektów na liście, w każdej chwili możemy skorzystać z instrukcji length. Elementy na liście ponumerowane są tak jak w tablicy: 0,1,2…

// pusta lista-tablica
var kwadraty = [];
// definiowanie nowych i przypisywanie do listy
for (var i=0; i<10; i=i+1) 
{
  var k = new Kwadrat(i*30,i*20,100);
  kwadraty.push(k);
}

// rysowanie kwadratów
for (var i=0; i<kwadraty.length; i=i+1) 
  kwadraty[i].rysuj(); 

• zmienna kwadraty jest pustą listą - tablicą

• w pętli tworzymy new nowe obiekty typu Kwadrat i wstawiamy do listy kwadraty

• w kolejnej pętli rysujemy kwadraty posługując się metodą rysuj zdefiniowaną w obiekcie Kwadrat

Animacja
I wreszcie nasz dobrze znany program do przesuwania kwadratów – tym razem w wersji obiektowej.

• Wszystkie niezbędne zmienne - własności zdefiniowane są we wnętrzu obiektu KWADRAT

• Funkcje - metody niezbędne do rysowania, poruszania i odbijania kwadratu opisane jest we wnętrzu obiektu KWADRAT.

• Obiekt KWADRAT otrzymuje z programu głównego jedynie parametry (x, y, bok, kat, dx, dy, dk), które są losowane, na podstawie których odbywa się tworzenie i poruszanie

Definiowanie obiektu KWADRAT

function KWADRAT(x, y, bok, kat, dx, dy, dk) {
  this.x = x;
  this.y = y;
  this.b = bok;
  this.k = kat;
  this.dx = dx;
  this.dy = dy;
  this.dk = dk;

  // zmiana położenia obiektu
  this.ZMIANA = function() {
    this.k = this.k + this.dk;
    this.x = this.x + this.dx;
    this.y = this.y + this.dy;
    if (this.x < 0 || this.x + this.b > w) { 
      this.dx = -this.dx;
      this.dk = -this.dk;
    }
    if (this.y < 0 || this.y + this.b > h) {
      this.dy = -this.dy;
      this.dk = -this.dk;
    }
    // po każdej zmianie automatyczne przerysowanie
    this.RYSUJ(); 
  };
  
  // rysowanie obiektu
  this.RYSUJ = function() {
    c.save(); 
    var x = this.x + this.b / 2;
    var y = this.y + this.b / 2;
    c.translate(x, y);
    c.rotate(this.k); 
    c.strokeRect(-this.b/2, -this.b/2, this.b, this.b);
    c.restore();
  };

Tworzenie listy zawierającej obiekty typu KWADRAT

// tworzenie losowych kwadratów-obiektów
//i zapamiętanie w tablicy-liście KWADRATY
var KWADRATY = [];
var maxBOK = 80;
var ILE=30;

for (var i = 0; i < ILE-1; i = i + 1) { 
  var x = Math.random() * (w - maxBOK);
  var y = Math.random() * (h - maxBOK);
  var bok = Math.random() * maxBOK+1;
  var kat = Math.random() * 2 - 1;
  var vx = Math.random() * 2 - 1;
  var vy = Math.random() * 2 - 1;
  var vk = 0.1 * (Math.random() * 2 - 1);
  KWADRATY.push(new KWADRAT(x,y,bok,kat,vx,vy,vk)); 
}

Animacja obiektów

var KROK = 50; 	
var CZAS;

// animacja - pętla główna
function ANIMACJA() {	
  c.clearRect(0, 0, w, h);
  for (var i=0; i<KWADRATY.length; i=i+1)   
    KWADRATY[i].ZMIANA(); 
  
  clearTimeout(CZAS);
  CZAS = setTimeout(ANIMACJA, KROK);
}

ANIMACJA()

Szablon

<canvas width="400" height="400" id="can"></canvas>
<script>
  var c = can.getContext("2d");
  var w = c.canvas.width;
  var h = canvas.height;



</script>