Codemas - 1. den

Codemas Screenshot

Pojď si s námi během adventu vytvořit jednoduchou hru. Celý návod je připraven jako adventní kalendář. Každý den dostaneš kousek a na Štědrý den budeš mít hotovou celou hru.

Zachraň Vánoce

Všude je moc práce, spousta věcí se musí dokončit, druhá spousta připravit, sehnat dárky, uklidit, napéct cukroví, no co vám budeme povídat. Asi to sami znáte, před Vánoci nikdo nestíhá!

Letos to bohužel potkalo i Ježíška. Šel na to sice chytře a najal si na rozvoz dárků dětem pomocníky, ale stalo se neštěstí. Jednomu pomocníčkovi se rozbily jeho létající sáně. Zbláznily se a létají sem a tam. Pomocník si to sice užívá, směje se od ucha k uchu a hlasitě výská, ale doručení dárků je ohroženo.

Sáňky se navíc třesou a dárky z nich občas padají na zem a hrozí, že se rozbijí. To nemůžeme dovolit, vždyť by se dětem zničila jejich splněná přání! Dobrovolnice a dobrovolníci z Czechitas samozřejmě okamžitě nalezli řešení. Sestrojili malého robota, kterého mohou na dálku ovládat. Robot nese měkce vystlaný pytel, takže mu stačí jen přijet pod padající dárek a počkat, až spadne do pytle. Kolik dárků se ti takto povede zachránit?

Nastavení editoru

Celá hra bude vytvořená pomocí technologií HTML5, CSS a JavaScript. Dnes sice začneme hodně zlehka, ale přípravu nepodceňuj. Víš, že v sázce je hodně!

Pro tvorbu hry budeme používat online editor Repl.it. Jdi na stránku https://repl.it a zaregistruj se. Tento editor používáme i na některých našich workshopech, takže je možné, že už účet máš. Pokud ano, stačí se přihlásit.

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.

Replit Screenshot

Vteřinku to potrvá, ale Repl.it pak vytvoří nový projekt a objeví se stránka rozdělená na 3 svislé části. Úplně vlevo je seznam souborů obsažených v našem projektu. Repl.it ti sám připravil index.html, style.css a script.js. Uprostřed je hlavní blok, kam budeme psát náš kód. Když klikneš vlevo na nějaký soubor, objeví se v editoru uprostřed. V pravé části je zatím zcela prázdná bílá stránka - tam uvidíš výsledek, když nad editorem stiskneš tlačítko Run.

V levém horním rohu vidíš náhodně vytvořené jméno projektu a vedle je šedá ikonka tužky. Klikni na tužku a svůj projekt si pojmenuj. Já píšu název Codemas 2018 :)

Jiný editor?

Možná už jsi v kódování zběhlejší a používáš pokročilejší editor nainstalovaný lokálně u sebe na počítači. Svůj editor můžeš používat i pro naše adventní kódování, jen si musíš sám/sama vytvořit složky a soubory a případně si přizpůsobit části návodu podle sebe.

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. Nemusíš se bát.

Na závěr

Pro dnešek to stačí. Vždyť víš, jak adventní kalendáře fungují. Každý den si vyloupneš jen jednu malou čokoládku :)

Máš-li dotazy, diskutuj u příspěvku pro dnešní den ve facebookové události. Těšíme se na tebe opět zítra.