Naprogramuj si vlastní hru - lekce 9

Ahoj, včera jsme si lehce vylepšili naši stránku a přidali tam časomíru a skóre. Dnes se vrhneme na přidání předmětů, které budeme v rámci naší hry sbírat. Budeme pracovat čistě v JS a uvidíš, že 90 % věcí už znáš. ;)

Předmětů je celkem 6 a každý je reprezentován nějakým obrázkem ve složce images. Budeme muset tedy vytvořit šest dalších proměnných pro 6 obrázků.

let pill1 = new Image();

pill1.src = "images/pill1.png";

let pill2 = new Image();

pill2.src = "images/pill2.png";

let pill3 = new Image();

pill3.src = "images/pill3.png";

let pill4 = new Image();

pill4.src = "images/pill4.png";

let fruit1 = new Image();

fruit1.src = "images/fruit1.png";

let fruit2 = new Image();

fruit2.src = "images/fruit2.png";

Kód se opakuje, pouze vytváříme 6 unikátních proměnných pro předměty, stejně jako pro postavu nebo zeď. Teď se musíme zamyslet, jak tyto předměty budeme vykreslovat do hry. Určitě bude mít každý z nich své souřadnice x a y. Předmětů je 6, tudíž můžeme využít nějaké pole a obdobně jako u generování herní plochy, budeme to pole postupně pomocí cyklu procházet a předměty vykreslovat. Pokud už si tak čistě nepamatuješ, jak se pole a cykly využívají, mrkni na 5. díl, kde je to podrobně popsané. :)

Pojďme si vytvořit pole s názvem pills:

let pills = [];

Nyní je to pole potřeba naplnit předměty s jejich pozicí x a y. Vytvoříme si tedy herní objekty. Na toto je dobré si taky vytvořit samostatnou funkci, nazveme si ji createPills:

function createPills() {

}

V rámci této funkce budeme plnit pole pills předměty. Pro tuto akci využijeme funkci push, kterou můžeme na tom poli zavolat:

pills.push({

    x: 1,

    y: 1,

    imageObject: pill1

});

‍

Push najdeme například u dveří a je to signál, že na dveře máme zatlačit, abychom je otevřeli. Tady budeme do pole tlačit herní objekty. Každý bude mít souřadnice x a y a zároveň i imageObject, kam uložíme proměnnou, ve které se skrývá obrázek. Tímto způsobem do pole vložíme všechny předměty a funkce bude vypadat následovně:

function createPills() {

   pills.push({

       x: 1,

       y: 1,

       imageObject: pill1

   });

   pills.push({

       x: 1,

       y: 15,

       imageObject: pill2

   });

   pills.push({

       x: 14,

       y: 12,

       imageObject: pill3

   });

   pills.push({

       x: 15,

       y: 18,

       imageObject: pill4

   });

   pills.push({

       x: 5,

       y: 11,

       imageObject: fruit1

   });

   pills.push({

       x: 18,

       y: 5,

       imageObject: fruit2

   });

}

‍

Funkci máme hotovou, zbývají nám 2 věci – zavolat někde tu funkci a zajistit vykreslení. Začneme voláním funkce, naplnění pole by mělo proběhnout jednou a ideálně na startu hry. Problém je, že nyní se nám opakuje stále funkce draw. V draw naši funkci naplňující pole pills nelze zavolat, proč pochopíš zítra, když si naprogramujeme sbírání předmětů. Proto si vytvoříme ještě jednu funkce s názvem startGame, která bude zodpovědná za prvotní nastavení hry:

function startGame() {

   createPills();

   draw();

}

‍

Funkce v prvé řadě naplní pole předměty a zavolá funkci draw, která poběží zbytek hry. Z tohoto důvodu musíme trochu pozměnit náš poslouchač události, který po načtení stránky automaticky spouští funkci draw.

window.addEventListener("load", startGame);

Nyní by měla automaticky spouštět startGame. A teď ještě to vykreslování, tady to nebudeme mít složité, jednoduše vložíme do naší funkce generateBoard další cyklus.

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

  ctx.drawImage(pills[i].imageObject, pills[i].x * blockSize, pills[i].y * blockSize, blockSize, blockSize);

}

Tento cyklus bude postupně procházet pole a pomocí funkce drawImage je vykreslovat do bludiště. Funkce generateBoard po úpravě vypadá následovně:

function generateBoard() {

   for (let y = 0; y < board.length; y++) {

       for (let x = 0; x < board[y].length; x++) {

           if (board[y][x] === 1) {

               ctx.drawImage(wall, x * blockSize, y * blockSize, blockSize, blockSize);

           }

       }

   }

   //generování předmětů

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

       ctx.drawImage(pills[i].imageObject, pills[i].x * blockSize, pills[i].y * blockSize, blockSize, blockSize);

   }

}

‍

Na závěr

Jak vidíš, kód už se hodně opakuje, ty nejpodstatnější věci už známe. A protože jsme se dnes naučili jen jednu novinku – funkce push pro přidávání předmětů do pole. Proto vyhlašuji menší dobrovolný úkol. :)

Když se podíváš do složky images, je tam obrázek tea.png. Ten jsme si do hry nepřidali, tvým úkolem je ho do hry doplnit. Pokud ho splníš, pošli screen pod dnešní příspěvek na FB. Odměnou ti bude dobrý pocit, můj tleskající smajlík a GIF/meme na zlepšení nálady a to se vyplatí! :D

Kód z dnešní lekce najdeš zde.

‍