WEBVTT

00:00:01.150 --> 00:00:04.342
Nyní se podíváme na použití
složitějších podmínek při programování.

00:00:04.585 --> 00:00:06.482
Na ukázku mám
připravené plátno.

00:00:06.482 --> 00:00:08.497
Vypadá jako hra, kterou
jsem kdysi hrávala.

00:00:08.497 --> 00:00:09.387
Foursquare.

00:00:09.387 --> 00:00:11.826
Jsou tu 4 čtverce.

00:00:11.826 --> 00:00:14.827
Do jednoho se postavíte a pak 
odrážíte míč do těch ostatních.

00:00:14.827 --> 00:00:17.283
Teď kreslím elipsu na základě 
polohy mé myši.

00:00:17.283 --> 00:00:19.003
To je náš míč.

00:00:19.003 --> 00:00:21.767
Chtěla bych zvýraznit čtverec,
ve kterém máme naši myš.

00:00:21.767 --> 00:00:24.002
A to tím, že navrch
nakreslím bílý obdélník.

00:00:24.002 --> 00:00:25.786
K tomu ale potřebuju
podmíněný příkaz,

00:00:25.786 --> 00:00:28.034
protože to chci udělat 
pokaždé pro jeden.

00:00:28.034 --> 00:00:30.400
Vždy jen pro jeden daný
obdélník.

00:00:30.400 --> 00:00:34.002
Začneme tedy tím, že
si nakreslíme obdélník.

00:00:34.800 --> 00:00:40.357
Jednoduše překopíruji tento "rect"
a dám mu jinou výplň, bílou.

00:00:41.708 --> 00:00:44.835
A teď to obalíme
do podmínky "if".

00:00:45.419 --> 00:00:48.422
Jak vidíte, samo to za mě
doplní složené závorky.

00:00:48.422 --> 00:00:50.011
Přesunu to tedy dovnitř.

00:00:51.021 --> 00:00:53.764
Kdy chci ukazovat
tento obdélník?

00:00:54.023 --> 00:01:00.772
Já vím, že ho chci ukázat,
když mouseX je méně než 200.

00:01:02.758 --> 00:01:03.655
Funguje to.

00:01:03.655 --> 00:01:07.395
Ale když přejedu sem dolů,
pořád se ukazuje.

00:01:07.395 --> 00:01:09.811
Musím tedy koukat
i na hodnotu mouseY.

00:01:09.811 --> 00:01:12.719
Jak bych vytvořila podmínku pro obě
tyto věci?

00:01:12.719 --> 00:01:14.829
Na to máme 
operátor "and".

00:01:14.829 --> 00:01:18.070
Operátor "and" máme
pro kontrolu více podmínek.

00:01:18.070 --> 00:01:23.350
Jednoduše napíšeme && ("and")
a pak zadáme další podmínku.

00:01:23.350 --> 00:01:26.324
Takže mouseY 
je méně než 200.

00:01:26.778 --> 00:01:30.807
Teď se nám to tady nevybarvuje
a tady ano!

00:01:31.867 --> 00:01:35.901
Pojďme si ověřit, že to funguje.
Vytvoříme další čtverec.

00:01:36.631 --> 00:01:38.299
A něco pozměníme.

00:01:38.299 --> 00:01:40.748
Vezmeme teď 
tento obdélník.

00:01:42.038 --> 00:01:44.337
A opět musíme
změnit podmínky.

00:01:44.337 --> 00:01:45.819
Aby se správně zabarvoval.

00:01:45.819 --> 00:01:50.700
Nyní musí být 
mouseX více než 200.

00:01:50.700 --> 00:01:53.563
A mouseY je pořád
méně než 200.

00:01:53.563 --> 00:01:55.069
Super, podívejte na to!

00:01:56.149 --> 00:02:04.501
V míčové hře se při dotknutí okrajů
a rohů vždy musí zakřičet "EdgeBall".

00:02:04.501 --> 00:02:06.359
Uděláme si to i tady.

00:02:07.189 --> 00:02:10.205
Nejdřív si to napíšeme:
"EDGE BAL!!!!"

00:02:10.205 --> 00:02:15.598
Umístím to do prostředka
a zabarvím to červeně.

00:02:17.318 --> 00:02:19.969
Toto chci, aby se objevilo jen tehdy,
když jsem na okrajích.

00:02:19.969 --> 00:02:24.172
Přidáme proto podmínku "if"
a vložíme do ní tento kód.

00:02:27.408 --> 00:02:28.759
Kdy chci kód provést?

00:02:28.759 --> 00:02:30.197
Okraje máme i v prostředku.

00:02:30.197 --> 00:02:36.040
Prostředek je, když se
mouseX rovná (===) 200.

00:02:38.566 --> 00:02:40.904
Dostanu EdgeBall?

00:02:41.584 --> 00:02:44.636
Tady to máme, EdgeBall!

00:02:45.736 --> 00:02:49.422
Funguje to pro
tuto prostřední čáru.

00:02:49.422 --> 00:02:52.275
Ale chtěla bych, aby to fungovalo 
i na této čáře.

00:02:54.275 --> 00:02:58.024
A v tom případě 
potřebuji mouseY.

00:02:58.527 --> 00:03:01.527
A ta se rovná (===) 200,
což je hodnota prostřední čáry.

00:03:03.726 --> 00:03:07.760
Moc to nefunguje a teď
nefunguje vůbec nic.

00:03:08.323 --> 00:03:10.731
Jedna věc funguje,
jenom úplný prostředek.

00:03:10.731 --> 00:03:12.435
To je kvůli použití "and".

00:03:13.055 --> 00:03:16.219
Kód funguje, jen když
jsou obě podmínky pravdivé.

00:03:16.219 --> 00:03:18.248
A ty jsou pravdivé jen
v úplném prostředku.

00:03:18.248 --> 00:03:19.371
Já tedy potřebuji říct:

00:03:19.371 --> 00:03:22.091
Vykonej kód, když kterákoli
z těchto podmínek je pravdivá.

00:03:22.091 --> 00:03:24.701
A právě proto máme
operátor "or".

00:03:24.701 --> 00:03:27.323
Ten vypadá nějak takhle: ||.

00:03:27.323 --> 00:03:31.529
Jedná se o svislé čáry a 
asi jste je ještě nepoužili.

00:03:31.929 --> 00:03:35.764
Musíte se podívat na vaši klávesnici,
můžou být v pravém horním rohu.

00:03:35.764 --> 00:03:39.117
Doufám, že už jste 
je objevili.

00:03:39.117 --> 00:03:42.269
Podíváme se,
jestli to teď funguje.

00:03:42.269 --> 00:03:46.033
Funguje to tady,
tady a tady, skvělé!

00:03:46.993 --> 00:03:49.120
A můžeme sem klidně
přidávat víc podmínek.

00:03:49.120 --> 00:03:52.594
Oboje, "and" a "or" můžete
použít kolikrát jen chcete.

00:03:52.594 --> 00:03:55.863
Můžete klidně zkontrolovat 6
různých podmínek.

00:03:55.863 --> 00:03:58.331
Ještě jsme nezajistili
všechny rohy.

00:03:58.331 --> 00:04:04.436
Řekněme tedy, že když
mouseX je méně něž 3.

00:04:05.394 --> 00:04:07.965
Tak to by měl být
tento malý roh, super.

00:04:09.296 --> 00:04:14.532
A teď ještě když mouseX
je více než 397.

00:04:15.963 --> 00:04:17.596
Funguje to, perfektní!

00:04:17.596 --> 00:04:20.534
Uděláme to pro všechny okraje.

00:04:21.434 --> 00:04:24.539
Teď už znáte "and" (&&) a "or" (||)
a jak můžete vidět,

00:04:24.539 --> 00:04:27.696
umožňují vám ve vašich programech
dělat mnohem složitější podmínky.

00:04:27.696 --> 00:04:30.469
A to se určitě bude hodit.