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.