Munice

Popis implementace

Tento HUD prvek byl implementován pomocí HTML elementů. V těle HTML dokumentu byly vytvořeny kontejnery pro ukazatel stavu munice v pravém horním rohu (munitionBox) a indikátory nabíjení ve střední části (reloadingBox). Kontejner munitionBox obsahuje ikonu použité zbraně a ikonu nábojnice. Kontejnery reloadingBox obsahují ikonu pro nabíjení a ikonu pro načítání. Vše je pomocí CSS stylů nastylizováno do požadovaného vzhledu a umístění.

Při stisknutí tlačítka na myši dojde k zachycení této události pomocí listeneru. Pokud je v zásobníku alespoň jeden náboj, dojde k dekrementaci proměnné munitionInMagazine o 1 a následně je volána funkce drawMunition.

Ve funkci drawMunition dochází nejdříve k vyčištění celého kontejneru munitionBox, následně je do kontejneru opět přidána ikona používané zbraně. V cyklech jsou poté vytvářeny a zároveň stylizovány elementy obrázků prázdných a plných nábojnic, které jsou přidávány do kontejneru. Nakonec je aktualizován obsah elementu nesoucí číselný popis stavu munice.

Při vyhodnocování stisknutých pohybových kláves ve funkci move je také vyhodnocováno, zda uživatel nestiskl klávesu R. Pokud došlo ke stisknutí, dojde k volání funkce reloadMagazine.

Ve funkci reloadMagazine dochází nejprve k zavolání funkce hideReticle. Tato funkce slouží pro skrytí zaměřovacího kříže. Následně jsou zobrazeny ikony pro nabíjení (nastavením vlastnosti display na hodnotu inline) a je spuštěna animace načítání. Délka animace (rotace) je nastavena konstantou reloadingTime. Rotace je v CSS stylech nastavena od -40° do 320° z důvodu startu a konce indikátoru načítání ve vrchní poloze. Po skončení animace je hodnota proměnné munitionInMagazine nastavena na hodnotu magazineCapacity, ikony pro přebíjení jsou skryty (nastavením vlastnosti display na hodnotu none) a je opět volána funkce drawMunition pro překreslení ukazatele stavu munice.