Zdraví
Vzhled a chování
Aktuální stav zdraví je uživateli zobrazen v levém dolním rohu. Zdraví je indikováno pomocí symbolu zdravotního kříže, který se při ztrátě zdraví podbarvuje do červené barvy a při léčení se naopak zabarvuje do barvy zelené. Za symbolem kříže je uživateli zobrazen procentuální stav zdraví v hodnotách od 0 do 100. Hodnota zdraví je ještě vykreslena pomocí pruhu pod procentuální hodnotou. Tento pruh se dle aktuálního stavu zdraví zkracuje nebo prodlužuje. Maximální hodnota zdraví je znázorněna průhlednějším pozadím pruhu. Pokud zdraví uživatele klesne pod kritickou hodnotu (20%) je o tomto stavu uživatel informován tím, že jsou číselná hodnota zdraví i pruh podbarveny trvale červenou barvou. Stisknutí tlačítka na myši simuluje náhodný úder nepřítelem. Držení klávesy Q simuluje proces léčení.
See the Pen HUD_Health by Filip Mička (@Filda360) on CodePen.
Ukázka výsledného HUD prvku zobrazující stav zdraví v CodePen
Popis implementace
Pro implementaci HUD prvku, který informuje o aktuálním stavu zdraví uživatele, byl zvolen přístup implementace pomocí HTML elementů.
V těle HTML dokumentu byl vytvořen kontejner (healthBox), který obsahuje ikonu zdravotního kříže (healthCross), text nesoucí číselnou hodnotu zdraví (numberHP),
prázdný kontejner sloužící pro vytvoření pruhu ukazatele zdraví s proměnnou délkou (healthIndicator) a
druhý prázdný kontejner pro vytvoření pozadí pruhu (backgroundIndicator).
V kódu JavaScriptu je vytvořen listener na kliknutí myši.
Při stisknutí tlačítka na myši dojde k vygenerování hodnoty náhodného úderu do proměnné randomHit.
O tuto hodnotu je následně dekrementována proměnná actualHealth, která reprezentuje aktuální procentuální zdraví uživatele.
Dále je provedena kontrola zda hodnota proměnné actualHealth neklesla pod 0. V případě že klesla, provede se korekce na hodnotu 0.
Následně je bílý obrázek zdravotního kříže nahrazen červeným po dobu, která je nastavena ve funkci setTimeout a po uplynutí této doby je ikona kříže opět změněna za ikonu bílé barvy.
Nakonec je volána funkce drawHealth. Změna ikon je provedena pomocí změny atributu src elementu obrázku (healthCross).
Ve funkci heal dochází k vyhodnocení , zda uživatel stiskl klávesu Q, nebo se nachází v boxu pro léčení.
Při kladném vyhodnocení je nejdříve provedena kontrola zda hodnota zdraví uživatele (proměnné actualHealth) již nepřesáhla hodnotu 100.
Pokud je hodnota zdraví nižší než 100 dojde k inkrementaci proměnné actualHealth o proměnnou healthGrowCoeficient.
Následně je bílá ikona kříže změněna za zelenou a opět po uplynutí prodlevy nastavené pomocí funkce setTimeout je navrácena ikona bílá.
Nakonec je volána funkce drawHealth.
Ve Funkci drawHealth je nejprve vyhodnoceno, zda hodnota zdraví je nižší než 20.
Pokud je hodnota nižší než 20, je nastylizován pruh ukazatele zdraví a textová hodnota zdraví do červené barvy (kritická hodnota).
Pokud hodnota není nižší než 20, je pruh i textová hodnota bílá. Pruh ukazatele zdraví má v CSS stylech definovanou velikost 200 px.
Pomocí nastavení vlastnosti clipPath je pruhu (healthIndicator) nastavena jeho procentuální viditelná délka dle aktuální hodnoty proměnné actualHealth.
Nakonec je aktualizováno číslo zobrazující procentuální stav zdraví (numberHP) pomocí změny atributu innerHTML.