Codemas - 22. den

Do Štědrého dne zbývají už jen dva dny, přípravy jsou v plném proudu, určitě doma pečete poslední cukroví, připravujete bramborový salát a balíte poslední dárky, ti méně organizovaní z nás možná ještě poslední dárky nakupují :) Naše hra už je skoro hotová, takže dnešní návod bude oproti předchozím dnům velmi krátký. Doděláme jen maličký kousek a pak si můžeme opět naplno užívat vánoční pohodu.

Včera jsme do hry přidali odpočítávání času, ale když čas dojde do nuly, nic se nestane. Také jsme stanovili pravidla, že za každý sebraný dárek se nám k času přičtou 3 vteřiny a za každý rozbitý dárek který spadl na zem, se nám odečte 10 vteřin. Pojďme to do hry doplnit.

Zda robot padající dárek chytil nebo zda dárek dopadl na zem testujeme ve funkci otestujDarky. Máme zde cyklus, který prochází postupně seznam všech dárků, a podmínku, ve které se ptáme, zda se obdélník robota protnul s obdélníkem dárku, nebo je-li dolní hrana dárku na dolní hraně herní plochy.

V prvním případě k času přičteme 3 vteřiny. V druhém případě odečteme 10 vteřin. Při každé změně času zároveň zavoláme funkci zobrazCas, aby se nový čas ihned zobrazil v hlavičce hry.

Celá funkce otestujDarky bude po úpravě vypadat takto:

// funkce pro testování padajících dárků
// - dopadl dárek na zem?
// - chytil dárek robot?
function otestujDarky() {
  // projdeme pozpátku všechny dárky v poli
  for (let i = darky.length - 1; i >=0; i--) {

    if (protnutiObdelniku(robot, darky[i])) {
      // obrázek dárku se protnul s obrázkem robota = robot sebere dárek
      // odstraníme sebraný dárek ze hry
      odstranDarek(i);

      // zvětšíme skóre
      zvetsiSkore();

      // přičteme čas a zobrazíme
      hra.cas = hra.cas + 3;
      zobrazCas();

      // přehraj zvuk sebraného dárku
      hra.zvukSebrano.play();

    } else if (darky[i].y + darky[i].vyska > hra.vyska) {
      // dopadl dárek na zem?
      // odstraníme dárek
      odstranDarek(i);

      // odečteme čas a zobrazíme
      hra.cas = hra.cas - 10;
      zobrazCas();

      // přehraj zvuk nárazu na zem
      hra.zvukNaraz.play();
    }

  }
}

Když teď hru zkusíme, vše by mělo fungovat. Při sebrání dárku by se nám měl čas zvětšit o 3 vteřiny. Když dárek spadne na zem, mělo by se 10 vteřin odečíst.

Naše hra stále nekončí, když čas dojde na nulu, tak to pojďme napravit.

Čas budeme testovat ve funkci aktualizujHru. Je-li herní čas roven nebo menší než 0, ukončíme hru. Na konec funkce aktualizujHru přidejte:

// zjistíme, zda už čas nedoběhl na 0
if (hra.cas <= 0) {
  konecHry();
}

Když teď hru vyzkoušíme a dojde nám čas (vyhněte se všem dárkům a dojde velmi rychle), přepne se hra správně na závěrečnou obrazovku, kterou jsme si připravili před několika dny.

Na závěrečné obrazovce nám stále nefunguje tlačítko Hrát znovu, ale to doladíme zítra. Upravme nejprve jednu drobnost. Na závěrečné obrazovce se trochu ztrácí hlavní informace o tom, kolik hráč zachránil dárků.

Přidejme do CSS jednoduchý styl, který větu o dosaženém skóre obarví na žluto. Na konec souboru style.css přidejte:

#vysledek {
  color: #ffc04b;
}

Mnohem lepší. Určitě bychom mohli celou závěrečnou obrazovku nastylovat lépe, udělat velké číslice pro dosažené skóre a celkově vylepšit přehlednost, ale to už nechám na vás a vaší kreativitě.

Codemas Konec

Na závěr

Asi jste si všimli, že kromě nefunkčního tlačítka Hrát znovu má naše hra ještě jeden mnohem závažnější problém. I když vidíme závěrečnou obrazovku, na pozadí hra stále běží a "hraje se sama" :) Slyšíme dárky padající na zem, občas slyšíme zvuk dárku chyceného robotem a vidíme, že nulový čas poskočí na 3 vteřiny, než se znovu rychle odpočítá do nuly.

Náš nastavený časovač, který se spouští 50× za vteřinu a který se stará o běh naší hry, totiž stále běží. Nepřestane fungovat jen proto, že jsme skryli herní plochu. Časovač musíme při skončení hry vypnout.

A chceme-li, aby hráč mohl hrát hru znovu, musíme z herní plochy také odstranit všechny padající dárky, které na ní zůstaly ve chvíli, kdy čas doběhl k nule.

Stručně řečeno, zítra se pustíme do další tradiční zábavy, která k Vánocům už tak nějak patří - předvánoční úklid! Ale nebojte, až bude vše uklizeno, bude naše hra plně funkční. A na Štědrý den na nás pod stromečkem možná bude čekat překvapení :)

Pro případ, že se ti dnes něco nepovedlo, kompletní kód hry po dnešních úpravách si můžeš prohlédnout zde.

Máš-li dotazy, diskutuj u příspěvku pro dnešní den ve facebookové události. Těšíme se na tebe opět zítra.