Makzan Programujeme hry v HTML5 Computer Press Brno 2012
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í
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
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
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
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
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
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
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
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
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
Ú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.
Ú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();
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
Ú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 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
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
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.
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
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
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
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
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
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
Kapitola 1 Seznámení s hrami v HTML5 Trojrozměrné transformace vše rozšiřují o další dimenzi a jsou v tuto chvíli k dispozici pouze v prohlížečích Safari a Mobile Safari. Následující obrázek z webu WebKit.org ukazuje 3D efekt otočení: Animace Přechody CSS3 jsou specifickým typem animace. Deklarují totiž v podstatě postupnou animaci mezi dvěma styly. Animace CSS3 jdou ještě o krok dále a umožňují definovat klíčové snímky animace. Každý klíčový snímek definuje hodnoty několika vlastností, které se v daný okamžik mají změnit. Jedná se v podstatě o množinu přechodů postupně aplikovaných na cílový element. Na webu AT-AT Walker (http://anthonycalzadilla.com/css3-atat/index-bones.html) najdete velmi hezkou ukázku toho, jak vytvořit jednoduchou animaci využívající klíčové snímky, transformace a přechody CSS3. 26
Nové funkce HTML5 a CSS3 detailněji Nové funkce HTML5 a CSS3 detailněji Web HTML5Rocks (http://html5rocks.com) od Googlu nabízí dobrý rychlokurz, který vás seznámí s novými elementy HTML5 a vlastnostmi CSS3. Ani společnost Apple nezůstává pozadu a na své domovské stránce (http://apple.com/ html5) jasně ukazuje, čeho se dá s pomocí HTML5 dosáhnout. Na webu CSS3 Info (http://www.css3.info) najdete blog s nejnovějšími informacemi o CSS3. Jedná se o ideální místo, kde hledat nejnovější specifikace CSS3, informace o kompatibilitě a praktické ukázky použití CSS3. Výhody her v HTML5 Seznámili jsme se s několika klíčovými funkcemi, které HTML5 a CSS3 přináší a s jejichž pomocí je možné vytvářet v HTML5 hry pro webové prohlížeče. Proč se ale vůbec o něco takového pokoušet? Jaké výhody mají HTML5 hry? Žádné zásuvné moduly třetích stran Díky tomu, že moderní prohlížeče nativně podporují všechny uvedených funkce, nemusí si uživatelé instalovat žádné zásuvné moduly třetích stran, aby si mohli hru zahrát. Tyto zásuvné moduly nejsou v žádném případě standardem, jedná se o proprietární řešení vyžadující instalaci dodatečného softwaru, jehož instalace ani nemusí být v daných podmínkách možná. 27
Kapitola 1 Seznámení s hrami v HTML5 Podpora ios zařízení bez dodatečných zásuvných modulů Miliony zařízení s operačním systémem Apple ios po celém světě nepodporují zásuvné moduly třetích stran, jako je např. přehrávač Flashe. Ať už jsou důvody, které vedou Apple k blokování přehrávače Flashe v mobilní verzi jejich prohlížeče Safari jakékoliv, podpora HTML5 a s ním spojených webových standardů je na výjimečné úrovni. Tuto skupinu uživatelů lze tedy snadno oslovit hrami vyvinutými v HTML5, které jsou optimalizované pro mobilní zařízení. Překročení hranice klasických her v prohlížeči Vývoj tradičních her bývá omezen na určitou obdélníkovou oblast televizi v případě herní konzole, část okna prohlížeče v případě her ve Flashi. S trochou kreativity se při vývoji her již nemusíme nadále omezovat na určitou obdélníkovou oblast. Využít lze všechny elementy stránky či hned několik oken prohlížeče. Dokonce i adresní řádek prohlížeče může být předmětem hry (http://probablyinteractive.com/url-hunter). Může to znít podivně, ale to nejspíš jen proto, že se o něco takového pokusilo zatím jen několik málo webů. Na webu Photojojo (http://photojojo.com/store/awesomeness/cell-phone-lenses), který se zabývá prodejem příslušenství k fotoaparátům a fotomobilům, najdete povedenou funkci v podobě páky s názvem Do not pull. Pokud na ni klepnete, objeví se v horní části stránky oranžová ruka, která webovou stránku uchopí a posune ji směrem vzhůru. Nejedná se o žádnou hru, ale dobře to demonstruje, jak snadno se dá vymanit z uvažování v obdélníku. 28
Jaké hry v HTML5 hrají ostatní Další hezkou ukázku najdete na webu Twitch (http://reas.com/twitch/). Jedná se o kolekci miniher, ve kterých má hráč za úkol dopravit kuličku ze startovní pozice až na konec. Zajímavé na tom je, že každá hra běží v samostatném okně prohlížeče. Když kulička dosáhne cíle v rámci daného okna, přesune se do okna nového, kde pokračuje na své cestě. Následující obrázek ukazuje celé herní pole hry Twitch. Vývoj her v HTML5 Díky novým funkcím HTML5 a CSS3 je nyní možné vytvořit celou hru přímo v prohlížeči. Lze manipulovat s každým elementem v modelu DOM dokumentu a animovat ho s použitím CSS3. Plátno zase umožňuje dynamicky kreslit objekty a pracovat s nimi. Element audio se postará o hudbu přehrávanou na pozadí a zvukové efekty. Lokální úložiště poslouží k uložení herních dat a rozhraní WebSocket zajistí komunikaci s více hráči v reálném čase. Většina moderních prohlížečů všechny tyto funkce již podporuje. Je tedy na čase pustit se do vývoje her v HTML5. Jaké hry v HTML5 hrají ostatní Pro začátek jistě není od věci prostudovat aktuální stav v oblasti her v HTML5 a podívat se na jejich aktuální nabídku. Pexeso Hra s názvem Match (http://10k.aneventapart.com/uploads/300/) je pěknou ukázkou klasického pexesa, využívajícího animace CSS3 a další dostupné vizuální efekty. Hra začíná po stisknutí 3D tlačítka vytvořeného s použitím CSS. Jednotlivé karty se otáčí tam a zpět s použitím 3D rotace. Čelní strany jednotlivých karet se načítají dynamicky z online galerie. 29
Kapitola 1 Seznámení s hrami v HTML5 Sinuous Hra Sinuous (http://10k.aneventapart.com/uploads/83/), výherce soutěže 10K Apart, je jasným dokladem toho, že i jednoduchá a dobře naprogramovaná hra, může sklidit velký úspěch. Hráč ovládá pomocí myši velké tečky ve vesmíru ve snaze zabránit jejich kolizi s poletujícími kometami. Zní to velmi jednoduše, snadno se však na této hře můžete stát doslova závislými a budete ji chtít hrát stále znovu a znovu. Hra využívá element plátna a mohou ji hrát i uživatelé mobilních zařízení, jako jsou iphony, ipady nebo zařízení s operačním systémem Android. 30
Jaké hry v HTML5 hrají ostatní Nové pojetí hry Asteroids Erik, webový návrhář původem ze Švédska, vytvořil zajímavý bookmarklet. Jedná se o hru podobající se známé hře Asteroids, kterou si můžete zahrát na jakékoliv webové stránce. Ano, čtete správně, na jakékoliv stránce. Jedná se o velmi netradiční způsob, jak pracovat s webovými stránkami. Na stránce, kterou čtete, se objeví malá kosmická loď, s níž můžete pomocí směrových šipek létat a mezerníkem střílet. Střelbou lze zničit elementy HTML stránky. Cílem hry je zničit vše, co vás napadne. Jedná se o další příklad toho, jak vybočit ze stereotypu všedních her a nenechat se při vývoji her v HTML5 svazovat žádnými zaběhnutými konvencemi. Hru si můžete stáhnout na adrese http://erkie.github.com/. Na následujícím obrázku můžete vidět vesmírnou loď likvidující obsah webové stránky: Quake 2 Google demonstruje možnosti rozhraní WebGL na mutaci známé first person střílečky s názvem Quake 2. Hráči se mohou pohybovat v prostoru pomocí kláves W, S, A a D a střílet nepřátele pomocí myši. Hráči mohou dokonce hrát i spolu navzájem díky rozhraní WebSocket. Google uvádí, že tato HTML5 verze oblíbené akční hry dosahuje při vykreslování rychlosti až 60 snímků za sekundu. 31
Kapitola 1 Seznámení s hrami v HTML5 Webovou verzi hry Quake 2 najdete na webu Google Code, na adrese http://code.google. com/p/quake2-gwt-port/. RumpeTroll RumpeTroll (http://rumpetroll.com/) představuje experiment komunity okolo HTML5, ke kterému se mohou uživatelé připojovat pomocí rozhraní WebSocket. Svým postavám mohou hráči přiřazovat názvy a pohybovat s nimi pomocí myši. Je možné také chatovat s ostatními hráči a v reálném čase sledovat, co právě dělají. Scrabb.ly Scrabb.ly (http://scrabb.ly) je hra pro více hráčů vycházející ze známého Scrabblu, která získala cenu popularity v soutěži Node.js Knockout. Spojení mezi uživateli zajišťuje rozhraní WebSocket. Tato online verze populární deskové hry je založená na manipulaci s elementy stránky pomocí JavaScriptu. 32
Jaké hry v HTML5 hrají ostatní UPOZORNĚNÍ Node.js (http://nodejs.org) je knihovna JavaScriptu řízená událostmi, pracující na straně serveru. Může sloužit jako server propojující klienty WebSocket. Aves Engine Aves Engine je framework pro vývoj her v HTML5 od společnosti Dextrose. Poskytuje nástroje (včetně editoru map) a aplikační rozhraní, která mohou vývojáři her použít při tvorbě vlastních izometrických her pro webové prohlížeče. Obrázek níže pocházející z oficiálního prezentačního videa ukazuje tvorbu takového izometrického světa. Engine se postará o systém souřadnic 2.5rozměrného izometrického světa, detekci kolizí a další základní funkce virtuálního světa. Funguje dokonce i na mobilních zařízeních, jako jsou ipady a iphony. Od svého uvedení se tento engine těší velkému zájmu, o čemž svědčí jeho zakoupení velkou společností Zynga Game Network Inc, zabývající se vývojem her. Videoukázka Aves Enginu je dostupná na následující adrese: http://tinyurl.com/dextrose-aves-engine-sneak 33
Kapitola 1 Seznámení s hrami v HTML5 Další hry v HTML5 Seznámili jsme se jen s několika vybranými hrami. Na následujících webech najdete aktuality ze světa her v HTML5, vytvořené ostatními: Web Canvas Demo (http://canvasdemo.com) je studnicí aplikací a her v HTML5, které využívají element plátna. Najdete zde i nejrůznější návody, týkají se po užití tohoto elementu. Chcete-li se seznámit s elementem plátna, jedná se o ideální místo, kde začít. Web HTML5 Games (http://html5games.com) shromažďuje hry v HTML5 a prezentuje je přehledně roztříděné do kategorií. Na začátku toku 2011 vyhlásil web Mozilla Labs soutěž o nejlepší hru v HTML5, které se zúčastnila řada skvělých her. Soutěž je v tuto chvíli již u konce, na adrese https://gaming.mozillalabs.com/games/ však najdete seznam všech přihlášených her. Na webu HTML5 Game Jam (http://www.html5gamejam.com/games) najdete rozsáhlou kolekci povedených her v HTML5 a také dalších užitečných zdrojů. Co v této knize vytvoříme V následujících kapitolách vytvoříme celkem šest her. První z nich bude hra Ping Pong, založená na manipulaci s elementy dokumentu HTML, kterou mohou hrát dva hráči na stejném počítači. Jako další vytvoříme pexeso využívající animace CSS3. Později použijeme element plátna k vytvoření logické hry podobající se hře Untangle. Poté nás čeká hudební hra využívající audio. Následně vytvoříme hru pro více hráčů vy užívající rozhraní WebSocket, ve které se hráči snaží uhodnout, co jiný z nich nakreslil. Poslední hra v pořadí využije knihovnu Box2D v JavaScriptu k vytvoření prototypu automobilové hry disponující základní fyzikou. Následující obrázek ukazuje pexeso, které vytvoříme v kapitole 3, Pexeso a CSS3. 34
Shrnutí Shrnutí V této kapitole jsme se dozvěděli mnoho fundamentálních informací o hrách v HTML5. Konkrétně jsme probrali následující: Nové funkce HTML5 a CSS3. V rychlosti jsme se seznámili s novými technikami, které v dalších kapitolách knihy použijeme pro vývoj her. Představili jsme si plátno, element audio, animace pomocí kaskádových stylů a mnohé další nové funkce, které nám přijdou vhod. Výhody her v HTML5. Řekli jsme si, proč vytvářet hry právě v HTML5. Chceme vytvářet hry, které jsou v souladu s webovými standardy, osloví i hráče s mobilními zařízeními a budou se vymykat ze zaběhlých tradic všedních a fádních her. Současné hry v HTML5, které hrají ostatní. Uvedli jsme si několik stávajících her v HTML5, vytvořených s použitím nejrůznějších technik, které použijeme i my. Ještě než se pustíme do vývoje vlastních her, můžeme ty, které již existují, vyzkoušet. Seznámili jsme se také s hrami, které v průběhu této knihy vytvoříme. Se základními znalostmi z oblasti her v HTML5 se v následující kapitole můžeme pustit do naší první hry, která využívá DOM a JavaScript. 35
KAPITOLA 2 Začínáme s vývojem her a DOM V předchozí kapitole jsme získali představu o tom, co nás v této knize čeká a co se dozvíme. Počínaje touto kapitolou zahájíme naše seznamování s problematikou na praktických příkladech. Ještě než se dostaneme k pokročilým tématům, jako jsou animace CSS3 nebo plátno HTML5, podíváme se na vývoj tradičních her využívajících DOM. Kapitolu zahájíme krátkým seznámením s nezbytnými základy. V této kapitole: Připravíme si nástroje potřebné pro vývoj her. Vytvoříme první hru Ping Pong. Seznámíme se se základy pozicování pomocí knihovny jquery. Dozvíme se, jak načítat vstup z klávesnice. Vytvoříme hru Ping Pong, včetně zobrazení skóre hráčů. Na následujícím obrázku můžete vidět hru, kterou v této kapitole vytvoříme. Jedná se o hru Ping Pong pro dva hráče, ovládanou oběma hráči prostřednictvím jedné klávesnice. Pojďme si tedy zahrát Ping Pong.
Kapitola 2 Začínáme s vývojem her a DOM Příprava vývojového prostředí Prostředí, které je zapotřebí pro vývoj her v HTML5, se příliš neliší od toho, které je třeba pro vývoj webových stránek. Budeme potřebovat moderní webový prohlížeč a dobrý textový editor. O tom, který textový editor je nejlepší, se již od nepaměti vedou vášnivé debaty. Každý textový editor má své silné stránky, a proto si vyberte ten, který vám vyhovuje nejlépe. Co se prohlížeče týká, budeme potřebovat prohlížeč podporující nejnovější specifikaci HTML5 a CSS3 a nabízející nástroje pro ladění kódu. Na Internetu najdete hned několik vyhovujících moderních webových prohlížečů. Jedná se o prohlížeče Apple Safari (http://apple.com/safari/), Google Chrome (http:// www.google.com/chrome/), Mozilla Firefox (http://mozilla.com/firefox/) a Opera (http:// opera.com). Uvedené prohlížeče podporují většinu funkcí, o kterých bude v průběhu této knihy řeč. K prezentaci většiny příkladů v této knize poslouží prohlížeč Google Chrome, protože je velmi rychlý při práci s přechody CSS3 a plátnem HTML5. Příprava dokumentů HTML pro hru Každý web, webová stránka a hra v HTML5 začíná u výchozího dokumentu HTML. Tento dokument obsahuje základní kód HTML. Vývoj naší první hry v HTML5 začneme právě u takového dokumentu, s názvem index.html. Jak na to instalace knihovny jquery Hru Ping Pong vytvoříme zcela od základů. To však neznamená, že bychom museli vše programovat sami. Pomůže nám knihovna v JavaScriptu s názvem jquery, se kterou se budeme setkávat napříč celou touto knihou. Díky ní se značně zjednoduší náš kód v JavaScriptu: 1. Vytvořte novou složku s názvem pingpong. 2. Vytvořte ve složce pingpong novou podsložku s názvem js. 3. Nyní si stáhneme knihovnu jquery. Zamiřte na adresu http://jquery.com/. 4. Zatrhněte pole Production a klepněte na tlačítko Download jquery. 5. Uložte soubor (aktuálně jquery-1.6.min.js) do složky js vytvořené v kroku 2. 6. Vytvořte nový dokument HTML s názvem index.html a uložte ho do adresáře pingpong. 7. Otevřete soubor index.html v textovém editoru a vložte do něj základní kostru dokumentu HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> 38
Příprava dokumentů HTML pro hru <title>ping Pong</title> </head> <body> <header> <h1>ping Pong</h1> </header> <footer> Příklad ukazující vytvoření hry Ping Pong. </footer> </body> </html> 8. Připojte k dokumentu knihovnu jquery přidáním následujícího řádku kódu na konec elementu body: <script src="js/jquery-1.6.min.js"></script> 9. Zbývá ověřit úspěšné načtení knihovny jquery. Za tímto účelem vložte následující kód na konec elementu body, za kód načítající knihovnu jquery: <script> $(function(){ alert("vítejte ve hře Ping Pong."); ); </script> 10. Uložte soubor index.html a otevřete jej ve webovém prohlížeči. Vysvětlení Právě jsme vytvořili jednoduchý dokument HTML5, připojili k němu knihovnu jquery a ověřili, že se korektně načetla. Doctype pro HTML5 Elementy DOCTYPE a meta se v HTML5 dočkaly zjednodušení. Takto vypadá deklarace DOCTYPE v HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> 39
Kapitola 2 Začínáme s vývojem her a DOM Poměrně složité, co říkáte? Naproti tomu deklarace DOCTYPE v HTML5 nemůže být jednodušší: <!DOCTYPE html> Deklarace dokonce neuvádí ani verzi HTML. To znamená, že HTML5 podporuje všechny předchozí verze jazyka HTML a budoucí verze jazyka HTML budou zase podporovat obsah v jazyce HTML5. Zjednodušení se týká také elementu meta. Deklarace znakové sady dokumentu HTML je nyní snazší: <meta charset=utf-8> Záhlaví a zápatí Jazyk HTML5 přichází s řadou nových funkcí a vylepšení. Jedním z nich jsou i změny v oblasti sémantiky. HTML5 zavádí nové elementy, které sémantiku posilují. Dva z nich jsme už použili header a footer. Element header uvozuje sekci nebo celou stránku. Z toho důvodu jsme vložili element h1 právě sem. Element footer, jak už jeho název napovídá, obsahuje zápatí sekce, resp. celé stránky. UPOZORNĚNÍ Sémantikou HTML se rozumí, že kód samotný poskytuje srozumitelné informace o obsahu namísto toho, aby jen definoval jeho vzhled. Kam umístit kód v JavaScriptu Kód v JavaScriptu jsme umístili těsně před koncovou značku elementu body, za veškerý obsah stránky. Umístění sem namísto do elementu head má svůj důvod. Za normálních okolností webové prohlížeče načítají a vykreslují obsah stránky ve směru shora dolů. Pokud se v elementu head dokumentu nachází nějaký kód v JavaScriptu, načte se obsah dokumentu až po provedení tohoto kódu. Vykreslování a načítání se pozastaví, narazí-li prohlížeč na kód v JavaScriptu uprostřed stránky. To je důvod, proč vkládat kód v JavaScriptu až na konec stránky, pokud to situace dovoluje. Stránka tak uživatelům nabídne rychlejší odezvu. V době vzniku této knihy byla aktuální verze jquery 1.4.4. Proto se předchozí ukázka kódu odkazuje na soubor jquery-1.6.min.js. V době, kdy tyto řádky budete číst, bude pravděpodobně aktuální jiná verze s odlišným označením, její použití by však mělo byt totožné, leda by došlo k nějaké zásadní změně v jquery, která by nebyla zpětně kompatibilní. 40
Vytvoření elementů pro hru Ping Pong Provedení kódu po načtení stránky Potřebujeme nějak zajistit, aby se náš kód v JavaScriptu provedl až poté, co bude stránka načtená. V opačném případě by se mohly vyskytnout chyby při pokusu o přístup k elementům stránky, které ještě nejsou načtené. Knihovna jquery na to pamatuje a umožňuje zadat kód tak, aby se provedl až v okamžiku, kdy je stránka připravená. Jak na to ukazuje následující kód: jquery(document).ready(function(){ // sem patří kód v JavaScriptu ); V ukázce jsme použili trochu odlišný kód: $(function(){ // sem patří kód v JavaScriptu ); Znak $ je zkratkou za jquery. Volání $(něco) lze tedy chápat stejně jako volání jquery(něco). $(obsluha události) je další zkratkou, konkrétně pro událost ready, a odpovídá následujícímu kódu: $(document).ready(obsluha události); který je identický s tímto: jquery(document).ready(obsluha události); Kvíz 1. Na jaké místo je nejlepší vložit kód v JavaScriptu? a. Před úvodní značku elementu head. b. Do elementu head. c. Ihned za úvodní značku elementu body. d. Těsně před koncovou značku elementu body. Vytvoření elementů pro hru Ping Pong Vše je připraveno a nic nám již nebrání pustit se do vývoje hry Ping Pong. Jak na to přidání základních elementů hry 1. Navážeme na náš předchozí příklad instalace jquery. Otevřete soubor index. html v textovém editoru. 41
Kapitola 2 Začínáme s vývojem her a DOM 42 2. Následně do elementu body vložte elementy div pro hru a hrací pole. V elementu reprezentujícím hrací pole se budou nacházet dva elementy pro pálky hráčů a jeden pro míček. Celý element hracího pole pak bude součástí elementu pro hru: <div id="game"> <div id="playground"> <div id="paddlea" class="paddle"></div> <div id="paddleb" class="paddle"></div> <div id="ball"></div> </div> </div> 3. Základní struktura elementů hry je na svém místě, zbývá pro vytvořené elementy připravit styly. Následující kód vložte do elementu head: <style> #playground{ background: #e0ffe0; width: 400px; height: 200px; position: relative; overflow: hidden; #ball { background: #fbb; position: absolute; width: 20px; height: 20px; left: 150px; top: 100px; border-radius: 10px;.paddle { background: #bbf; left: 50px; top: 70px; position: absolute; width: 30px; height: 70px; #paddleb { left: 320px; </style>
Vytvoření elementů pro hru Ping Pong 4. Stejně jako v předešlém případě umístíme náš kód v JavaScriptu za kód zajišťující připojení knihovny jquery. Kód vložíme do samostatného souboru, protože se postupně rozroste. Vytvořte proto ve složce js soubor html5games.pingpong.js. 5. Soubor pro kód v JavaScriptu jsme připravili, zbývá ho připojit k dokumentu HTML. Následující kód vložte do souboru index.html, těsně před koncovou značku elementu body: <script src="js/jquery-1.6.min.js"></script> <script src="js/html5games.pingpong.js"></script> 6. Logika hry se bude nacházet v souboru html5games.pingpong.js. Prozatím se zde bude nacházet pouze následující kód zajišťující nastavení počátečních pozic pálek hráčů: // kód nacházející se uvnitř $(function(){ se spustí poté, co // se dokončí načítání dokumentu a bude připravený DOM $(function(){ $("#paddleb").css("top", "20px"); $("#paddlea").css("top", "60px"); ); 7. Ověříme stávající konfiguraci ve webovém prohlížeči. Otevřete v něm soubor index.html, měl by se vám naskytnout podobný pohled jako na následujícím obrázku: Vysvětlení Naši hru jsme obohatili o dvě pálky a míček a s použitím knihovny jquery jsme nastavili počáteční pozice obou pálek. Seznámení s jquery jquery je knihovna JavaScriptu navržená pro jednoduchou navigaci v elementech stránky, manipulaci s nimi, obsluhu událostí a provádění vzdálených asynchronních volání. 43
Kapitola 2 Začínáme s vývojem her a DOM Knihovna umožňuje provádět dvě primární akce selekci a modifikaci. Selekcí se rozumí výběr všech elementů webové stránky, které odpovídají zadanému selektoru (známému z kaskádových stylů). Modifikace, jako je přidání elementu, odstranění potomků nebo nastavení stylu, probíhá nad vybranými elementy. Používání jquery často obnáší spojení selekce a modifikace dohromady v jednu akci. Například následující kód vybere všechny elementy, které patří do třídy box, a nastaví u uvedených vlastností nové hodnoty: $(".box").css({"top":"100px","left":"200px"); Seznámení se selektory jquery Smyslem knihovny jquery je usnadnit výběr elementů a provádění akcí s nimi. Potřebujeme nějak vybrat všechny potřebné elementy v rámci celého dokumentu. Aby mohla knihovna jquery tuto úlohu splnit, vypůjčuje si selektory z kaskádových stylů. Selektor reprezentuje určitý vzor, kterému musí vybíraný element odpovídat. Následující tabulka uvádí nejběžnější a nejužitečnější selektory, které v průběhu této knihy využijeme: Zápis selektoru Význam Příklad použití $("element") Vybere všechny elementy se zadaným názvem. $("p") vybere všechny elementy p. $("body") vybere element body. $("#identifikátor") $(".třída") $(".selektor1, selektor2, selektorn") Vybere element se zadaným identifikátorem (hodnotou atributu id). Vybere všechny elementy se zadanou třídou (hodnotou atributu class). Vybere všechny elementy odpovídající některému ze zadaných selektorů. Předpokládejme, že pracujeme s následujícím kódem: <div id="box1"></div> <div id="box2"></div> $("#box1") vybere vyznačený element. Předpokládejme, že pracujeme s následujícím kódem: <div class="apple"></div> <div class="apple"></div> <div class="orange"></div> <div class="banana"></div> $(".apple") vybere vyznačené elementy, které patří do třídy apple. Předpokládejme, že pracujeme s následujícím kódem: <div class="apple"></div> <div class="apple"></div> <div class="orange"></div> <div class="banana"></div> $(".apple,.orange") vybere vyznačené elementy, které patří buďto do třídy apple, anebo do třídy orange. 44
Vytvoření elementů pro hru Ping Pong Seznámení s metodou css knihovny jquery Metoda css knihovny jquery umožňuje získání i nastavení hodnot vlastností kaskádových stylů elementu. Takto vypadá obecná deklarace metody css, popisující možnosti jejího použití:.css(názevvlastnosti).css(názevvlastnosti, hodnota).css(polevlastností) Metoda css akceptuje několik typů parametrů, které uvádí následující tabulka: Volání metody Popis parametrů Příklad použití.css(název Vlastnosti).css(název Vlastnosti, hodnota).css(pole Vlastností) názevvlastnosti je vlastnost, jejíž hodnota se má získat. názevvlastnosti je vlastnost, hodnota je hodnota, na kterou se má vlastnost nastavit polevlastností je množina párů vlastnost/ /hodnota, které se mají aktualizovat. Metoda vrací hodnotu zadané vlastnosti vybraného elementu. Následující kód vrací hodnotu vlastnosti background-color elementu body: $("body").css("background-color") Dojde pouze k získání hodnoty, ne k její změně. Metoda nastaví hodnotu dané vlastnosti vybraného elementu či elementů na zadanou hodnotu. Následující kód nastaví hodnotu vlastnosti background-color na červenou barvu, u všech elementů, které patří do třídy box: $(".box").css("background-color", "#ff0000") Metoda nastaví hodnotu hned několika zadaných vlastností u vybraného elementu či elementů. Následující kód nastaví hodnoty vlastností left a top elementu s identifikátorem box1: $("#box1").css({ "left" : "40px", "top" : "100px" ) Výhody jquery Knihovna jquery nabízí v porovnání s klasickým JavaScriptem několik výhod: Kód využívající knihovnu jquery pro výběr elementů stránky a jejich modifikaci je výrazně kratší. Kratší kód se lépe čte, což je při vývoji her, které zpravidla obsahují mnoho kódu, velmi důležité. Psaní kratších kódů zrychluje vývoj. 45
Kapitola 2 Začínáme s vývojem her a DOM S použitím knihovny jquery je možné vytvářet kód kompatibilní se všemi hlavními prohlížeči, bez nutnosti dodatečných úprav. Knihovna jquery, jakožto nadstavba nad JavaScriptem, se sama postará o zajištění kompatibility napříč prohlížeči. Práce s elementy hry pomocí jquery S použitím knihovny jquery jsme v naší hře úspěšně nastavili počáteční polohu pálek hráčů. Nyní uděláme malý experiment týkající se dalšího umístění elementů hry. Jak na to změna polohy elementů pomocí jquery V prvé řadě přidáme do naší hry mřížkové pozadí pro lepší orientaci: 1. Navážeme na předchozí ukázku kódu hry Ping Pong. 2. Připravili jsme pro vás obrázek (pixel_grid.jpg) s mřížkou, který si můžete stáhnout na následující adrese: http://gamedesign.cc/html5games/pixel_grid.jpg. 3. Vytvořte v hlavní složce hry novou podsložku s názvem images. 4. Uložte obrázek pixel_grid.jpg do složky images. Tento obrázek nám pomůže při dalším pozicování elementů. 5. Otevřete soubor index.html v textovém editoru. 6. Upravte hodnotu vlastnosti background elementu div s identifikátorem play ground tak, aby se na jeho pozadí zobrazoval obrázek mřížky, jak ukazuje následující kód: #playground{ background: #e0ffe0 url(images/pixel_grid.jpg); width: 400px; height: 200px; position: relative; overflow: hidden; 7. Pokud jste postupovali správně, uvidíte po otevření souboru index.html ve webovém prohlížeči něco podobného, jako na následujícím obrázku. Elementy hry se nacházejí nad mřížkou usnadňující určování jejich polohy. 46
Vytvoření elementů pro hru Ping Pong Vysvětlení Praktickou ukázku jsme zahájili vložením obrázku pixel_grid.jpg na pozadí elementu hracího pole. Jedná se o obrázek vytvořený k tomu, aby usnadnil polohování elementů hry. Obrázek tvoří mřížka polí o velikosti 10 10 pixelů, formujících větší bloky o velikosti 100 100 pixelů. Použijeme-li tento obrázek jako pozadí elementu div hracího pole, získáme tak v podstatě pravítko, podle kterého můžeme měřit pozice dceřiných elementů hracího pole. Absolutní pozicování a jeho specifika Má-li element absolutní pozici (vlastnost position má hodnotu absolute), hodnoty jeho vlastností left a top lze chápat jako souřadnice X, resp. Y levého horního rohu elementu. Tuto skutečnost ilustruje následující obrázek, který v levé části prezentuje skutečné vlastnosti elementu a v pravé pak souřadnicový systém, jejž budeme intuitivně používat při programování hry. Ve výchozím stavu jsou hodnoty vlastností left a top vztaženy k levému hornímu rohu webové stránky. Tento referenční bod se mění v okamžiku, kdy rodičovský element explicitně nastaví hodnotu své vlastnosti position. Pro potomky tohoto rodiče se v takovém případě stává referenčním bodem pro hodnoty vlastností left a top levý horní roh rodiče. 47
Kapitola 2 Začínáme s vývojem her a DOM Z toho důvodu nastavíme pozici hracího pole na relativní a pozici všech elementů hry v něm na absolutní. Následující kód ukazuje použité nastavení: #playground{ position: relative; #ball { position: absolute;.paddle { position: absolute; Kvíz 1. Který selektor jquery použijete, pokud chcete vybrat všechny elementy header? a. $("#header") b. $(".header") c. $("header") d. $(header) Načtení vstupu z klávesnice 48 Tato kniha se zaměřuje na vývoj her. Na běh hry je možné nahlížet jako na následující cyklus: 1. Vizualizuje se aktuální stav hry. 2. Hráči zadají své vstupní příkazy. 3. Logika hry vyhodnotí vstup uživatelů a do hry ho adekvátně promítne. 4. Zpět na krok č. 1. V předchozích částech kapitoly jsme se dozvěděli, jak s použitím jquery a kaskádových stylů zobrazovat objekty hry. Dalším krokem v pořadí je tedy načtení uživatelského vstupu. V této kapitole se zaměříme na vstup z klávesnice. Jak na to pohybování s elementy na základě vstupu z klávesnice Vytváříme klasickou hru Ping Pong. Hru tvoří dvě pálky, jedna vlevo, druhá vpravo a míček mezi nimi, uprostřed hracího pole. Jeden hráč ovládá pálku na levé straně a může s ní pohybovat nahoru a dolů pomocí kláves W a S, druhý hráč má pod kontrolou pálku na opačné straně a pro její ovládání používá klávesy šipek nahoru a dolů.
Načtení vstupu z klávesnice Prozatím pomineme problematiku pohybu míčku a zaměříme se na vstup z klávesnice a jeho zpracování. 1. Vraťte se do složky pingpong. 2. Otevřete v textovém editoru soubor html5games.pingpong.js, který bude obsahovat logiku hry. Prozatím se zde bude nacházet kód obsluhující událost stisknutí klávesy klávesnice, který zajistí adekvátní posun pálky hráče nahoru či dolů. Nahraďte obsah souboru následujícím kódem: var KEY = { UP: 38, DOWN: 40, W: 87, S: 83 $(function(){ // naslouchání události stisknutí klávesy klávesnice $(document).keydown(function(e){ switch(e.which){ case KEY.UP: // šipka nahoru // určení aktuální hodnoty vlastnosti top pálky B a převedení // hodnoty na celé číslo var top = parseint($("#paddleb").css("top")); // posunutí pálky B o 5 pixelů nahoru $("#paddleb").css("top",top-5); break; case KEY.DOWN: // šipka dolů var top = parseint($("#paddleb").css("top")); // posunutí pálky B o 5 pixelů dolů $("#paddleb").css("top",top+5); break; case KEY.W: // W var top = parseint($("#paddlea").css("top")); // posunutí pálky A o 5 pixelů nahoru $("#paddlea").css("top",top-5); break; case KEY.S: // S var top = parseint($("#paddlea").css("top")); // posunutí pálky A o 5 pixelů dolů $("#paddlea").css("top",top+5); break; 49
Kapitola 2 Začínáme s vývojem her a DOM ); ); 3. Pojďme vyzkoušet ovládání pálek. Otevřete soubor index.html v prohlížeči Google Chrome. Zkuste stisknout klávesy W, S, šipku nahoru a dolů. Pálky by se měly v souladu se vstupem pohybovat nahoru a dolů, v tuto chvíli však ještě ne obě současně. Vysvětlení Podívejme se znovu na právě použitý kód. Dokument HTML obsahuje záhlaví, zápatí a element div s identifikátorem game. Element game obsahuje element s identifikátorem playground. Tento element reprezentující hrací pole má tři potomky, tedy dvě pálky a míček. Vývoj hry v HTML5 často začíná přípravou správně strukturovaného dokumentu HTML. Hierarchie HTML pomáhá seskupovat podobné elementy hry (v našem případě několik elementů div) dohromady. Je to něco jako spojování jednotlivých položek do výsledné animace v Adobe Flash. Na finální hierarchii lze nahlížet jako na systém vrstev objektů hry, které je možné snadno vybírat a měnit jejich styl. Klávesnice a kódy kláves Každé klávese klávesnice přísluší určitý číselný kód. Na základě tohoto čísla je možné určit, jakou klávesu uživatel stiskl. Náš kód v JavaScriptu naslouchá události keydown. Objekt event, který se při výskytu této události předává její obsluze, obsahuje mimo jiné také kód stisknuté klávesy. Kód klávesy udává vlastnost which objektu event. 50
Načtení vstupu z klávesnice Do obsluhy události keydown je možné přidat volání metody log objektu console a následně v konzole pozorovat kódy reprezentující jednotlivé stisknuté klávesy. $(document).keydown(function(e){ console.log(e.which); ); Lépe čitelné konstanty Předchozí ukázka kódu názorně demonstrovala, jak lze s použitím kódů kláves vyhodnotit, jestli uživatel právě nestiskl některou z pro nás důležitých kláves. Například šipka nahoru má kód 38. Stačí tedy jednoduše porovnat kód právě stisknuté klávesy s tímto číslem, jak ukazuje následující kód: $(document).keydown(function(e){ switch(e.which){ case 38: // zpracování stisku šipky nahoru Takový postup se však rozhodně nedá doporučit. Jeho důsledkem je velmi špatně čitelný kód. Představte si, že někdy později budete chtít změnit logiku programu a namísto šipky nahoru použít jinou klávesu. V danou chvíli už si nemusíme pamatovat, že kód 38 přísluší právě šipce nahoru. Z toho důvodu se používají konstanty se smysluplnými názvy: var KEY = { UP: 38, DOWN: 40, W: 87, S: 83 // naslouchání události stisknutí klávesy klávesnice $(document).keydown(function(e){ switch(e.which){ case KEY.UP: // zpracování stisku šipky nahoru Díky přiřazení hodnoty 38 do konstanty s názvem KEY.UP je ihned patrné, že daný blok kódu slouží ke zpracování stisku šipky nahoru a bez jakýchkoliv pochyb můžeme danou konstantu nastavit na novou hodnotu. 51
Kapitola 2 Začínáme s vývojem her a DOM Převod řetězců na čísla pomocí funkce parseint Ve většině případů budeme při nastavování hodnot vlastností left a top používat hodnoty, jako je např. 100px. Společně s číselnou hodnotou uvedeme i jednotku, kterou je v tomto případě pixel. Ve stejném formátu pak budeme hodnoty uvedených vlastností také načítat. Volání metody $("#paddlea").css("top") tedy nevrátí hodnotu 100, nýbrž 100px. Vzniká tak drobný problém, pokud se s touto hodnotou mají provádět nějaké aritmetické operace. V tomto příkladu je naším cílem posunutí pálky hráče směrem vzhůru, nastavením hodnoty vlastnosti top na její aktuální hodnotu zmenšenou o pět. Předpokládejme, že je aktuální hodnota vlastnosti top pálky A rovna 100px. Pokud bychom použili následující příkaz ve snaze navýšit hodnotu o pět pixelů, nebyla by výsledkem očekávaná číselná hodnota, ale hodnota 100px5. $("#paddlea").css("top") + 5 JavaScript v tomto případě provede metodu css, která vrátí hodnotu 100px. Následně k řetězci 100px připojí řetězec 5. Potřebujeme nějakým způsobem převést řetězec 100px na číslo, se kterým lze provádět matematické operace. Právě k tomu slouží funkce parseint JavaScriptu. Deklarace funkce vypadá následovně: parseint(řetězec, číselnásoustava) Funkce parseint má jeden povinný a jeden volitelný parametr. Parametr Popis Příklad použití řetězec číselná Soustava Řetězec, který se má zpracovat. Volitelný parametr. Číslo reprezentující číselnou soustavu, která se má použít. Funkce zpracuje v pořadí první číslo, které se v řetězci nachází. Pokud zadaný řetězec není možné převést na číslo, vrací funkce hodnotu NaN (Not a Number). Ve výchozím nastavení zpracuje funkce řetězce uvozené prefixem 0x jako čísla v šestnáctkové soustavě. Několik příkladů použití: parseint("100px") vrací 100 parseint("5cm") vrací 5 parseint("0xf") vrací 15 Druhý parametr vynucuje zpracování řetězce v konkrétní číselné soustavě. Například: parseint("0x10") vrací 16 parseint("0x10",10) vrací 0 parseint("ff",16) vrací 255 52
Načtení vstupu z klávesnice Provádění kódu v JavaScriptu z konzole Výrazy JavaScriptu je možné provádět přímo v okně konzole. Konzole je nástrojem pro vývojáře, dostupným v prohlížeči Google Chrome (v jiných prohlížečích jsou k dispozici podobné nástroje). Konzoli je možné otevřít klepnutím na ikonu klíče v pravém horním rohu prohlížeče a následným výběrem Nástroje, Nástroje pro vývojáře a klepnutím na záložku Console. Konzole představuje užitečný způsob, jak v průběhu vývoje rychle otestovat jednoduché výrazy, u kterých si nejste jistí, že fungují správně. Následující obrázek ukazuje testování dvou výrazů s funkcí parseint: Zkuste to sami Převod řetězců na čísla může být někdy zrádný. Víte, jaký bude výsledek volání funkce parseint na řetězci 10 sekund 20? A co třeba 10x10 nebo $20.5? Je na čase otevřít konzoli a zkusit převod těchto řetězců na čísla. Sledování konzole Logika kódu v JavaScriptu začíná být složitější, a je proto vhodné sledovat konzoli webového prohlížeče. Pokud kód obsahuje nějaké chyby anebo generuje varování, budou uvedeny v konzoli. Konzole informuje o nalezených nedostatcích kódu včetně čísla odpovídajícího řádku kódu. V průběhu testování her v HTML5 je velmi užitečné a důležité otevřít pro kontrolu okno konzole. Už mnohokrát jsem viděl vývojáře 53
Kapitola 2 Začínáme s vývojem her a DOM v úzkých, kteří nemají ponětí, proč jejich kód nefunguje. Důvodem zpravidla bývá syntaktická chyba nebo překlep, na který by je konzole upozornila a ušetřila jim tak několik hodin marného procházení kódu. Následující obrázek ilustruje chybu na řádku 35 souboru html5games.pingpong.js. Konzole uvádí chybu Invalid left-hand side in assignment. Po kontrole kódu jsem narazil na špatně použitý operátor rovnosti (=) při nastavování hodnoty vlastnosti top. $("#paddlea").css("top"=top+5); // namísto správného zápisu: // $("#paddlea").css("top", top+5); Podpora vícenásobného vstupu z klávesnice Stávající metoda zpracování uživatelského vstupu dovoluje vždy pouze jeden vstup současně. Vstup z klávesnice navíc není zcela plynulý. Představte si, že hru Ping Pong hrají dva hráči. Nemohou své pálky dostatečné dobře ovládat, protože jejich vstup narušuje ostatní. V této části kapitoly se zaměříme na rozšíření kódu o podporu několika současných vstupů z klávesnice. Jak na to jiný způsob zpracování vstupu z klávesnice K obsluze události stisku klávesy použijeme jinou metodu. Tento nový přístup umožní mnohem plynulejší činnost a více vstupů současně. 1. Otevřete v textovém editoru soubor html5games.pingpong.js z předchozí části kapitoly. 54
Podpora vícenásobného vstupu z klávesnice 2. Odstraňte kód, který jsme doposud vytvořili. Bude jednodušší začít znovu od začátku. 3. Budeme potřebovat globálně přístupné pole pro uložení informací o stisknutých klávesách. Do otevřeného souboru proto vložte následující kód: var pingpong = { pingpong.pressedkeys = []; 4. Dále je třeba přidat kód, který se provede poté, co se dokončí načítání stránky a stránka je plně připravena. Tento kód zajistí obsluhu a zaznamenání stisknutých kláves. Následující kód umístěte v souboru hned za dva řádky kódu přidané v předchozím kroku: $(function(){ // nastavení intervalu volání funkce gameloop na 30 milisekund pingpong.timer = setinterval(gameloop,30); // zaznamenání stisknutí a uvolnění kláves do pole pressedkeys $(document).keydown(function(e){ pingpong.pressedkeys[e.which] = true; ); $(document).keyup(function(e){ pingpong.pressedkeys[e.which] = false; ); ); 5. Informace o stisknutých klávesách jsou bezpečně uložené. Zbývá realizovat samotný pohyb pálek. V předchozím kroku jsme nastavili časovač, který v pravidelných intervalech volá funkci zajišťující změnu polohy pálek. Vložte do souboru html5games.pingpong.js následující kód: function gameloop() { movepaddles(); function movepaddles() { // časovačem pravidelně volaná funkce, která vyhodnocuje // stisknuté klávesy if (pingpong.pressedkeys[key.up]) { // šipka nahoru // posunutí pálky B o pět pixelů nahoru var top = parseint($("#paddleb").css("top")); $("#paddleb").css("top",top-5); if (pingpong.pressedkeys[key.down]) { // šipka dolů // posunutí pálky B o pět pixelů dolů 55
Kapitola 2 Začínáme s vývojem her a DOM var top = parseint($("#paddleb").css("top")); $("#paddleb").css("top",top+5); if (pingpong.pressedkeys[key.w]) { // W // posunutí pálky A o pět pixelů nahoru var top = parseint($("#paddlea").css("top")); $("#paddlea").css("top",top-5); if (pingpong.pressedkeys[key.s]) { // S // posunutí pálky A o pět pixelů dolů var top = parseint($("#paddlea").css("top")); $("#paddlea").css("top",top+5); 6. Teď vyzkoušíme, co jsme vytvořili. Uložte všechny otevřené soubory a otevřete soubor index.html ve webovém prohlížeči. 7. Zkuste současně stisknout klávesy ovládající pohyb obou pálek. Obě pálky by se měly plynule pohybovat a synchronně reagovat bez jakýchkoliv přerušení. Vysvětlení K zachytávání stisknutých kláves klávesnice jsme tentokrát použili odlišnou techniku. Namísto toho, aby se ihned po detekci stisku klávesy prováděla odpovídající akce, uloží se informace o stisknuté klávese do pole. Časovač následně v pravidelných intervalech 30 milisekund obsah tohoto pole vyhodnocuje. Tento postup zaručuje, že nám žádný stisk klávesy neunikne, a obě hrací pálky se tak mohou pohybovat současně. Lepší deklarace globálních proměnných Globální proměnné jsou proměnné přístupné v rámci celého dokumentu. Jakákoliv proměnná deklarovaná mimo funkci je globální proměnnou. V následující ukázce kódu jsou proměnné a a b globálními proměnnými, zatímco proměnná c je lokální, která existuje pouze v kontextu dané funkce: var a = 0; var b = "xyz"; function something(){ var c = 1; Vzhledem k tomu, že jsou globální proměnné dostupné v celém dokumentu, zvyšuje se pravděpodobnost konfliktu názvů, obzvláště pokud do dokumentu připojíme další 56
Podpora vícenásobného vstupu z klávesnice knihovny v JavaScriptu. Veškeré globální proměnné, které použijeme, proto umístíme do objektu. V předchozí části Jak na to jsme deklarovali globálně přístupné pole pro ukládání informací o stisknutých klávesách. Místo přímé deklarace v globálním jmenném prostoru jsme nejdříve vytvořili globální objekt s názvem pingpong a až do něj pole vložili: var pingpong = { pingpong.pressedkeys = []; V budoucnu můžeme potřebovat další globální proměnné. I ty vložíme do objektu pingpong. Snižuje se tak šance výskytu konfliktu názvů, protože se v globálním jmenném prostoru nachází pouze jedna proměnná, objekt s názvem pingpong. Vytvoření časovače pomocí funkce setinterval Informace o stisknutých klávesách se ukládají do pole, jehož obsah se v pravidelných intervalech analyzuje. Docílili jsme toho s použitím funkce JavaScriptu s názvem setinterval. Deklarace funkce setinterval vypadá takto: setinterval(výraz, milisekundy) Funkce setinterval bere dva parametry, oba povinné: Parametr Popis Příklad použití výraz mili sekundy Funkce nebo kód, který se má provést. Prodleva v milisekundách mezi jednotlivými voláními funkce/ /výrazu. Výrazem může být název funkce nebo kód uzavřený do uvozovek. Následující kód zajistí volání funkce hello každých 100 milisekund: setinterval(hello,100); Následující kód zajistí volání funkce hi s parametry každých 100 milisekund: setinterval("hi('makzan')",100); Délka intervalu v milisekundách. Hodnota 1000 tedy znamená volání výrazu každou sekundu. Herní smyčka Vytvořili jsme časovač, který provádí určitý kód hry každých 30 milisekund. To znamená, že se provede 33,3krát za sekundu. Takový kód se většinou označuje za herní smyčku. V herní smyčce se zpravidla provádí několik věcí: Zpracování vstupu, což jsme právě udělali. Aktualizace stavu herních objektů, včetně pozice a vzhledu. Ověření dosažení konce hry. 57
Kapitola 2 Začínáme s vývojem her a DOM Co přesně se v herní smyčce provádí, se u různých typů her může lišit, základní myšlenka je však stále stejná. Herní smyčka se provádí v pravidelných intervalech, aby se zajistil plynulý běh hry. Pohyb elementu s použitím časovače Naším dalším úkolem je rozpohybovat malý červený míček. Míček se při setkání s pálkou odrazí. Pokud se míček dostane až za pálku hráče a narazí na okraj herního pole, přichází daný hráč o body. Všechny tyto akce nejsou ničím jiným než manipulací s polohou elementů div v dokumentu HTML, s pomocí knihovny jquery. Abychom hru Ping Pong mohli dokončit, vdechneme nyní míčku život. Jak na to pohyb míčku s použitím časovače 58 V předchozí části kapitoly jsme se seznámili s funkcí setinterval a použitím časovače. Časovač se bude starat také o plynulý pohyb míčku po herním poli. Každých 30 milisekund se míček posune o malý kousek. Jakmile míček dosáhne okraje herního pole, změní se směr jeho dalšího pohybu. 1. Odpíchneme se od našeho posledního příkladu, který ukazuje zpracování vícenásobného vstupu z klávesnice. 2. Otevřete soubor html5games.pingpong.js v textovém editoru. 3. Stav pohybujícího se míčku uložíme do globálně přístupného pole, které vložíme do objektu pingpong: pingpong.ball = { speed: 5, x: 150, y: 100, directionx: 1, directiony: 1 4. Herní smyčka doposud zajišťovala pouze pohyb pálek. Nyní se bude starat také o pohyb míčku. Do funkce gameloop přidáme volání funkce moveball: function gameloop() { moveball(); movepaddles(); 5. Definujeme funkci moveball. Tato funkce bude provádět hned několik operací, konkrétně určení aktuální polohy míčku, určení hranic herního pole, změnu pohybu míčku po nárazu na hranici herního pole a vlastní pohyb míčku po všech těchto výpočtech. Do souboru html5games.pingpong.js vložte následující definici funkce moveball:
Pohyb elementu s použitím časovače function moveball() { // načtení potřebných hodnot var playgroundheight = parseint($("#playground").height()); var playgroundwidth = parseint($("#playground").width()); var ball = pingpong.ball; // ověření hranice herního pole // dolní hrana if (ball.y + ball.speed*ball.directiony > playgroundheight) { ball.directiony = -1; // horní hrana if (ball.y + ball.speed*ball.directiony < 0) { ball.directiony = 1; // pravá hrana if (ball.x + ball.speed*ball.directionx > playgroundwidth) { ball.directionx = -1; // levá hrana if (ball.x + ball.speed*ball.directionx < 0) { ball.directionx = 1; ball.x += ball.speed * ball.directionx; ball.y += ball.speed * ball.directiony; // zde později bude vyhodnocení polohy pálek // vlastní pohyb míčku požadovaným směrem $("#ball").css({ "left" : ball.x, "top" : ball.y ); 6. Kód zajišťující pohyb míčku je připravený. Uložte všechny soubory a otevřete soubor index.html ve webovém prohlížeči. 59
Kapitola 2 Začínáme s vývojem her a DOM 7. Pálky fungují stejně jako v předchozím příkladu, navíc se však po herním poli pohybuje míček. Vysvětlení Úspěšně jsme přiměli míček k pohybu po herním poli. Vytvořili jsme herní smyčku, která v pravidelných intervalech 30 milisekund provádí základní herní logiku, včetně pohybu míčku. Základními vlastnostmi míčku jsou jeho rychlost a směr pohybu na osách X a Y. Rychlost udává, o kolik pixelů se v každém kroku míček posune. Směr na ose X, resp. Y je možné vyjádřit hodnotou 1 nebo -1. Pohyb míčku zajišťují následující příkazy: ball.x += ball.speed * ball.directionx; ball.y += ball.speed * ball.directiony; Nová poloha míčku se určí součtem jeho aktuální polohy se součinem jeho směru a rychlosti. Pokud má tedy směr hodnotu 1, posune se míček po dané ose v kladném směru. V případě hodnoty -1 se míček posune v negativním směru. Nastavení směru pohybu ve dvou osách umožňuje pohyb míčku čtyřmi směry. Porovnáme polohu míčku na osách X a Y s pozicí čtyř hran elementu div herního pole. Tím určíme, jestli nová poloha míčku není již za hranicí těchto okrajů. Pokud ano, změníme znaménko u hodnoty směru, čímž docílíme efektu odrazu míčku od hrany. Základy detekce kolizí Předchozí část kapitoly ukázala, jak ověřit, jestli se míček při svém pohybu nedostal do kontaktu s hranicí herního pole. Pomocí klávesnice lze také pohybovat pálkami. Co schází? Interakce s míčkem. Můžeme sice ovládat pálky, ale míček skrz ně jen prochází dál, jako by mu vůbec nestály v cestě. Zapomněli jsme totiž na detekci kolizí pohybujícího se míčku a pálek. Jak na to úder míčku pálkou K ověření kolizí použijeme podobný způsob detekce hranic jako u herního pole: 1. Otevřete soubor html5games.pingpong.js v textovém editoru. 2. Ve funkci moveball jsme si již vyhradili místo, kam umístit detekci kolizí míčku a pálek. Stačí vyhledat řádek s komentářem // zde později bude vyhodnocení polohy pálek. 3. Na určené místo vložte následující kód. Tento kód ověří, jestli se míček nedostal do kontaktu s některou z pálek, a pokud ano, odrazí se. 60 // levá pálka var paddleax = parseint($("#paddlea").css("left")) +parseint($("#paddlea").css("width"));
Základy detekce kolizí var paddleaybottom = parseint($("#paddlea").css("top")) +parseint($("#paddlea").css("height")); var paddleaytop = parseint($("#paddlea").css("top")); if (ball.x + ball.speed*ball.directionx < paddleax) { if (ball.y + ball.speed*ball.directiony <= paddleaybottom && ball.y + ball.speed*ball.directiony >= paddleaytop) { ball.directionx = 1; // pravá pálka var paddlebx = parseint($("#paddleb").css("left")); var paddlebybottom = parseint($("#paddleb").css("top")) +parseint($("#paddleb").css("height")); var paddlebytop = parseint($("#paddleb").css("top")); if (ball.x + ball.speed*ball.directionx >= paddlebx) { if (ball.y + ball.speed*ball.directiony <= paddlebybottom && ball.y + ball.speed*ball.directiony >= paddlebytop) { ball.directionx = -1; 4. Pokud míček narazí na levou nebo pravou hranici herního pole, je třeba ho umístit zpět do výchozí polohy uprostřed pole. Odstraňte kód s komentáři pravá hrana a levá hrana a nahraďte ho následujícím kódem: // pravá hrana if (ball.x +ball.speed*ball.directionx > playgroundwidth) { // hráč B prohrál // přemístění míčku do výchozí polohy ball.x = 250; ball.y = 100; $("#ball").css({ "left": ball.x, "top" : ball.y ); ball.directionx = -1; 61
Kapitola 2 Začínáme s vývojem her a DOM // levá hrana if (ball.x + ball.speed*ball.directionx < 0) { // hráč A prohrál // přemístění míčku do výchozí polohy ball.x = 150; ball.y = 100; $("#ball").css({ "left": ball.x, "top" : ball.y ); ball.directionx = 1; 5. Vyzkoušejte hru ve webovém prohlížeči. Míček se nyní po nárazu do levé nebo pravé pálky odrazí. Dosáhne-li míček levé či pravé hranice herního pole, vrátí se zpět doprostřed. Vysvětlení Upravili jsme kód řídící pohyb míčku, tak aby se míček nyní odrazil, dostane-li se do kontaktu s některou z pálek. Narazí-li levou nebo pravou hranici herního pole, vrátí se míček zpátky doprostřed. 62 Podívejme se, jak probíhá detekce kolizí míčku s levou pálkou. Nejdříve ověříme, jestli je poloha míčku ve směru osy X menší než poloha pravé hrany pálky. Souřadnici pravé hrany získáme součtem hodnot vlastností left a width pálky.
Základy detekce kolizí Následně ověříme, jestli se míček, ve směru osy Y, nachází mezi horní a dolní hranou pálky. Souřadnici horní hrany pálky udává hodnota její vlastnosti top, souřadnici dolní hrany součet hodnot vlastností top a height pálky. Pokud pozice míčku splní obě uvedené podmínky, míček se od pálky odrazí. Takto tedy vypadá náš základní mechanismus detekce kolizí. Na základě pozice, šířky a výšky dvou objektů je možné určit, jestli se dva objekty překrývají. Tento typ detekce kolizí je vhodný pro obdélníkové oblasti, ne však pro kruhové či jiné tvary. Problém ilustruje následující obrázek. Kolizní oblasti, které jsou na něm vyznačeny, jsou neplatné. Ohraničující obdélníky objektů sice kolidují, nikoliv však samotné objekty. Detekována kolize Detekována kolize Speciální případy, jako jsou tyto, vyžadují pokročilejší techniky detekce kolizí, o kterých budeme hovořit později. 63