V. díl Codemas
Vítám tě zpět u dalšího dílu! Minule jsme rozpohybovali naši hlavní postavu, ale zatím prochází zdmi jako bílá paní, a to nechceme. Na to se tedy dnes zaměříme.
Abychom něčeho takového dosáhli, určitě se nám budou hodit podmínky, které definují, za jakých okolností se lze posunout dál. Vytvoříme si proto novou funkci s názvem canMove. Jak jsme si říkali už dříve, je dobré mít jednotlivé funkcionality rozdělené do funkcí a volat je dle potřeby.
function canMove(x, y) { }
Tato funkce je trochu jiná než ostatní, které jsme zatím vytvářeli. Vidíme v závorkách x a y . To jsou takzvané parametry. Jednoduše chceme do funkce poslat nějaké informace, se kterými může funkce pracovat. V našem případě je to pozice hlavní postavy (tedy souřadnice x a y).
Teď musíme vymyslet samotnou podmínku, což už ovšem nebude tak jednoduché. Těch věcí, na které si musíme dávat pozor, je hned několik. Klasická podmínka nám tady stačit nebude, proto se dnes naučíme novinku – logické operátory AND a OR.
Logické operátory
Tyto operátory nám slouží k sestavení složitějšího výrazu, přičemž výsledkem ale pořád bude pravda (true), nebo nepravda (false).
Logický operátor AND se v JavaScriptu používá pomocí znaku &&. Znamená to, že všechny části výrazu musejí být pravdivé, aby z celého výrazu vzešla pravda. Pojďme si to ukázat na příkladu:
„Pokud chceme dát například párek v rohlíku, musíme mít párek A rohlík.“
V tuto chvíli mám 2 výrazy (mít párek, mít rohlík) oddělené písmenem A. Logicky musejí obě části platit, abychom si mohli připravit párek v rohlíku. Stejným způsobem se vyhodnocují podmínky v programování.
Na druhou stranu OR se v JavaScriptu používá pomocí znaku ||. Znamená to NEBO. Stačí tedy, aby jen jedna část složeného výrazu byla pravdivá, aby z celého výrazu vzešla pravda. Například:
„Do těsta přidáme šťávu z limetky NEBO šťávu z citrónu.“
V tomto výrazu jsou opět dvě tvrzení (šťáva z limety, šťáva z citronu), které jsou oddělené slovem NEBO – tedy nám stačí mít jen jedno z toho, abychom mohli upéct osvěžující koláč Naše funkce canMove bude vracet logickou hodnotu true, nebo false. Pojďme si do ní napsat podmínku:
function canMove(x, y) { return (y >= 0 && y < board.length && x >= 0 && x < board[y].length && board[y][x] != 1) }
Pomocí klíčového slova return můžeme z funkce dostat nějakou hodnotu zpět při zavolání. Za return máme celou podmínku, která v sobě má spoustu logických spojek AND. První 4 části nám zajišťují, abychom se nedostali za hranice bludiště, a poslední kontroluje, jestli se nesnažíme vstoupit na pole s hodnotou 1, tedy zeď.
Toto nám naprosto stačí a nyní tuto funkci musíme zavolat na správném místě. Logicky ji zavoláme v podmínkách u stisku šipek.
function movement() { if (keys[39] && canMove(player.x + 1, player.y)) { // šipka doprava hero.src = "images/pernicek_doprava.png" player.x++ } if (keys[37] && canMove(player.x - 1, player.y)) { // šipka doleva hero.src = "images/pernicek_doleva.png" player.x-- } if (keys[38] && canMove(player.x, player.y - 1)) { // šipka nahoru hero.src = "images/pernicek_nahoru.png" player.y-- } if (keys[40] && canMove(player.x, player.y + 1)) { // šipka dolů hero.src = "images/pernicek_dolu.png" player.y++ } }
Mezi polem keys a funkcí canMove je opět logická spojka AND. Na to, aby byla podmínka splněna, musíme stisknout klávesu a zároveň se na dalším poli nenachází zeď (podle směru).
Na závěr
Napsali jsme sice jednu funkci, ale zato hodně důležitou! Teď už se postava bude pohybovat jen v prostorech bludiště. Kód z dnešního dne najdeš zde. :)
Pokud s něčím bojuješ, neboj se nám napsat pod příspěvek na naší facebookové události, rádi ti pomůžeme. K dotazu ideálně pošli i URL adresu s odkazem na tvůj projekt. :)
Začala sis pohrávat s myšlenkou, že bys chtěla prozkoumat IT trochu víc? Podívej se na nabídku kurzů od Czechitas, kteří se zaměřují na vzdělávání převážně žen a dětí v IT. Jak si vybrat vhodný kurz zjistíš zde.
Michal z Czechitas