Naprogramuj si vlastní hru - lekce 10

Včera jsme si do hry přidali předměty a teď je na čase naprogramovat si sbírání.

Pro tuto akci si vytvoříme další funkci a bude se jmenovat collect.

function collect() {

}

A nyní se musíme zamyslet, jak nastavit algoritmus pro sbírání. Víme, že bychom měli předmět sebrat ve chvíli, kdy se postava bude nacházet na jeho pozici, tudíž musíme vymyslet nějakou podmínku. Abychom mohli kontrolovat všechny předměty, musíme celé pole pills procházet a až v cyklu kontrolovat jejich sbírání. Kód tedy bude vypadat takto:

function collect() {

   for (let i = 0; i < pills.length; i++) {

       if (player.x == pills[i].x && player.y == pills[i].y) {

           pills.splice(i, 1);

       }

   }

}

‍

Procházíme celé pole a v podmínce kontrolujeme, jestli se naše postava nachází na stejném místě jako předmět. Pokud ano, využijeme funkci splice, která smaže daný předmět z pole a on už se nebude zobrazovat. Funkce splice přijímá 2 parametry – index v poli a kolik předmětů chceme smazat. Jako index uvádíme i, tedy řídící proměnnou cyklu a mažeme jeden předmět. Nyní musíme funkci opět někde zavolat, logicky ji zavoláme ve funkci draw a je dobré ji zavolat až po uskutečnění pohybu, tedy po volání funkce movement. Kód bude vypadat následovně:

function draw() {

   ctx.clearRect(player.x * blockSize, player.y * blockSize, blockSize, blockSize);

   generateBoard();

   movement();

   collect();

   ctx.drawImage(hero,player.x * blockSize, player.y * blockSize, blockSize, blockSize);

}

‍

Pokud teď hru spustíme a zkusíme si sebrat nějaký předmět, tak to funguje. Dnes uděláme ještě jednu důležitou funkcionalitu, přidávání skóre. Abychom mohli přidávat skóre a propisovat ho do stránky, musíme JavaScript propojit s elementem, který zobrazuje skóre. Vytvořme si další proměnnou s názvem scoreElement, kam si uložíme element.

let scoreElement = document.getElementById("score");

Bude se nám hodit ještě druhá proměnná – score, ve které budeme ukládat skóre jako takové a to vypisovat.

let score = 0;

Vytvoříme si další funkci s názvem increaseScore, ve které zvýšíme hodnotu proměnné score a zároveň skóre vypíšeme.

function increaseScore() {

   score++;

   scoreElement.textContent = `${score}/6`;

}

‍

Score++ jistě poznáváme, vzpomeňte si na inkrement v cyklech, zvyšujeme hodnotu proměnné o 1. Abychom skóre vypsali, využijeme funkce textContent. Ta nám umožňuje změnit textový obsah elementu. My do něj vložíme naši proměnnou score. Pokud jste si udělali dobrovolný úkol ze včerejška, změňte si číslo 6 na 7, protože sbíráte 7 předmětů. Nakonec funkci increaseScore zavoláme ve funkci collect:

function collect() {

   for (let i = 0; i < pills.length; i++) {

       if (player.x == pills[i].x && player.y == pills[i].y) {

           pills.splice(i, 1);

           //přičítání skóre

           increaseScore();

       }

   }

}

‍

Na závěr

Super, už jíme vitamíny a ovoce a naše imunita sílí! :D Naše hra je téměř hotová, zbývá nám jen doplnit časovač a naprogramovat konec hry. Vrhneme se na to hned zítra, kdy hru dokončíme. Kód z dnešní lekce najdeš zde.

‍