II. díl Codemas

Ahoj, vítám tě u dalšího dílu Codemas. Dnes se zaměříme na herní mapu a vygenerujeme si bludiště. Naučíme se tedy pracovat s důležitou věcí, které se v programování říká pole.

Generování herní mapy

Když si spustíš projekt, uvidíš, jak se nám herní plocha zvětšila. Je ale stále prázdná, chtělo by to vygenerovat herní mapu. Pojďme si udělat přípravu, než se vrhneme na samotné generování. Abychom takovou herní plochu byli schopni vygenerovat, musíme dát počítači další informace.

Potřebujeme si nadefinovat způsob, jakým bude canvas vykreslovat objekty. Možností je několik, nám bohatě postačí 2D vykreslování, jelikož se jedná o 2D hru. Pojďme si vytvořit novou proměnnou, kterou si nazveme ctx, a pomocí funkce getContext určíme způsob vykreslování:

let ctx = canvas.getContext("2d")

Následně se nám jistě bude hodit velikost každého bloku a předmětu v bludišti, pomocí nové proměnné blockSize si nadefinujeme jednotnou velikost:

let blockSize = 30

A nyní už se můžeme zamýšlet nad tím, kam uložíme tu mapu jako takovou. Pojďme se naučit další novinku, které se říká v programování pole.

Pole

Zatím jsme se naučili, co je to proměnná. Zatím víme, že si do takové proměnné můžeme uložit jen jednu konkrétní hodnotu nebo informaci. Co když jich potřebujeme víc? Třeba seznam jmen apod. Na tyto věci se nám hodí datová struktura s názvem pole. Pole je např. toto:

// pole textových řetězců let names = ['Jana', 'Adam', 'Eliška', 'Jirka']

Najednou máme v proměnné names uložených několik hodnot – jmen, se kterými mohu pracovat.

Tady je další ukázka pole:

// pole čísel let numbers = [7, 13, 31, 53, 67]

V tomto poli je zase uloženo několik čísel. Všimni si, že takové pole začíná a končí hranatou závorkou a jednotlivé hodnoty oddělujeme čárkou (mezera za čárkou není nutná, slouží čistě k větší přehlednosti).

Jak ale počítač pozná s jakou hodnotou chceme pracovat, když tam není jen jedna hodnota? Každá hodnota v poli má svůj tzv. index, což je číslo, které nám označuje pozici hodnoty v tom poli. Každé pole začíná indexem 0. Když se znovu podíváme na pole names, tak vidíme že:

A celková délka toho pole je 4, protože uchovává 4 hodnoty. Možná je to trochu matoucí, že se začíná od 0 a ne od 1, ale ber to, prosím, jako fakt a pamatuj na to. Kdybychom index spletli, mohlo by nám to s naším programem hezky zamávat.

A teď kontrolní otázka! Jaká je celková délka pole numbers? Jaké má indexy? Jaké hodnoty na daných indexech jsou?

Tady jsou odpovědi:

Není to tak těžké, že? 😉

Toto je jednoduché pole. Z obrázků je ale jasné, že nám toto pole asi stačit nebude. Mapa je čtvercová a některým už asi došlo, že se mapa bude skládat z bloků, jejichž velikost je 30 (proto ta proměnná blockSize). A když víme, že mapa má celkovou velikost 600x600, jednoduchou matematikou si spočítáme, že musíme pomocí polí vytvořit datovou strukturu 20x20, kde budou umístěné jednotlivé bloky. Záměrně říkám polí, protože místo číselné hodnoty nebo textové hodnoty můžeme vložit do pole další pole.

Tady je malá ochutnávka:

let board = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1] ]

Máme pole board, který v sobě má další 2 pole, jedno na indexu 0 a jedno na indexu 1. Každé z těchto polí má v sobě hodnoty 0 a 1. Nám pak už jen stačí říct počítači, že pokud v poli narazí na jedničku, tak vykreslí zeď, a pokud na 0, nechá blok jako cestu. Vzpomeňte si, jak jste hráli lodě a umisťovali plavidla do herní plochy (čtverečkovaný papír). My tento princip přenášíme do počítačové podoby a využíváme pole. Celá proměnná board bude vypadat takto a tu si vložme do hry:

let board = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1], [1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1], [1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1], [1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 1], [1, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1], [1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1], [1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1], [1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1], [1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 1, 0, 1, 1], [1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1], [1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1], [1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 1, 1], [1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] ]

Naše pole board má délku 20 a indexy od 0 do 19. Na každém indexu je pole, které má délku 20 a indexy od 0 do 19.

Máme návrh mapy a vysvětlili jsme si princip, jakým budeme s polem pracovat. Teď ho ale reálně potřebujeme vykreslit. V prvé řadě si vložme do kódu k proměnným tyto dva řádky:

let wall = new Image() wall.src = "images/zed.png"

Na prvním řádku vytváříme novou proměnnou s názvem wall, do ní vkládáme informaci o tom, že v ní chceme uchovávat nějaký obrázek. Na druhém řádku pak specifikujeme přesně ten obrázek, který do proměnné chceme uložit a který využijeme při vykreslování mapy.

Samotnou mapu budeme vykreslovat pomocí kódů ve funkci generateBoard. Funkce je taky novinka, kterou si necháme ale až na další díl.

Na závěr

Dnes toho bylo hodně, hlavně teorie, ale i to je úděl programátora. Naučili jsme se spoustu nových věcí, to je super, ne? Máme připravený základ pro naše bludiště, v dalším díle se mrkneme na generování zdí. 😊 Celý kód z dneška najdeš zde. Doufám, že se ti to líbilo. Uvidíme se zase u dalšího dílu vánočního kódování.

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