Drogocenny kamień! Śliczny!
A od jednego kamienia lepszy byłby cały rząd.
Już wiemy, że rząd kamieni najlepiej zrobić za pomocą pętli.
Użyjmy pętli FOR, by narysować 12 kamieni w rzędzie.
Od lewej do prawej, przez cały ekran.
Właśnie tak.
Piszemy: for (var i=0;
i < 12;
i++).
Weźmiemy ten wiersz
i przeniesiemy go tutaj.
Mamy już 12 kamieni,
jeden na drugim.
A chcemy, żeby tworzyły rząd.
Trzeba więc zmieniać „x”.
Teraz „x” wynosi 36, ale wartość za każdym razem ma być inna.
Czyli ma zależeć od „i”.
Możemy po prostu powiedzieć: „i” razy 36.
Najpierw jest 0,
potem 36, później 72 itd.
Super! Mamy rząd kamieni.
Przypomina mi to sceny z „Indiany Jonesa” lub „Aladyna”,
gdzie bohater odkrywa w jaskini skarb.
Znajduje więcej kamieni!
Nie jeden rząd, tylko cały stos!
Jak sprawić, że kamienie
pokryją ekran do samego dołu?
Możemy po prostu powtarzać pętlę FOR,
kopiować ją i wklejać,
za każdym razem zmieniając „y”.
Zmienimy na 60, potem na 90...
Mamy trzy rzędy kamieni. I dobrze!
Ale można się zanudzić.
Ciągle tylko kopiuję i wklejam, zmieniając jeden drobiazg.
Kiedyś, pisząc taki powtarzający się program,
spytalibyśmy: „Może warto użyć pętli?”.
Ale już to robimy!
Jak więc uniknąć tego...
kopiowania i wklejania raz po raz?
Mamy tzw. zagnieżdżone pętle FOR.
To pętla w pętli.
Zrobimy pętlę zewnętrzną,
która załatwi nam ruch w dół ekranu,
a pętla wewnętrzna
będzie robić to, co teraz,
czyli rysować kamienie w poziomie.
Pokażę, o co chodzi.
Piszemy: „for” i użyjemy innej zmiennej - „j”.
Bo „i” już używamy.
Zatem: for(var j=0;
j jest mniejsze od 13;
j++).
To będzie pętla zewnętrzna,
odpowiadająca za rysowanie w pionie.
Teraz weźmiemy jedną z poprzednich pętli FOR
i umieścimy ją tutaj.
Zróbmy wcięcie...
I skasujemy te stare.
Teraz mamy wszystkie kamienie w tym samym rzędzie.
Chcemy zmienić „y”.
Jak wcześniej, po kopiowaniu i wklejaniu.
Teraz „y” zawsze wynosi 90. Ma się zmieniać dla każdego rzędu.
Tak jak „x” jest zależny od „i”,
„y” ma być zależny od „j”.
Możemy więc...
zmienić to na coś takiego jak...
„j” razy 30.
Tak! Tyle kamieni!
Jeszcze raz omówmy to, co robi program.
Pętla zewnętrzna tworzy zmienną „j”
i powiększa ją do 13.
Przy każdym wykonaniu tej pętli zewnętrznej
uruchamia się pętla wewnętrzna.
Pętla ta tworzy zmienną „i”, która rośnie do 12.
Przy każdym wykonaniu pętli wewnętrznej rysuje się
obraz w pozycji „x” i „y”, zależnych od „i” i „j”.
Z tego powodu „i” zmienia się częściej niż „j.”
Żeby lepiej to zrozumieć, zobaczmy wartości „i” oraz „j”.
Teraz zrobię obraz,
wybiorę kolor wypełnienia
i użyję polecenia „text”,
żeby pokazać wartość „j”. Czyli: „textj”.
Umieszczę to w odpowiednim miejscu.
Teraz widzimy, że „j” zmienia się od 0 do 12.
To są też pozycje naszych rzędów kamieni.
Pokażmy wartości „i”. Zobaczmy, jak się zmieniają.
Dla „i” zróbmy inny kolor.
Wstawimy gdzieś „i”.
Zmienimy „x”, żeby kamienie rysowały się w poziomie.
To samo zrobimy dla „y”. Dobrze!
Widzimy, że „i” zmienia się od 0 do 11.
Jak mówiłam, „i”...
zmienia się znacznie częściej.
Ten fragment programu jest wykonywany częściej niż ten.
Ten - dla każdego wykonania tej wewnętrznej pętli FOR.
A ten - tylko dla każdego wykonania pętli zewnętrznej.
Mam nadzieję, że widząc wartości „i” i „j”
lepiej zrozumieliście działanie pętli zagnieżdżonej.
Niech już wrócą kamienie, są fajne!
Zagnieżdżone pętle FOR mają dużo zastosowań.
Pomyślmy, ile rzeczy na świecie
przypomina siatkę 2D: szachownica, kołdra,
gwiazdy na fladze USA, wzory, tapety...
Uruchomcie wyobraźnię, bawiąc się programem,
np. zmieniając obrazy.
Ja zmienię je w serduszka.
Żeby pokazać, jak kocham zagnieżdżone pętle FOR!