WEBVTT

00:00:01.164 --> 00:00:04.437
Wiecie już, jak stworzyć tablicę
i dostać się do niej.

00:00:04.537 --> 00:00:06.315
Tak jak pozostałe zmienne,

00:00:06.415 --> 00:00:08.568
tablice mają świetną cechę:

00:00:08.668 --> 00:00:10.706
możemy je zmieniać dynamicznie

00:00:10.806 --> 00:00:13.043
w trakcie działania programu.

00:00:13.143 --> 00:00:15.348
Pokażę, o co mi chodzi.

00:00:15.448 --> 00:00:20.712
Ten program wyświetla
Hopper z balonikami. Ślicznie!

00:00:21.408 --> 00:00:25.100
Mamy tablicę pozycji „x”,

00:00:25.200 --> 00:00:27.021
zawierającą dwie liczby,

00:00:27.121 --> 00:00:29.678
które pokazują,
gdzie mają być baloniki.

00:00:29.778 --> 00:00:32.049
A tutaj mamy pętlę

00:00:32.150 --> 00:00:35.480
przechodzącą przez każdy
element w tej tablicy.

00:00:35.580 --> 00:00:40.309
Dla każdego elementu, pętla rysuje
kreskę od „x” do ręki Hopper,

00:00:40.409 --> 00:00:43.816
a potem w pozycji „x”
rysuje elipsę

00:00:43.916 --> 00:00:47.415
o wymiarach 30 na 40 pikseli.
Nasz balonik.

00:00:47.515 --> 00:00:48.692
Fajnie!

00:00:48.792 --> 00:00:51.223
Już wiemy, jak to działa.

00:00:51.323 --> 00:00:54.125
Chcąc wyświetlić kolejny balonik,

00:00:54.225 --> 00:00:56.772
dodamy liczbę do tablicy.

00:00:56.872 --> 00:00:58.537
Np. - 300.

00:00:58.637 --> 00:01:02.090
Pięknie! Teraz mamy trzy baloniki,
a Hopper się cieszy.

00:01:03.065 --> 00:01:06.919
Ale powiedzmy, że chcemy
nauczyć użytkownika,

00:01:07.019 --> 00:01:08.498
który nie programuje,

00:01:08.598 --> 00:01:10.751
jak dodawać nowe baloniki.

00:01:10.851 --> 00:01:14.320
Program powinien
mówić użytkownikowi:

00:01:14.420 --> 00:01:17.856
„Kliknij tam, gdzie chcesz balonik,
a on się pokaże”.

00:01:17.956 --> 00:01:20.503
Byłoby świetnie, prawda? Tak sądzę.

00:01:20.603 --> 00:01:23.601
A zatem... jak to zrobić?

00:01:23.701 --> 00:01:26.401
Chcemy, by program
zmieniał się w czasie.

00:01:26.501 --> 00:01:28.274
Gdy użytkownik kliknie,

00:01:28.374 --> 00:01:30.418
w tym miejscu pokaże się balonik.

00:01:30.518 --> 00:01:34.714
Najpierw włóżmy wszystko
w funkcję „draw”,

00:01:34.814 --> 00:01:37.802
żeby ułatwić zmiany.

00:01:38.313 --> 00:01:40.403
Zacznijmy tutaj.

00:01:40.503 --> 00:01:43.143
I jeszcze to... Świetnie!

00:01:43.243 --> 00:01:48.344
Teraz sprawdzimy, czy użytkownik
właśnie wciska przycisk myszki.

00:01:48.444 --> 00:01:50.248
Przyda się instrukcja warunkowa.

00:01:50.348 --> 00:01:52.732
Jeśli przycisk jest wciśnięty,

00:01:53.800 --> 00:01:56.564
to program musi coś zrobić. Co?

00:01:56.664 --> 00:02:01.463
Po wciśnięciu przycisku
niech program dodaje coś do tablicy.

00:02:01.563 --> 00:02:04.342
Zróbmy z powrotem dwa elementy.

00:02:04.442 --> 00:02:07.895
Chcemy dodać liczbę do tablicy.

00:02:07.995 --> 00:02:10.751
Pokażę wam jeden sposób.

00:02:10.851 --> 00:02:13.143
Piszemy: xPositions...

00:02:13.243 --> 00:02:15.116
nawias kwadratowy, dwójka...

00:02:15.650 --> 00:02:17.694
= mouseX.

00:02:18.437 --> 00:02:21.154
Zaraz zobaczycie, że to działa.

00:02:22.216 --> 00:02:25.194
Kliknęłam i pokazał się balonik.

00:02:25.294 --> 00:02:27.469
Co zrobił program? Powiedział...

00:02:28.538 --> 00:02:30.376
xPositions[2] mówi:

00:02:30.476 --> 00:02:34.273
„Znajdź tablicę
i element z numerem 2”.

00:02:34.373 --> 00:02:38.429
Pamiętajcie, że to trzeci element,
bo tablica zaczyna się od 0.

00:02:38.529 --> 00:02:42.005
Ale trzeciego elementu nie ma.
To miejsce jest puste.

00:02:42.105 --> 00:02:45.701
Program mówi: „Znajdź miejsce
i ustaw mouseX”.

00:02:45.801 --> 00:02:47.740
Ponieważ nie ma tam nic,

00:02:47.840 --> 00:02:51.316
po prostu pojawia się
„mouseX”.

00:02:51.416 --> 00:02:54.497
Teraz tablica ma trzy elementy.

00:02:54.597 --> 00:02:59.583
A pętla FOR, przechodząc tędy,
narysuje trzeci balonik.

00:03:00.465 --> 00:03:03.829
Super! Poklikam jeszcze,
zobaczycie, jak to działa.

00:03:03.929 --> 00:03:06.293
Za każdym razem, gdy klikam,

00:03:06.393 --> 00:03:08.714
pojawia się trzeci balonik.

00:03:08.814 --> 00:03:10.473
Tam, gdzie kliknę myszką.

00:03:11.402 --> 00:03:14.025
To dlatego, że ciągle zmieniamy...

00:03:14.838 --> 00:03:18.832
miejsce drugie. Z numerem 2.

00:03:18.932 --> 00:03:23.151
Ciągle to zmieniamy,
podając bieżącą pozycję mouseX.

00:03:23.251 --> 00:03:26.100
Zawsze będą tylko trzy baloniki,

00:03:26.200 --> 00:03:28.230
ten w punkcie 0,

00:03:28.330 --> 00:03:31.162
ten w punkcie 1...
I stale zmieniamy...

00:03:32.183 --> 00:03:34.130
punkt nr 2. W porządku?

00:03:34.749 --> 00:03:35.879
To jest dobre,

00:03:35.979 --> 00:03:39.869
ale chcemy, żeby użytkownik
robił masę baloników!

00:03:39.969 --> 00:03:42.632
Każde kliknięcie to nowy balonik.

00:03:43.379 --> 00:03:47.276
Czyli musimy stale zwiększać

00:03:47.376 --> 00:03:50.597
numer elementu tablicy,
w którym to przechowujemy.

00:03:50.697 --> 00:03:55.496
Nie zawsze ma być 2,
tylko 2, 3, 4, 5, 6 itd.

00:03:56.216 --> 00:03:59.185
Zrobimy to dzięki
zmiennej liczącej.

00:03:59.285 --> 00:04:00.790
Napiszemy „newInd=2”.

00:04:00.890 --> 00:04:02.439
Od tego zaczniemy.

00:04:02.539 --> 00:04:05.597
Tu napiszemy „newInd” zamiast „2”,

00:04:05.697 --> 00:04:09.475
ale docelowo ma być „newInd++”.

00:04:09.575 --> 00:04:11.657
Czyli za każdym razem dodajemy 1.

00:04:11.757 --> 00:04:13.004
Zaczynamy od 2,

00:04:13.549 --> 00:04:16.834
potem jest 3, 4...
Za każdym kliknięciem - więcej.

00:04:16.935 --> 00:04:18.043
Spróbujmy!

00:04:18.252 --> 00:04:20.127
Hura! Mnóstwo baloników!

00:04:20.226 --> 00:04:21.944
Balonikowe szaleństwo!

00:04:22.043 --> 00:04:24.126
Fajnie, prawda?

00:04:24.708 --> 00:04:27.122
Ale to nie jest najlepsza metoda.

00:04:27.222 --> 00:04:28.469
Okazuje się,

00:04:28.569 --> 00:04:32.044
że będziemy często
dodawać elementy do tablicy.

00:04:32.144 --> 00:04:34.715
Jest znacznie prostszy sposób.

00:04:34.815 --> 00:04:37.896
Skasuję to, co napisaliśmy...

00:04:37.996 --> 00:04:40.907
To już nie jest potrzebne.

00:04:41.007 --> 00:04:42.377
Cofamy.

00:04:42.477 --> 00:04:45.442
Robimy tak. Piszemy: „xPositions”,

00:04:46.073 --> 00:04:48.132
potem kropka, „push”

00:04:48.232 --> 00:04:50.226
i „mouseX”.

00:04:50.916 --> 00:04:56.237
Przywołujemy tę metodę
w tablicy „xPositions”.

00:04:56.337 --> 00:04:58.353
Wydajemy polecenie.

00:04:58.453 --> 00:05:02.254
Mówimy: „Wepchnij nową wartość,

00:05:02.354 --> 00:05:05.342
czyli mouseX, na koniec tablicy“.

00:05:05.442 --> 00:05:09.080
Przy każdym przywołaniu,
czyli gdy ktoś klika myszką,

00:05:09.180 --> 00:05:12.494
program spojrzy na „mouseX”
i umieści to na końcu tablicy.

00:05:12.594 --> 00:05:15.118
Tablica będzie się zatem powiększać.

00:05:15.218 --> 00:05:16.859
Zacznijmy od nowa.

00:05:17.648 --> 00:05:22.247
Udało się! A program jest krótszy
niż przedtem!

00:05:23.082 --> 00:05:27.401
Na ogół będziecie używać „push”,
żeby dodać elementy do tablicy.

00:05:27.501 --> 00:05:31.541
I świetnie: tablice rosną
w czasie trwania programu.

00:05:31.641 --> 00:05:36.224
Np. przy animacji, albo gdy użytkownik
coś robi... Możliwości jest dużo.

00:05:36.324 --> 00:05:41.542
Widzieliście 90% tego, do czego
używa się tablic - i jak się to robi.

00:05:41.642 --> 00:05:43.864
Ale to nie wszystko.

00:05:43.964 --> 00:05:47.045
Jeśli macie pytania, zadawajcie je.

00:05:47.145 --> 00:05:49.738
Tylko najpierw opanujcie podstawy!