Obsah. SEZNÁMENÍ S HRAMI V HTML Nové funkce HTML Nové funkce CSS

Transkript

1 Ú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

2 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

3 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

4 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

5 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čů

6 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

7 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

8 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

9 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