Pohled optikou
Vzhled a chování
Uživateli je nejdříve zobrazen běžný pohled přes zaměřovací kříž. Při stisknutí pravého tlačítka myši dojde ke změně pohledu přes herní optiku. Uživateli je zobrazena kruhová výseč pohledu se zaměřovacím křížem a pohled je osminásobně přiblížen. Při opětovném stisku pravého tlačítka myši je uživatel opět vrácen do běžného pohledu bez herní optiky.
Popis implementace
Pohled herní optikou je realizován pomocí HTML elementů.
Nejprve byl vytvořen kontejner (scope) v těle HTML dokumentu,
který obsahuje čtvercový obrázek herní optiky (scopePNG) a dále dva prázdné kontejnery (backgroundLeftScope a backgroundRightScope).
V CSS stylech je velikost obrázku nastavena na výšku okna. Nejprve je pomocí vlastností top a left přesunut levý horní roh obrázku na střed okna.
Pomocí funkce translate je obrázek posunut o 50 % jeho délky vlevo a o 50 % jeho výšky nahoru tak,
aby střed obrázku ležel uprostřed okna. Dále je pomocí funkce calc vypočítána šířka kontejnerů (vlastnost width),
které zakrývají zbylou část scény z pravé a levé strany.
U kontejneru backgroundRightScope je také nastavena vlastnost left tak,
aby byl kontejner umístěn vpravo od obrázku. Způsob výpočtu je znázorněn na obrázku níže.
Nákres principu výpočtu jednotlivých HTML elementů
V kódu JavaScriptu dochází k obsloužení stisku pravého tlačítka myši pomocí funkce,
která nejprve kontroluje, zda je již optika zobrazena pomocí proměnné scopeDisplayed.
Pokud optika není zobrazena, dojde k zobrazení celého kontejneru scope (pomocí vlastností display) a
překrytí scény obrázkem optiky a postranních krycích kontejnerů.
Použité zdroje
[1] Kód pro centrování obrázku, upraveno autorem: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
[2] Obrázek optiky: https://www.pngegg.com/en/png-byxst