Zatím jsme si ukázali,
jak vytvořit pole a pracovat s ním.
Stejně jako jiné proměnné,
i pole můžeme dynamicky měnit
během vykonávání kódu.
Ukážu vám, co mám na mysli.
Zde máme program,
který zobrazuje Hoppera
držícího několik balónků.
A funguje to tak, že tady máme
pole xPositions se dvěma čísly,
která určují polohu balónků.
A tady dolů máme cyklus.
A tento cyklus prochází
každý prvek pole.
A pro každý prvek nakreslí čáru
z pozice x směrem k Hopperově ruce.
Poté v pozici x nakreslí elipsu,
která má velikost 30 x 40 pixelů.
A to je náš balónek.
Teď už víme, jak to funguje.
Pokud chceme další balónek,
jednoduše do pole přidáme další číslo,
jako například 300.
Pěkné, teď pro Hoppera
máme 3 balónky.
Co kdybychom ale chtěli dát uživateli,
který neumí programovat,
schopnost přidávat nové balónky.
Dali bychom uživateli
program a řekli:
"Klikni tam, kde bys chtěl mít
balónek a on se tam objeví."
Nebylo by to skvělé?
Jak bychom to ale měli provést?
Chceme, aby se náš program
průběžně měnil.
Pokaždé, když uživatel klikne,
objeví se nahoře balónek.
Začneme tím, že vše
přesuneme do draw function.
Tím bude jednoduché věci
průběžně měnit.
Toto přesuneme dolů
a pěkně odsadíme.
Teď chceme zkontrolovat,
zda uživatel kliká myší právě teď.
Můžeme to udělat pomocí if.
Napíšeme "if(mouseIsPressed)"
a něco k tomu doplníme.
Pokud dojde ke kliknutí myší,
chceme do pole přidat další číslo.
Pojďme vrátit dva prvky.
Nějakým způsobem chceme
do pole přidat číslo.
Ukážu vám jeden způsob,
jak bychom to mohli udělat.
Napíšeme:
xPositions[2]=mouseX
Ukážu vám, že to funguje.
Klikla jsem a mám zde balónek!
Co se stalo?
Program si u xPositions[2] řekl:
Najdi toto pole a jeho prvek č. 2,
a jak víte, to je vlastně třetí prvek.
Protože pole jsou
založena na nule.
A pokud se podíváte,
nemáme žádný třetí prvek.
Na tom místě nic není.
Takže to říká: najdi ho
a vlož do něj mouseX.
A protože tam nic není,
mění se to z ničeho v mouseX.
Takže nyní naše pole
obsahuje 3 položky.
A když si ho projede tento cyklus for,
nakreslí se třetí balónek.
To je hodně dobré,
zkusím pokračovat v klikání.
Při každém kliknutí
se nakreslí třetí balónek.
A to kdekoli kliknu myší.
Je to kvůli tomu, že se neustále
přepisuje prvek č. 2.
Ta věc s indexem 2.
Neustále to přepisujeme s
aktuální pozicí mouseX.
Takže vždy budeme mít
jenom 3 balónky.
Protože první máme na místě 0,
druhý máme na místě 1,
a ten na místě 2 neustále
měníme v průběhu programu.
A to je super, ale
co opravdu chceme,
je dát uživatelovi volnost
udělat hodně balónků.
Pokaždé když klikne,
objeví se nový balónek.
A to znamená,
že musíme přičítat přírůstek indexu
pro prvek pole, ve kterém ho ukládáme.
Nechceme, aby to bylo pokaždé 2.
Chceme, aby to bylo
2, 3, 4, 5 a 6 a tak dále.
Mohli bychom to udělat
pomocí počítadla.
Napíšeme "newInd = 2".
S tím začneme.
A tady namísto
2 řekneme newInd.
A potom řekneme
newInd++.
Pokaždé k tomu přičteme 1.
Začne to na 2, poté se to stane 3,
poté 4.
A po každém kliknutí
se to zvětší, zkusme to.
Balónková párty!
To vypadá hezky.
Ale není to úplně nejlepší
způsob, jak to provést.
Jak se ukazuje,
přidávání věcí do pole je něco,
co chceme dělat opravdu často.
Proto existuje mnohem jednodušší
způsob než tento.
Vymažu věci, co jsme udělali.
Toto už nepotřebujeme,
jednoduše to zakomentuji.
Teď napíšeme:
xPositions.push
A do závorek
napíšeme mouseX.
To, co teď děláme,
je že přivoláváme tuto metodu
pro pole xPositions.
Voláme něco jako příkaz.
Říkáme poli:
Vem tuto novou hodnotu, mouseX,
a vlož ji na konec svého pole.
Při každém zavolání se to tedy podívá
na mouseX a vloží to na konec pole.
Pole se bude zvětšovat a
zvětšovat a zvětšovat.
Pojďme to spustit znovu.
Funguje to!
A použili jsme k tomu
mnohem méně kódu než předtím.
Většinou budete používat push,
pokud budete chtít k poli něco přidat.
A to je celkem užitečné,
protože pak budete mít pole,
která se zvětšují a zvětšují.
A to se hodí u animace nebo
při interakci s uživatelem.
A pak toho můžete
udělat mnohem více.
Teď jste pravděpodobně viděli
90% nejčastějších použití polí.
Způsoby, kterými je použijete.
Ale můžete s nimi toho
dělat mnohem více.
Pokud máte otázky,
ptejte se v diskuzi.
Ale nejdřív se ujistěte se, že
jste pochopili tyto základy.