1 JIHOČESKÁ UNIVERZITA V ČESKÝCH BUDĚJOVICÍCH Pedagogická fakulta Katedra informatiky Programování her v HTML5 pomocí knihoven jquery a Box2D Programm...
ˇ ESKA ´ UNIVERZITA V C ˇ ESKY ´ CH JIHOC ˇ JOVIC´ICH BUDE Pedagogicka´ fakulta Katedra informatiky
Programov´ an´ı her v HTML5 pomoc´ı knihoven jQuery a Box2D Programming HTML5 games using libraries jQuery and Box2D Bakal´aˇrsk´a pr´ace
Vypracovala: Krist´ yna Holeˇckov´a Vedouc´ı pr´ ace: PaedDr. Petr Pexa, Ph.D.
ˇ e Budˇejovice 2015 Cesk´
Prohl´ aˇ sen´ı Prohlaˇsuji, ˇze svoji bakal´aˇrskou pr´aci jsem vypracovala samostatnˇe, pouze s pouˇzit´ım pramen˚ u a literatury uveden´ ych v seznamu citovan´e literatury. Prohlaˇsuji, ˇze v souladu s S 47b z´akona ˇc. 111/1998 Sb. v platn´em znˇen´ı souhlas´ım se zveˇrejnˇen´ım sv´e bakal´aˇrsk´e pr´ace, a to v nezkr´acen´e podobˇe elektronickou cestou ve veˇrejnˇe pˇr´ıstupn´e ˇca´sti datab´aze STAG provozovan´e Jihoˇ ych Budˇejovic´ıch na jej´ıch internetov´ ˇceskou univerzitou v Cesk´ ych str´ank´ach, a to se zachov´an´ım m´eho autorsk´eho pr´ava k odevzdan´emu textu t´eto kvalifikaˇcn´ı pr´ace. Souhlas´ım d´ale s t´ım, aby tout´eˇz elektronickou cestou byly v souladu s uveden´ ym ustanoven´ım z´akona ˇc. 111/1998 Sb. zveˇrejnˇeny posudky ˇskolitele a oponent˚ u pr´ace i z´aznam o pr˚ ubˇehu a v´ ysledku obhajoby kvalifikaˇcn´ı pr´ace. Rovnˇeˇz souhlas´ım s porovn´an´ıım textu m´e kvalifikaˇcn´ı pr´ace s datab´az´ı kvalifikaˇcn´ıch prac´ı Theses.cz provozovanou N´arodn´ım registrem vysokoˇskolsk´ ych kvalifikaˇcn´ıch prac´ı a syst´emem na odhalov´an´ı plagi´at˚ u.
ˇ ych Budˇejovic´ıch dne 23. dubna 2014 V Cesk´
Krist´ yna Holeˇckov´a
Abstrakt C´ılem bakal´aˇrsk´e pr´ace je zpracovat moˇznosti tvorby poˇc´ıtaˇcov´ ych her s vyuˇzit´ım HTML5, JavaScriptov´e knihovny jQuery a engine pro simulaci fyziky Box2D. Hry vyuˇz´ıvaj´ıc´ı HTML5 funguj´ı na poˇc´ıtaˇc´ıch, chytr´ ych telefonech i tabletech, vˇcetnˇe iPhon˚ u a iPad˚ u. Jsou psan´e pomoc´ı JavaScriptu, kask´adov´ ych styl˚ u CSS3 a element˚ u HTML5. D´ıky t´eto formˇe her se vyˇreˇsil probl´em s kompatibilitou u webov´ ych prohl´ıˇzeˇc˚ u Applu. Tyto prohl´ıˇzeˇce (vˇcetnˇe u mobiln´ıch zaˇr´ızen´ı) nepodporuj´ı dosavadn´ı a tradiˇcn´ı technologii Flash. Souˇc´ast´ı t´eto pr´ace bude popis principu vytv´aˇren´ı her pomoc´ı tˇechto technologi´ı a postup pˇri jejich n´asledn´em publikov´an´ı na internetu. D´ale v bakal´aˇrsk´e pr´aci bude porovn´an´ı v´ yhod a nev´ yhod v´ yvoje a nasazen´ı HTML5 hern´ıch aplikac´ı oproti obdobn´ ym hr´am, realizovan´ ych pomoc´ı tradiˇcn´ı technologie Flash. Praktick´a ˇc´ast bude obsahovat nˇekolik online her, na kter´ ych bude otestov´ana podpora t´eto nov´e technologie v dostupn´ ych verz´ıch webov´ ych prohl´ıˇzeˇc˚ u a zpracov´ana podrobn´a dokumentace a tutori´al.
Kl´ıˇ cov´ a slova HTML5, hry, jQuery, Box2D, JavaScript, CSS3, technologie Flash
Abstract The aim of this bachelor thesis is to process possibilities of creating computer games with application of HTML 5, JQuery (JavaScript library), and Box2D (an engine for physics simulation) . Games using HTML 5 work on computers, smartphones and tablets, including IPhones, and IPads. They are written in JavaScript, cascading styles CSS3 and elements of HTML5. Due to this form of games, the compatibility problem of Apple’s web browsers is solved.. These web browsers (including those of mobile devices) don´t support existing and traditional Flash technology. A part of this work is a description of principle of creating games using technologies, which are mentioned above, and the pro-
cess of their later publication on the Internet. In another part of this bachelor thesis, positives and negatives of development and use of HTML 5 gaming applications are compared against those of other similar games using traditional Flash technology. The practical part of this thesis includes testing of support of this new technology in available web browser version on several online games, and also a detailed documentation and a tutorial to the testing.
V souˇcasnosti se na internetu nach´az´ı velk´a ˇsk´ala r˚ uzn´ ych typ˚ u her naprogramovan´ ych jak pomoc´ı technologie Flash, tak uˇz i HTML5 her. Ovˇsem ne vˇsechny hry funguj´ı na souˇcasn´ ych zaˇr´ızen´ıch. Pr´avˇe Flash hry se poj´ı s probl´emem pˇrehr´av´an´ı pˇrev´aˇznˇe na zaˇr´ızen´ıch firmy Apple, kter´a Flash aplikace blokuje. HTML5 hry, sloˇzen´e pˇrev´aˇznˇe z JavaScriptov´eho k´odu a doplnˇen´e kask´adov´ ymi styly, prorazily barik´adu pr´avˇe mezi hrami na internetu a iOS zaˇr´ızen´ımi. Samotn´ y dˇej a prostˇred´ı hry tvoˇr´ı JavaScriptov´e knihovny, kter´e jsou urˇceny pro usnadnˇen´ı a zrychlen´ı pr´ace. Tˇechto knihoven je cel´a ˇrada a kaˇzd´a usnadˇ nuje z´apis nˇejak´eho k´odu, at’ uˇz se jedn´a o pˇrehr´av´an´ı zvuk˚ u nebo zobrazov´an´ı obr´azk˚ u nebo jin´ ych jin´ ych efekt˚ u. Pro tuto pr´aci jsem si vybrala vˇsestrannou knihovnu jQuery, kter´a je velmi obl´ıben´a ze strany program´ator˚ u web˚ u. Pro zpestˇren´ı a zv´ yˇsen´ı kvality hry se pouˇz´ıvaj´ı r˚ uzn´e enginy, tedy motory hry. Vˇetˇsina engin˚ u se pouˇz´ıv´a pro rozpohybov´an´ı objekt˚ u ve hˇre a fyzik´aln´ı z´akonitostmi mezi objekty. Ovˇsem vyuˇzit´ı maj´ı i u zvuk˚ u, mapov´ ych editor˚ u apod. V t´eto pr´aci vyuˇz´ıv´am engine Box2D pro simulaci fyziky, tedy napˇr´ıklad pro detekci koliz´ı pˇri sr´aˇzce objekt˚ u stejn´ ych i r˚ uzn´ ych tvar˚ u. HTML5 hry jsou neust´ale aktu´aln´ım t´ematem, objevuj´ı se st´ale nov´e moˇznosti, jak hry zdokonalit pr´avˇe tˇreba pomoc´ı engin˚ u nebo JavaScriptov´ ych knihoven. Dnes jiˇz existuj´ı editory pˇr´ımo na vytv´aˇren´ı tˇechto her bez jak´ehokoliv programov´an´ı, ovˇsem pokud chceme pochopit na jak´em principu a smyslu se stav´ı HTML5 hry, je tˇreba se s v´ yvojem her sezn´amit v´ıce do hloubky. Toto t´ema jsem si zvolila nejen d´ıky osobn´ımu z´ajmu o HTML5 a moˇznostech pr´avˇe s t´ımto znaˇckovac´ım jazykem, ale i poskytnout informace o tvorbˇe HTML5 her, vyuˇz´ıv´an´ı JavaScriptov´ ych knihoven a engin˚ u pohromadˇe pro ˇsirˇs´ı ˇ e republice. veˇrejnost a t´ım rozˇs´ıˇrit z´ajem o tuto problematiku v Cesk´
10
´ 1 UVOD
1.1
C´ıle pr´ ace
C´ılem bakal´aˇrsk´e pr´ace je pˇribl´ıˇzit a zpracovat moˇznosti tvorby her programovan´ ych v HTML5 s vyuˇzit´ım knihoven jQuery a Box2D. Detailnˇe popsat princip vytv´aˇren´ı tˇechto her, vˇcetnˇe vyuˇzit´ı kask´adov´ ych styl˚ u tak, aby dok´azal t´emˇeˇr u ´pln´ y laik tento princip pochopit a naprogramovat svou vlastn´ı hru vˇcetnˇe webov´eho rozhran´ı. Souˇca´st´ı popisu bude pˇresn´ y postup nahr´an´ı her na internet. Porovnat a popsat, jak´e jsou v´ yhody a nev´ yhody hern´ıch aplikac´ı v HTML5 oproti hr´am realizovan´ ych pomoc´ı technologie Flash. D´ale bude vytvoˇreno nˇekolik her, u kter´ ych bude podrobnˇe vysvˇetleno, jak´ ym zp˚ usobem byly vytvoˇreny a budou publikov´any na internetu, kde bude souˇc´ast´ı i tutori´al.
1.2
V´ ychodiska pr´ ace
S v´ yvojem nov´ ych technologi´ı a zaˇr´ızen´ı je tˇreba nez˚ ust´avat pozadu ani s v´ yvojem kompatibiln´ıch aplikac´ı. Mezi tyto aplikace se ˇrad´ı i HTML5 hry, kter´e zajiˇst’uj´ı funkˇcnost her na vˇsech poˇc´ıtaˇc´ıch, tabletech, chytr´ ych telefonech, a to vˇcetnˇe iOS. Pˇred v´ yvojem znaˇckovac´ıho jazyka HTML5 vl´adly na internetu hry vytvoˇren´e pomoc´ı technologie Flash. Ovˇsem tyto technologie nebyly a nejsou kompatibiln´ı se zaˇr´ızen´ımi firmy Apple. HTML5 hry jsou psan´e pomoc´ı JavaScriptu, kask´adov´ ych styl˚ u a element˚ u HTML5. V t´eto pr´aci budu vyuˇz´ıvat knihovnu jQuery, coˇz je JavaScriptov´a knihovna, kter´a urychluje a usnadˇ nuje pr´aci a d´ale fyzik´aln´ı engine zaloˇzen´ y na syt´emu Box2D. T´ema programov´an´ı her v HTML5 je zn´am´e uˇz p´ar let, jsou jiˇz vytvoˇreny i editory, kter´e umoˇzn ˇuj´ı vytv´aˇret hry v HTML5 bez jak´ehokoliv programov´an´ı. Ovˇsem doposud nebyla napsan´a pr´ace v ˇcesk´em jazyce, kter´a by seznamovala s v´ yvojem her v HTML5 s vyuˇzit´ım knihovny jQuery a enginu Box2D a z´aroveˇ n poukazovala na v´ yhody t´eto technologie oproti hr´am psan´ ych pomoc´ı technologie Flash, ke kter´e je tˇreba zvl´aˇst’ program, ve kter´em se aplikace vytvoˇr´ı a teprve pot´e se implementuje do webov´eho prostˇred´ı. Z´aroveˇ n tato 11
´ 1 UVOD
pr´ace bude uˇziteˇcn´a pro zaˇca´teˇcn´ıky programov´an´ı, kteˇr´ı si celou hru budou cht´ıt naprogramovat sami bez pouˇzit´ı editor˚ u na HTML5 hry.
1.3
Metoda pr´ ace
Vu ´vodu pr´ace struˇcnˇe pop´ıˇsu programovac´ı jazyky, kter´ ymi jsou hry psan´e. D´ale se zamˇeˇr´ım pˇr´ımo na moˇznosti vytv´aˇren´ı HTML5 her, tedy z´apis v JavaScriptu, CSS a samotn´ y znaˇckovac´ı jazyk HTML5. V popisu budou pops´any funkce a principy vyuˇzit´ı knihoven jQuery a enginu Box2D. D´ale rozeberu nejvˇetˇs´ı v´ yhody a nev´ yhody tvorby her v HTML5 a technologie Flash. V praktick´e ˇca´sti bakal´aˇrsk´e pr´ace vytvoˇr´ım nˇekolik online her, kter´e budou podrobnˇe popsan´e i v teoretick´e ˇca´sti. Tyto hry um´ıst´ım na webov´e str´anky, kter´e pro tuto pr´aci vytvoˇr´ım.
12
´ ´I POJMY 2 ZAKLADN
2
Z´ akladn´ı pojmy
Hry, kter´e vyuˇz´ıvaj´ı HTML5, funguj´ı jak na poˇc´ıtaˇc´ıch, tak na chytr´ ych mobiln´ıch zaˇr´ızen´ıch i tabletech, vˇcetnˇe zaˇr´ızen´ı firmy Apple, tedy iPhon˚ u a iPad˚ u [1]. Jsou psan´e pomoc´ı JavaScriptu, kask´adov´ ych styl˚ u CSS3 a element˚ u HTML5.
2.1
HTML5
Jazyk HTML je zkratkou z anglick´eho Hyper-Text Markup Language. Jedn´a se o znaˇckovac´ı jazyk slouˇz´ıc´ı pro tvorbu webov´ ych str´anek. Urˇcuje, jak bude vypadat v´ ysledn´a struktura obsahu zobrazen´eho na webu a propojen´ı s dalˇs´ımi souvisej´ıc´ımi str´ankami, pˇr´ıpadnˇe s JavaScriptov´ ymi soubory nebo kask´adov´ ymi styly. HTML5 je n´astupce HTML 4.1 a XHTML1 1.1 [1]. HTML5 na rozd´ıl od HTML znaˇckovac´ıch jazyk˚ u se zab´ yv´a JavaScripto2 v´ ymi API , coˇz je rozhran´ı pro programov´an´ı aplikac´ı. Jedn´a se o napˇr´ıklad o funkce, struktury, tˇr´ıdy a knihoven, kter´e se mohou vyuˇz´ıt u programov´an´ı. A pr´avˇe API urˇcuje, jak´ ym zp˚ usobem jsou ze zdrojov´eho dokumentu (programu) funkce knihoven spouˇstˇeny. D´ale se HTML5 zab´ yv´a i offline aplikacemi,kreslen´ım v prohl´ıˇzeˇci, kter´e je vyuˇzito i pˇr´ımo v t´eto pr´aci a mnoh´ ymi dalˇs´ımi vychyt´avkami“, kter´e doted’ HTML chybˇely.[2] ” Dalˇs´ı novinkou u HTML5 jednoduˇsˇs´ı deklarace typu dokumentu DOCTYPE a nastaven´ı k´odov´an´ı pomoc´ı charset. Nov´e s´emantick´e elementy jsou ,
