VII. díl Codemas
Vítám tě u předposledního dílu této výzvy. Zbývají nám 2 poslední věci k dokončení hry – časomíra a ukončení hry.
V tomto díle se zaměříme na časomíru. Podobným způsobem jako v minulém díle si musíme propojit JavaScript s elementem, který vypisuje skóre. Přesuneme se na objekt game a přidáme do něj odkaz na časomíru v HTML a vlastnost time, která bude udržovat aktuální čas.
let game = { timeElement: document.getElementById("time"), scoreElement: document.getElementById("score"), score: 0, time: 0 }
Vlastnost time využijeme ve funkci startGame, kde jí nastavíme hodnotu (na 60 sekund), a později zavoláme funkci, která obsluhuje časomíru.
function startGame() { game.time = 60 createitems() draw() }
Na samotnou časomíru si vytvoříme samostatnou funkci s názvem timer. Protože chceme, aby nám časovač běžel souběžně s naší hrou, vytvoříme si v ní další funkci s názvem startTimer, kterou zavoláme na konci funkce timer. Funkce startTimer bude posílat do funkce 2 hodnoty – aktuální čas a element v HTML, ve kterém čas zobrazíme. Obě vlastnosti jsme si vytvořili v objektu game.
function startTimer(duration, display) { } startTimer(game.time, game.timeElement)
Ve funkci startTimer si vytvoříme 3 proměnné – timer, minutes a seconds. Do proměnné timer uložíme náš zvolený čas time a do ostatních výchozí hodnotu 0.
function timer() { function startTimer(duration, display) { let timer = duration let minutes = 0 let seconds = 0 } startTimer(game.time, game.timeElement) }
Pomocí funkce setInterval pak nastavíme samotný odpočet.
setInterval(function() { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10) minutes = minutes < 10 ? "0" + minutes : minutes seconds = seconds < 10 ? "0" + seconds : seconds display.innerText = minutes + ":" + seconds if (--timer < 0) { timer = duration } }, 1000)
Do funkce setInterval jsme umístili ještě jednu funkci beze jména, která převádí hodnotu v proměnné timer na minuty a sekundy. Následně taky vidíme ve funkci tyto dva řádky kódu:
minutes = minutes < 10 ? "0" + minutes : minutes seconds = seconds < 10 ? "0" + seconds : seconds
Výraz, který se nachází za "=" je tzv. jednořádková podmínka. V určitých případech totiž nepotřebujeme psát podmínku v jejím úplném tvaru, ale vytvoříme kratší zápis. Před otazníkem se nachází logický výraz. Pokud bude pravdivý, dosadí se do proměnné ta část, která je za otazníkem a zároveň před dvojtečkou; za dvojtečkou je potom hodnota, která se do proměnné dosadí, pokud je výraz nepravdivý. Tyto dva řádky kódu jsme tam vložili proto, aby měl čas jednotný formát, tzn. nebude se nám zobrazovat například 1:33 nebo 0:5, ale 01:33 a 00:05.
Na konci funkce jsme potom využili vlastnost innerText, která upravuje obsah elementu a odečítání hodnoty od proměnné timer (tzn. dekrement – odečítáme 1 od hodnoty).
Za složenou závorkou si můžeš všimnout čárky a čísla 1000. To nám ukazuje délku jednoho intervalu a udává se v milisekundách, proto 1000 = 1s.
Funkce timer by měla vypadat následovně:
function timer() { function startTimer(duration, display) { let timer = duration, minutes, seconds setInterval(function() { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10) minutes = minutes < 10 ? "0" + minutes : minutes seconds = seconds < 10 ? "0" + seconds : seconds display.innerText = minutes + ":" + seconds if (--timer < 0) { timer = duration } }, 1000) } startTimer(game.time, game.timeElement) }
Samotnou funkci pak zavoláme na začátku hry, funkce startGame bude vypadat takto:
function startGame() { game.time = 60 createitems() draw() timer() }
Když si zkusíme hru spustit, tak vidíme, že nám časomíra hezky funguje.
Teď se můžeme vrhnout na ukončení hry. Zde mohou nastat dva scénáře – sesbíráme všechny předměty a Perníčka dostaneme domů, nebo nám dojde čas. Ale to až příště :)
Na závěr
Dnešní díl byl trochu delší, na druhou stranu jsme naši hru posunuli o velký kus dál. Vygenerovali jsme všechny potřebné předměty a už je umíme i sbírat.
Další podstatnou část hry máme vytvořenou, teď budou jednotlivá kola mnohem napínavější. Tak co? Kdo bude rychlejší? ;) Kód z dnešní lekce 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