Příprava FlashDisku

 Jděte na stránku http://portableapps.com/ a stáhněte si výchozí aplikaci Portable Apps. Aplikaci pustíme, vytvoříme novou instalaci, zvolíme přenosný, vybereme náš flashdisk a klikneme na instalovat. Tato část instalace bude trvat pouze chvíli. Nyní spustíme program PortableApps.com. Po první kontrole složky, se nám ukáže seznam aplikací, které můžeme nainstalovat. Budeme potřebovat:

  • Chrome Portable
  • FiliZilla Portable
  • NotePad++ Portable

Proč zrovna tyto tři? Chrome ve škole není, ALE na hledání chyb je nejlepší a nejpřehlednější. FilleZillou budeme nahrávat soubory na server. Dostanete každý vlastní doménu a prostor na serveru. Doména bude mít tvar *něco*.senpai.cz. Po zkušenostech z minulého roku jsem se rozhodl k tomuto kroku hlavně proto, že většina free hostingů přidává do stránky reklamu. Ta občas rozbije kód a tak je toto asi nejlepší řešení. Také vám budu moci snadno pomoci protože budu mít přístup do vašich složek a to i z důvodu kontroly odevzdávání domácích úkolů. První úkol vás bude čekat ze 3-4 dvouhodinovku a to nahrát práce z předchozích hodin na svou stránku a udělat rozcestník. Do té doby to budete umět 😉 Poslední program NotePad++ je ten program ve kterém budeme naše stránky a scripty psát. Minulý rok jsme používali program PsPad, který také není špatný bohužel občas má špatnou náladu a začne padat. Jediné jak se to dalo zachránit je zavřít všechny záložky a zase je znovu otevřít. To naštěstí NotePad++ nedělá.

Původní plán sice byl takový. Ale našel jsem lepší program 🙂 budeme muset jít sice na 2 místa 😉 ale bude to lepší 🙂 FileZillu budeme potřebovat stále. Na nahrávání věci na server. Dostanete každý vlastní doménu a prostor na serveru. Doména bude mít tvar *něco*.senpai.cz. Po zkušenostech z minulého roku jsem se rozhodl k tomuto kroku hlavně proto, že většina free hostingů přidává do stránky reklamu. Ta občas rozbije kód a tak je toto asi nejlepší řešení. Také vám budu moci snadno pomoci protože budu mít přístup do vašich složek a to i z důvodu kontroly odevzdávání domácích úkolů. První úkol vás bude čekat ze 3-4 dvouhodinovku a to nahrát práce z předchozích hodin na svou stránku a udělat rozcestník. Do té doby to budete umět 😉

Nebudeme již ale stahovat samostatně Chrome, ale budeme ho mít součástí aplikace Brackets. My si samozřejmě na flash disk dáme portable verzi. Původně jsem plánoval N++, ale když jsem brouzdal na internetu narazil jsem náhodou na Brackets. Má to celkem dost užitečných doplňků a témat na zvýraznění syntaxe 🙂 . Podle mě je NEON asi nejlepší možnost. Protože výraznější ta syntaxe už nemůže být 😀

braceletscool

S ohledem na to, že by jsem to v hodině dlouho stahovali a připravovali doporučuji si to dát dohromady doma 🙂 ideálně tak, že si stáhnete tento balíček a ten si rozbalíte na flash disk. Je tam jak FileZilla tak Brackets (včetně doplňků které budeme potřebovat a NEON motivu).

_Apps.zip

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.

Template

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:

2-001

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:

2-002

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 ;

2-003

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“.

2-004

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:

2-005

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“.2-006

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

2-007

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“.

2-008

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.

2-009

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“

2-010

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 🙂

2-011

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.

2-012

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.

2-013

 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.2-015

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.

2-016

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.

2-017

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

2-018