Naprogramuj si vlastní hru - lekce 2

Vítáme tě u dalšího dne naší cesty za vytvořením hry! Minule jsme začali nastavením editoru a dnes si řekneme něco málo o jazycích, které budeme používat. Třeba se ti během těch pár dnů zalíbí natolik, že v nich budeš pokračovat. Tyto jazyky využívá primárně frontend developer, člověk zodpovědný za vývoj webových aplikací.

HTML

V HTML píšeme základní strukturu stránky a zároveň dáváme jednotlivým elementům na stránce význam. Doslova říkáme, co na stránce je nadpis, obrázek, odkaz, tabulka atd. Abychom toto dokázali, musíme využít takzvané HTML značky, neboli tagy. Například:

<p>text paragrafu píšeme mezi otevírací a zavírací tag</p> - je tag pro paragraf

<img> - je tag pro obrázek

<h1></h1> - je tag pro nadpis nejvyšší úrovně

‍

Značek je velká spousta a žádná stránka se bez nich neobejde. Všimni si, že tag <p></p> má otevírací i zavírací sekci, zatímco <img> má jen jednu část. V HTML rozlišujeme 2 typy tagů – párové a nepárové. :)

Několik základních značek se s námi během vývoje této hry naučíš.

CSS

Aby naše stránky vypadaly hezky, potřebujeme je nastylovat. Vizuální stránku můžeme vyřešit pomocí jazyka CSS. Díky němu jsme schopni říct, kde se jednotlivé elementy na stránce budou nacházet a jak budou vypadat, jestli budou mít modré nebo červené pozadí atd. CSS je tzv. selektivní jazyk – to znamená, že si vybereš jeden nebo více elementů na stránce a přiřadíš vlastnosti. Ty potom určují, jak dané elementy budou vypadat. Z historických důvodů jsme schopni psát CSS styly přímo do HTML, ale z dobrých důvodů se to nedělá (mimo rychlé testování) a CSS vždy držíme v odděleném souboru. Takový selektor vypadá například takto:

h1 {

  background-color: red;

}

Příklad říká, že pomocí CSS jsme vybrali všechny tagy h1 na naší HTML stránce a podbarvili jsme je červenou barvou. Docela jednoduché ne? :)

S CSS můžeme dělat spoustu věcí, definuje se v něm uspořádání stránky na mobilních zařízení (responzivita webu), animace atd.

JavaScript

Máme strukturu stránky, její vizuál, ale co když potřebujeme na stránku přidat něco, co se zobrazí jen v určitou chvíli? Například, když zadáme špatně e-mail do nějakého formuláře, typicky se nám to pole zobrazí červeně a formulář nemůžeme odeslat, dokud e-mail neopravíme. Toto je jedno z typických využití JavaScriptu.

HTML ani CSS nám neumožňuje naprogramovat reakci na nějakou uživatelskou akci, proto potřebujeme JavaScript, kam vložíme veškerou logickou část stránky. V naší hře například budeme potřebovat vygenerovat mapu, pohybovat s hlavní postavou, nastavit časovač atd. a to bychom bez JavaScriptu nezvládli.

Na závěr

Lehce jsme si představili jazyky, se kterými budeme následující dny pracovat a na kterých postavíme naši hru. Příště si do naší hry stáhneme potřebnou grafiku.

‍