WEBVTT 00:00:01.338 --> 00:00:03.792 Drogocenny kamień! Śliczny! 00:00:03.892 --> 00:00:07.987 A od jednego kamienia lepszy byłby cały rząd. 00:00:08.087 --> 00:00:12.376 Już wiemy, że rząd kamieni najlepiej zrobić za pomocą pętli. 00:00:12.476 --> 00:00:15.928 Użyjmy pętli FOR, by narysować 12 kamieni w rzędzie. 00:00:16.027 --> 00:00:19.133 Od lewej do prawej, przez cały ekran. 00:00:19.233 --> 00:00:20.713 Właśnie tak. 00:00:21.757 --> 00:00:25.867 Piszemy: for (var i=0; 00:00:25.967 --> 00:00:28.653 i < 12; 00:00:28.753 --> 00:00:30.086 i++). 00:00:30.758 --> 00:00:32.786 Weźmiemy ten wiersz 00:00:32.886 --> 00:00:34.388 i przeniesiemy go tutaj. 00:00:35.503 --> 00:00:38.190 Mamy już 12 kamieni, 00:00:38.290 --> 00:00:40.054 jeden na drugim. 00:00:40.154 --> 00:00:43.119 A chcemy, żeby tworzyły rząd. 00:00:43.219 --> 00:00:45.209 Trzeba więc zmieniać „x”. 00:00:45.309 --> 00:00:49.253 Teraz „x” wynosi 36, ale wartość za każdym razem ma być inna. 00:00:49.353 --> 00:00:51.439 Czyli ma zależeć od „i”. 00:00:51.539 --> 00:00:55.727 Możemy po prostu powiedzieć: „i” razy 36. 00:00:56.139 --> 00:00:57.957 Najpierw jest 0, 00:00:58.057 --> 00:01:01.440 potem 36, później 72 itd. 00:01:02.296 --> 00:01:04.057 Super! Mamy rząd kamieni. 00:01:04.157 --> 00:01:08.173 Przypomina mi to sceny z „Indiany Jonesa” lub „Aladyna”, 00:01:08.273 --> 00:01:11.099 gdzie bohater odkrywa w jaskini skarb. 00:01:11.199 --> 00:01:13.607 Znajduje więcej kamieni! 00:01:13.707 --> 00:01:16.672 Nie jeden rząd, tylko cały stos! 00:01:16.772 --> 00:01:21.156 Jak sprawić, że kamienie 00:01:21.256 --> 00:01:23.243 pokryją ekran do samego dołu? 00:01:24.334 --> 00:01:27.887 Możemy po prostu powtarzać pętlę FOR, 00:01:27.987 --> 00:01:30.046 kopiować ją i wklejać, 00:01:30.146 --> 00:01:32.345 za każdym razem zmieniając „y”. 00:01:33.390 --> 00:01:37.142 Zmienimy na 60, potem na 90... 00:01:37.242 --> 00:01:41.401 Mamy trzy rzędy kamieni. I dobrze! 00:01:41.501 --> 00:01:44.048 Ale można się zanudzić. 00:01:44.148 --> 00:01:48.779 Ciągle tylko kopiuję i wklejam, zmieniając jeden drobiazg. 00:01:48.879 --> 00:01:52.726 Kiedyś, pisząc taki powtarzający się program, 00:01:52.826 --> 00:01:56.564 spytalibyśmy: „Może warto użyć pętli?”. 00:01:56.664 --> 00:01:58.151 Ale już to robimy! 00:01:58.251 --> 00:02:01.043 Jak więc uniknąć tego... 00:02:01.143 --> 00:02:03.692 kopiowania i wklejania raz po raz? 00:02:03.792 --> 00:02:06.618 Mamy tzw. zagnieżdżone pętle FOR. 00:02:06.718 --> 00:02:08.638 To pętla w pętli. 00:02:09.219 --> 00:02:11.842 Zrobimy pętlę zewnętrzną, 00:02:11.942 --> 00:02:14.768 która załatwi nam ruch w dół ekranu, 00:02:14.868 --> 00:02:16.440 a pętla wewnętrzna 00:02:16.540 --> 00:02:19.157 będzie robić to, co teraz, 00:02:19.257 --> 00:02:21.386 czyli rysować kamienie w poziomie. 00:02:21.486 --> 00:02:23.615 Pokażę, o co chodzi. 00:02:23.715 --> 00:02:28.050 Piszemy: „for” i użyjemy innej zmiennej - „j”. 00:02:28.150 --> 00:02:29.513 Bo „i” już używamy. 00:02:29.613 --> 00:02:31.601 Zatem: for(var j=0; 00:02:31.701 --> 00:02:33.994 j jest mniejsze od 13; 00:02:34.274 --> 00:02:36.014 j++). 00:02:36.964 --> 00:02:38.785 To będzie pętla zewnętrzna, 00:02:38.885 --> 00:02:41.425 odpowiadająca za rysowanie w pionie. 00:02:41.525 --> 00:02:45.047 Teraz weźmiemy jedną z poprzednich pętli FOR 00:02:45.147 --> 00:02:46.928 i umieścimy ją tutaj. 00:02:47.648 --> 00:02:49.436 Zróbmy wcięcie... 00:02:50.411 --> 00:02:51.943 I skasujemy te stare. 00:02:52.919 --> 00:02:58.213 Teraz mamy wszystkie kamienie w tym samym rzędzie. 00:02:58.313 --> 00:03:01.208 Chcemy zmienić „y”. 00:03:01.308 --> 00:03:03.994 Jak wcześniej, po kopiowaniu i wklejaniu. 00:03:04.094 --> 00:03:08.592 Teraz „y” zawsze wynosi 90. Ma się zmieniać dla każdego rzędu. 00:03:09.214 --> 00:03:12.354 Tak jak „x” jest zależny od „i”, 00:03:12.454 --> 00:03:15.070 „y” ma być zależny od „j”. 00:03:15.821 --> 00:03:18.066 Możemy więc... 00:03:18.166 --> 00:03:21.240 zmienić to na coś takiego jak... 00:03:22.438 --> 00:03:24.242 „j” razy 30. 00:03:24.342 --> 00:03:27.656 Tak! Tyle kamieni! 00:03:28.700 --> 00:03:32.127 Jeszcze raz omówmy to, co robi program. 00:03:32.227 --> 00:03:34.622 Pętla zewnętrzna tworzy zmienną „j” 00:03:34.722 --> 00:03:37.478 i powiększa ją do 13. 00:03:37.578 --> 00:03:41.402 Przy każdym wykonaniu tej pętli zewnętrznej 00:03:41.502 --> 00:03:43.422 uruchamia się pętla wewnętrzna. 00:03:43.522 --> 00:03:47.884 Pętla ta tworzy zmienną „i”, która rośnie do 12. 00:03:47.984 --> 00:03:50.876 Przy każdym wykonaniu pętli wewnętrznej rysuje się 00:03:50.976 --> 00:03:54.751 obraz w pozycji „x” i „y”, zależnych od „i” i „j”. 00:03:54.851 --> 00:03:59.142 Z tego powodu „i” zmienia się częściej niż „j.” 00:03:59.242 --> 00:04:04.157 Żeby lepiej to zrozumieć, zobaczmy wartości „i” oraz „j”. 00:04:04.257 --> 00:04:08.290 Teraz zrobię obraz, 00:04:08.390 --> 00:04:11.007 wybiorę kolor wypełnienia 00:04:11.107 --> 00:04:13.247 i użyję polecenia „text”, 00:04:13.347 --> 00:04:16.232 żeby pokazać wartość „j”. Czyli: „textj”. 00:04:16.332 --> 00:04:20.411 Umieszczę to w odpowiednim miejscu. 00:04:21.093 --> 00:04:25.564 Teraz widzimy, że „j” zmienia się od 0 do 12. 00:04:25.664 --> 00:04:30.286 To są też pozycje naszych rzędów kamieni. 00:04:30.976 --> 00:04:34.970 Pokażmy wartości „i”. Zobaczmy, jak się zmieniają. 00:04:35.070 --> 00:04:38.801 Dla „i” zróbmy inny kolor. 00:04:42.284 --> 00:04:45.628 Wstawimy gdzieś „i”. 00:04:45.728 --> 00:04:49.599 Zmienimy „x”, żeby kamienie rysowały się w poziomie. 00:04:49.699 --> 00:04:54.196 To samo zrobimy dla „y”. Dobrze! 00:04:54.296 --> 00:04:59.421 Widzimy, że „i” zmienia się od 0 do 11. 00:04:59.521 --> 00:05:02.772 Jak mówiłam, „i”... 00:05:02.872 --> 00:05:04.994 zmienia się znacznie częściej. 00:05:05.094 --> 00:05:08.616 Ten fragment programu jest wykonywany częściej niż ten. 00:05:08.716 --> 00:05:13.529 Ten - dla każdego wykonania tej wewnętrznej pętli FOR. 00:05:13.629 --> 00:05:17.927 A ten - tylko dla każdego wykonania pętli zewnętrznej. 00:05:18.902 --> 00:05:21.967 Mam nadzieję, że widząc wartości „i” i „j” 00:05:22.067 --> 00:05:25.799 lepiej zrozumieliście działanie pętli zagnieżdżonej. 00:05:26.519 --> 00:05:29.235 Niech już wrócą kamienie, są fajne! 00:05:30.082 --> 00:05:33.717 Zagnieżdżone pętle FOR mają dużo zastosowań. 00:05:33.817 --> 00:05:36.712 Pomyślmy, ile rzeczy na świecie 00:05:36.812 --> 00:05:39.684 przypomina siatkę 2D: szachownica, kołdra, 00:05:39.784 --> 00:05:43.997 gwiazdy na fladze USA, wzory, tapety... 00:05:44.097 --> 00:05:46.929 Uruchomcie wyobraźnię, bawiąc się programem, 00:05:47.029 --> 00:05:49.228 np. zmieniając obrazy. 00:05:49.328 --> 00:05:52.943 Ja zmienię je w serduszka. 00:05:53.485 --> 00:05:58.539 Żeby pokazać, jak kocham zagnieżdżone pętle FOR!