Naprogramuj si vlastní hru - lekce 7

Vítám tě zpět u dalšího dílu! Včera jsme se věnovali pohybu naší hlavní postavy, zatím však prochází jako bílá paní zdmi a na to se dnes zaměříme.

Abychom něčeho takového dosáhli, určitě se nám budou hodit podmínky, které řeknou, za jakých okolností se lze posunout dál. Vytvoříme si 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. Tyto operátory nám slouží k sestavení složitějšího výrazu, 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 ukázat na příkladu: „Pokud chceme jít v této době ven, tak musíme mít roušku A mít opodstatněný důvod k cestování (např. pracovní záležitosti).“ V tuto chvíli mám 2 výrazy (mít roušku, opodstatněný důvod) oddělené písmenem A. Logicky musejí obě části platit, abych mohl opustit domov. 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: „Je nutné mít roušku nebo šátek, abych se mohl bezpečně pohybovat venku“. V tomto výrazu jsou opět dvě tvrzení (mít roušku, mít šátek), jsou oddělené slovem NEBO, tedy mi stačí mít jen jedno z toho, abych mohl být venku.

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/right.png";

       player.x++;

   }

   if (keys[37] && canMove(player.x - 1, player.y)) {

       // šipka doleva

       hero.src = "images/left.png";

       player.x--;

   }

   if (keys[38] && canMove(player.x, player.y - 1)) {

       // šipka nahoru

       hero.src = "images/up.png";

       player.y--;

   }

   if (keys[40] && canMove(player.x, player.y + 1)) {

       // šipka dolů

       hero.src = "images/down.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. :)

‍