Naprogramuj si vlastní hru - lekce 1

Pojď si s námi naprogramovat jednoduchou hru. O co ve hře půjde? O zdraví. 😊 V těchto dnech (ale nejen teď) je důležité udržet si dobrou imunitu. Postavička, kterou si naprogramuješ a budeš ovládat, se rozhodla zůstat doma, protože venku řádí „chorobné potvůrky”. Cílem je za co nejkratší čas posbírat veškeré vitamíny a ovoce, které postavičku udrží v kondici.

Tvým hlavním úkolem bude vytvořit hru od základů. Celou hru postavíme na webových technologiích a jazyce HTML, CSS a JavaScript. Dnes začneme zlehka, přípravou editoru, do kterého budeme následující dny psát kód.

Aby bylo všechno pohodlné, nebudeme používat klasický editor, ale online editor – Repl.it. Pokud nemáš na Repl.it vytvořený účet, tak si ho založ.

Po úspěšné registraci stiskni tlačítko Start coding now. Případně, pokud už jsi účet měl/a, klikni nahoře v menu na My repls a na stránce pak klikni na velké kulaté tlačítko se znakem plus v pravém dolním rohu obrazovky.

Objeví se nabídka různých typů projektu, které můžeš v Repl.itu vytvořit. V kategorii Popular vyber HTML, CSS, JS: The languages that make up the web.

Repl.it pak vytvoří nový projekt a objeví se stránka rozdělená na 3 části. Úplně vlevo je seznam souborů v našem projektu. Repl.it ti sám připravil soubory index.html, style.css a script.js. Uprostřed je hlavní blok, kam budeme psát náš kód. V pravé části je zatím zcela prázdná bílá stránka – tam uvidíš výsledek, když svoji stránku spustíš pomocí tlačítka Run.

V levém horním rohu najdeš jméno projektu, toto jméno ti vytvořil Repl.it, vedle je šedá ikonka tužky. Klikni na tužku a svůj projekt si pojmenuj.

Využíváš jiný editor?

Pokud už máš něco naprogramováno, jistě využíváš jiný program, např. Visual Studio Code. Projekt můžeš zpracovat i ve svém editoru, jen si musíš všechny složky a soubory vytvořit sám.

Použitý editor nemá na výsledný projekt žádný vliv a Repl.it nedělá nic speciálního, co by jiný editor nezvládl.

Na závěr

Paráda! Pro dnešek máme hotovo. 😊 Těšíme se na tebe zase zítra! 😊

‍