VIII. díl Codemas
Vítej u posledního dílu letošní kódovací výzvy. Zaměříme se na poslední věc, která nám zbývá vytvořit – možné scénáře výsledku naší hry. Tak jdeme na to!
Hru máme nastavenou tak, že po uplynutí časového limitu hráč zvítězí, nebo prohraje. Výhru i prohru oznámíme animací, kterou jsme pro tebe připravili. Pokud hráč stihne sesbírat všechny předměty, zobrazí se vítězná animace. V opačném případě se spustí animace s prohrou.
V HTML máme připravenou strukturu okna, které se nám zobrazí na konci hry. Na nás je, abychom tomu přidali logiku v JavaScriptu. Pojďme si odchytit 2 elementy z HTML – samotné okno a video. Využijeme k tomu naši dobře známou funkci document.querySelector. Do našeho objektu game přidáme další dvě vlastnosti – endElement a videoElement.
let game = { timeElement: document.getElementById("time"), scoreElement: document.querySelector("#score"), endElement: document.querySelector("#end"), videoElement: document.querySelector("#end video"), score: 0, time: 30 }
Připravíme si novou funkci, kterou nazveme endGame. Tato funkce bude přijímat parametr type, který zareaguje na 2 různé konce – výhra a prohra. Díky tomuto parametru tak můžeme do funkce poslat informaci o tom, jestli hráč vyhrál nebo prohrál, a díky tomu upravit samotné okno, které se na konci objeví.
Z toho už je trochu jasné, že budeme potřebovat nějaké podmínky (vzpomínáš si na ně?). Díky podmínkám jsme schopni reagovat na odlišné scénáře - v našem případě výhru nebo prohru. V samotné podmínce pak upravíme zdrojovou adresu videa v elementu video:
function endGame(type) { if (type === "win") { game.videoElement.src = "animations/codemas vyhra.mp4" } if (type === "loss") { game.videoElement.src = "animations/codemas prohra.mp4" } }
Na konci funkce ještě zajistíme skrytí herního pole a zobrazení okna s animací. Toho docílíme tak, že upravíme CSS vlastnosti canvasu a samotného dialogového okna:
function endGame(type) { if (type === "win") { game.videoElement.src = "animations/codemas vyhra.mp4" } if (type === "loss") { game.videoElement.src = "animations/codemas prohra.mp4" } canvas.style.display = "none" // způsob zobrazení elementu game.endElement.style.display = "block" }
Nyní je potřeba někde kontrolovat podmínky možných konců naší hry . K tomu využijeme námi již vytvořenou funkci timer, která se stará o časovač. Každou sekundu se spustí kus kódu hry, a proto je to ideální místo, kam můžeme vložit podmínky kontrolující výhru/prohru.
V těchto podmínkách nám je potřeba udělat pouze dvě zásadní věci – spustit naši funkci endGame a zastavit časovač. Do funkce endGame zároveň pošleme informaci o výhře/prohře. Jak už jsme si řekli na začátku - hráč vyhrává ve chvíli, kdy sesbírá všechny předměty v bludišti; když mu dojde čas, naopak prohrává. Podmínky budou vypadat takto:
//výhra if (game.score === 6) { endGame("win") clearInterval(time) } //prohra if (timer === 0) { endGame("loss") clearInterval(time) }
Funkce clearInterval nám zajistí zastavení časovače. Tato funkce přijímá parametr time, což je proměnná, do které uložíme celý náš časovač. Bez této proměnné bychom nedokázali odpočítávání vypnout. Celá funkce timer bude po změnách vypadat takto:
function timer(time) { function startTimer(duration, display) { let timer = duration, minutes, seconds let time = setInterval(function () { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10) minutes = minutes < 10 ? "0" + minutes : minutes seconds = seconds < 10 ? "0" + seconds : seconds //výhra if (game.score === 6) { endGame("win") clearInterval(time) } //prohra if (timer === 0) { endGame("loss") clearInterval(time) } display.innerText = minutes + ":" + seconds if (--timer < 0) { timer = duration } }, 1000) } startTimer(game.time, game.timeElement) }
Tadáááá. Touto poslední úpravou jsme se dostali na konec celé naší letošní výzvy. Teď už by nám mělo vše fungovat – nejen zobrazení animace, ale celá naše hra!
Na závěr
A jsme … na konci. Za celé Czechitas ti moc gratuluji! Už zvládáš základy programování:
- Proměnné
- Podmínky
- Cykly
- Pole
- Funkce
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. :)
Prosím, dej nám vědět, jak se ti líbily Codemas a vyplň nám zpětnou vazbu. Zabere ti to 56 vteřin. :)
Bavilo tě programování v jazyce JavaScript a chceš si svoje znalosti prohloubit? To rádi slyšíme! V únoru připravujeme semestrální online kurz právě na tento jazyk. Kurz je určen pro pokročilé začátečnice, což už teď jsi. :) V prvních lekcích si projdeme vše od začátku a teprve pak se pustíme do “velkého” programování. Nemusíš se tedy ničeho bát, hlavní je chuť se učit. Celou nabídku kurzů Czechitas pak najdeš zde.
Michal z Czechitas