2#Hodina – První hra
Příprava a co budeme potřebovat
Mělo by to být nainstalované na pc v učebně, ale podoručuji stáhnout i domů, pokud budete potřebovat něco dodělávat. Také doporučuji na konci každé hodiny si práci uložit na flashdisk případně na nějaké online uložiště (Google disk, iCloud, Dropbox).
StuDYING Clicker
V druhé hodině se pokusíme dát dohromady jednu jednoduchou hru ve stylu Cookie Clicker. Naučíme se nové funkce a konečně oddělíme HTML a JS do dvou souborů, které propojíme. Stále ještě nebudeme výrazněji řešit vizuální stánku a budeme se soustředit na funkčnost.
Ukládejte kliknutím pravého tlačítka a *uložit odkaz jako…* … očividně to byl v minulé hodině problém
V tento moment doporučuji si dát template na flash disk do samostatné složky a otevřeme si ho v Brackets. Rovnou si vytvoříme nový soubor “CTRL + N”. Klikneme pravým tlačítkem na “Nový-1” a dáme uložit jako. Pojmenujeme si jej “main.js” Mnozí z vás již chápou, že se bude jednat o soubor, ve kterém budeme mít uložený javascript. Soubor by jste měli mýt uložený ve stejné složce jako váš template-index.html (ten soubor co jste stáhli na začátku hodiny). Nyní se v pravém panelu přepneme na template-index.html a oba soubory propojíme. Pro připojení scriptu se používá stejný tag jako pro psaní scriptu přímo do HTML souboru a to <script></script>. Pouze jej necháme prázdný a přidáme do počátečního tagu zdroj (Source = SRC). Takže náš tag bude vypadat <script src=””></script>. S ohledem na to, že máme soubory na stejné úrovni (v jedné složce) stačí napsat do uvozovek jméno souboru VČETNĚ KONCOVKY!. <script src=”main.js”></script>. Tento tag můžete umístit na více míst, ale ideální je jej umístit na konec <body> tak jako vidíte zde:
Nyní si v rychlosti vyzkoušíme jestli naše propojení funguje pomocí funkce Alert. Ta v prohlížeči vyvolá popup windows se zprávou. Přidáme proto do HTML jedno tlačítko “TEST” co bude volat funkci “testing()”. Do main.js si přidáme funkci “testing()” která vyvolá Alert s nápisem “Funguje to!”. Vytvoření tlačítka co volá funkci jsme dělali v minulé hodině. Výsledný kód by měl vypadat takto:
Zajímavější bude kód v main.js. Zde vytvoříme na začátek prázdnou funkci testing(). Do ní zapíšeme Alert (‘Funguje to!’). Stejně jako všude i zde text který má být chápán jako string (řada znaků) musí být označen uvozovkami. Schválně jsem zde použil jednoduché uvozovky. Fungovaly by i dvojité uvozovky, ale časem se v JS setkáte s tím, musíte do uvozovek umístit další element, ve kterém musíte znovu použít uvozovky. V ten moment se nám dva druhy uvozovek budou hodit 🙂 Jako každý řádek funkce v JS i tento musí končit ;
Nyní se přepněte zpět do HTML a klikněte vpravo na “blesk” aka. “Živý náhled”. To by nám mělo otevřít Chrome 🙂 Jediný problém může nastat v tom, že si to neuložíte 🙂 “CTRL + S”
Když už víme, že propojení funguje můžeme začít pracovat. Toto tlačítko i funkci si, ale necháme ve hře na testovaní jestli nám nefunguje celý JS soubor nebo jestli je problém ve funkci, kterou se právě snažíme napsat. Když použijete například špatné jméno ID nebo vám někde bude chybět řádek, bude nám fungovat naše testovací tlačítko. Pokud vám někde bude chybět středník, závorka nebo budete mít překlep v názvu (třeba napíšete dokument místo document) přestane nám fungovat vše.
Vytvoříme si v HTML jedno tlačítko a jeden span. S ohledem na to, že jsem tento testovací projekt nazval “StuDYING simulator” … napíšeme si na tlačítko “Study” a bude volat funkci “study()”. Spanu dáme id=”knowledge”.
Nyní se zase přesuneme do main.js. Zde si založíme funkci study(). A nyní co nám bude naše funkce study dělat. Budeme mít základní proměnou “knowledge”, která nám bude postupně růst s tím jak budeme klikat na tlačítko Study! a hodnota se nám bude vypisovat do spanu s id “knowledge”. Vypisování bude fungovat stejně jako u kalkulačky. Prostě přes document.getElementById uchopíme span a řekneme co se do něj má vepsat přes innerHTML (a to bude to co máme v proměnné knowledge). Ideálně k tomu přidáme nějaký krátký text. Třeba “Your knowledge is now XXXX”. Zápis bude vypadat takto:
Nyní by nám to sice něco vypsalo, ale nějak se nám ztratilo to postupné přidávání hodnoty do knowledge. Samotný zápis není nijak náročný. Vezmeme proměnnou “knowledge” přidáme 1 a uložíme ji zpět do proměnné “knowledge”.
Zde narazíme na první větší problém. Tato funkce by určitě měla fungovat, ale za předpokladu, že jsme již proměnnou “knowledge” někde vytvořili a dali do ní číslo “0”. To jsme ale neudělali. Toto by se dalo vyřešit pomocí podmínek, ale bylo by to výrazně složitější (ale také lepší) řešení. Lepší řešení přídám později, převděpodobně jako další příspěvek. V hodině využijeme poznatek z minulé hodiny z práce s kalkulačkou. Kdy v prvním pokusu jsme udělali, že nám počítala bez tlačítek. Prostě se nám pouštěl JS hned po načtení souboru. Stejným způsobem vytvoříme proměnnou “knowledge”. Aby jsme to nemuseli psát opět do HTML, můžeme vytvoření proměnné umístit na začátek main.js
S ohledem na to, že vkládáme číslo a přičítáme číslo přímo přes JS, ne přes textové pole, nemusíme nikam přidávat Number(*něco*). Tento kus kódu už funguje. Opakováním klikáním by se nám měla zvyšovat hodnota “knowledge”. Nyní si přidáme další věc co může hráč dělat. A to aby využil své zkušenosti a a pokusil se složit test (za úspěšný test dostane $). Tady do našeho kódu již můžeme zamíchat náhodu 🙂 Stejně jako v Exelu je funkce na náhodné číslo, která nám dá číslo od 0-1 (třeba 0.184684534874539) tak máme v JS funkci Math.random(), která nám dá náhodné číslo od 0-1.
Možná si říkáte “Jak využijeme náhodné číslo v této hře?”. Mno stejně jako ve škole test může být trochu o náhodě. Může se nám v něm objevit otázka, kterou neznáme a těch další 50, na které se připravíme se nás nikdo nezeptá. Získávání peněz za test tedy bude aktuální knowledge * náhodné číslo. To znamená, že hráč může získat minimálně 0$ – maximálně tolik kolik má knowledge. Poté co mu přidáme $ mu rovnou sebereme knowledge a může se začít učit na další test.
Začneme tedy rozšiřovat kód v HTML. První si přidáme další tlačítko a span. Tlačítko může mít nápis “Try test” a bude volat funkci test4dosh(), span bude mít pouze id=”dosh”.
O něco větší bude přírůstek v main.js. Hned jako první si přidáme založení další proměnné. Nazveme si ji “Dosh” a dáme si do ní “0”. To bude proměnná, ve které budeme mít uloženo, kolik peněz hráč má. Druhým krokem bude vytvořit novu funkci s názvem test4dosh(). Tam pouze chytíme obsah proměnné knowledge a vynásobíme ho s náhodným číslem (Math.random). Aby se hráči nezobrazovalo hromada čísel za desetinnou částkou výsledek zabalíme do Math.round (zaokrouhlení o kterém jsem mluvil na první hodině). To celé sečteme s obsahem naší proměnné dosh a uložíme do proměnné dosh.
Proč to sčítáme s obsahem “dosh” a ukládáme do “dosh”? My by jsme mohly pouze uložit výsledek do dosh, a při prvním testu by to fungovalo i dobře, ale my chceme aby hráč měl možnost si nějaké ty peníze našetřit. Pokud by jste nesčítali zisk z testu s dosh hráč by měl vždy u sebe jen to co dostal z posledního testu a přišel by o to co dostal v testu předchozím. Proto mu přičteme to co již má k tomu co získal tímto testem.
Po našem řádku výpočtu následuje pouze řádek, který vypíše informace uživateli.
Takto by hráč hromadil jak knowledge tak dosh. Proto přidáme na konec funkce test4dosh() řádek, ve kterém nastavíme knowledge na “0”
Také necháme vypsat knowledge vypsat. S ohledem na to, že již budeme vypisovat knowledge podruhé můžeme si na to udělat rovnou funkci a pak volat tu danou funkci 🙂
Takhle kdykoliv budeme chtít vypsat hráči kolik má knowledge stačí zavolat funkci “writeKnowledge()” a nemusíme znovu psát nebo kopírovat ten dlouhý řádek. Samozřejmě to bude o klikání na dvě tlačítka 🙂 také musíme hráči dát možnost investovat jeho $, aby se rychleji učil. Připravíme si na to zase tlačítko a span. Tlačítko bude volat funkci buyBooks() a span dostane id books.
Opět JS bude komplikovanější. Jen na začátek čeho chceme docílit. Chceme, aby si hráč mohl koupit knihu a tím pak získával o jedno více knowledge. Proto musíme přidat proměnou books. v té budeme mít uchovaný počet kolik má hráč knížek a zároveň jej použijeme při výpočtu kolik hráč dostane za kliknutí na Study!. První si založíme proměnnou a vytvoříme funkci, která po kliknutí přidá +1 do knowledge.
Nyní hráč sice dostává knížky, ale dostává je zdarma a neví o tom kolik jich má. Takže přidáme výpis knížek a také dáme -100 dosh.
Toto by určitě fungovalo, ale hráč se může snadno dostat do mínusu. Nijak zde nekontrolujeme kolik aktuálně má hráč $. Proto musíme vytvořit naší první podmínku, tou bude IF neboli KDYŽ. Naše podmínka musí říct jestli má hráč více než 100 dosh. Když bude mít hráč víc než 100 dostane knihu a odebere mu 100 dosh. Když nebude mít víc než 100, vypíšeme mu hlášku o tom, že nemá dost peněz. Na vypsání budeme muset vytvořit druhou část podmínky a to ELSE. Else proběhne pouze v momentě, když podmínka neplatí. Výsledek vypadá následovně:
V podmínce můžeme použít <, >, ==. Ano jsou to dvě = za sebou. Protože jedno = používáme na přiřazení proměnné 😉 Ale je možná i kombinace s jedním rovná se >= a <=. V našem případě může mít člověk 100 a víc aniž by se dostal do mínusu.
Takto máme ošetřeno, aby se hráč nedostal do mínusu. Nyní upravíme funkci study(), aby počet knížek měl nějaký dopad na hru. Aktuálně máme v kódu, že kliknutím dostane hráč +1. Do této části musíme ještě započítat kolik máme knížek.
Jako jednu z posledních věcí ještě přidáme zvýšení ceny každé další knížky. Místo 100 si nastavíme proměnnou “price” a na začátek si do ní uložíme 100. Pokaždé, když si hráč knížku koupí, necháme jednoduše tuto proměnnou *1.5
Do příští hodiny si napište o založení přístupu na FTP. Na email eiseto@zs-hp.cz. V emailu si napište o adresu ve tvaru *neco*.senpai.cz. Do další hodiny vám pošlu přihlašovací údaje. Heslo si zvolit nemůžete.
0 Comments