Programujeme hry v HTML5

Makzan
Programujeme hry v HTML5
Computer Press
Brno
2012
K2023.indd 1
14.5.2012 10:25:25
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 2011.
First published in the English language under the title ’HTML5 Games Development by Example:
Beginner´s Guide’
Objednávky knih:
http://knihy.cpress.cz
www.albatrosmedia.cz
eshop@albatrosmedia.cz
bezplatná linka 800 555 513
ISBN 978-80-251-3731-4
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 16 194.
© 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í
K2023.indd 2
14.5.2012 10:26:05
Obsah
ÚVOD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
Co v této knize najdete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Co budete v této knize potřebovat . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Pro koho je tato kniha určena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Použité konvence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Zpětná vazba od čtenářů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Zdrojové kódy ke knize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Errata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
KAPITOLA 1
SEZNÁMENÍ S HRAMI V HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . .19
Nové funkce HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Plátno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
Geolokace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
WebGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21
WebSocket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
Lokální úložiště . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
Offline aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23
Nové funkce CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Přechody . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24
K2023.indd 3
14.5.2012 10:26:05
Obsah
Transformace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
Animace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26
Nové funkce HTML5 a CSS3 detailněji . . . . . . . . . . . . . . . . . . . . . . . 27
Výhody her v HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Žádné zásuvné moduly třetích stran. . . . . . . . . . . . . . . . . . . . . . . . .27
Podpora iOS zařízení bez dodatečných zásuvných modulů. . . . . . .28
Překročení hranice klasických her v prohlížeči . . . . . . . . . . . . . . . . .28
Vývoj her v HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Jaké hry v HTML5 hrají ostatní . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Pexeso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Sinuous. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
Nové pojetí hry Asteroids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Quake 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
RumpeTroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Scrabb.ly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Aves Engine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Další hry v HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Co v této knize vytvoříme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
KAPITOLA 2
ZAČÍNÁME S VÝVOJEM HER A DOM . . . . . . . . . . . . . . . . . . . . . . .37
Příprava vývojového prostředí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Příprava dokumentů HTML pro hru . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Doctype pro HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39
Záhlaví a zápatí. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Kam umístit kód v JavaScriptu. . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Provedení kódu po načtení stránky . . . . . . . . . . . . . . . . . . . . . . . . .41
Vytvoření elementů pro hru Ping Pong . . . . . . . . . . . . . . . . . . . . . . . 41
Seznámení s jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43
Seznámení se selektory jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
Seznámení s metodou css knihovny jQuery. . . . . . . . . . . . . . . . . . .45
Výhody jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45
K2023.indd 4
14.5.2012 10:26:05
Obsah
Práce s elementy hry pomocí jQuery . . . . . . . . . . . . . . . . . . . . . . . .46
Absolutní pozicování a jeho specifika. . . . . . . . . . . . . . . . . . . . . . . .47
Načtení vstupu z klávesnice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Klávesnice a kódy kláves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50
Lépe čitelné konstanty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51
Převod řetězců na čísla pomocí funkce parseInt . . . . . . . . . . . . . . .52
Provádění kódu v JavaScriptu z konzole . . . . . . . . . . . . . . . . . . . . .53
Sledování konzole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53
Podpora vícenásobného vstupu z klávesnice . . . . . . . . . . . . . . . . . . 54
Lepší deklarace globálních proměnných . . . . . . . . . . . . . . . . . . . . .56
Vytvoření časovače pomocí funkce setInterval . . . . . . . . . . . . . . . .57
Herní smyčka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
Pohyb elementu s použitím časovače . . . . . . . . . . . . . . . . . . . . . . . . 58
Základy detekce kolizí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Dynamické zobrazení textu v HTML . . . . . . . . . . . . . . . . . . . . . . . . . 64
Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
KAPITOLA 3
PEXESO A CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67
Pohyb elementů s použitím přechodů CSS3 . . . . . . . . . . . . . . . . . . . 67
2D transformační funkce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71
3D transformační funkce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71
Úprava stylů s použitím přechodů CSS3 . . . . . . . . . . . . . . . . . . . . . . 72
Efekt otočení karty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Přepínání třídy pomocí metody
toggleClass knihovny jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76
Nastavení viditelnosti překrývajících
se prvků pomocí vlastnosti z-index . . . . . . . . . . . . . . . . . . . . . . . .76
Vlastnost perspective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78
Vlastnost backface-visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Vytváříme pexeso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Stažení obrázků hracích karet . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80
Příprava prostředí hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81
Klonování elementů pomocí jQuery . . . . . . . . . . . . . . . . . . . . . . . . .86
K2023.indd 5
14.5.2012 10:26:05
Obsah
Výběr prvního potomka elementu pomocí jQuery . . . . . . . . . . . . . .86
Vertikální zarovnání elementu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87
Použití sprite sheetu jako obrázku na pozadí . . . . . . . . . . . . . . . . . .87
Přidání logiky hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Provedení kódu po dokončení přechodu . . . . . . . . . . . . . . . . . . . . .92
Odložené provedení kódu při obracení karet . . . . . . . . . . . . . . . . . .92
Náhodné uspořádání prvků pole . . . . . . . . . . . . . . . . . . . . . . . . . . .92
Uložení dat do elementu pomocí vlastního datového atributu . . . . .93
Přístup k vlastním datovým atributům pomocí jQuery . . . . . . . . . . .94
Další karetní hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96
Přidání písem do hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Další služby pro webová písma . . . . . . . . . . . . . . . . . . . . . . . . . . . .98
Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
KAPITOLA 4
HRA UNTANGLE A PLÁTNO. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
Seznámení s elementem plátna . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Kresba kruhů na plátno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Alternativní obsah pro případ, že prohlížeč plátno nepodporuje . .104
Kresba kruhů a čar s použitím metody arc . . . . . . . . . . . . . . . . . . .105
Převod stupňů na radiány. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Kresba cest na plátně. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109
Vytvoření cesty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109
Uzavření cesty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110
Vložení kódu pro kresbu kruhů do funkce . . . . . . . . . . . . . . . . . . .111
Generování náhodných čísel v JavaScriptu . . . . . . . . . . . . . . . . . .112
Uložení pozice kruhu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113
Základní definice tříd . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
Kresba čar na plátno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Seznámení s aplikačním rozhraním pro kresbu čar . . . . . . . . . . . .117
Interakce s nakreslenými objekty pomocí myši . . . . . . . . . . . . . . . . 118
Určení polohy myši v rámci plátna . . . . . . . . . . . . . . . . . . . . . . . . .122
Obsluha událostí myši týkajících se kruhů . . . . . . . . . . . . . . . . . . .122
Herní smyčka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124
Vymazání obsahu plátna. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124
K2023.indd 6
14.5.2012 10:26:06
Obsah
Detekce průsečíků čar na plátně . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Určení toho, zda se dvě přímky protínají . . . . . . . . . . . . . . . . . . . .128
Vytvoření hry Untangle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Definice úrovní hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .134
Určení postupu mezi úrovněmi . . . . . . . . . . . . . . . . . . . . . . . . . . . .135
Zobrazení aktuální úrovně a ukazatel postupu . . . . . . . . . . . . . . . .135
Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
KAPITOLA 5
VYLEPŠENÁ HRA UNTANGLE A PLÁTNO. . . . . . . . . . . . . . . . . . .137
Výplň tvarů gradientní barvou . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Nastavení přechodových bodů gradientu. . . . . . . . . . . . . . . . . . . .139
Radiální gradient. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140
Zobrazení textu na plátně . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Použití vlastního písma na plátně . . . . . . . . . . . . . . . . . . . . . . . . . .146
Zobrazení obrázků na plátně . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Použití metody drawImage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .150
Dekorace hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152
Animace sprite sheetu na plátně . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Vytvoření více vrstev na plátně . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Kombinace kaskádových stylů a kreslení na plátno . . . . . . . . . . . .165
Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
KAPITOLA 6
HUDBA, ZVUKOVÉ EFEKTY A ELEMENT AUDIO. . . . . . . . . . . . .167
Přidání zvukového efektu ke spouštěcímu tlačítku . . . . . . . . . . . . . 168
Vytvoření elementu audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .171
Přehrání zvuku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172
Pozastavení přehrávání . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173
Nastavení hlasitosti zvuku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173
Událost hover knihovny jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . .173
Převedení audia do formátu OGG . . . . . . . . . . . . . . . . . . . . . . . . .174
Podpora ostatních webových prohlížečů . . . . . . . . . . . . . . . . . . . .175
K2023.indd 7
14.5.2012 10:26:06
Obsah
Vytvoření hudební hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Scény ve hrách HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179
Vizualizace přehrávané hudby . . . . . . . . . . . . . . . . . . . . . . . . . . . .179
Výběr správné skladby pro hudební hru . . . . . . . . . . . . . . . . . . . . .185
Uložení a načtení údajů o skladbě . . . . . . . . . . . . . . . . . . . . . . . . .185
Určení doby běhu hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186
Vytvoření hudebních bodů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .187
Přesunutí hudebních bodů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .187
Propojení spouštěcího tlačítka s hudební hrou . . . . . . . . . . . . . . . . 189
Vytvoření efektu vysunutí herní scény pomocí CSS3 . . . . . . . . . . .190
Ovládání hry klávesnicí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Zobrazení indikátoru. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193
Vyhodnocení zásahů bodu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194
Odstranění prvku pole se zadaným indexem . . . . . . . . . . . . . . . . .195
Obohacení hry o další funkce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Nastavení hlasitosti melodie na základě úspěšnosti . . . . . . . . . . .196
Odstranění bodů ze hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199
Uložení úspěšnosti za posledních pět pokusů . . . . . . . . . . . . . . . .199
Uložení dat úrovně . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199
Zpracování události dokončení přehrávání . . . . . . . . . . . . . . . . . . . 202
Obsluha událostí elementu audio . . . . . . . . . . . . . . . . . . . . . . . . . .202
Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
KAPITOLA 7
LOKÁLNÍ ÚLOŽIŠTĚ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205
Lokální úložiště HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Vytvoření závěrečného dialogu . . . . . . . . . . . . . . . . . . . . . . . . . . . .206
Uložení výsledků v prohlížeči . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210
Uložení a načtení dat z lokálního úložiště. . . . . . . . . . . . . . . . . . . .212
Datové typy a lokální úložiště . . . . . . . . . . . . . . . . . . . . . . . . . . . . .212
Lokální úložiště jako asociativní pole . . . . . . . . . . . . . . . . . . . . . . .213
Ukládání objektů do lokálního úložiště. . . . . . . . . . . . . . . . . . . . . . . 213
Určení aktuálního data a času v JavaScriptu . . . . . . . . . . . . . . . . .217
Převedení objektu na řetězec JSON. . . . . . . . . . . . . . . . . . . . . . . .218
K2023.indd 8
14.5.2012 10:26:06
Obsah
Načtení objektu z řetězce JSON. . . . . . . . . . . . . . . . . . . . . . . . . . .218
Prověření obsahu lokálního úložiště v konzole prohlížeče . . . . . . .219
Upozornění uživatele na překonání rekordu. . . . . . . . . . . . . . . . . . . 220
Uložení celkového postupu ve hře . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Uložení postupu ve hře. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .224
Odstranění rekordu z lokálního úložiště . . . . . . . . . . . . . . . . . . . . .226
Klonování pole v JavaScriptu . . . . . . . . . . . . . . . . . . . . . . . . . . . . .227
Obnovení postupu ve hře . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .227
Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
KAPITOLA 8
HRA PRO VÍCE HRÁČŮ A WEBSOCKET. . . . . . . . . . . . . . . . . . . .233
Ukázka existující webové aplikace využívající rozhraní WebSocket 234
Instalace serveru WebSocket. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Instalace serveru node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .236
Vytvoření serveru WebSocket vysílajícího počet
připojených klientů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .237
Inicializace serveru WebSocket . . . . . . . . . . . . . . . . . . . . . . . . . . .238
Naslouchání spojením na straně serveru . . . . . . . . . . . . . . . . . . . .239
Určení počtu klientů připojených k serveru . . . . . . . . . . . . . . . . . .239
Odeslání zprávy všem připojeným klientům . . . . . . . . . . . . . . . . . .239
Vytvoření klienta pro připojení k serveru WebSocket . . . . . . . . . . .240
Navázání spojení protokolem WebSocket . . . . . . . . . . . . . . . . . . .242
Klientské události rozhraní WebSocket . . . . . . . . . . . . . . . . . . . . .242
Vytvoření chatu s použitím rozhraní WebSocket . . . . . . . . . . . . . . . 242
Odeslání zprávy serveru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .242
Odeslání zprávy od klienta serveru. . . . . . . . . . . . . . . . . . . . . . . . .244
Příjem zpráv na straně serveru . . . . . . . . . . . . . . . . . . . . . . . . . . . .244
Přeposlání zpráv obdržených serverem . . . . . . . . . . . . . . . . . . . . . . 245
Srovnání rozhraní WebSocket s dotazováním . . . . . . . . . . . . . . . .246
Vytvoření sdíleného náčrtkového bloku s použitím plátna
a rozhraní WebSocket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Vytvoření lokálního náčrtkového bloku . . . . . . . . . . . . . . . . . . . . . .248
Odesláním kresby všem připojeným klientům . . . . . . . . . . . . . . . .251
K2023.indd 9
14.5.2012 10:26:06
Obsah
Vytvoření datového objektu pro komunikaci mezi klientem
a serverem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .255
Převedení informací o nakreslených čarách
do formátu JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .255
Nakreslení čar obdržených od ostatních klientů. . . . . . . . . . . . . . .256
Vytvoření hry Uhodni obrázek pro více hráčů . . . . . . . . . . . . . . . . . 256
Řízení hry pro více hráčů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .262
Výčet klientů připojených k serveru . . . . . . . . . . . . . . . . . . . . . . . .263
Odeslání zprávy klientovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .264
Vylepšení hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .264
Dekorace hry pomocí kaskádových stylů . . . . . . . . . . . . . . . . . . . . 265
Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
KAPITOLA 9
HRA S FYZIKÁLNÍM ENGINEM BOX2D A PLÁTNEM . . . . . . . . . .269
Instalace knihovny Box2D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Vytvoření nového světa s použitím třídy b2World. . . . . . . . . . . . . .273
Nastavení ohraničující oblasti s použitím třídy b2AABB . . . . . . . . .273
Nastavení gravitace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .273
Zakázání spánku objektů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .274
Vytvoření pevné země ve světě . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Definice tvaru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .275
Vytvoření objektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .275
Nakreslení světa na plátno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Vytvoření dynamického obdélníku ve světě . . . . . . . . . . . . . . . . . . . 279
Nastavení odrazivosti objektu. . . . . . . . . . . . . . . . . . . . . . . . . . . . .280
Nastavení času ve světě . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Přidání kol k obdélníku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Vytvoření auta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Spojení dvou objektů rotačním spojem . . . . . . . . . . . . . . . . . . . . .285
Ovládání auta klávesnicí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Aplikace sil na auto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286
Rozdíly mezi metodami ApplyForce a ApplyImpulse . . . . . . . . . . .287
Přidání nájezdových ramp do naší hry . . . . . . . . . . . . . . . . . . . . . .287
K2023.indd 10
14.5.2012 10:26:06
Obsah
Ověření kolizí ve světě . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Získání seznamu kolizí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .290
Restartování hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Přidání úrovní do hry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Nahrazení obrysů grafikou . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Použití vlastnosti userData . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .300
Zobrazení grafiky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301
Rotace a translace obrázku na plátně . . . . . . . . . . . . . . . . . . . . . .301
Finální úpravy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Přidání omezeného množství paliva . . . . . . . . . . . . . . . . . . . . . . . .308
Zobrazení zbývajícího množství paliva . . . . . . . . . . . . . . . . . . . . . .308
Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Herní enginy HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310
Animace a textury hry. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310
Zvukové efekty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310
PŘÍLOHA
KVÍZ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .311
REJSTŘÍK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .313
K2023.indd 11
7.6.2012 9:25:13
K2023.indd 12
14.5.2012 10:26:06
Ú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 použ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.
K2023.indd 13
14.5.2012 10:26:06
Ú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:
// uložení času spuštění
var date = new Date();
14
K2023.indd 14
14.5.2012 10:26:06
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
K2023.indd 15
14.5.2012 10:26:07
Ú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.
V knize najdete i další doprovodné informace, včetně následujících:
Kvíz
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 4
602 00 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
K2023.indd 16
31.5.2012 13:26:39
Zdrojové kódy ke knize
Zdrojové kódy ke knize
Z adresy http://knihy.cpress.cz/K2023 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 http://knihy.cpress.cz/K2023 po klepnutí
na odkaz Soubory ke stažení.
17
K2023.indd 17
14.5.2012 10:26:08
K2023.indd 18
14.5.2012 10:26:08
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.


K2023.indd 19
14.5.2012 10:26:08
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
(http://foursquare.com) a Gowalla (http://gowalla.com). Jejich úspěch dal vzniknout
novému trendu v oblasti určování polohy pomocí chytrého telefonu.
20
K2023.indd 20
14.5.2012 10:26:08
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 (http://bodybrowser.googlelabs.
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 (http://learnwebgl.com) 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
K2023.indd 21
14.5.2012 10:26:09
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 http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/.
/
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 http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/.
22
K2023.indd 22
14.5.2012 10:26:09
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 (http://mrgan.com/pieguy) 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
K2023.indd 23
14.5.2012 10:26:10
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
K2023.indd 24
14.5.2012 10:26:10
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
K2023.indd 25
14.5.2012 10:26:11