Makzan. Programujeme hry v HTML5

Transkript

1

2 Makzan Programujeme hry v HTML5 Computer Press Brno 2012

3 Programujeme hry v HTML5 Makzan Překlad: Jakub Zemánek Obálka: Martin Sodomka Odpovědný redaktor: Martin Herodek Technický redaktor: Jiří Matoušek Copyright Packt Publishing First published in the English language under the title HTML5 Games Development by Example: Beginner s Guide Objednávky knih: eshop@albatrosmedia.cz bezplatná linka ISBN Vydalo nakladatelství Computer Press v Brně roku 2012 ve společnosti Albatros Media a. s. se sídlem Na Pankráci 30, Praha 4. Číslo publikace Albatros Media a. s. Všechna práva vyhrazena. Žádná část této publikace nesmí být kopírována a rozmnožována za účelem rozšiřování v jakékoli formě či jakýmkoli způsobem bez písemného souhlasu vydavatele. 1. vydání

4 Obsah ÚVOD Co v této knize najdete Co budete v této knize potřebovat Pro koho je tato kniha určena Použité konvence Zpětná vazba od čtenářů Zdrojové kódy ke knize Errata KAPITOLA 1 SEZNÁMENÍ S HRAMI V HTML Nové funkce HTML Plátno Audio Geolokace WebGL WebSocket Lokální úložiště Offline aplikace Nové funkce CSS Přechody

5 Obsah Transformace Animace Nové funkce HTML5 a CSS3 detailněji Výhody her v HTML Žádné zásuvné moduly třetích stran Podpora ios zařízení bez dodatečných zásuvných modulů Překročení hranice klasických her v prohlížeči Vývoj her v HTML Jaké hry v HTML5 hrají ostatní Pexeso Sinuous Nové pojetí hry Asteroids Quake RumpeTroll Scrabb.ly Aves Engine Další hry v HTML Co v této knize vytvoříme Shrnutí KAPITOLA 2 ZAČÍNÁME S VÝVOJEM HER A DOM Příprava vývojového prostředí Příprava dokumentů HTML pro hru Doctype pro HTML Záhlaví a zápatí Kam umístit kód v JavaScriptu Provedení kódu po načtení stránky Vytvoření elementů pro hru Ping Pong Seznámení s jquery Seznámení se selektory jquery Seznámení s metodou css knihovny jquery Výhody jquery

6 Obsah Práce s elementy hry pomocí jquery Absolutní pozicování a jeho specifika Načtení vstupu z klávesnice Klávesnice a kódy kláves Lépe čitelné konstanty Převod řetězců na čísla pomocí funkce parseint Provádění kódu v JavaScriptu z konzole Sledování konzole Podpora vícenásobného vstupu z klávesnice Lepší deklarace globálních proměnných Vytvoření časovače pomocí funkce setinterval Herní smyčka Pohyb elementu s použitím časovače Základy detekce kolizí Dynamické zobrazení textu v HTML Shrnutí KAPITOLA 3 PEXESO A CSS Pohyb elementů s použitím přechodů CSS D transformační funkce D transformační funkce Úprava stylů s použitím přechodů CSS Efekt otočení karty Přepínání třídy pomocí metody toggleclass knihovny jquery Nastavení viditelnosti překrývajících se prvků pomocí vlastnosti z-index Vlastnost perspective Vlastnost backface-visibility Vytváříme pexeso Stažení obrázků hracích karet Příprava prostředí hry Klonování elementů pomocí jquery

7 Obsah Výběr prvního potomka elementu pomocí jquery Vertikální zarovnání elementu Použití sprite sheetu jako obrázku na pozadí Přidání logiky hry Provedení kódu po dokončení přechodu Odložené provedení kódu při obracení karet Náhodné uspořádání prvků pole Uložení dat do elementu pomocí vlastního datového atributu Přístup k vlastním datovým atributům pomocí jquery Další karetní hry Přidání písem do hry Další služby pro webová písma Shrnutí KAPITOLA 4 HRA UNTANGLE A PLÁTNO Seznámení s elementem plátna Kresba kruhů na plátno Alternativní obsah pro případ, že prohlížeč plátno nepodporuje..104 Kresba kruhů a čar s použitím metody arc Převod stupňů na radiány Kresba cest na plátně Vytvoření cesty Uzavření cesty Vložení kódu pro kresbu kruhů do funkce Generování náhodných čísel v JavaScriptu Uložení pozice kruhu Základní definice tříd Kresba čar na plátno Seznámení s aplikačním rozhraním pro kresbu čar Interakce s nakreslenými objekty pomocí myši Určení polohy myši v rámci plátna Obsluha událostí myši týkajících se kruhů Herní smyčka Vymazání obsahu plátna

8 Obsah Detekce průsečíků čar na plátně Určení toho, zda se dvě přímky protínají Vytvoření hry Untangle Definice úrovní hry Určení postupu mezi úrovněmi Zobrazení aktuální úrovně a ukazatel postupu Shrnutí KAPITOLA 5 VYLEPŠENÁ HRA UNTANGLE A PLÁTNO Výplň tvarů gradientní barvou Nastavení přechodových bodů gradientu Radiální gradient Zobrazení textu na plátně Použití vlastního písma na plátně Zobrazení obrázků na plátně Použití metody drawimage Dekorace hry Animace sprite sheetu na plátně Vytvoření více vrstev na plátně Kombinace kaskádových stylů a kreslení na plátno Shrnutí KAPITOLA 6 HUDBA, ZVUKOVÉ EFEKTY A ELEMENT AUDIO Přidání zvukového efektu ke spouštěcímu tlačítku Vytvoření elementu audio Přehrání zvuku Pozastavení přehrávání Nastavení hlasitosti zvuku Událost hover knihovny jquery Převedení audia do formátu OGG Podpora ostatních webových prohlížečů

9 Obsah Vytvoření hudební hry Scény ve hrách HTML Vizualizace přehrávané hudby Výběr správné skladby pro hudební hru Uložení a načtení údajů o skladbě Určení doby běhu hry Vytvoření hudebních bodů Přesunutí hudebních bodů Propojení spouštěcího tlačítka s hudební hrou Vytvoření efektu vysunutí herní scény pomocí CSS Ovládání hry klávesnicí Zobrazení indikátoru Vyhodnocení zásahů bodu Odstranění prvku pole se zadaným indexem Obohacení hry o další funkce Nastavení hlasitosti melodie na základě úspěšnosti Odstranění bodů ze hry Uložení úspěšnosti za posledních pět pokusů Uložení dat úrovně Zpracování události dokončení přehrávání Obsluha událostí elementu audio Shrnutí KAPITOLA 7 LOKÁLNÍ ÚLOŽIŠTĚ Lokální úložiště HTML Vytvoření závěrečného dialogu Uložení výsledků v prohlížeči Uložení a načtení dat z lokálního úložiště Datové typy a lokální úložiště Lokální úložiště jako asociativní pole Ukládání objektů do lokálního úložiště Určení aktuálního data a času v JavaScriptu Převedení objektu na řetězec JSON

10 Obsah Načtení objektu z řetězce JSON Prověření obsahu lokálního úložiště v konzole prohlížeče Upozornění uživatele na překonání rekordu Uložení celkového postupu ve hře Uložení postupu ve hře Odstranění rekordu z lokálního úložiště Klonování pole v JavaScriptu Obnovení postupu ve hře Shrnutí KAPITOLA 8 HRA PRO VÍCE HRÁČŮ A WEBSOCKET Ukázka existující webové aplikace využívající rozhraní WebSocket 234 Instalace serveru WebSocket Instalace serveru node.js Vytvoření serveru WebSocket vysílajícího počet připojených klientů Inicializace serveru WebSocket Naslouchání spojením na straně serveru Určení počtu klientů připojených k serveru Odeslání zprávy všem připojeným klientům Vytvoření klienta pro připojení k serveru WebSocket Navázání spojení protokolem WebSocket Klientské události rozhraní WebSocket Vytvoření chatu s použitím rozhraní WebSocket Odeslání zprávy serveru Odeslání zprávy od klienta serveru Příjem zpráv na straně serveru Přeposlání zpráv obdržených serverem Srovnání rozhraní WebSocket s dotazováním Vytvoření sdíleného náčrtkového bloku s použitím plátna a rozhraní WebSocket Vytvoření lokálního náčrtkového bloku Odesláním kresby všem připojeným klientům

11 Obsah Vytvoření datového objektu pro komunikaci mezi klientem a serverem Převedení informací o nakreslených čarách do formátu JSON Nakreslení čar obdržených od ostatních klientů Vytvoření hry Uhodni obrázek pro více hráčů Řízení hry pro více hráčů Výčet klientů připojených k serveru Odeslání zprávy klientovi Vylepšení hry Dekorace hry pomocí kaskádových stylů Shrnutí KAPITOLA 9 HRA S FYZIKÁLNÍM ENGINEM BOX2D A PLÁTNEM Instalace knihovny Box2D Vytvoření nového světa s použitím třídy b2world Nastavení ohraničující oblasti s použitím třídy b2aabb Nastavení gravitace Zakázání spánku objektů Vytvoření pevné země ve světě Definice tvaru Vytvoření objektu Nakreslení světa na plátno Vytvoření dynamického obdélníku ve světě Nastavení odrazivosti objektu Nastavení času ve světě Přidání kol k obdélníku Vytvoření auta Spojení dvou objektů rotačním spojem Ovládání auta klávesnicí Aplikace sil na auto Rozdíly mezi metodami ApplyForce a ApplyImpulse Přidání nájezdových ramp do naší hry

12 Obsah Ověření kolizí ve světě Získání seznamu kolizí Restartování hry Přidání úrovní do hry Nahrazení obrysů grafikou Použití vlastnosti userdata Zobrazení grafiky Rotace a translace obrázku na plátně Finální úpravy Přidání omezeného množství paliva Zobrazení zbývajícího množství paliva Shrnutí Herní enginy HTML Animace a textury hry Zvukové efekty PŘÍLOHA KVÍZ REJSTŘÍK

13

14 Úvod Od HTML5 se toho hodně očekává, obzvláště pak v oblasti online her. Hry využívající HTML5 fungují na počítačích, chytrých telefonech i tabletech, včetně iphonů a ipadů. Buďte mezi prvními vývojáři, kteří již dnes vytvářejí v HTML5 hry pro zítřek. Tato kniha vás seznámí s nejnovějšími webovými standardy HTML5 a CSS3 a jejich použitím při tvorbě online karetních, kreslicích, fyzikálních, a dokonce i multiplayer her. Kniha vás názorně a systematicky provede tvorbou celkem šesti ukázkových her. HTML5, CSS3 a JavaScript to jsou pojmy, které dnes na webu uslyšíte stále častěji. Tyto standardy otevírají nový herní průmysl, HTML5 hry. S jejich použitím je možné navrhovat hry tvořené elementy HTML5, kaskádovými styly CSS3 a kódem v JavaScriptu. Kniha se skládá z devíti tematicky odlišných kapitol. V jejím průběhu vytvoříme šestici her a dozvíme se, jak ve hrách vykreslovat objekty, animovat je, přidat zvuky, propojit hráče a vytvořit fyzikální engine hry založený na systému Box2D. Co v této knize najdete Kapitola 1, Seznámení s hrami v HTML5, představuje nové funkce HTML5, CSS3 a JavaScriptu a ukazuje jejich využití při vývoji her. Kapitola 2, Začínáme s vývojem her a DOM, ukazuje na vývoji klasické hry Ping Pong základy DOM a knihovny jquery. Kapitola 3, Pexeso a CSS3, nás seznámí s novými funkcemi CSS3 a ukáže jejich po užití při vývoji pexesa. Kapitola 4, Hra Untangle a plátno, představí nový způsob vykreslování obsahu ve webové stránce a interakci s ním, založený na použití elementu plátna HTML5. Demonstruje také tvorbu logických her pomocí tohoto elementu.

15 Úvod Kapitola 5, Vylepšená hra Untangle a plátno, rozšiřuje hru z předchozí kapitoly a ukazuje, jak lze prostřednictvím plátna vykreslovat gradienty a obrázky. Ukazuje také použití animací a práci s více vrstvami obsahu. Kapitola 6, Hudba, zvukové efekty a element audio, ukazuje, jak s použitím elementu audio, obohatit hry o zvukové efekty přehrávané na pozadí. Řeč bude také o kompatibilitě různých audioformátů napříč jednotlivými webovými prohlížeči a v závěru ukazuje tvorbu jednoduché hudební hry ovládané klávesnicí. Kapitola 7, Lokální úložiště, rozšiřuje pexeso využívající CSS3 a demonstruje použití nového lokálního úložiště HTML5 pro uložení informací o postupu ve hře a dosažených výsledků v ní a jejich zpětné načtení. Kapitola 8, Hra pro více hráčů a WebSocket, popisuje aplikační rozhraní WebSocket, s jehož pomocí může webový prohlížeč navázat perzistentní spojení se serverem. Díky tomu může hru v reálném čase hrát i několik hráčů společně. V závěru kapitola ukazuje vývoj hry ve stylu uhodni, co je na obrázku. Kapitola 9, Hra s fyzikálním enginem Box2D a plátnem, ukáže, jak zakomponovat do her využívajících plátno známý fyzikální engine Box2D. Popisuje, jak vytvořit fyzikální objekty, aplikovat síly, propojit je, spojit grafiku s fyzikou, a na závěr vše demonstruje na karetní hře. Co budete v této knize potřebovat Neobjedete se bez moderního webového prohlížeče, dobrého textového editoru a základních znalostí HTML, CSS a JavaScriptu. Pro koho je tato kniha určena Tato kniha cílí na vývojáře her se základními znalostmi HTML, CSS a JavaScriptu, kteří chtějí vytvářet hry pro webové prohlížeče využívající možností plátna a DOM. Použité konvence V knize najdete několik stylů textu, které pomáhají odlišovat různé typy informací. Zde je pár příkladů ukazujících použití těchto stylů a objasňujících jejich význam. Programový kód je v textu vyznačen následovně: Vývoj hry v HTML5 začneme u souboru index.html. Blok kódu má následující podobu: 14 // uložení času spuštění var date = new Date();

16 Použité konvence audiogame.startingtime = date.gettime(); // určení uplynulého času var date = new Date(); var elapsedtime = (date.gettime() - audiogame.startingtime)/1000; Pokud je třeba vyzdvihnout určitou část bloku kódu, jsou jeho odpovídající řádky či položky vyznačeny tučně: function setupleveldata() { var notes = audiogame.leveldata.split(";"); // uložení celkového počtu teček audiogame.totaldotscount = notes.length; for(var i in notes) { var note = notes[i].split(","); var time = parsefloat(note[0]); var line = parseint(note[1]); var musicnote = new MusicNote(time,line); audiogame.musicnotes.push(musicnote); } } Veškerý vstup i výstup příkazového řádku má následující podobu: $./configure $ sudo make instar Nové termíny a důležitá slova jsou zvýrazněná tučně. Slova, která můžete vidět na obrazovce, v nabídkách nebo dialozích, mají následující podobu: Klepněte pravým tlačítkem myši na položku Spustit experiment a zvolte Otevřít odkaz v novém okně. V textu knihy se často setkáte s několika typy nadpisů. Následující nadpis slouží k označení instrukcí, které popisují provedení určitého úkolu: Jak na to 1. Akce 1 2. Akce 2 3. Akce 3 15

17 Úvod Uvedené instrukce často potřebují dodatečné vysvětlení a popis. V takovém případě za nimi následuje: Vysvětlení Pod tímto nadpisem najdete detailní popis úkolů nebo instrukcí, které jste právě dokončili. Kvíz V knize najdete i další doprovodné informace, včetně následujících: Krátké otázky, které vám pomohou ověřit si, zda jste všemu správně a zcela porozuměli. Zkuste to sami Tato část obsahuje praktické úkoly a poskytuje další nápady, jak experimentovat s tím, co už znáte. Varování a důležitá upozornění najdete v rámečcích, jako je tento. Tipy a triky jsou uvedeny takto. Zpětná vazba od čtenářů Nakladatelství a vydavatelství Computer Press, které pro vás tuto knihu přeložilo, stojí o zpětnou vazbu a bude na vaše podněty a dotazy reagovat. Můžete se obrátit na následující adresy: Computer Press Albatros Media a.s., pobočka Brno IBC Příkop Brno nebo sefredaktor.pc@albatrosmedia.cz Computer Press neposkytuje rady ani jakýkoliv servis pro aplikace třetích stran. Pokud budete mít dotaz k programu, obraťte se prosím na jeho tvůrce. 16

18 Zdrojové kódy ke knize Zdrojové kódy ke knize Z adresy si po klepnutí na odkaz Soubory ke stažení můžete přímo stáhnout archiv s ukázkovými kódy. Errata Přestože jsme udělali maximum pro to, abychom zajistili přesnost a správnost obsahu, chybám se úplně vyhnout nelze. Pokud v některé z našich knih najdete chybu, ať už v textu nebo v kódu, budeme rádi, pokud nám ji oznámíte. Ostatní uživatele tak můžete ušetřit frustrace a nám pomůžete zlepšit následující vydání této knihy. Veškerá existující errata zobrazíte na adrese po klepnutí na odkaz Soubory ke stažení. 17

19

20 KAPITOLA 1 Seznámení s hrami v HTML5 Několik posledních dekád formoval podobu Internetu jazyk HTML (Hyper-Text Markup Language). Definuje strukturu obsahu prezentovaného na webu a jeho propojení s dalšími souvisejícími stránkami. Jazyk HTML se vyvinul z verze 2 na verzi 4.1 a později na XHTML 1.1. Díky průkopnickým webovým aplikacím a sociálním sítím je nyní jazyk HTML na cestě k HTML5. CSS (Cascading Style Sheet) definuje vizuální prezentaci webových stránek. Určuje styly jednotlivých elementů stránky HTML, včetně stylu v různých stavech (např. po přejetí myší nebo klepnutí). JavaScript představuje logický řadič webové stránky. Právě díky němu mohou mít webové stránky dynamický charakter a nabídnout interaktivitu s uživatelem. Kód v JavaScriptu přistupuje k dokumentu HTML pomocí modelu DOM (Document Object Model) a umožňuje na jeho elementy např. aplikovat odlišné kaskádové styly. Tyto tři technologie otevírají dveře novému odvětví herního průmyslu, hrám v HTML5. S jejich pomocí je možné navrhovat hry v prostředí HTML5 a jeho elementů, využívající CSS3 a JavaScript. V této kapitole se dozvíme: O nových funkcích HTML5. Proč je okolo HTML5 a CSS3 takový rozruch. Jaké hry využívající HTML5 hrají ostatní. Jaké hry budeme vyvíjet v průběhu následujících kapitol. Jdeme na to.

21 Kapitola 1 Seznámení s hrami v HTML5 Nové funkce HTML5 HTML5 a CSS3 přináší mnoho nových funkcí. Než se pustíme do samotného vývoje her, ve stručnosti se s těmito novinkami seznámíme a podíváme se na jejich praktické využití při vývoji her. Plátno Plátno neboli také canvas je element HTML5, který umožňuje vykreslování objektů a manipulaci s bitmapami na nízké úrovni. Na element plátna je možné nahlížet jako na dynamický element obrázku. Tradiční element img zobrazí statický obrázek. Ať už se jedná o dynamicky generovaný obrázek anebo obrázek uložený na serveru, zobrazí se staticky a dále se již nemůže měnit. Je sice možné vyměnit datový zdroj elementu img anebo na něj aplikovat nové styly, nelze však změnit kontext samotného obrázku. Plátno naproti tomu funguje jako dynamický element img. Je možné do něj dynamicky načítat obrázky, vykreslovat objekty a pracovat s jeho obsahem pomocí JavaScriptu. Plátno hraje při vývoji her v HTML5 velmi důležitou roli, a proto bude v této knize jednou z hlavních oblastí našeho zájmu. Audio Hudba přehrávaná na pozadí a nejrůznější zvukové efekty často bývají důležitým aspektem vývoje her. HTML5 nabízí nativní podporu přehrávání audia v podobě elementu audio. Přehrávání zvukových efektů v našich HTML5 hrách tedy nevyžaduje proprietární přehrávač Flashe. Použitím elementu audio se zabývá kapitola 6, Hudba, zvukové efekty a element audio. Geolokace Díky geolokaci může webová stránka určit zeměpisnou šířku a délku počítače uživatele. Ještě před několika lety, když většina uživatelů přistupovala k Internetu z běžných stolních počítačů, se tato funkce nezdála natolik důležitá. Poloha uživatele s přesností na ulici není v takovém případě nijak zvlášť užitečná. Přibližnou lokalitu uživatele je možné získat analýzou jeho adresy IP. Dnes se však k Internetu stále více uživatelů připojuje pomocí svých chytrých telefonů. Moderní webové prohlížeče založené na jádře Webkit se dnes ukrývají téměř v každé kapse. Otevírá se tak prostor pro mobilní aplikace a hry, které využívají aktuální polohu uživatele zjištěnou pomocí geolokace. Zjišťování polohy našlo uplatnění již v několika sociálních sítích, jako je foursquare ( a Gowalla ( Jejich úspěch dal vzniknout novému trendu v oblasti určování polohy pomocí chytrého telefonu. 20

22 Nové funkce HTML5 WebGL WebGL rozšiřuje element plátna HTML5 o aplikační rozhraní umožňující zobrazování 3D grafiky ve webovém prohlížeči. Toto aplikační rozhraní vychází ze standardu OpenGL ES 2.0 a jedná se o vynikající řešení pro 3D hry v HTML5. Bohužel ne všechny webové prohlížeče, v době psaní této knihy, WebGL podporují. V tuto chvíli se jeho podporou pyšní Mozilla Firefox 4, Google Chrome a noční sestavení prohlížeče WebKit. Postup vývoje her, které využívají WebGL, se značně liší od vývoje běžných her v HTML5. Hry založené na WebGL musí pracovat s 3D modely a používat rozhraní podobné OpenGL. Z toho důvodu se jimi v této knize nebudeme zabývat. Následující obrázek ukazuje aplikaci Google Body ( com), která s pomocí rozhraní WebGL umožňuje třírozměrné zobrazení lidského těla v závislosti na parametrech zadaných uživatelem. TIP Na webu LearningWebGL ( najdete několik návodů, které vám pomohou se začátky WebGL. Jedná se o dobrý odrazový můstek, chcete-li se o této technologii dozvědět více. 21

23 Kapitola 1 Seznámení s hrami v HTML5 WebSocket Rozhraní WebSocket, které je součástí specifikace HTML5, umožňuje webové stránce navázat spojení se serverem. Jedná se o spojení mezi prohlížečem a serverem řízené událostmi. To znamená, že se klient nemusí v pravidelných intervalech neustále dotazovat serveru na nová data. Server zašle prohlížeči aktualizace hned, jak jsou k dispozici. Hlavní výhodou tohoto řešení je, že spolu mohou jednotliví hráči vzájemně komunikovat téměř v reálném čase. Když hráč provede nějakou akci a serveru se odešlou data, upozorní server na tuto událost všechny připojené prohlížeče. Ty tak mohou reagovat na to, co jeden z hráčů právě udělal. Díky tomuto rozhraní se otevírá prostor pro tvorbu multiplayer her v HTML5. UPOZORNĚNÍ Kvůli chybě v zabezpečení je nyní rozhraní WebSocket v prohlížečích Mozilla Firefox a Opera dočasně zablokované. Také prohlížeče Safari a Google Chrome mohou jeho podporu přerušit, než se bezpečnostní trhlinu podaří vyřešit. Více se o tomto problému dozvíte na adrese / Lokální úložiště HTML5 nabízí perzistentní datové úložiště, které mohou webové stránky využívat. Lokální úložiště umožňuje trvale ukládat páry klíčů a hodnot. Data se zachovají i po ukončení prohlížeče a navíc není přístup k nim omezený pouze na danou stránku. Mohou k nim přistupovat všechny stránky v rámci dané domény. S použitím lokálního úložiště tak lze snadno ukládat stavové informace o hře, jako jsou např. postup hráče nebo dosažené výsledky, lokálně, přímo v prohlížeči. HTML5 nabízí také databázi Web SQL. Jedná se o relační databázi na straně klienta, kterou v tuto chvíli podporují prohlížeče Safari, Google Chrome a Opera. S použitím této relační databáze je přirozeně možné ukládat nejen páry klíčů a hodnot, ale i mnohem složitější relační struktury, které lze následně získávat pomocí dotazů SQL. Lokální úložiště i databáze Web SQL přijdou při vývoji her vhod pro lokální ukládání stavových informací o hře. Kromě lokálního úložiště nabízí moderní webové prohlížeče i jiné metody lokálního ukládání dat. Jedná se o již zmíněnou databázi Web SQL nebo také IndexedDB. Tyto databáze podporují i složitější dotazy na uložená data, obsahující podmínky, a jsou tedy mnohem vhodnější pro složitější datové struktury. Více informací o databázích Web SQL a IndexedDB najdete na webu Mozilly, na adrese 22

24 Nové funkce CSS3 Offline aplikace Procházení webovými stránkami běžně vyžaduje připojení k Internetu, s výjimkou webových stránek uložených v mezipaměti prohlížeče, které v ní zpravidla příliš dlouho nezůstanou. HTML5 zavádí tzv. cache manifest neboli seznam souborů, které se mají uložit pro pozdější offline přístup. V tomto seznamu lze uvést veškeré soubory, ze kterých hra sestává, jako je její grafika, soubory s kódem v JavaScriptu a soubory HTML. Naše hry v HTML5 můžeme tímto způsobem proměnit v offline hry pro stolní počítače i mobilní zařízení. Hráči je mohou hrát dokonce i v letadle. Následující obrázek ze hry Pie Guy ( ukazuje hru v HTML5 běžící na iphonu bez připojení k Internetu. Všimněte si symbolu letadla v levé horní části obrazovky, která indikuje offline stav: Nové funkce CSS3 Zatímco jazyk HTML stanoví obsah, kaskádové styly definují jeho formu, tedy jak bude obsah dokumentu HTML vypadat. Vývoj her v HTML5 se bez kaskádových stylů obejde jen stěží, obzvláště pak u her, které intenzivně využívají DOM. Hrám zobrazujícím obsah v elementu plátna může k tvorbě a stylování obsahu stačit jen JavaScript. Avšak hry, které jsou založené na manipulaci s elementy dokumentu HTML, budou kaskádové styly zcela jistě potřebovat. Podívejme se tedy na novinky v CSS3 a jejich uplatnění při vývoji her. Místo vykreslování obsahu na plátně je, s použitím nových funkcí CSS3, možné animovat přímo elementy dokumentu HTML. Tímto způsobem lze snadno vytvářet i komplikovanější hry pro webové prohlížeče. 23

25 Kapitola 1 Seznámení s hrami v HTML5 Přechody Běžně se styl elementu změní hned poté, co dojde k aplikaci stylu nového. Přechody CSS3 umožňují plynule přecházet mezi změnami stylu cílových elementů. Řekněme, že máme modrý obdélník a chceme, aby se jeho barva změnila na červenou, najede-li na něj uživatel kurzorem myši. Kód by mohl vypadat takto: HTML: <a href="#" class="box"></a> CSS: a.box { display:block; width: 100px; height: 100px; background: #00f; /* modrá */ border: 1px solid #000; } a.box:hover { background: #f00; /* červená */ } Obdélník se přebarví na červeno hned po přejetí kurzorem myši. S použitím přechodů CSS3 lze tuto záměnu stylů provést v zadané době trvání a s použitím specifikované vyhlazovací funkce: a.box { -webkit-transition: all 5s linear; } Následující obrázek ukazuje popisovaný efekt s aplikovaným přechodem: 24

26 Nové funkce CSS3 UPOZORNĚNÍ Vzhledem k tomu, že je specifikace CSS3 stále ve fázi návrhu a ještě není finální, může se její implementace v jednotlivých webových prohlížečích od specifikace W3C mírně odlišovat. Z toho důvodu vývojáři prohlížečů často opatřují své implementace funkcí CSS3 předponou, aby se zabránilo případným konfliktům. Prohlížeče Safari a Google Chrome používají předponu -webkit-, Opera -o-, Firefox -moz- a Internet Explorer zase -ms-. V tuto chvíli je proto deklarace vlastností CSS3, jako je např. stín elementu, poměrně nepřehledná, protože vyžaduje vícenásobné zadání téže vlastnosti pro různé prohlížeče. Poté, co se specifikace dané vlastnosti dokončí, dá se u ní očekávat eliminace těchto předpon. Ve většině příkladů v této knize najdete pouze prefix -webkit-, aby se zabránilo nepřehlednosti kódu. Důležitější je pochopit princip, než pořád dokola číst deklarace stejných vlastností pro různé prohlížeče. Transformace Pomocí transformací CSS3 je možné měnit velikost elementů, otáčet s nimi a měnit jejich pozici. Transformace CSS3 se dělí na 2D a 3D. Ke změně pozice elementu slouží funkce translate: -webkit-transform: translate(x,y); Změnu velikosti elementu umožňuje zase funkce scale: -webkit-transform: scale(1.1); Elementy je možné současně otáčet i měnit jejich velikost, případně kombinovat jiné transformace: a.box { -webkit-transition: all 0.5s linear; -webkit-transform: translate(100px,50px); } a.box:hover { -webkit-transform: translate(100px,50px) scale(1.1) rotate(30deg); } Následující obrázek ukazuje, jak bude výsledná transformace po přejetí myší nad elementem vypadat: 25