VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra elektrotechniky a informatiky Obor Počítačové systémy. Dětské webové hry bakalářská práce

VYSOKÁ ŠKOLA POLYTECHNICKÁ JIHLAVA Katedra elektrotechniky a informatiky Obor Počítačové systémy Dětské webové hry bakalářská práce Autor: Pavel Janoušek Vedoucí práce: Mgr. Antonín Přibyl Jihlava 2014

Vysoká škola polytechnická Jihlava Tolstého 16, 586 01 Jihlava ZADÁNÍ BAKALÁŘSKÉ PRÁCE Autor práce: Studijní program: Obor: Název práce: Cíl práce: Pavel Janoušek Elektrotechnika a informatika Počítačové Systémy Dětské webové hry Pomocí vhodných webových technologií vytvořte následující webové hry pro děti. Doplňovačka - hra pro nejmenší děti - v obrázku jsou vyříznuté chybějící objekty (např. zvířata), úkolem hráče je chybějící objekty zobrazené mimo hrací plochu umístit na správné místo v obrázku. Aplikace je doplněna zvukovými efekty, skóre se stanovuje podle doby hry. Skládačka (puzzle) - originál obrázku je rozřezán na čtvercové části, které jsou náhodně rozmístěny v poli. Hráč bude jednotlivé díly přesouvat, dokud nedojde ke složení originálního obrázku. Obrázek hracího pole bude možné volit. Had (snake z Nokie) hráč bude ovládat hada, který bude konzumovat části hrací plochy. Každou zkonzumovanou částí se pohybující had prodlouží a hra se postupně zrychluje. Celkové skóre se stanovuje podle doby hry nebo počtu bodů. Jednotlivé aplikace ukládají skóre a jméno hráče do databáze, zobrazují odehraný čas nebo získané body a rekord hry. Jakoukoliv hru je možné kdykoliv přerušit. Mgr. Antonín Přibyl vedoucí bakalářské práce Jméno vedoucího katedry vedoucí katedry Katedra elektrotechniky a informatiky

Abstrakt Tato bakalářská práce se zabývá tvorbou webových her pro děti, které budou vytvořeny za použití programovacích jazyků: HTML5, JavaScript, JQuery a CSS. Hráč bude mít na výběr ze třech her: Snake, Puzzle a Doplňování chybějících částí do obrázku. Každá z her po úspěšném dokončení nabízí možnost uložení konečného skóre do databáze. Všechny hry je možno za jejich běhu přerušit. U hry Snake je cílem hry dosáhnout nejvyššího skóre krmením hada, generovaným bločky (bloček = 1bod). Při tom se vyhnout kontaktu s hranicemi hracího pole a kontaktu s vlastním těla hada (), což způsobí konec hry. Hra Puzzle spočívá ve složení pomíchaného obrázku do původního stavu, dle předlohy původního obrázku. Konec hry bude po složení pomíchaného obrázku do původního stavu. Poslední hra Doplňování se taktéž týká obrázku, ovšem s tou změnou, že z původního obrázku jsou odebrány části a ty jsou nabídnuty hráči k navrácení na původní místo. Hra končí po úspěšném navrácení bloků na svá místa. Každá z her se dá kdykoliv během hraní ukončit, ovšem bez možnosti uložení dosaženého skóre. Po úspěšném dokončení her je hráči nabídnuta možnost uložení jména a skóre do databáze a její zobrazení.

Abstract This bachelor thesis is focused on the creation of web games for kids using programming languages HTML5, JavaScript, JQuery and CSS. The player can play 3 games: Snake, Puzzle and Picture refilling. Each of the games after successfully completing offers the option to save the final score to the database. Each game can be interrupted at any time. The objective of the Snake game is achieve the highest score by snake feeding of randomly generated blocks (block = 1 point). The player must avoid contact with the boundaries of the playing field and not to touch her own body (). Violation of these rules means the end of the game. The player of the Puzzle has to pass a scrambled image to its original state using pattern of the original image. The game ends when mixed blocks of image move to its original position. Last game Picture refilling also applies to the image, but with the modification that the original elements of image are removed and these elements are offered to the player to return to the original position. The game ends if the elements are successfully returned to right position. Each of the game can be terminate at any time, without the possibility to save score. After successful completion of the game, is offered to player the option to save the name and score to the database and view total score.

Klíčová slova CSS, HTML, JavaScript, JQuery, MySQL, PHP, WWW Key words CSS, HTML, JavaScript, JQuery, MySQL, PHP, WWW

Čestné prohlášení Prohlašuji, že předložená bakalářská práce je původní a zpracoval/a jsem ji samostatně. Prohlašuji, že citace použitých pramenů je úplná, že jsem v práci neporušil/a autorská práva (ve smyslu zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů, v platném znění, dále též AZ ). Souhlasím s umístěním bakalářské práce v knihovně VŠPJ a s jejím užitím k výuce nebo k vlastní vnitřní potřebě VŠPJ. Byl/a jsem seznámen s tím, že na mou bakalářskou práci se plně vztahuje AZ, zejména 60 (školní dílo). Beru na vědomí, že VŠPJ má právo na uzavření licenční smlouvy o užití mé bakalářské práce a prohlašuji, že s o u h l a s í m s případným užitím mé bakalářské práce (prodej, zapůjčení apod.). Jsem si vědom/a toho, že užít své bakalářské práce či poskytnout licenci k jejímu využití mohu jen se souhlasem VŠPJ, která má právo ode mne požadovat přiměřený příspěvek na úhradu nákladů, vynaložených vysokou školou na vytvoření díla (až do jejich skutečné výše), z výdělku dosaženého v souvislosti s užitím díla či poskytnutí licence. V Jihlavě dne... Podpis

Poděkování Na tomto místě bych rád poděkoval svému vedoucímu práce Mgr. Antonínu Přibylovi za poskytnutí tématu, možnosti vytvářet ho pod jeho vedením a za poskytnutí zázemí, díky kterému mohla tato bakalářská práce vzniknout na poskytnutém serveru.

Obsah Úvod... 9 1 Vytyčení požadavků a cíle práce... 10 2 Teoretická východiska práce... 11 2.1 Návrh webové aplikace... 11 2.2 Použité programovací jazyky... 15 2.2.1 Kaskádové styly CSS CCS3... 16 2.2.2 Značkovací jazyk HTML5... 17 2.2.3 Javascript... 18 2.2.4 JQuery... 18 2.2.5 MySQL... 18 2.2.6 PHP... 19 3 Realizace webové prostředí... 19 3.1 Hlavička dokumentu... 19 3.2 Tělo dokumentu... 20 3.2.1 Dynamické generování prvků... 24 3.3 Vytvoření her... 26 3.3.1 Objektově orientované programování... 27 3.3.2 Realizace her pomocí OOP... 27 3.4 Popis jednotlivých her... 28 3.4.1 Hra Puzzle... 30 3.4.2 Hra Snake... 34 3.4.3 Hra Doplňování... 38 3.5 Návrh a realizace databáze... 41 4 Závěr... 43 Seznam použitých zkratek... 44 Seznam použitých zdrojů... 45 Knižní zdroje... 45 Internetové zdroje... 45 Seznam obrázků... 47 Seznam příloh... 47 Přílohy... 48 Příloha 1 Založení databáze... 48

Úvod Každý člověk, v jakékoliv etapě svého života, má v sobě hravou duši dítěte, která si touží hrát. Tato touha se v daných etapách projevuje trochu odlišně, ať v podobě neutuchající touhy rozbíjení komínů z hracích kostek, závodů na kolech, nebo dosažení nejvyššího skóre při pouličních závodech v nejnovější závodní hře. Provádění těchto a spousty dalších činností se každý z nás snaží utišit křik toho kousku duše, který se dožaduje činnosti v podobě hraní. To že každý z nás je originálem, určuje i rozdílnou definici hraní. Ovšem vždy se jedná o zábavnou, naučnou, nebo jen čas vyplňující činnost. A vždy si daný člověk vytvoří svůj vlastní svět, se specifickými pravidly a okolí se stává matným a nedůležitým. Každé hrající si dítě si počíná jako básník, když si vytváří jakýsi vlastní svět, nebo přesněji řečeno, když dává věcem svého světa nový, jemu vyhovující řád. Sigmund Freud Téma bakalářské práce Dětské webové hry jsem si zvolil, protože mě velice zajímá tvorba webových stránek a aplikací. Navíc v dnešní hektické a uspěchané době je čím dál méně prostoru a času pro samotné hraní a já se rozhodl alespoň jeden aspekt dodat. Vytvořil jsem místo, kde každý může utišit svoji touhu po hraní. 9

1 Vytyčení požadavků a cíle práce Prvotním a základním požadavkem byl návrh a realizace samotného webového rozhraní pro dětské webové hry s hlavním cílem samotného návrhu a realizací jednotlivých her. Webové rozhraní je postaveno na přehledném a jednoduchém designu, aby nebyl problém s pochopením funkčnosti i menších dětí, které by se eventuálně k této práci mohli v budoucnu dostat. Samotné hry jsou taktéž postaveny na jednoduchém a lehce pochopitelném designu, ovládání a logice hraní. Všechny tyto hry by měly být možno přerušit během jejich hraní a po jejich úspěšném dohrání by měla hráči být navržena možnost uložení jeho/ jejího jména a dosaženého skóre. Toto skóre bude finálně sestaveno buď z dohraných bodů, tj. u hry Snake, nebo změřením času, který byl stráven pro dokončení, tj. u her Puzzle a Doplňování. Toto skóre by mělo být později ke zhlédnutí. Cíle této bakalářské práce jsou: Vytvoření webového rozhraní pro umístění her Naprogramování herní logiky jednotlivých her Jednoduché vizuální navržení her Možnost uchovávat a zobrazovat dosažené herní výsledky Celé webové rozhraní a jednotlivé hry budou vytvořeny pomocí programovacích jazyků CSS, HTML5, JavaScript, JQuery. Připojená bude databáze uchovávající dosažené herní výsledky a ta bude tvořena za pomocí MySQL a PHP. 10

2 Teoretická východiska práce Tato první kapitola bude věnována teoretickému rozboru návrhu při vytváření webové aplikace a použitých programovacích jazyků při vývoji. 2.1 Návrh webové aplikace Prvotním krokem při vývoji samotného webu a webových aplikací je nutnost návrh vizuální podoby uživatelského prostředí. Ta je složena z rozmístění jednotlivých grafických prvků a samotného vzhledu webu. Nemalý počet vývojářů webových aplikací a samotných webových stránek často nehledí na grafické zpracování uživatelského rozhraní jako na primární úkol, ale často se spíše věnují rozložení a organizaci vlastního zdrojového kódu. Aby měli na každém řádku tunu komentářů, zda má být závorka za začátkem nadefinované funkce, nebo až na řádku pod ní. A tímto vzniká dílo, které je sice perfektně okomentované, možná přehledné ve zdrojovém kódu, ovšem ani jedno uživatel neocení! Proto je potřeba při vývoji dbát na přehledný, jednoduchý a funkční návrh celého díla a k tomu jak toho docílit slouží nejedna technika. Při svém návrhu této práce jsem se rozhodl pro jednoduchou, ale přesto efektivní cestu. Tou bylo jednoduché, přehledné a pestrobarevné řešení, ovšem se soucitem k očím uživatele. Je nežádoucí, aby po několika vteřinách pohledu na webové stránky dostal epileptický záchvat z příliš křiklavých, nebo naopak neupadl do hlubokého spánku z monotónních a uspávacích, barev. To vše platí i při využití různých animací při přechodu v navigaci, nebo zvukových doprovodů k různým akcím. Ze zmíněných důvodů bylo prvotním krokem při návrhu webových stránek, myšleno jejich grafickým projevem, nutno vytvořit maketu, na které jsem mohl na vlastní oči vidět, co tvořím. Pro tento účel jsem použil tzv. Paper Protyping, o kterém jsem se dozvěděl při studiu. Samotný papírový prototyp spočívá v grafickém návrhu prostředí v podobě skici na papír. Je to velice rychlé a efektivní řešení ověření různých návrhů a nalezení případných problémů. Ovšem je potřeba minimální um kreslení. 11

Návrh v této podobě není limitován počtem kroků, ve kterých jsou návrhy načrtány. Cílem je rozložení prvků na uživatelském prostředí vidět a zhodnotit, zda splňuje, nebo nesplňuje požadované vlastnosti (viz. Obrázek1 Obrázek2 a Obrázek3). Ve všech náčrtech nefiguruje barevný návrh, ten byl řešet až po zdařilém návrhu prostředí. Obrázek 1 - Papírový prototyp ver.1 12

Zde je vidět, že volba obyčejné cestu návrhu, kdy navigační lišta je v horizontální pozici a vše ostatní, krom pojmenování stránky, se nachází pod ní, je z hlediska funkčnosti vyzkoušena a na mnoha webových stránkách stále používána. Tudíž zřejmě z tohoto hlediska dostačující, ovšem při návrhu jde i o to zaujmout uživatele, tudíž zcela nevyhovující. Obrázek 2 - Papírový prototyp ver.2 Při druhém návrhu je drasticky přemístěno navigační menu na levou a pravou stranu obrazovky. Tyto prvky měly být posuvné, tzn. při najetí na ně, by měl být jejich pohyb animován ke středu plochy. Ostatní prvky se přesunuly na samotný střed. 13

Obrázek 3 - Finální papírový prototyp Třetí pokus byl realizován přemístěním navigačních prvků ke středu plochy, z toho plyne přehlednost, funkčnost a grafická odlišenost od ostatních webových stránek. Díky splnění všech podmínek návrhu byl vybrán jako finální. Dalším krokem návrhu je volba kompozice barev, které budou použity. K tomu stačí buď obyčejný rozum, tudíž zapřemýšlet jakou cílovou skupinu uživatelů chci oslovit, nebo použit mnoho webových pomocníků. Tyto pomocníci mají nepřeberné množství, už nadefinovaných, barevných schémat, nebo nabízejí možnost si tyto barevná schémata vytvořit. 14

2.2 Použité programovací jazyky K realizaci webových stránek je možno použít dvojici programovacích jazyků. Jedná se o: Skriptování na straně klienta (tzv. Client-side scripting) Princip spočívá v odeslání požadavku na klienta na server, od kterého následně dostane HTML + skript (y). Vše je prováděno na straně klienta. (viz. Obrázek 4) Tato metoda skriptování je součást konceptu DHTML (dynamického HTML). Obrázek 4 - Skriptování na straně klienta Skriptování na straně serveru (tzv. Server-side scripting) Princip je v odeslání požadavku od klienta na server, na kterém jsou provedeny vyžadované operace a data jsou odeslány zpět klientovi (viz. Obrázek 5) Tento způsob se většinou používá k připojení webových stránek k datovým uložištím nebo databázím. Velikou výhodou tohoto skriptování je skutečnost, že samotný obsah skriptu se neodesílá do klientova webového prohlížeče. 15

Obrázek 5 - Skriptování na straně serveru 2.2.1 Kaskádové styly CSS CCS3 Kaskádové styly (Cascading Style Sheets) jsou používány pro definici vzhledu webových stránek, které jsou realizovány za pomocí HTML (HTML5), XHTML jazyka, nezávisle na jejich obsahu. Obsah a samotná struktura je právě definována HTML. Při zápisu jednotlivých vlastností selektorů je potřeba držet se pravidel, které definují různým prvkům jejich vlastnosti. Což jsou tzv. stylesheets. Selektorem se rozumí pravidlo pro blok HTML stránky, v našem případě se jedná o blok body, ke kterému jsou přiděleny jednotlivé vlastnosti, v našem případě např.: background-color:#d0dcd0. Což udává název vlastnosti: její hodnota. body { background-color:#d0dcd0; font-family: 'Roboto', sans-serif; margin:0; padding:0; overflow:hidden; } Dále při zápisu rozlišujeme HTML prvky třídy a identifikátory. Hlavním rozdílem je množství výskytu v samotném dokumentu, ve kterém se třídy mohou opakovat, ale identifikátor může být pouze jeden. 16

<div class="trida">.trida { height: 100px; } <div id="identifikátor"> #identifikátor { width: 100px; } 2.2.2 Značkovací jazyk HTML5 Jazyk HTML5 Hyper Markup Language (Hypertextový značkovací jazyk), je složen z tagů, které definují a umožňují zobrazení obsahu stránek a definice samotného dokumentu. Skladba je hodně podobná jako v případě HTML, tudíž je složena z: Definice dokumentu Obrázek 6 - Rozdíl definice verzí HTML Hlavičky dokumentu (součástí jsou meta tagy <meta>, název dokumentu <title> a informace o něm, vkládání externích souborů <link> a <script> aj.) Tělo dokumentu (které obsahuje obsah webové stránky) Změn oproti starší verzi je mnoho, proto zde uvedené změny budou pouze, ty které jsem využil při realizaci práce: Přidání nových značek, pro strukturování webové stránky. Tag <article>, který realizuje nezávislou část webové stránky. Tag <audio>, pro vkládání a práci s audio soubory Tag <canvas> práce s vektorovou grafikou a obrázky. 17

2.2.3 Javascript Javascript se využívá pro tvorbu skriptů na straně klienta. Může být využit pro tvorbu obsahu, nebo animací. Jedná se o OOP (Objektově orientovaný jazyk), který se dá vkládat do HTML kódu. <script> alert("toto napsal JavaScript"); </script> 2.2.4 JQuery JQuery zprostředková komunikaci mezi Javascriptem a HTML. a disponuje funkcemi: Pro výběr, procházení a změnu DOM elementů Událostmi Animacemi a efekty Klasickým poznávacím znamením JQuery je přidání knihovny do hlavičky dokumentu. <script src="/scripts/jquery-2.1.0.min.js"></script> A při použití v kódu se velice často objevuje symbol $. $(document).keydown(function (e) { Tělo funkce }) 2.2.5 MySQL Jazyk MySQL je multiplatformní databáze a komunikace s ní probíhá za pomocí jazyka SQL Structured Query Language. Často je kombinována s jazykem PHP. 18

Za pomocí SQL jsou vytvářeny databáze s daty a zprostředkovávané operace s nimi. CREATE TABLE `d` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` text NOT NULL, PRIMARY KEY (`id`)); 2.2.6 PHP Jazyk PHP Hypertext Preprocessor (Hypertextový preprocesor) je klasickým zástupcem pro vytváření stránek na straně serveru. Syntaxe jazyka je inspirována několika dalšími jazyky (C, Java, Pascal a Perl). Všechen psaný programovací kód musí být vnořen mezi značky <?php?> a může být vložen mezi tagy HTML. Jazyk je case sensitive (tzn. rozlišování velkých a malých písmen). <?php?> error_reporting(e_all); ini_set('display_errors', 1); echo "Hello, World!"; 3 Realizace webové prostředí Při realizaci webového prostředí jsem se držel již předpřipraveného návrhu díky prototypování. Bylo ho pouze potřeba převést do jazyka HTML5 a s pomocí kaskádových stylů, abych návrh proměnil ve skutečnost. První a velice důležitý krok, při tvorbě HTML dokumentu, je jeho identifikace. Identifikací se rozumí element dokumentu, který prohlížeči prezentuje, s jakým typem dokumentu bude pracovat. V našem případě se jedná o HTML5, tudíž na prvním řádku je: <!DOCTYPE html>. 3.1 Hlavička dokumentu Obsahuje důležité, přímo až potřebné informace a věci pro prohlížeč, aby mohl správně prezentovat a zobrazovat webovou stránku. 19

Následující ukázky kódu jsou obsaženy v souboru index.html. Hlavička našeho dokumentu obsahuje: <title> - Obsahuje název stránky (pro prohlížeče je důležitý kvůli SEO) <meta> - Informace pro prohlížeče obsahující od kódování stránky, jména autora, klíčových slov. <link> - Zde se k dokumentu HTML připojují externí zdroje obsahující kaskádové styly. Taktéž obsahuje provázání na ikonu zobrazující se v panelu prohlížeče. <script> - Slouží k provázání externích souborů, které obsahují dodatečné funkce a metody pro správný běh všech her a samotných stránek <head> <title>dětské webové hry</title> <meta http-equiv="content-type" content="text/html; charset=utf- 8"> <meta charset="utf-8"> <meta name="description" content="dětské webové hry - bakalářská práce"> <meta name="author" content="pavel Janoušek"> <link href="/css/favicon.ico" rel="shortcut icon"> <link href="css/style_main.css" rel="stylesheet" type="text/css"> <script src="/scripts/jquery-2.1.0.min.js"></script> <script src="/score/client/score.js"></script> </head> 3.2 Tělo dokumentu Všechny interakce webových stránek a hráče probíhá v jednom souboru: index.html. Na většině stránek, po kliknutí na vybrané téma v navigační liště, je uživatel přesměrován na podstránku, kde se až zobrazí žádaný obsah. Toto s sebou nese nutnost vytvořit takový počet souborů, jako je samotný počet položek navigace. Pro vyvarování, aby se muselo vytvářet nepřeberné množství dokumentů s definicí rozložení a stylů, je tělo navrženo tak, aby po výběru možnosti v navigační menu nebyl uživatel nikam přesměrován, ale pouze aby se vybraná možnost zviditelnila. 20

Tělo je tvořeno pěti oddělenými bloky <article>. <body> <article id="outset">... </article> <article id="game-snake">... </article> <article id="game-puzzle">... </article> <article id="game-refilling">... </article> <article id="game-score">... </article> </body> #outset obsahuje navigační prvky, pomocí kterých je uživateli zobrazena zvolená část. Menu je formátováno kaskádovými styly do jednoduché, ale funkční podoby. Obrázek 7 - Grafické znázornění navigačního menu Jsou zde obsaženy čtyři kategorie: Had (item-game-snake) Puzzle (item-game-puzzle) Doplňování (item-game-refilling) Skóre (item-game-score) 21

Samotná navigace je pouze definována a stylována. Ovšem po funkční stránce vůbec nic dělat nebude. Proto je v hlavičce celého dokumentu vložen externí soubor, obsahující JavaScriptové funkce, které budou obsluhovat zobrazovaní a skrývání jednotlivých vybraných bloků. Vše je napsáno tak, aby byl vždy zobrazen pouze jeden blok a při přechodu z jednoho bloku na druhý, bude proveden animovaný přesun. Dle pozic jednotlivých navigačních prvků (levá, pravá, vrchní, dolní strana) se vybraný blok zviditelní z jeho dané strany, která je specifikována pozici navigace. Všechny čtyři prvky jsou proto hlídány na událost click a to za pomocí JQuery. Tuto cestu řešení jsem nezvolil pouze náhodou. Jelikož při použít <blok onclick= zavolejfunkci(); > je při načtení stránky vytvořen samostatný blok <script> zabírající paměť, tudíž zpomaluje výkon prohlížeče. Dále také není zaručena funkčnost tohoto zavolání funkce napříč všemi prohlížeči a jejich verzemi. Po detekci kliknutí, na některý ze čtyř prvků, se provede zavolání přiložených funkcí. Tyto funkce obstarávají samotné zobrazení a skrytí jednotlivých bloků těla stránky, ovšem v tomto případě jsou volány o funkce, starající se o inicializaci a spuštění samotných her. Ovšem to jen v případě detekce kliknutí na trojici: Had, Puzzle, Doplňování. Při detekci kliknutí na Skóre jsou volány funkce pro extrakci výsledků jednotlivých her z databáze a zprostředkování jejich zobrazení. Následující kód je obsažen v souboru /scirpts/menu_navigace.js. // LEFT - PUZZLE $('#item-game-puzzle').click(function () {.. }); // UP - SNAKE $('#item-game-snake').click(function () {.. }); // DOWN - SKORE $('#item-game-score').click(function () {.. }); //RIGHT - REFILL $('#item-game-refilling').click(function () {.. }); 22

Volání funkcí po detekci jde ve specifickém pořadí a to: Úvodní stránka bude nahrazena vybraným prvkem animate('#outset', 'top', '150%', true); => skrytí uvodní stránky function animate(id, margin, value, hide) { var animateit = { opacity: 1 }; animateit[margin] = value; $(id).animate(animateit, 900, function () { if (hide) show(id, false); }); } Funkce má čtyři vstupní parametry: blok, se kterým budu operovat, činnost s daným blokem, hodnotu činnosti a upřesnění zda se má zobrazit nebo skrýt. Parametr hide se dále dotazuje další funkce, zda má být dotyčný blok zobrazen, nebo skryt s provedením animace. function show(id, show) { $(id).css('opacity', '0'); if (show) { $(id).show(10) } else { $(id).hide(10) } } Parametr, v podobě číselné hodnoty, předávající se funkci $ (id).show(10); udává rychlost překryvné animace. Překryvem vybraného prvku O to se postará funkce show(id,true);. A upřesněním animace překryvu vybraného prvku Zavoláním funkce anime(). Finální animace jeví dojem, při výběru volby z navigace, že úvodní obrazovka je nahrazena vybraným blokem. 23

#game-snake, #game-puzzle, #game-refillin, #game-score všechny tyto prvky při načtení obsahují: Nadpis Navigační tlačítko pro návrat na úvodní stranu Předpřipravený, prázdný prvek DIV / v případě #game-score jsou obsaženy tři sloupce s nadpisy Jednotlivé hrací prvky, nebo údaje o dosažených výsledcích jsou generovány do připravených prázdných prvků dynamicky. Až po vybrání na navigačním menu se do připravených, prázdných divů budou volat potřebné prvky, nebo data. V tomto případě se jedná o skriptování na straně klienta. 3.2.1 Dynamické generování prvků Neboli DHTML Dynamic HTML, je spojení Javascriptu a kaskádových stylů, při němž je možno měnit obsah stránek i po jejich načtení. Především se jedná o změnu pozice prvku, změnu jeho vlastnost (viditelnost, barva, změna textu aj.), nebo animace. Výhody DHTML: Přizpůsobování dokumentu Vyskakovací nabídky/ tlačítka aj. Ulevení dokumentu od přebytečných prvků, dokud nejsou potřeba Nevýhody: Nutnost odladění na různé platformy Neschopnost ukládání dat (bezpečnostní pravidla) Aj. 24

Při dynamickém generování prvků do HTML dokumentu je úplně stejné jako, když tyto prvky natvrdo píšete do zdrojového kódu. Je tedy potřebovat vědět, pod který DIV daný prvek patří, co to bude za prvek, jaký bude mít název a nutnost tento prvek naformátovat pomocí CSS. var kam = document.getelementbyid('cilovy-blok'); var co = document.createelement('div'); co.setattribute('id','nazev-generovaneho'); kam.appendchild(co); Prvním krokem tedy je označení cílového místa (řádek 1), dále si vytvoříme nový prvek (řádek 2), tomuto nově vytvořenému prvku nastavíme druh a název (řádek3) a v poslední řadě nově vytvořený prvek vložíme do toho cílového (řádek 4). Tímto způsobem lze generovat libovolný prvek na webové stránky. Uvádím příklady generování třech prvků: nového elementu <div> var misto = document.getelementbyid('mistoproprvek'); var div = document.createelement('div'); div.setattribute('id','novy-element-div); misto.appendchild(div); nového elementu <canvas> s nastavením vlastností height a width var misto = document.getelementbyid('mistoproprvek'); var canvas = document.createelement('canvas'); canvas.id = "mycanvas"; canvas.width = 640; canvas.height = 480; misto.appendchild(canvas); nového elementu <button> var misto = document.getelementbyid('mistoproprvek') element.type = "button"; element.id="novy-button" element.value = "Novy Button"; element.onclick = function (){ proved po kliku.. } misto.appendchild(element); 25

Nebo je možno k vlastnostem generovaného prvku přistupovat pomocí tečkové notace. Jinak postup je úplně stejný: definování generovaného prvku, typ, hodnota a vyvolání funkce při různé akci (zde je volaná funkce při akci onclick). 3.3 Vytvoření her Každá z her je realizovaná pomoci jazyka Javascript a drobné pomoci, hlavně pro ošetření akci dějících se nad herními prvky (jako kliknutí myši, nebo detekce stisku klávesy), JQuery. V začátku samotného programování her jsem postupoval, zcela obyčejným způsobem deklarování jednotlivých globálních proměnných a samotným sepsání funkcí. Počínaje inicializací, která nastavila (v případě hry Snake) prvotní pohyb hada a dále zavolala další funkce., které obsluhovaly další a další možné děje při hře (zobrazení hada, pohyb hada, zobrazení jídla, kontrolu kolize aj.). Tomuto stylu programování se říká: Procedurální. Sepsaný kód byl nepřehledný, ale horší byla vnější manipulace s danými funkcemi. Tento zápis byl totiž vždy proveden od prvního řádku po poslední, dle volání funkcí, nebylo k nim možno přistupovat individuálně. Vždy se musel zavolat celý soubor funkcí a byl proveden zcela od začátku. $(document).ready(function () { var snake_food; var userscore; function start() {... } function createsnake() {... } function createfood() {... } function paintsnake() {... } }) Po úplném načtený DOM (tzn.: daný dokument je zcela načten a zobrazen) se začnou provádět jednotlivé bloky funkcí, kde každý blok volá další funkci, na které je závislé provedení. Tato sněť kódu, kde byly volání funkce v nich další funkce atd., způsobovala víc problémů, než jich řešila. 26

3.3.1 Objektově orientované programování Základní myšlenkou celého objektově orientovaného programování OOP (Object-Oriented Programming) jsou tzv. objekty. Samotným pojmem objekt je myšlený opravdu pouhý objekt, který má svoje specifické vlastnosti a metody při jeho vytvoření. Tyto jeho vlastnosti a metody zanikají pouze až při ukončování samotného objektu. Obrázek 8 - Přirovnání definice OOP Samotný počítač jako objekt má své vlastní vlastnosti, které ho specifikují. Taktéž má vlastní metody, nebo spíše řečeno jeho operace, které mohou být prováděny. Vlastnosti a metody určené pro daný objekt se definují v tzv. třídě. A takto vzniklý objekt se nazývá instancí třídy. 3.3.2 Realizace her pomocí OOP Pro jednotlivé hry inicializovány nové objekty (pro hru puzzle se nový objekt jmenuje Puzzle, pro hru snake se jedná o objekt Snake a doplňovaní je to Doplnovani ), kterým jsou předány parametry. Tyto parametry jsou následně předávány jednotlivým konstruktorům. new Puzzle(prvníParametr,druhýParametr); new Snake(prvníParametr); new Doplnovani(prvníParametr); 27

První objekt Puzzle obsahuje dva parametry: prvníparametr : tímto se konstruktoru předává obrázek, který bude figurovat jako pozadí hry druhýparametr : zde konstruktoru předáváme místo v HTML dokumentu, kam budeme generovat hrací pole Objekty Snake a Doplnovani obsahují po jednom parametru: prvniparametr : konstruktoru je předáno místo v HTML dokumentu, kam bude generovat hrací plochu a příslušné hrací prvky Jednotlivé konstruktory, konstrukční funkce, objektů od sebe svojí strukturou moc neliší. Hlavním rozdílem jsou ovšem vnitřní metody (pozn.: funkce přiřazena nějakému objetu, je nazývána metodou). function Snake(place) { this.movedirect; this.start = function start(place) {..}... } Konstruktor převezme parametr, ten využije v průběhu některé ze svých metod. Následuje inicializace proměnných daného objektu a samozřejmostí jsou jednotlivé metody, těch má každý z našich objektů několik. Každá z metod obstarává některou činnost, nebo interakci na hráčův podmět. Slovo this nás ukazuje, že pracujeme uvnitř objektu, což je kontext. 3.4 Popis jednotlivých her Každá z her má své specifické ovládání pomocí svých ovládacích prvků, podle toho jak a čím je tvořena. Někde je využito ovládání pomocí kurzorových šipek a u zbývajících je využita interakce pomocí detekce kliknutí myši do prostoru. Všechny tyto operace jsou následně odchytávaný v kódu samotné hry a dále s nimi pracují jednotlivé funkce her. Které rozhodují, co se bude dít s ovládaným prvkem. 28

Každá hra navíc obsahuje zvukový doprovod jednotlivých akcí. Jedná se o: Přesun bloku puzzle Pozření bloku u hada Úspěšné dokončení hry Neúspěšné dokončení hry Ve všech případech se jedná o využití HTML elementu <audio>, který obsahuje element <source> ve kterém je uložen daný zvuk. Vždy je uložena identická dvojice zvuků, ovšem ve formátech:.mp3 a.ogg. Toto je opatření, jelikož podpora audio formátů není ve všech prohlížečích jednotná. Na každé ploše hry se nachází tlačítko Zpět, které slouží pro návrat na úvodní stránku, tudíž ukončení hry. Ukázky kódu jsou ze souboru menu_navigace.js. Princip je jednoduchý, pomocí JQuery detekujeme uživatelovo kliknutí na daný prvek pro návrat. $('.back').click(function () {} V našem případě má tlačítko Zpět identifikaci: <div class="back">zpět</div> Po vykonání příslušných funkcí animací pro přechod na úvodní stránku, popsáno výše v dokumentu, je zavoláno metoda.emty(). Ta odstraní potomky daného prvku, na kterém je voláno. Jednoduše nám vyčistí hrací plochu pro další generování. 29

3.4.1 Hra Puzzle Na daném bloku HTML stránky, specificky se jedná o blok <canvas>, je rozmístěno několik rozdělených dílků, které jsou pomíchány, z původní předlohy. Hráč má za úkol jednotlivé bloky přesunout zpět na svá místa, aby docílil složení originálního obrázku. Ke složení puzzle hráč dojde označováním jednotlivých dílků, které chce přesouvat a druhotným označením dílků, za které chce první vyměnit. Samotné prostředí je složeno z: Plochy obsahující zamíchané části originálního obrázku Originální předlohu, dle které se skládá Tlačítkem Zpět Obrázek 9 - Prostředí hry Puzzle Prostředí hry je dynamicky vytvořeno až po zavolání z hlavní navigační nabídky. Hlavním důvodem je zamezení zbytečného načítání obsahu, který není uživatelem využíván. Veškeré ukázky zdrojových kódů jsou ze souboru /scirpts/puzzle.js. 30

Základním prvek je tedy <canvas>, který reprezentuje hráčovi hrací plochu a místo, kde se nachází jednotlivé dílky puzzle. Tato plocha je dynamicky generována, ovšem má statické rozměry 640px*480px. Statická velikost hracího pole je zvolena kvůli jednoduššímu rozdělování zamíchaných dílků (každý má velikost 160*160px), těch je vždy 12(4 * 3 dílky). Je potřeba originální obrázek rozměřit aby byl rozdělen na daný počet dílků po daných rozměrech. Jednotlivé rozměry a polohu daného bloku uložíme do dvojice datových polí (Array). Vše co tedy o dílku potřebujeme vědět je: Velikost hrany z levé/ pravé/ vrchní a dolní strany okraje Rozměření proběhne způsobem projití sloupců (i = index sloupce) a řádků (j= index řádku) a výpočet daných hran zvyšováním indexu sloupce, řádku pomocí vzorce: Z leva i*velikostdílku Z prava j*velikostdílku+velikostdílku Z vrchní stany j*velikostdílku Ze spodní strany i*velikostdílku+velikostdílku Příkladem: První dílek [0,0] 0*160, 0*160, 0*160+160, 0*160+160 Druhý dílek [0,1]: 0*160,1*160, 0*160+160, 1*160+160 V polích bude uložena informace ve tvaru: (levá hrana, vrchní hrana, pravá hrana, spodní hrana) Jednotlivé informace o velikostech hranic všech dílků jsou uloženy pod indexem v poli, nyní se zavolá jednoduchá funkce, která zprostředkuje náhodné zamíchání těchto údajů. 31

this.jumbledarray = function jumbledarray(ar, times) {} funkce má dva parametry, které udávají: Míchané pole (máme dvě, v jednom jsou pozice dílků originálu a druhé budeme míchat) Počet smyček pro zamíchání (aby bylo důkladné staticky napsané číslo smyček projití funkce) Celé pomíchání proběhne smyčkou while, které přejme parametr times a pomocí dočasné proměnné vždy prohodí dvojici náhodně zvolených indexů pole. Výstup je tedy pole s přeházenými indexy o záznamech hranic jednotlivých dílků puzzle. Nyní vykreslíme, nebo spíše rozdělíme a vykreslím originální obrázek na hrací plochu. Využijeme na to funkce z elemetntu <canvas>.drawimage(). Této funkci předáme parametrem informace o našich dílcích a opět stejnou metodou, pro jednotlivé řádky a sloupce, ji vykreslím. Poslední důležitou metodou objektu je funkce, pro samotný přesun zvolených dílků na hrací ploše. this.oncanvasclick = function oncanvasclick(evt) {} Metoda je volána při detekci kliknutí na hrací plochu, to je zajištěno díky s JQuery. $(canvas).on('mousedown',this.oncanvasclick); Po detekování kliknutí hráče na hrací plochu metoda, zjistí polohu (X, Y souřadnice) samotného místa. To je opět řešeno pomocí JQuery, jelikož prohlížeče IE a Chrome používají jiné metody než Firefox pro zjišťování této polohy. Získané údaje jsou vyděleny velikosti jednoho dílku puzzle, aby byl zjištěný index daného dílku. 32

Tento dílek, pokud je to tedy první označený dílek (ošetřeno v metodě), bude zvýrazněn (jeho okraje pomocí funkcí, volaných na prvku <canvas>) zavoláním příslušné metody a předáním jednotlivých pozic dílků. this.highlightblock = function highlightblock(drawx, drawy) {} Po označení druhého dílku je zavolána metoda na prohození těchto dílků. Jedná se o výměnu informací o hranicích daného výřezu obrázku mezi těmito označenými dílky (bude prohozen mezi jednotlivými indexy pole, tzn. Uživateli se vymění dvojice vybraných dílků). Taktéž je hráč obeznámen zvukem, že došlo k prohození dílků. this.swapselect = function swapselect(block1, block2) {} document.getelementbyid("puzzle_move_sound").play(); Při určení, zda je puzzle složené, nám poslouží první pole. V tom jsou obsaženy hranice jednotlivých dílků s indexy na obrázku. Projitím všech indexů (na každém indexu jsou obsaženy informace o daném dílku puzzle) pole a zkontrolování, zda jsou stejné, zjistíme stav puzzle. if(this.puzzlearray[i]!= this.puzzleoriginalarray[i]) { correct = false; } Pokud jsou pole identická, puzzle je složené a hráč je o této skutečnosti obeznámen zvukem. Ten je převzat z elementu <audio>. document.getelementbyid("puzzle_success_sound").play(); Tudíž hráč může zadat svoje jméno a to bude odesláno do databáze. Skóre, které se spočítalo odečtením času startu hry (vygenerování pomíchaného obrázku) a ukončením hry (úspěšnou kontrolou indexů a hodnot obou polí), bude přiloženo. var score = this.starttime - this.endtime; 33

3.4.2 Hra Snake Hra Snake taktéž pracuje s elementem <canvas>, na který je postup hry vykreslován. Cílem hry je pohybujícím se hadem, tento pohyb je řízen kurzorovými šipkami klávesnice, sbírat generované kousky jídla, při přejetí hada skrze daný kousek dojde ke zvětšení délky jeho těla. Při najetí do hranic hracího pole, nebo do najetí těla hada samotného je hra ukončena a hráčovo jméno a dosažené skóre je uloženo do databáze. Prostředí je složeno z: Hrací plochy tvořené elementem <canvas> Tlačítkem Zpět Všechny ukázky kódu pocházejí ze souboru /scirpts/snake.js. Obrázek 10 - Prostředí hry Snake 34

Celá hrací plocha je opět dynamicky generována po zavolání hry z navigačního panelu. Vše je ošetřeno stejným způsobem jako u předešlé hry, s rozdílem hodnot statické šířky a výšky elementu <canvas>. Pohyb hada je ovládán kurzorovými šipkami klávesnice a daný klik je ve hře zjišťován pomocí JQuery a metody.keydown(). $(document).keydown(function (e) { var keyinput = e.which; if (keyinput == "40" && objekt.movedirect!= "up") objekt.movedirect = "down"; else if (keyinput == "39" && objekt.movedirect!= "left") objekt.movedirect = "right"; else if (keyinput == "38" && objekt.movedirect!= "down") objekt.movedirect = "up"; else if (keyinput == "37" && objekt.movedirect!= "right") objekt.movedirect = "left"; }) Jak je vidět na přiložené ukázce z kódu, samotné rozeznání kurzorové šipky se provádí díky ASCII dané klávesy. Po kontrole, které z kláves byla stisknuta a kontrole, aby se had nemohl pohybovat opačným pohybem, je hadovy přidělen směr pohybu. Opačným pohybem hada je myšlen pohyb, který je přesně opačným stávajícího pohybu těla hada. Toto je vysvětleno na Obrázku 13. Pokud se tělo hada pohybuje směrem do leva, není možné, aby se najednou pohyb celého těla změnil doprava. 35

Obrázek 11 - Změna směru do protipohybu těla hada Opačným pohybem hada je myšlen pohyb, který je přesně opačným stávajícího pohybu těla hada. Toto je vysvětleno na Obrázku 13. Pokud se tělo hada pohybuje směrem do leva, není možné, aby se najednou pohyb celého těla změnil doprava. Celý princip hry spočívá ve vykreslování těla hada a krmení pro hada na souřadnicích X a Y na hracím poli. Souřadnice jsou reprezentovány polem s uloženými souřadnicemi. Pro generování hada a jeho krmení jsou sepsány dvě metody na daném objektu. Ty pracují velice podobně, jediným rozdílem je, že tělo hada musím mít X a Y parametry uložené v poli, ty následně prezentují začátek a konec těla hada a všechny dílky mezi nimi. Tyto hodnoty jsou uloženy v proměnné mysnakearray[]. Metoda pro generování krmení náhodně vybere souřadnice na hracím poli a ty předá proměnné snake_food. Pohyb hada je tedy ošetřen zvyšováním dané proměnné (movex určijící pohyb po ose X a movey pro ose Y, která určuje pohyb na ose X, nebo ose Y. Zvyšování, nebo snižování této proměnné je určen pohyb hada nahoru, nebo dolu. Tato úprava proměnných se provádí při detekci stisknutí tlačítka. 36

if (this.movedirect == "right") movex++; else if (this.movedirect == "left") movex--; else if (this.movedirect == "down") movey++; else if (this.movedirect == "up") movey--; Pokud dojde kontaktu těla hada s bodem, který reprezentuje jídlo. Je provedena inkrementace délky těla hada, to reprezentuje proměnná snaketail a vizuálním přidání dílky těla. Je tedy potřeba kontrolovat pozici jídla na osách X a Y (souřadnici X reprezentuje proměná snake_food.x a Y proměná snake.food.y) a to samé provádět s prvním dílkem, tudíž hlavou, těla hada. Pokud se tyto souřadnice shodují, je jasné, že had musí zkonzumovat tento dílek a hráči je zvukovým efektem sdělena tato událost. document.getelementbyid("snake_food_sound").play(); Po konzumaci je třeba zajistit nové vygenerování jídla, to probíhá náhodným zvolením souřadnic na hracím poli a samotným zobrazením. if (movex == this.snake_food.x && movey == this.snake_food.y) { var snaketail = { x: movex, y: movey }; this.userscore++; document.getelementbyid("snake_food_sound").play(); this.createfood(); } Při pohybu hada můžou nastat dvě situace, při kterých je generován konec hry. U první je potřeba kontrola souřadnice těla, spíše prvního bloku, zda není totožná s počáteční hranou, nebo konečnou hranou hracího pole. Předáním parametru canvas (jedná se o proměnné height a width) tedy zjistím, zda had nenarazil do stěn. Při druhé situace se jedná o náraz do vlastního těla hada, to je kontrolováno metodou collision. this.collision = function collision(x, y, array) {..} Jak je vidět metoda má tři parametry, jedná se o momentální pozici hlavy hada a pole se souřadnicemi všech prvků těla. 37

Souřadnice hlavy jsou tedy porovnány s polem souřadnice celého těla, pokud se pozice hlavy rovná jednomu z nich, je detekována srážka hada se sebou samotným a hra je ukončena. Dále je tedy potřeba tělo hada rozhýbat, pro tuto situaci je použita metoda setinterval(). this.game_loop = setinterval(function(){objekt.paintsnake();}, 70); Metoda v zadaném intervalu, v našem případě 70 (jedná se o 70ms), zavolá přidruženou metodu, v našem případě metodu na vykreslení těla hada. Tím je vyvolán efekt pohybu, ovšem jedná se pouze o překreslení herní plochy. Daná hra tedy může být ukončena dvěmi způsoby: Dohráním/ ukončením hry (jedná se o kontakt se stěnou, nebo tělem) Volbou hráče vrátit se zpět na úvodní stránku V prvním případě je volána metoda over(), která zobrazí restartovací tlačítko pro znovu započatí hry a hráč je zvukem obeznáme o ukončení dané hry, stejným způsobem jako u hry Puzzle. Poté je vyvolána nabídka pro zadání hráčova jména, skóre je počítáno hrou a jedná se o počet posbíraných dílků jídla hadem, je uložena v proměnné userscore. Poté jsou tyto informace odeslány požadavkem do databáze. V druhém případe, kliku na tlačítko zpět, je pouze přerušeno překreslování hrací plochy. Hra se jeví jako zastavená. 3.4.3 Hra Doplňování Jako jediná není postavena na elementu <canvas>,ale využívá funkce Drag and Drop. Jde o přesunutí jednoho prvku ze svého místa na jiné místo v hracím poli. Cílem hry je tedy dílek z nabídky, který je tvořen výřezem z originálního obrázku, přesunou na svém místo v originálním obrázku. Použité ukázky kódu se nachází v souboru scripts/doplnovani.js. Celé hrací pole je opět dynamicky generováno při výběru z navigačního menu, jedinou změnou je ovšem přiřazení atributu, prvkům určeným pro doplnění do originálního obrázku, udělá přesunutelnými. tmp2.setattribute('draggable','true'); 38

Obrázek 12 - Hrací plocha Doplňování Celé hrací pole je opět dynamicky generováno při výběru z navigačního menu, jedinou změnou je ovšem přiřazení atributu, který dané prvky pro doplnění do originálního obrázku, udělá hýbatelné. Na Obrázku 14 je vidět rozložení celé plochy: Originální obrázek na doplnění (levá část) Jednotlivé prvky určené pro přetažení (pravá část) Tlačítko pro návrat na úvodní stránku Pozadí hracího pole a jednotlivé dílky, které jsou reprezentovány vykrojenými obrázky s informací o jejich pozici, jsou předány objektu při vytváření. Toto je ošetřeno v souboru menu_navigace.js. Prvky, které budou doplňovány, mají tedy díky nastavení atributu vlastnost draggable (tzn. tažitelné). Je třeba ještě nastavit, co se s daným prvkem bude dít při jeho přetaží a to ošetřuje atribut ondragstart. 39

tmp2.ondragstart = function(ev) { ev.datatransfer.setdata("text",ev.target.id); }; Při detekci přetažení prvku je zavolána funkce, která specifikuje, o jaký prvek se jedná (specifikuje jeho typ a hodnotu). V našem případě se jedná o typ Text a hodnotou je identifikace prvku. Hracímu poli, na které se prvky budou doplňovat, stačí nadefinovat, co dělat s prvkem, který je k němu tažen a prvkem, který na něj pokládán. K tomuto slouží dva atributy ondrop a ondragover, které jsou přiřazeny ploše při generování. Událostí ondragover je specifikováno kam se přetahovaný prvek může položit. V základu je zakázáno pokládání prvků na ostatní elementy, tudíž je potřeba povolení položení přetahovaného prvku. Toho dosáhneme zavoláním metody event.preventdefault() přo události ondragover na přetahovaném prvku. tmp.ondragover = function(ev) { ev.preventdefault(); }; Teď už jen stačí definovat činnost s prvkem, který je pokládán na plochu pro doplnění. Tuto událost obstarává atribut ondrop, který volá funkci pro položení. tmp.ondrop = function(ev){ ev.preventdefault(); var data = ev.datatransfer.getdata("text"); if(ev.currenttarget.childnodes[0]!= null){ var node = ev.currenttarget.childnodes[0]; document.getelementbyid('doplnovani-panel-item- '+node.itemid).appendchild(node); } ev.target.appendchild(document.getelementbyid(data)); malovani.trytosubmit(); }; Funkce ošetří povolení pokládání prvku na plochu, získá data přetahovaného prvku (jeho typ a hodnotu). V následujících řádcích kódu je ošetřena situace, kdy na místě položení již nějaký prvek je. Pokud se tak stane, přetahovaný prvek je vrácen do místa pro výběr. A v posledním kroku přidělí na místo vložení data a hodnotu našeho přetahovaného prvku. 40

Na posledním řádku ukázky je vidět metoda.trytosubmit(), která se za pomoci metody.check() zkontrolující správné umístění prvků na hracím poli, pokusí odeslat skóre. Správnost položení prvků probíhá kontrolou přidělených indexů, při generování. Pokud je vyhodnoceno správné umístění všech prvků odešle se do databáze hráčovo jméno, po zadání a jeho dosažené skóre. To je opět získáváno stejným způsobem jako u hry Puzzle. 3.5 Návrh a realizace databáze Pro uložení skóre k dané hře je potřeba založit databázi s dvěma tabulkami. První obsahuje id a název hry, druhá tabulka přiřazuje k dané hře jméno hráče a jeho dosažené skóre. Návrh datové struktury je vidět na Obrázku 18. Obrázek 13 - Návrh relačního modelu V tabulce score_games uchováváme identifikační číslo hry (primární klíč) a její název a dle toho id hry do tabulky score_scores přiřazujeme číslo odehrané hry, jméno hráče a jeho skóre. Souboru potřebné pro komunikaci s databází a operacemi s ní jsou ve složce score. V této složce se taktéž nachází složky client a score a dvojice souborů get_scores.php a submit_score.php. 41

Složka client obsahuje soubory potřebné pro komunikaci klienta s databázovým serverem. Speciálně soubor score.js, který pomocí metody GET protokolu HTML zavolá skripty get_/submit_score.php, záleží na potřebě klienta, zda chce odesílat nebo přijímat, a těm pomocí URL předá, nebo příjme jednotlivé hodnoty. Data procházející tímto souborem jsou v textovém tvaru JSON. Přijímána data jsou zpětně převáděny do podoby objektu, nebo pole, aby se s nimi dalo operovat. V těchto skriptech je volán serverový skript pro přímou komunikaci s databází a operacemi s ní. Složka score obsahuje serverovou obsluhu databáze. Obsažený soubor db.php zprostředkovává skrze objekt připojení k databázi. <?php class Db { function getmysqli() { $DB_NAME = 'c1_game_db'; $DB_HOST = 'localhost'; $DB_USER = 'c1_game_user'; $DB_PASS = '45.Bg.6978.Aq.23-X'; return new mysqli($db_host, $DB_USER, $DB_PASS, $DB_NAME); } }?> Soubor score.php obsluhuje na straně serveru interakci s databází. V souboru je obsažen objekt s dvojicí funkcí, jedna zprostředkovává odeslání dat do tabulky a druhá příjem dat z tabulky, přičemž obě dvě funkce pracují s daty jako s poli. 42

4 Závěr Cílem bakalářské práce bylo vytvoření webových stránek, které budou obsahovat trojici webových her a zobrazování dosaženého skóre k jednotlivé hře. Samotné stránky jsou tvořeny dle standardů HTML5 a CSS. Jednotlivé webové hry jsou tvořeny za pomocí programovacích jazyků JavaScript a JQuery. A děje ve všech hrách jsou doplněny zvukovými efekty. Stránky a hry komunikují s databází, která je obsluhována pomocí PHP a SQL. Při tvorbě stránek byl kladen důraz na jednoduchý a přehledný styl, kombinující maximální funkčnost. Z provedených analýz webových stránek je potvrzeno, že stránky jsou plně validní. Taktéž jednotlivé hry jsou realizovány jednoduchým a přehledným vizuálním projevem. Interakce mezi nimi a hráčem probíhá skrze kurzorové šipky, nebo počítačovou myš. Celé webové stránky jsou multiplatformní. Pevně věřím, že jsem splnil cíle bakalářské práce a doufám, že tato práce bude lidem zpříjemňovat dlouhé chvíle při pokusech překonání vlastních, nebo cizích výsledků ve hrách. 43

Seznam použitých zkratek CSS Cascading Style Sheet DHTML Dynamic HTML DOM Document Object Model HTML HyperText Markup Language JSON JavaScript Object Notation PHP Hypertext Preprocessor SEO Search Engine Optimization SQL Structured Query Language URL Unique Resource Locator XHTML extensible HyperText Markup Language 44

Seznam použitých zdrojů Knižní zdroje 1) DOMES, Martin. Tvorba WWW stránek pro úplné začátečníky. Vyd. 1. Brno: Computer Press, 2008, 246 s. ISBN 978-80-251-2160-3. 2) MORKES, David. JavaScript: praktické příklady. Vyd. 1. Praha: Grada, 2002, 196 s. ISBN 80-247-0258-4. 3) KOUT, Pavel. Praktický JavaScript: praktické příklady. Vyd. 1. Brno: Zoner Press, 2004, 325 s. ISBN 80-868-1500-5. 4) KUČERA, Miroslav. Inspirativní webdesign: praktické příklady. Vyd. 1. Praha: Mobil Media, 2003, 150 s. ISBN 80-865-9342-8. 5) MEYER, Eric A. Eric Meyer o CSS: kompletní průvodce. Vyd. 1. Překlad Jan Pokorný. Brno: Zoner Press, 2007, 560 s. ISBN 978-80-86815-64-0. Internetové zdroje 6) HASSMAN, Martin. Nové značky HTML5 [online]. 2009. Dostupné z: http://www.zdrojak.cz/clanky/nove-znacky-html5/ 7) HASSMAN, Martin. Canvas říkejme tomu plocha na kreslení [online]. 2012. Dostupné z: http://www.zdrojak.cz/clanky/canvas-rikejme-tomu-plocha-na-kresleni/ 8) HUNT HASSMAN, Lachlan. Seznámení s HTML 5 [online]. 2007. Dostupné z: http://interval.cz/clanky/seznameni-s-html-5/ 9) JANOVSKÝ, Dušan. HTML 5 [online]. 2010. Dostupné z: www.jakpsatweb.cz/html/html-5.html 10) JANOVSKÝ, Dušan. Přehled vlastností CSS [online]. 2010. Dostupné z: http://www.jakpsatweb.cz/css/css-vlastnosti-hodnoty-prehled.html 11) W3schools.com. JavaScript and HTML DOM [online]. 2011. Dostupné z: http://www.w3schools.com/jsref/default.asp 45

12) W3schools.com. JQuery Selectors [online]. 2011. Dostupné z: http://www.w3schools.com/jquery/jquery_ref_selectors.asp 46

Seznam obrázků Obrázek 1 - Papírový prototyp ver.1... 12 Obrázek 2 - Papírový prototyp ver.2... 13 Obrázek 3 - Finální papírový prototyp... 14 Obrázek 4 - Skriptování na straně klienta... 15 Obrázek 5 - Skriptování na straně serveru... 16 Obrázek 6 - Rozdíl definice verzí HTML... 17 Obrázek 7 - Grafické znázornění navigačního menu... 21 Obrázek 10 - Přirovnání definice OOP... 27 Obrázek 11 - Prostředí hry Puzzle... 30 Obrázek 12 - Prostředí hry Snake... 34 Obrázek 13 - Změna směru do protipohybu těla hada... 36 Obrázek 14 - Hrací plocha Doplňování... 39 Obrázek 15 - Návrh relačního modelu... 41 Seznam příloh Příloha 1: Založení databáze Příloha 2: CD obsahující vypracovanou bakalářskou práci v PDF formátu v souboru bakalarska_prace.pdf, zdrojovými kódy umístěné v souboru web a soubor s adresou webových stránek 47