-
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.
