Pojďme se podívat na další věci, které můžeme s objekty dělat.
Máme zde program, který jsme používali v tutoriálu o funkcích.
Program obsahuje funkci drawWinston,
která kreslí Winstona na určitých pozicích x a y.
A pak zde dolů čtyřikrát voláme drawWinston,
ale pokaždé s jinými souřadnicemi x a y.
A jak mě znáte, když se na tyto čtyři řádky kódu podívám,
hned vidím, jak jsou si podobny a chci namísto toho použít cyklus.
Uvnitř cyklu by kód stačilo zavolat jenom jednou,
přičemž by se pokaždé změnily souřadnice x a y.
Abychom to provedli, musíme najít způsob, jak uložit pozice x a y jako pole.
Tak uděláme cyklus.
Máme dvě řady hodnot,
takže bychom mohli mít dva pole, jedno pro pozici x a druhé pro y.
Jako pozici x můžeme mít 99, 294, 101 a 294.
Pro pozici y použijeme 117, 117, 316, 316.
A teď můžeme udělat cyklus:
for (var i = 0; i < xPositions.length; i++)
Takže projdeme každý prvek pozice x a napíšeme:
drawWinston(xPositions[i], yPositions[i]);
Poďme zkusit, jestli to funguje a smažeme toto.
Funguje to!
Takže teď stačí přivolat tento jeden řádek kódu,
který Winstona nakreslí pro každou pozici x pole xPositions.
Můžeme jich přidat víc, stačí napsat například 10.
Můžeme napsat 1, pak 1, znovu 1 a potom 100 a 1.
Teď to vypadá trochu chaoticky.
A to se mi moc nelíbí, protože se těžko rozeznává,
které x náleží ke kterému y.
A já chci, abych se při pohledu na program v párech x-y orientovala.
Nechce se mi dávat pozor na to,
abych je nad sebou perfektně srovnala.
Chtěla bych najít jiný způsob, jak tyto pozice ukládat.
Mohli bychom je uložit jako objekty.
Každá pozici jsou vlastně dva kusy informací, x a y.
Mohli bychom mít objekt, který ma vlastnosti x a y.
A pak bychom mohli mít pole objektů,
které by všechny pozice x a y obsahovalo.
Pojďme to udělat.
Napíšeme: "var positions" rovná se.
A uvnitř bude pole.
Ale každý jeho element bude namísto čísla objektem.
Zde máme složené závorky
A pak napíšeme x: 99, y: 117.
Tím jsme uložili jednu z našich pozic.
Teď přidáme další.
Napíšeme x: 294, y: 117.
Třetí bude x: 101, y: 316.
A poslední x: 294, y: 316.
A teď máme pole objektů,
ve kterém má každý objekt svoje vlastnosti x a y.
A tady dolů v našem cyklu for změníme toto takovým způsobem,
že se bude opakovat positions.legth a pak sem dolů předáme objekty.
Momentálně to předává celý objekt, ale my chceme předat jen x a y.
Takže napíšeme: "positions[i].x" a "positions[i].y".
Teď můžeme smazat tyto seskupená pole.
Náš kód je teď mnohem hezčí a zároveň je mnohem čitelnější.
A čím více čitelného kódu, tím lépe.
Mimo jiné je jednoduchší něco do kódu přidávat.
Mohla bych přidat pár souřadnic s hodnotami x: 200, y: 200.
A v prostředku se nám objeví Winston!
Nyní vám ukážu něco, co je ještě o něco lepší.
Všimněte si, že naše funkce momentálně očekává dva čísla.
Pak tyto dva čísla používá.
Můžeme naši funkci změnit tak, že namísto čísel očekává objekt.
A pak z tohoto objektu získá hodnoty x a y.
To znamená, že tady dolů by nám stačilo vložit objekt.
Pojďme to zkusit.
Máme zde jen objekt a je to pokazený.
A to proto, že naše funkce pořád očekává dva objekty.
A dostává pouze jeden.
Změníme to a řekneme, že dostane facePosition.
A dostali jsme chybu.
Říká, že faceX není definováno.
Protože předtím jsme ho použili jako argument,
teď ale neexistuje a předáváme pouze objekt.
Mohli bychom proto uložit pozici x objektu do proměnné faceX.
Říkáme tím, že máme tento objekt a víme, že má vlastnost x,
a proto ji uložíme do proměnné faceX.
A to samé můžeme udělat pro y:
faceY = facePosition.y
A zbytek funkce používá faceX a faceY.
Musíme je ale napsat správně.
Pokud bychom napsali xx, nebude to fungovat,
protože to tady dolů v našem poli objektů není.
Musí se to tedy shodovat.
Je to celkem užitečné, protože teď můžeme použít pole objektů,
dokonce i funkce pracující s objekty.
A jak zjistíte, vaše programy mohou být velmi efektivní s jejich použitím dat.
Obzvláště párování hodnot x a y je něčím velmi častým.
Věřím, že se vám hodí při tvorbě všech zdejších animací a kreseb.
Takže hurá na ta.