VILNIAUS UNIVERSITETAS MATEMATIKOS IR INFORMATIKOS FAKULTETAS MATEMATIN ˙ES ...

36 Pages·2016·0.67 MB·English

VILNIAUS UNIVERSITETAS
MATEMATIKOS IR INFORMATIKOS FAKULTETAS
˙
MATEMATINES INFORMATIKOS KATEDRA
Robertas Kvietkauskas
(parašas)
Informatikos studiju˛ programa
Matematine˙s informatikos šaka
Žaidimu˛ ku¯rimas naudojant HTML5 galimybes
Bakalauro baigiamasis darbas
Vadovas: lektorius Irus Grinis
(parašas)
Vilnius 2016
Turinys
I˛vadas 3
Uždaviniai . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Darbo reikšme˙ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1 Metodologija 5
1.1 HTML5 naujove˙s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.1.1 Canvas elementas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.1.2 WebGL palaikymas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1.3 Application Cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1.4 WebSQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.1.5 WebStorage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.1.6 Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.1.7 SVG palaikymas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.2 WebSocket technologija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.3 „Phaser“ žaidimu˛ variklis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.4 „Node.JS“ vykdymo aplinka ir biblioteka . . . . . . . . . . . . . . . . . . . . 21
2 Žaidimo serverio realizacija 24
3 Žaidimo klientine˙s dalies realizacija 27
Išvados 31
Tobulinimo galimybe˙s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Literatu¯ros sąrašas 32
Santrauka 35
Summary 36
2
I˛vadas
Žaidimai — tai neatsiejama žmogaus gyvenimo dalis. Nuo seniausiu˛ laiku˛ žmone˙s žaide˙
tam, kad atsipalaiduotu˛, smagiai praleistu˛ laiką. Taip pat, žaidimai buvo naudojami kaip
edukacine˙ priemone˙, siekiant perduoti žinias jaunesniąjai kartai (toks žaidimu˛ panaudojimas
nesunkiai pastebimas ne tik žmoniu˛, bet ir gyvu¯nu˛ tarpe).
Keičiantiskasdienineižmoniu˛veiklai,gyvenimobu¯dui,aplinkai,keite˙siiržaidimai. Vienas
iš XX-ojo amžiaus mokslo ir technologiju˛ evoliucijos, pramone˙s vystymosi vaisiu˛ — kom-
piuteris — taip pat padare˙ ˛itaką žaidimu˛ pasauliui, atnešdamas pasauliui naują žaidimu˛
kategoriją — kompiuterinius žaidimus. Jau 7-ajame XX a. dešimtmetyje pasirode˙ pirma-
sis interaktyvus (reikalaujantis vartotoju˛ dalyvavimo valdant turin˛i) kompiuterinis žaidi-
mas „Spacewar!“ [1], sudrebinęs tuometiniu˛ kompiuteriu˛ vartotoju˛ pasaul˛i ir pade˙jęs pa-
matus šiuolaikiniams kompiuteriniams žaidimams. „Spacewar!“ — tai pirmoji interaktyvi
kompiuteriu˛ programa, skirta žaisti.
XX-ojo amžiaus 8-ajame dešimtmetyje mokslininku˛ prade˙ta vystyti, 9-ajame amaži-
uje ˛isisavinta ir aktyviai naudota karine˙je sferoje, o 10-ajame dešimtmetyje „namu˛ varto-
tojus“ pasiekusi interneto technologija buvo dar vienas reikšmingas dalykas, pakeitęs tiek
kompiuteriu˛ naudojimo ypatumus, tiek vartotoju˛ ˛ipročius ir poreikius. Bu¯tent šios tech-
nologijos atsiradimas pade˙jo pamatus HTTP1 protokolui (Hyper Text Transfer Protocol,
angl.) irHTML2 kalbai(Hyper Text Markup Language, angl.). HTML—taikalba, aprašanti
turiniopateikimąinternetonaršykle˙je. JosvystymądarXXa. 9-ajamedešimtmetyjeprade˙jo
tuo metu CERN dirbęs fizikas Tim-Bernes Lee. Pirmoji šio standarto specifikacijos [2]
redakcija buvo išleista 1993 m.. De˙l technologiju˛ tolimesnio vystymo, vartotoju˛ poreikiu˛ ir
galimybiu˛ kaitos (remiantis tyrimu˛ [3] duomenimis, Amerikoje interneto prieeigą namuose
1989 m. ture˙jo 15% kompiuteriu˛ savininku˛, 1993 m. — kiek mažiau nei 23% kompiuteriu˛
savininku˛, o 2000 m. — net 51% savininku˛, o 2014 m. Lietuvoje — net 71,8% mieste ir
50,4% namu˛ u¯kiu˛[4]) ne kartą teko atnaujinti standartą. Vienas svarbiausiu˛ atnaujinimu˛
˛ivyko 1996 m., kuomet buvo pristatyta JavaScript3 kalba. Bu¯tent ši (tuomet) naujiena
pakeite˙ visą žiniatinkl˛i iš statinius duomenis vaizduojančios, vienakrypte˙s terpe˙s ˛i dvikryptę
terpę, leidžiančią perduoti duomenis iš serverio klientui ir atvirkščiai[9]. Šiuo metu plačiau-
siai naudojama 5-oji standarto redakcija (HTML5), kuri suteikia galimybes kurti sude˙tingas
programas (taip pat ir žaidimus), galinčias realiu laiku bendrauti serveriu, veikiančias var-
totojo interneto naršykle˙je. Nepaisant to, kad buvo tobulinamos technologijos, veikiančios
vartotojo kompiuteryje, naujove˙s neaplenke˙ ir vartotojui nematomos — serveriu˛ — dalies.
Viena ju˛ — populiarumą jau ˛igijusi[8] „Node.JS“ vykdymo aplinka (ir biblioteka)4, leidžianti
kurti serverines aplikacijas naudojant anksčiau tik interneto naršykle˙je veikusią JavaScript
kalbą.
Šio darbo tikslas — sukurti paprastą keliems asmenims skirto žaidimo demonstracinę
1http://www.hjp.at/doc/rfc/rfc2616.html
2http://www.w3.org/html/
3https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources
4https://nodejs.org/
3
versiją panaudojant HTML5 standarte atsiradusius elementus, suteikiančius galimybę kurti
kompiuterinius žaidimus, bei „Phaser“ žaidimu˛ varikl˛i5.
Uždaviniai
• I˛vardinti HTML4 ir HTML5 skirtumus[5] ir naujoviu˛ pritaikymo žaidimu˛ ku¯rimui
galimybes;
• Susipažinti WebSocket6 technologija ir jos panaudojimo galimybe˙mis komunikacijai
tarp žaide˙ju˛;
• Apžvelgti „Node.JS“ vykdymo aplinką, biblioteką ir „Phaser“ žaidimu˛ varikl˛i;
• Sukurti „Battle City“7 stiliaus žaidimą dviems panaudojant „Phaser“ žaidimu˛ varikl˛i;
• Realizuoti komunikaciją tarp žaide˙ju˛ per tarpin˛i „Node.JS“ server˛i.
Darbo reikšme˙
Š˛idarbąperskaitęsskaitytojas˛igisteorinesžinias,padedančiassukurtiinternetonaršykle˙je
veikiant˛i žaidmą, kur˛i gali žaisti keli asmenys. Taip pat šio darbo skaitytojas supažindina-
mas su naujais elementais, atsiradusiais HTML5 standarte. Be to, skaitytojui pateikiama
„Node.JS“ vykdymo aplinkos ir „Phaser“ žaidimu˛ variklio bei jo funkciju˛ apžvalga. Pasinau-
dojęs prie darbo pride˙tu žaidimo serverio kodu skaitytojas gali paruošti ir paleisti darbo au-
toriaus realizuotą „Battle City“ stiliaus žaidimo demonstracine˙s versijos server˛i. Analogiškai,
skaitytojas, pasinaudojęs prie darbo pride˙tu žaidimo kodu, gali j˛i patalpinti HTTP serveryje
ir linksmai praleisti laiką išbandydamas darbo autoriaus sukurtą žaidimo demonstracinę ver-
siją bei detaliai nagrine˙ti jo realizaciją. Skaitytojas, nore˙damas išbandyti žaidimo demon-
stracinę versiją 2016 m. birželio 1 d. — 2016 m. spalio 1 d. laikotarpiu, gali tai atlikti
tiesiog prisijungiant prie darbo autoriaus talpinamos žaidimo kopijos, pasiekiamos adresu:
http://185.80.129.180.
5http://phaser.io/
6https://tools.ietf.org/html/rfc6455
7https://en.wikipedia.org/wiki/Battle_City_(video_game)
4
1 Metodologija
Penktoji HTML standarto redakcija atneše˙ daug naujoviu˛ interneto svetainiu˛ ku¯re˙jams.
I˛ šią kalbos standarto redakciją ˛itraukti nauji elementai, suteikiantys galimybę atsisakyti
sprendimu˛, iki HTML5 pasirodymo reikalavusiu˛ trečiu˛ju˛ šaliu˛ naršykliu˛ i˛skiepiu˛ (tokiu˛ kaip
Macromedia (ve˙liau — Adobe) Flash8, JAVA appletu˛9). Be to, iš standarto buvo pašalinti
arba pakeisti kai kurie ankstesniame HTML standarte egzistavę elementai (pavyzdžiui font,
frame arba applet)[5]. I˛traukti nauji elementai skirti darbui su grafika (tiek dalinai statine,
tiek dinaminiškai generuojama), medijos (garsinio arba vaizdinio turinio) atku¯rimui.
Pakitus vartotoju˛ naudojimosi internetu ˛ipročiams bei gebe˙jimams, sukurtos naujos pro-
gramavimo sąsajos (application programming interfaces, angl.) turinio valdymui (pvz. tem-
pimo veiksmui atlikti, geografines pade˙ties gavimui, tam dalies svetaine˙s turinio (vartotojo
svetaine˙s arba programos nustatymu˛) saugojimui vartotojo kompiuterio atmintyje).
Daug ˛itakos šiems standarto pakeitimams ture˙jo mobiliu˛ju˛ telefonu˛ evoliucija (išpopu-
liare˙ję „išmanieji“ telefonai, planšetiniai kompiuteriai), kurios technologiniai laime˙jimai leido
atvaizduoti bei apdoroti didesnius duomenu˛ kiekius ir padidino skaičiavimu˛ spartą.
1.1 HTML5 naujove˙s
1.1.1 Canvas elementas
Canvas elementui pamatus pade˙jo korporacijos „Apple“ inžinieriai. Iš pradžiu˛ canvas
elementas buvo tik interneto naršykle˙s variklio „WebKit“ ple˙tinys, kurio paskirtis buvo at-
vaizduoti ˛ivairius valdiklius „Mac OS X“ operacine˙s vartotojo sąsajoje ir „Safari“ naršykle˙s
ple˙tinius. Kiekve˙liaušioelementopalaikymą˛itrauke˙ kitospopuliariausiosinternetonaršykle˙s
— „Opera“, „Firefox“. Sulig „Internet Explorer 9“ beta versijos pasirodymu šis elementas tapo
palaikomu visose populiariausiose naršykle˙se (nors akcentuojama, kad „Internet Explorer 9“
canvas elemento palaikymas yra žymiai „skurdesnis“ nei likusiose)[10].
Canvas elementas sukurtas dinamiškai generuojamo grafikos turinio atvaizdavimui. Pats
turinys generuojamas naudojant skriptines (interneto naršykle˙s interpretuojamas) progra-
mavimo kalbas, tokias kaip JavaScript. HTML5 standartas neturi „savo“ instrukciju˛ rinkinio
grafikos generavimui canvas elemente. Naudojant JavaScript programavimo sąsają galima
kurti ir statini˛ (nejudant˛i), ir animuotą dvimat˛i arba trimat˛i vaizdą (pavyzdžiui grafus ar
paveiksle˙lius).
Žvelgiant iš žaidimu˛ kure˙ju˛ perspektyvos — apie canvas elementas yra vienas pirmu˛ju˛,
˛itrauktu˛ ˛i HTML5 standartą, apie kur˛i pagalvoja ku¯re˙jai. Atsiradus canvas naršykle˙s lange
nebebu¯tina patalpinti aibę div elementu˛, kuriuose talpinami paveiksle˙liai, ir animuoti juos
naudojant ne ką mažesnę aibę CSS (Cascading Style Sheets)10 kodo tam, kad sukurti judesio
efektą. Vietoje to tapo i˛manoma pasinaudoti naujuoju elementu kaip paviršiumi paveiksle˙liu˛
8https://www.adobe.com/products/flash/
9https://docs.oracle.com/javase/tutorial/deployment/applet/
10http://www.w3.org/Style/CSS/Overview.en.html
5
atvaizdavimui ekrane. Abu metodai turi savu˛ privalumu˛ ir tru¯kumu˛ (tačiau ju˛ šiame darbe
nelyginsime). Canvas elementas „palaiko“ judesio (translation, angl.), sukimo (rotation,
angl.), mąstelio keitimo (scaling, angl.) ir optimizavimo (tik matomo vaizdo skaičiavimo
(clipping, angl.)) funkcijas[11].
Priešingai, neinaudojantkitastechnologijas, programuotojuinereikianaudotipapildomu˛
biblioteku˛ tam, kad gale˙tu˛ naudotis Canvas elementu — pakanka modernios (HTML5 stan-
dartą palaikančios) naršykle˙s vaizdo atvaizdavimui ir bet kokokio tekstu˛ redaktoriaus HTML
ir JavaScript kodo rašymui.
Canvas elementas aprašo pavyzdys:
<canvas width="640" height="360" id="drobe"></canvas>
Pateiktas kodas HTML dokumente patalpina 640 pikseliu˛ pločio ir 360 pikseliu˛ aukščio can-
vas elementą ir priskiria jam identifikatoriu˛ „drobe“. Skaitytojui gali kilti klausimas: kokiu
bu¯du galima pasiekti š˛i elementą naudojant JavaScript kalbą. Atsakymas labai paprastas:
var drobe = document.getElementById("drobe");
Svarbu tai, kad norint piešti canvas elemente, pasiekti j˛i nepakanka, mat pats elementas yra
˛ivairiu˛ piešimo programavimo sąsaju˛, kurias programuotojas ir gali panaudoti žaidimams
kurti, konteineris.
var context = drobe. getContext("2d");
Aukščiau pateiktas kodas gauna canvas elemento dvimat˛i kontekstą (piešimo sąsają), kur˛i
naudojant galima piešti, naudojant tris piešimo primityvus: liniją, arką ir kreivę. Sude˙tingos
figu¯rosarformossukuriamosnaudojant„kelius“ (path,angl.) —sekas,sudarytasišišvardintu˛
primityvu˛.
1.1.2 WebGL palaikymas
WebGL (Web Graphics Library)11 – tai JavaScript kalba aprašytu˛ instrukciju˛ rinkinys,
leidžiantisdinamiškaigeneruotiirvaizduotitrimate˙sbeidvimate˙sgrafikosturin˛isuderinamu-
ose˛irenginiuose(kompiuteriuose, planšete˙se, mob. telefonuose, išmaniuosiuosetelevizoriuose
ir žaidimu˛ konsole˙se).
Instrukciju˛ leidžia naudoti ˛iprastini HTML turin˛i, siekiant j˛i pagražinti ar padaryti
interaktyvu˛. Rinkinys pasižymi didele instrukciju˛ vykdymo sparta, nes naudoja ne ˛irenginio
centrin˛i, o grafin˛i procesoriu˛ skaičiavimams atlikti ir yra paremtas OpenGL ES 2.0 stan-
dartu [12]. Savo ruožtu, OpenGL ES yra adaptuota seniai vystomo OpenGL12 standarto
versija („ES“ reiškia, kad standartas pritaikytas ˛iterptine˙ms sistemoms (embedded systems,
angl.)), specialiai sukurta naudoti nedideliuose (arba negalinguose) skaičiavimo ˛irenginiuose,
pavyzdžiui, mobiliuosiuosetelefonuosearbaplanšetiniuosekompiuteriuose. OpenGL ES pro-
11https://www.khronos.org/webgl/
12https://www.opengl.org
6
gramavimo sąsaja naudojama trimate˙s grafikos ku¯rimui ir atvaizdavimui labiausiai paplitu-
siuose — iOS13 ir Android14 — mobiliuosiuose ˛irenginiuose[19].
WebGL sąsają galima naudoti kartu su kitu interneto puslapio turiniu. WebGL turinio
atvaizdavimui naudojamas anksčiau mine˙tas canvas elementas, kuris gali užimti tiek visą
HTML dokumento vietą (vizualinę) arba tik jos dal˛i. Š˛i elementą galima kuo puikiau-
siai ˛iterpti tarp kitu˛ HTML elementu˛ (tokiu˛ kaip div), nurodyti jo poziciją tarp svetaine˙s
sluoksniu˛ (z-index). Šios priežastys suteikia galimybę programuotojams kurti trimačius
žaidimus, panaudojant anksčiau atsiradusius kitus HTML elementus.
Dar vienas šio instrukciju˛ rinkinio pranašumas — kaina. Visa WebGL programavimo
sąsaja ir jos dokumentacija yra pasiekiama (ir naudojama) nemokamai.
Šio instrukciju˛ rinkinio atsiradimas (anskčiau išvardintos instrukciju˛ rinkinio savybe˙s)
paskatino žaidimu˛ ku¯re˙jus pripažinti penktają HTML redakciją kaip žaidimu˛ platformą.
Tam, kad panaudoti WebGL instrukciju˛ rinkin˛i, programuotojui reikia atlikti pateiktus
žingsnius [20]:
1. Sukurti canvas elementą;
2. Gauti canvas elemento trimačio piešimo kontekstą;
3. Inicializuoti peržiu¯ros langą (viewport, angl.);
4. Sukurtibentvienąbufer˛i, kuriamesaugomigeneruojamovaizdoduomenys(dažniausiai
tai bu¯na viršu¯ne˙s);
5. Sukurti bent vieną transformaciju˛ matricą, skirtą apibre˙žti viršu¯niu˛ atvaizdavimui
ekrane;
6. Sukurti bent vieną šeider˛i piešimo algoritmo realizacijai;
7. Inicializuoti sukurtus šeiderius;
8. Piešti.
1.1.3 Application Cache
2007-aisias m. korporacija Google pristate˙ programinę ˛irangą „Google Gears“15. Ku¯re˙ju˛
teigimu ši programine˙ ˛iranga suteike˙ galimybę programuotojams kurti sude˙tingas, interneto
naršykle˙je veikiančias programas, kuriomis galima naudotis net ir be interneto ryšio[21].
„Google Gears“ palaikymas buvo nutrauktas 2011 m., po HTML5 standarto pasirodymo.
Taip nutiko tode˙l, kad ˛i penktąją HTML standarto redakciją buvo ˛itrauktos ir W3C kon-
sorciumo specifikuotos visos „Google Gears“ siu¯lomos funkcijos[21]. Viena ju˛ — interneto
naršykle˙je veikiančios programos duomenu˛ saugojimas vartotojo kompiuteryje su tikslu juos
pasiekti be interneto ryšio.
13http://www.apple.com/ios/
14http://android.com/
15https://developers.google.com/gears/
7
Application cache suteikia galimybę vartotojui naudotis programos funkcionalumu, kuris
nereikalauja interneto ryšio, jau po pirmojo jos paleidimo[22]. Programuotojas tarpusavyje
suderinęs Application cache ir localStorage technologijas, pateiktas HTML5 standarte, gali
sukurtiprogramą, kurisaugoduomenisvartotojokompiuteryjeirsinchronizuojajuossunuo-
toliniu serveriu interneto ryšiui atsiradus. Tai žaidimu˛ ku¯re˙jai gali panaudoti, pavyzdžiui,
žaide˙ju˛, kurie naudojasi žaidimu laikinai nesant interneto ryšiui, rezultatu˛ ˛itraukimui ˛i ben-
drą statistiką (žaide˙ju˛ reitingus).
Tam, kad pasinaudoti Application cache funkcija, programuotojui reikia sukurti bent
vieną Application cache manifest failą. Kiekvienas manifesto failas turi praside˙ti eilute
CACHE MANIFEST (visos raide˙s turi bu¯ti didžiosios). Tokio failo pavyzdys pateiktas
kodo fragmente 1:
CACHE MANIFEST
/css/main. css
/js/main. js
Kodo fragmentas 1: Application cache manifest failo minimalaus turinio pavyzdys.
Programos laikinoji talpykla yra suskirstyta ˛i tris dalis[13]:
• CACHE;
• NETWORK;
• FALLBACK.
Jei programutojoas dalies nenurodo — naudojama numatytoji, CACHE, talpyklos dalis.
NETWORK dalis gali bu¯ti apibre˙žta dviem bu¯dais: arba tiksliai nurodant programos resur-
sus (failus), kuriuos galima pasiekti tik esant interneto ryšiui (kaip pavaizduota Application
cache manifestfailopavyzdyje), arbanaudojantasteriskątam, kadnurodytfailu˛pavadinimu˛
šablonus. Tokio panaudojimo pavyzdys pateiktas kodo fragmente 2:
CACHE MANIFEST
# Manifestas , kuriame nurodytos CACHE ir NETWORK dalys
CACHE:
/index .html
/css/main. css
/js/main. js
NETWORK:
/images/∗.jpg
Kodo fragmentas 2: Application cache manifest failo turinio pavyzdys.
Šiame pavyzdyje nurodoma, kad reikia išsaugoti pagrindini˛ puslapio (index.html) HTML
dokumentą, jo stiliaus (CSS) ir JavaScript kodo failus, ir ˛i saugyklą ne˛itraukti jokio JPG
failo formato paveiksle˙lio. Jei nebu¯tu˛ nurodytas .jpg ple˙tinys — ˛i saugyklą nebu¯tu˛ ˛itrauktas
nei vienas puslapio images direktorijoje esantis failas (pavyzdžiui, skaidrumą palaikantys
8
PNG formato paveiksle˙liai), nebent bu¯tu˛ nurodyta priešingai CACHE dalyje. Pavyzdyje
taip pat matome eilutę, prasidedančią # simboliu — tokiu bu¯du manifesto failuose yra
išskiriami komentarai, kuriuos ignoruoja interneto naršykle˙. Priešingai nei daugumoje pro-
gramavimo kalbu˛, komentarai Application cache manifest failuose užima po visą eilutę (tai
reiškia, kad vienoje negalima nurodyti interneto naršykle˙s interpretuojamos informacijos ir
komentaro). To priežastis — # simbolio palaikymas URL (Uniform Resource Locator)16
adresuose (naršykle˙ gali interpretuoti komentarą kaip vieno iš programos resursu˛ adresą).
Paskutine˙, dar neaptarta, talpyklos dalis — FALLBACK. Vienas esminiu˛ skirtumu˛ tarp
šiosdaliesirjauaptaru˛—internetopuslapio(programos)resursu˛poru˛nurodymasnaudojant
po dvi reiškmes. Pirmoji reikšme˙ skirta nurodyti URL adreso šablonui, kuri˛ naršyklei reikia
atpažinti, o antroji — konkretaus failo, kur˛i reikia pateikti vietoje nurodyto šablono, vietai
nurodyti. Tai gali bu¯ti panaudota žaidimuose, pavyzdžiui, atvaizduojant žaide˙ju˛ rezultatu˛
statistiką. Jeistatistikoslangeyraatvaizduojamasžaide˙jopaveiksle˙lis(avataras),ostatistika
peržiu¯rima nesant interneto ryšiui, žaidimo programutojas gali nurodyti, kad bu¯tu˛ atvaiz-
duojamas bendrinis (laikinai rodomas vietoje tikrojo, žaide˙jo ˛ikelto ˛i server˛i) paveiksle˙lis.
FALLBACK talpyklos dal˛i taip pat galime panaudoti varotoju˛ nukreipimui ˛i tam tikrą
(talpykloje saugomą) puslap˛i tuo atveju, kai ne˙ra pasiekiamo interneto ryšio. Pavyzdžiui,
žaide˙jas nori peržiu¯re˙ti žaidimo dalyviu˛ statistiką laikinai neture˙damas interneto prieeigos —
tokiu atveju j˛i galima nurodyti ˛i statini˛ puslap˛i, kuriame žaide˙jas bus informuotas apie tai,
kad jis ne˙ra prisijungęs prie žaidimo serverio ir negali peržiu¯re˙ti statistikos tol, kol interneto
prieeiga nebus atkurta. Šios skilties paskirtis yra suteikti galimybę programuotojui sukurti
kiek ˛imanoma daugiau programos (puslapio) daliu˛, pasiekiamu˛ nenaudojant interneto ryšio.
Kodo fragmente 3 pateikiamas FALLBACK dalies apibre˙žimas Application cache mani-
fest faile:
CACHE MANIFEST
# Manifestas , kuriame nurodytos CACHE, NETWORK ir FALLBACK dalys
CACHE:
/index .html
/css/main. css
/js/main. js
NETWORK:
/images/∗.jpg
FALLBACK:
/images/avatarai/ /universalus . jpg
/statistika/ /nera_rysio .html
Kodo fragmentas 3: Application cache manifest failo turinio pavyzdys.
16https://www.w3.org/Addressing/
9
Galiausiai, kai programuotojas sukuria manifesto failą, jam reikia informuoti interneto
naršyklęapie šiofailoegzistavimą. Tai atliekamaHTMLdokumentohtml elementenurodant
„manifest“ savybę:
1 <!DOCTYPE html>
2 <html lang="lt" manifest="/manifesto_pavadinimas . manifest">
3 <!−− Puslapio HTML kodas −−>
4 </html>
Kodo fragmentas 4: Application cache manifest failo nurodymas.
Kodo fragmentas 4 sufleruoja, kad manifesto failo pavadinimas gali bu¯ti bet koks. Jei pro-
gramuotojas kuria puslap˛i (programą), sudarytą iš vieno HTML failo — jo darbas, nurodant
Application cache manifest failą, baigtas. Jei puslapis (programa) sudarytas iš keliu˛ failu˛
— kelią, kuriuo galima pasiekti manifesto failą, reikia nurodyti visuose HTML dokumentu-
ose, kuriuose reikia panaudoti laikinąją naršykle˙s talpyklą, arba, tuos HTML dokumentus
nurodyti manifesto faile, kur˛i užkrauna pagrindinis puslapis.
1.1.4 WebSQL
WebSQL17 — tai nauja, ˛i HTML5 standartą ˛itraukta JavaScript kalbos sqsaja. Interneto
naršykliu˛ ku¯re˙jai WebSQL realizacijai dažniausiai naudoja SQLite18 duomenu˛ bazes, tačiau
tai ne˙ra nurodyta HTML5 standarto specifikacijoje[14]. Kodo fragmente 5 patiekiamas
pavyzdys, kaip sukuriama WebSQL duomenu˛ baze˙:
var duomenuBaze = openDatabase(
"failo_pavadinimas",
"0.1" ,
"Duomenu bazes pavadinimas",
1024∗1000,
callback
);
Kodo fragmentas 5: WebSQL duomenu˛ baze˙s inicializacija.
Matome, kad priešingai nei daugumoje SQL (Structured Query Language) tipo duomenu˛
baziu˛, WebSQL duomenu˛ baze˙ sukuriama (ve˙liau — ir pasiekiama) naudojant ne „CRE-
ATE DATBASE“, o „openDatabase“ funkciją. Lentele˙je 1 apibu¯dinti funkcijai pateikiami
parametrai:
17https://www.w3.org/TR/webdatabase/
18https://www.sqlite.org/
10