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:

• Na indexu 0 je Jana
• Na indexu 1 je Adam
• Na indexu 2 je Eliška
• Na indexu 3 je Jirka

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:

• Celková délka pole je 5, uchovává 5 hodnot
• Má indexy v rozsahu 0-4
• Na indexu 0 je 7
• Na indexu 1 je 13
• Na indexu 2 je 31
• Na indexu 3 je 53
• Na indexu 4 je 67

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: