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:
Pavel Janoušek
Studijní program:
Elektrotechnika a informatika
Obor:
Počítačové Systémy
Název práce:
Dětské webové hry
Cíl práce:
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
Jméno vedoucího katedry
vedoucí bakalářské práce
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
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
3
2.1
Návrh webové aplikace .................................................................................... 11
2.2
Použité programovací jazyky ........................................................................... 15
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
.trida { height: 100px; }
#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 a informace o něm, vkládání externích souborů <link> a <script> aj.)<br />
<br />
<br />
<br />
Tělo dokumentu (které obsahuje obsah webové stránky)<br />
<br />
Změn oproti starší verzi je mnoho, proto zde uvedené změny budou pouze, ty které jsem využil při realizaci práce: <br />
<br />
Přidání nových značek, pro strukturování webové stránky. Tag <article>, který realizuje nezávislou část webové stránky.<br />
<br />
<br />
<br />
Tag <audio rel="nofollow">, pro vkládání a práci s audio soubory<br />
<br />
<br />
<br />
Tag <canvas> práce s vektorovou grafikou a obrázky.<br />
<br />
17<br />
<br />
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><br />
<br />
2.2.4 JQuery JQuery zprostředková komunikaci mezi Javascriptem a HTML. a disponuje funkcemi: <br />
<br />
Pro výběr, procházení a změnu DOM elementů<br />
<br />
<br />
<br />
Událostmi<br />
<br />
<br />
<br />
Animacemi a efekty<br />
<br />
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><br />
<br />
A při použití v kódu se velice často objevuje symbol $. $(document).keydown(function (e) { Tělo funkce })<br />
<br />
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<br />
<br />
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`));<br />
<br />
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!"; ?><br />
<br />
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>.<br />
<br />
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.<br />
<br />
19<br />
<br />
Následující ukázky kódu jsou obsaženy v souboru index.html. Hlavička našeho dokumentu obsahuje: <br />
<br />
<title> - Obsahuje název stránky (pro prohlížeče je důležitý kvůli SEO)<br />
<br />
<br />
<br />
<meta> - Informace pro prohlížeče obsahující od kódování stránky, jména autora, klíčových slov.<br />
<br />
<br />
<br />
<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.<br />
<br />
<br />
<br />
<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<br />
<br />
<head> <title>Dětské webové hry <meta http-equiv="content-type" content="text/html; charset=UTF8"> <meta charset="UTF-8"> <meta name="description" content="Dětské webové hry - bakalářská práce"> <meta name="author" content="Pavel Janoušek"> <script src="/scripts/jquery-2.1.0.min.js"> <script src="/score/client/score.js">
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>”. <article id="outset"> ... <article id="game-snake"> ... <article id="game-puzzle"> ... <article id="game-refilling"> ... <article id="game-score"> ...
#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 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
var misto = document.getElementById('mistoproprvek'); var div = document.createElement('div'); div.setAttribute('id','novy-element-div); misto.appendChild(div);
