Wiecie już, jak stworzyć tablicę
i dostać się do niej.

Tak jak pozostałe zmienne,

tablice mają świetną cechę:

możemy je zmieniać dynamicznie

w trakcie działania programu.

Pokażę, o co mi chodzi.

Ten program wyświetla
Hopper z balonikami. Ślicznie!

Mamy tablicę pozycji „x”,

zawierającą dwie liczby,

które pokazują,
gdzie mają być baloniki.

A tutaj mamy pętlę

przechodzącą przez każdy
element w tej tablicy.

Dla każdego elementu, pętla rysuje
kreskę od „x” do ręki Hopper,

a potem w pozycji „x”
rysuje elipsę

o wymiarach 30 na 40 pikseli.
Nasz balonik.

Fajnie!

Już wiemy, jak to działa.

Chcąc wyświetlić kolejny balonik,

dodamy liczbę do tablicy.

Np. - 300.

Pięknie! Teraz mamy trzy baloniki,
a Hopper się cieszy.

Ale powiedzmy, że chcemy
nauczyć użytkownika,

który nie programuje,

jak dodawać nowe baloniki.

Program powinien
mówić użytkownikowi:

„Kliknij tam, gdzie chcesz balonik,
a on się pokaże”.

Byłoby świetnie, prawda? Tak sądzę.

A zatem... jak to zrobić?

Chcemy, by program
zmieniał się w czasie.

Gdy użytkownik kliknie,

w tym miejscu pokaże się balonik.

Najpierw włóżmy wszystko
w funkcję „draw”,

żeby ułatwić zmiany.

Zacznijmy tutaj.

I jeszcze to... Świetnie!

Teraz sprawdzimy, czy użytkownik
właśnie wciska przycisk myszki.

Przyda się instrukcja warunkowa.

Jeśli przycisk jest wciśnięty,

to program musi coś zrobić. Co?

Po wciśnięciu przycisku
niech program dodaje coś do tablicy.

Zróbmy z powrotem dwa elementy.

Chcemy dodać liczbę do tablicy.

Pokażę wam jeden sposób.

Piszemy: xPositions...

nawias kwadratowy, dwójka...

= mouseX.

Zaraz zobaczycie, że to działa.

Kliknęłam i pokazał się balonik.

Co zrobił program? Powiedział...

xPositions[2] mówi:

„Znajdź tablicę
i element z numerem 2”.

Pamiętajcie, że to trzeci element,
bo tablica zaczyna się od 0.

Ale trzeciego elementu nie ma.
To miejsce jest puste.

Program mówi: „Znajdź miejsce
i ustaw mouseX”.

Ponieważ nie ma tam nic,

po prostu pojawia się
„mouseX”.

Teraz tablica ma trzy elementy.

A pętla FOR, przechodząc tędy,
narysuje trzeci balonik.

Super! Poklikam jeszcze,
zobaczycie, jak to działa.

Za każdym razem, gdy klikam,

pojawia się trzeci balonik.

Tam, gdzie kliknę myszką.

To dlatego, że ciągle zmieniamy...

miejsce drugie. Z numerem 2.

Ciągle to zmieniamy,
podając bieżącą pozycję mouseX.

Zawsze będą tylko trzy baloniki,

ten w punkcie 0,

ten w punkcie 1...
I stale zmieniamy...

punkt nr 2. W porządku?

To jest dobre,

ale chcemy, żeby użytkownik
robił masę baloników!

Każde kliknięcie to nowy balonik.

Czyli musimy stale zwiększać

numer elementu tablicy,
w którym to przechowujemy.

Nie zawsze ma być 2,
tylko 2, 3, 4, 5, 6 itd.

Zrobimy to dzięki
zmiennej liczącej.

Napiszemy „newInd=2”.

Od tego zaczniemy.

Tu napiszemy „newInd” zamiast „2”,

ale docelowo ma być „newInd++”.

Czyli za każdym razem dodajemy 1.

Zaczynamy od 2,

potem jest 3, 4...
Za każdym kliknięciem - więcej.

Spróbujmy!

Hura! Mnóstwo baloników!

Balonikowe szaleństwo!

Fajnie, prawda?

Ale to nie jest najlepsza metoda.

Okazuje się,

że będziemy często
dodawać elementy do tablicy.

Jest znacznie prostszy sposób.

Skasuję to, co napisaliśmy...

To już nie jest potrzebne.

Cofamy.

Robimy tak. Piszemy: „xPositions”,

potem kropka, „push”

i „mouseX”.

Przywołujemy tę metodę
w tablicy „xPositions”.

Wydajemy polecenie.

Mówimy: „Wepchnij nową wartość,

czyli mouseX, na koniec tablicy“.

Przy każdym przywołaniu,
czyli gdy ktoś klika myszką,

program spojrzy na „mouseX”
i umieści to na końcu tablicy.

Tablica będzie się zatem powiększać.

Zacznijmy od nowa.

Udało się! A program jest krótszy
niż przedtem!

Na ogół będziecie używać „push”,
żeby dodać elementy do tablicy.

I świetnie: tablice rosną
w czasie trwania programu.

Np. przy animacji, albo gdy użytkownik
coś robi... Możliwości jest dużo.

Widzieliście 90% tego, do czego
używa się tablic - i jak się to robi.

Ale to nie wszystko.

Jeśli macie pytania, zadawajcie je.

Tylko najpierw opanujcie podstawy!