012345

}w !"#$%&'()+,-./012345
M ASARYKOVA UNIVERZITA FAKULTA INFORMATIKY

Tvorba webových aplikací pro rˇešení logických úloh ˇ B AKALÁ RSKÁ PRÁCE

Martina Chrástková

Brno, jaro 2013

Prohlášení Prohlašuji, že tato bakaláˇrská práce je mým puvodním ˚ autorským dílem, které jsem vypracovala samostatnˇe. Všechny zdroje, prameny a literaturu, které jsem pˇri vypracování používala nebo z nich cˇ erpala, v práci rˇ ádnˇe cituji s uvedením úplného odkazu na pˇríslušný zdroj.

ˇ Vedoucí práce: Mgr. Jiˇrí Rihák ii

Podˇekování Ráda bych podˇekovala rodiˇcum ˚ za podporu bˇehem studia, Petru Žahourˇ kovi za pomoc pˇri testování aplikací a svému konzultantovi Jiˇrímu Rihákovi za ochotu a vstˇrícnost pˇri vedení mé bakaláˇrské práce.

iii

Shrnutí Cílem bakaláˇrské práce bylo zpˇrístupnit vybrané hry ze systému Tutor širšímu okruhu uživatelu. ˚ Dosavadní implementace her v Javˇe vyžadovala po prohlížeˇci spuštˇení zásuvného modulu. Kód byl pˇrepsán do Java Scriptu, cˇ ímž tato nutnost odpadá.

iv

Klíˇcová slova Problem Solving Tutor, JavaScript, jQuery, jQuery UI, logická hádanka, Region Puzzle, Color Maze, Eternity, Pentomina

v

Obsah 1 2 3

4

5

Systém Problem Solving Tutor Analýza problému . . . . . . . Použité technologie . . . . . . 3.1 JavaScript . . . . . . . . . 3.2 jQuery . . . . . . . . . . . 3.3 jQuery UI . . . . . . . . . . 3.4 Nástroje pro vývoj . . . . 3.4.1 Vim . . . . . . . . . 3.4.2 DevTools . . . . . . Hra Rozdˇelovaˇcka . . . . . . . 4.1 Princip hry . . . . . . . . . 4.2 Plán hry . . . . . . . . . . 4.3 Zásobníky barev . . . . . . 4.4 Pˇrebarvování polí . . . . . 4.4.1 Ovládání . . . . . . 4.4.2 Ubírání barvy . . . 4.4.3 Pˇridávání barvy . . 4.5 Kontrola vítˇezství . . . . . 4.5.1 Funkce check() . . Poˇradí testu: ˚ . . . 4.5.2 Normalizace tvaru 4.5.3 Rotace objektu . . 4.5.4 Pˇreklopení objektu 4.5.5 Spojitost . . . . . . Hra Skládaˇcka . . . . . . . . . . 5.1 Princip hry . . . . . . . . . 5.2 Rozmístˇení prvku˚ . . . . . 5.3 Prototypy . . . . . . . . . . 5.4 Rotace . . . . . . . . . . . 5.5 Zrcadlení . . . . . . . . . . 5.6 Funkce fits() . . . . . . . . 5.7 Ovládání . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4 6 7 7 7 7 8 8 8 9 9 10 10 11 11 11 12 12 12 13 13 14 14 14 16 16 17 17 18 18 18 19 1

5.8 Kontrola vítˇezství . . . . . . . . . . . . . . . . . . . . . Hra Dlaždiˇcky . . . . . . . . . . . . . . . . . . . . . . . . . . 6.1 Princip hry . . . . . . . . . . . . . . . . . . . . . . . . . 6.2 Vykreslení . . . . . . . . . . . . . . . . . . . . . . . . . 6.2.1 Herní pole . . . . . . . . . . . . . . . . . . . . . 6.2.2 Pole dlaždic . . . . . . . . . . . . . . . . . . . . 6.3 Ovládání . . . . . . . . . . . . . . . . . . . . . . . . . . 6.4 Kontrola výhry . . . . . . . . . . . . . . . . . . . . . . 7 Hra Barevné bludištˇe . . . . . . . . . . . . . . . . . . . . . . 7.1 Princip hry . . . . . . . . . . . . . . . . . . . . . . . . . 7.2 Vykreslení herního plánku . . . . . . . . . . . . . . . . 7.3 Událost over . . . . . . . . . . . . . . . . . . . . . . . 7.3.1 Funkce calculateMotion() . . . . . . . . . 7.3.2 Funkce addPath() . . . . . . . . . . . . . . . 7.3.3 Funkce removePath() . . . . . . . . . . . . . 7.3.4 Kontrola výhry . . . . . . . . . . . . . . . . . . 7.4 Událost drop . . . . . . . . . . . . . . . . . . . . . . . 8 Logování . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8.1 Úˇcel logu˚ v Problem Solving Tutoru . . . . . . . . . . 8.2 Logování v jednotlivých hrách . . . . . . . . . . . . . 8.2.1 Barevné bludištˇe . . . . . . . . . . . . . . . . . 8.2.2 Rozdˇelovaˇcka . . . . . . . . . . . . . . . . . . . 8.2.3 Skládaˇcka . . . . . . . . . . . . . . . . . . . . . 8.2.4 Dlaždice . . . . . . . . . . . . . . . . . . . . . . 9 Pˇríprava na zaˇclenˇení do systému Problem Solving Tutor 9.1 Nastavení kola . . . . . . . . . . . . . . . . . . . . . . . 9.2 Po výhˇre . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Závˇer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A Obsah pˇriloženého CD . . . . . . . . . . . . . . . . . . . . A.1 Struktura CD . . . . . . . . . . . . . . . . . . . . . . .

6

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20 21 21 22 22 22 23 23 25 25 26 26 26 27 27 27 28 29 29 29 29 29 30 30 31 31 31 32 34 34

2

Úvod Na Fakultˇe informatiky Masarykovy univerzity byl vyvinut systém Problem Solving Tutor (Uˇcitel rˇ ešení úkolu, ˚ pˇrel. autor), který slouží výzkumu v oblasti modelu˚ lidského chování pˇri rˇ ešení logických problému˚ a vztahu mezi zadáním problému a dobou jeho rˇ ešení [3]. Mimo jiné má za cíl zlepšit práci pedagogu˚ zapojením hry do výuky. Pro kvalitu výzkumu je podstatné mít dostateˇcnˇe velký vzorek dat. Nˇekteré z her v systému jsou implementovány jako Java applety – pro jejich spuštˇení je potˇreba mít nainstalován speciální zásuvný modul obsahující JVM (Java Virtual Machine). Tyto hry navíc nepracují správnˇe v kombinaci s open-source implementací Javy, která je dostupná v repozitáˇrích linuxových operaˇcních systému. ˚ Uvedené duvody ˚ mají špatný dopad na kvantitu získaných dat a tím i kvalitu výzkumu. Ve své bakaláˇrské práci pˇrevádím cˇ tyˇri vybrané hry – Rozdˇelovaˇcku, Skládaˇcku, Dlaždiˇcky a Barevné bludištˇe – do jazyka JavaScript tak, aby fungovaly ve všech moderních prohlížeˇcích bez nutnosti dalších zásahu. ˚ Vzhledem k tomu, že ovládání tˇechto her se z velké cˇ ásti skládá z posouvání objektu myší, rozhodla jsem se využít knihovny jQuery UI (hlavnˇe cˇ ásti draggable a droppable. Vˇetšina kódu je není psána pˇrímo v JavaScriptu, ale také s pomocí samotné knihovny jQuery, nebot’ tato zvyšuje efektivitu programování. V nˇekterých hrách pozmˇenuji ˇ ovládání tak, aby bylo pro uživatele pohodlnˇejší a zlepšovalo pocit ze hry. Ve hˇre Rozdˇelovaˇcka pˇridávám do uživatelského rozhraní možnost výbˇeru barvy nejen myší, ale i z klávesnice. Ve Skládaˇcce naopak ubírám tlaˇcítka pro otoˇcení a zrcadlení objektu a pˇrevádím ovládání na obˇe tlaˇcítka myši. Na závˇer pˇrevádím všechny hry do podoby pˇripravené na zapojení do systému Problem Solving Tutor. Jedná se hlavnˇe o interakci skriptu s promˇennými nastavenými zvenˇcí a o volání funkcí, které se nacházejí mimo vlastní skript. Oˇcekává se, že implementace her v JavaScriptu povede ke zvýšení jejich návštˇevnosti a tím i ke zlepšení zpˇetné vazby pro další výzkum a vývoj.

3

Kapitola 1

Systém Problem Solving Tutor Systém Problem Solving Tutor byl vyvinut na Fakultˇe informatiky Masarykovy univerzity. Jeho úˇcelem je získání poznatku˚ v oblasti her rozvíjejících logickou dovednost a následné uplatnˇení v praxi jako doplnˇek pˇri výuce. Obsahuje nejen hry k rozvíjení logiky a schopnosti rˇ ešit problémy, ale i hry zamˇerˇ ené na konkrétní dovednosti z oboru matematiky, informatiky, cˇ eského jazyka apod. Problem Solving Tutor je vystaven na veˇrejnˇe pˇrístupných webových stránkách http://tutor.fi.muni.cz. Po pˇrihlášení do systému je uživateli nabídnut výbˇer hry (obr. 1.1) 1 . Každá hra má úrovnˇe seˇrazeny podle obtížnosti. Po vítˇezství v daném kole je hráˇci podle jeho výkonu (ˇcasu potˇrebného k vyˇrešení úlohy) nabídnuta vhodná obtížnost dalšího kola. Hráˇc si navíc muže ˚ zvolit, chce-li pokraˇcovat jednodušší nebo tˇežší variantou.

Obrázek 1.1: Uživatelské rozhraní Problem Solving Tutor. 1

1. Zdroj: http://tutor.fi.muni.cz/

4

1. S YSTÉM P ROBLEM S OLVING T UTOR Na urˇcení nároˇcnosti další úrovnˇe je kladen duraz, ˚ nebot’ pˇríliš tˇežké úlohy mohou uživatele frustrovat a velmi lehké naopak znudit. Pro stanovení úrovnˇe je využita pˇredpovˇed’ cˇ asu rˇ ešení dané úlohy, která je získána prostˇrednictvím strojového uˇcení [4]. Hra má po otevˇrení vymezenou plochu uprostˇred stránky (obr. 1.2) 2 . Okolní ovládací prvky jsou pro všechny hry stejné. Ovládání je intuitivní a vˇetšinou plnˇe závislé na myši.

Obrázek 1.2: Prostˇredí spuštˇení hry. 2

Bˇehem hraní se vytváˇrejí logovací záznamy. Ty umožnují ˇ zpˇetnˇe urˇcit celý postup rˇ ešení. Po vítˇezném tahu jsou nahrávány na server spolu s cˇ asem splnˇení úkolu. Zde jsou využity k tvorbˇe statistik a dalšímu zpracování. Výsledky slouží k výzkumu v oblasti logických her – jsou zkoumány faktory, které urˇcují obtížnost dané hry, zpusob, ˚ jakým lidé rˇ eší problémy a jiné.

2. Zdroj: http://tutor.fi.muni.cz/

5

Kapitola 2

Analýza problému Hry, jejichž pˇrepracování je cílem mé bakaláˇrské práce, jsou napsány jako Java applety. Pro jejich spuštˇení je potˇreba mít v prohlížeˇci nainstalován zásuvný modul. Duvodem ˚ je to, že program implementovaný v jazyce Java má formu bytekódu, který je urˇcen pro interpretaci virtuálním strojem Java Virtual Machine (JVM). Bez jeho pˇrítomnosti na poˇcítaˇci nelze takový program vubec ˚ spustit, nebot’ Java applet patˇrí mezi aplikace bˇežící na stranˇe klienta. Zásuvný modul založený na Open Java Development Kit (Open JDK) se jmenuje Iced Tea. Používá se standardnˇe v ruzných ˚ linuxových distribucích, napˇr. Fedora, Ubuntu, Gentoo Linux nebo Arch Linux. Bohužel, zmínˇené cˇ tyˇri hry nepracují s tímto modulem správnˇe a na linuxovém stroji jsou tedy nepoužitelné. Je sice možné nainstalovat si i zde Javu od firmy Sun, nelze to ale udˇelat pohodlnˇe z repozitáˇre. Výše jmenovaná omezení zužují okruh potenciálních uživatelu˚ a snižují ˇ tak kvalitu výzkumu. Rešením je implementovat hry znovu v JavaScriptu – jazyce, který má nativní podporu v každém moderním prohlížeˇci.

6

Kapitola 3

Použité technologie 3.1

JavaScript

JavaScript patˇrí mezi objektovˇe orientované jazyky a je urˇcen pro použití ve webových stránkách. Je slabˇe typovaný – promˇenné sice vnitˇrnˇe mají typ, ten ovšem neurˇcuje pˇrímo programátor, ale je odvozen z obsahu v okamžiku pˇriˇrazení hodnoty. JavaScript pracuje na stranˇe klienta, na rozdíl od jiných interpretovaných jazyku˚ (napˇr. PHP). Po získání požadavku na naˇctení stránky je tato stažena ze serveru do klientského prohlížeˇce. Skript samotný muže ˚ být zacˇ lenˇen pˇrímo do HTML stránky jako obsah znaˇcky <script>. Druhou možností je uložit ho do externího souboru s pˇríponou .js a naimportovat uvedením jeho adresy. Po pˇrijetí je skript validován a zkompilován prohlížeˇcem. Vzhledem k navázání na klienta umožnuje ˇ sice odesílat požadavky na server, pˇrímý pˇrístup k nim však nemá [2]. S lokálními soubory z bezpeˇcnostních duvod ˚ u˚ pracovat nesmí.

3.2

jQuery

jQuery je na JavaScriptu založená knihovna, která vznikla pro usnadnˇení výbˇeru prvku v dokumentu a práce s ním. Má snadno nauˇcitelnou syntaxi a umožnuje ˇ programátorovi efektivnˇeji psát robustní kód. jQuery patˇrí mezi tzv. open source software (jeho zdrojový kód je volnˇe dostupný, je možné jej mˇenit a dále distribuovat) a neustále pro nˇej vznikají nové pluginy, které rozšiˇrují jeho funkcionalitu [1].

3.3

jQuery UI

User Interface Library for jQuery (jQuery UI) je knihovna postavená nad jQuery. Nabízí hotová rˇ ešení pro interakci uživatele se stránkou v podobˇe ovládacích prvku, ˚ tzv. widgetu˚ [6]. 7

3. P OUŽITÉ TECHNOLOGIE Pro tuto práci jsem se rozhodla využít prvky Draggable a Droppable, nebot’ nejlépe odpovídají puvodnímu ˚ rozhraní her. Pomocí Draggable ("táhnutelný") lze myší pohybovat s elementem. Do prvku˚ oznaˇcených jako Droppable je možné upustit prvek Draggable. Toto spustí událost drop (upuštˇení), na kterou lze navázat vlastní kód. K dispozici jsou další události, napˇr. aktivace/deaktivace prvku, pohyb Draggable nad prvkem, vytvoˇrení prvku . . . Dále lze nastavit ruzné ˚ vlastnosti, jako je tolerance (jak blízko musí být element pˇri upuštˇení) nebo tˇrída omezující, které prvky lze akceptovat. jQuery má velmi pˇrehlednˇe zpracované API (Application Programming Interface - rozhraní pro programování aplikací) [5].

3.4

Nástroje pro vývoj

3.4.1 Vim Na zaˇcátku jsem stála pˇred volbou, v jakém IDE budu svuj ˚ kód psát. Dosud jsem se seznámila s IDE NetBeans a Eclipse (vývoj v Javˇe), a s QTCreatorem (C++). Výše zminované ˇ IDE se mi zdály v jistém smˇeru pˇríliš komplexní pro použití s tak jednoduchým jazykem a práci s jedním cˇ i dvˇema soubory na projekt. Odradilo mˇe hlavnˇe zdlouhavé naˇcítání aplikace, které je pˇri menších zásazích do kódu nepˇríjemné. Vzhledem ke své volbˇe jsem pˇrišla o možnost doplnování ˇ kódu z knihovny jQuery. Zato jsem pronikla do ovládání zajímavého textového editoru, který je navíc urˇcen pro použití v terminálu (i když existuje i jeho grafická verze GVim). Toto mi pomohlo pˇri vystavení projektu na svuj ˚ fakultní web za úˇcelem testování – pˇri pˇrístupu pˇres ssh klienta na server Aisa jsem byla schopná stránky upravovat stejnˇe pohodlnˇe, jako by byl projekt uložen lokálnˇe. 3.4.2 DevTools Pˇri vývoji jsem použila nástroj DevTools pro ladˇení webových aplikací, obsažený v prohlížeˇcích Google Chrome a Chromium. Umožnuje ˇ nejen nastavit breakpoint a sledovat hodnoty promˇenných JavaScriptu, ale umí napˇríklad zjistit skuteˇcné CSS hodnoty daného elementu. Obdobný nástroj v prohlížeˇci Firefox se jmenuje Firebug. HRY 8

Kapitola 4

Hra Rozdˇelovaˇcka 4.1

Princip hry

Cílem hry Rozdˇelovaˇcka je rozˇclenit herní plán na cˇ ásti stejného tvaru. Akceptuje se libovolné natoˇcení i zrcadlení tvaru. Hráˇc postupnˇe vybarvuje jednotlivá políˇcka šachovnice, jejíž obrys je urˇcen zadáním daného kola (obr. 4.1). Jednotlivé oblasti musí být spojité, tzn. každé políˇcko se musí dotýkat alesponˇ jednou stranou jiného políˇcka stejné barvy. Pˇrebarvování a mazání se provádí kliknutím, pˇríp. tažením myši nad šachovnicí (obr. 4.2). Použije se barva, která je vybraná v pravé cˇ ásti herního pole. Pˇri obarvení již barevného pole se jeho puvodní ˚ barva smaže.

Obrázek 4.1: Herní pole Rozdˇelovaˇcky.

9

ˇ ˇ 4. H RA R OZD ELOVA CKA

Obrázek 4.2: Prubˇ ˚ eh hry.

4.2

Plán hry

Herní plán je u všech her pˇredáván pˇri zahájení pomocí textového rˇ etˇezce. Je potˇreba jej rozparsovat s využitím JavaScriptové funkce split(). Nejprve se oddˇelí poˇcet polí od každé barvy, poté velikost šachovnice a nakonec se do pole fields uloží souˇradnice viditelných políˇcek šachovnice. Všechny údaje jsou poté použity pro vykreslení herního pole.

4.3

Zásobníky barev

Jeden zásobník barev odpovídá jedné bunce ˇ v tabulce #colors (prostˇrední ze tˇrí bunˇek každého rˇ ádku). Barva pozadí je urˇcena tˇrídou .color0dark– .color5dark. Její potomci div reprezentují jednotlivé barevné náboje (jejich poˇcet jsme získali pˇri parsování plánku). Tyto oddíly mají svˇetlejší pozadí, opˇet za nˇej zodpovídá tˇrída prvku: .color0–.color5. Vybraný zásobník je širší než ostatní. Puvodnˇ ˚ e jsem zamýšlela využít widget Selectable jQuery UI. Toto hotové rˇ ešení bohužel nenabízelo možnost zakázat výbˇer více prvku˚ tažením myši, takže jsem použila vlastní funkci. Kolem bunky ˇ samotného zásobníku jsou dvˇe prázdné bunky. ˇ Pokud zásobník není vybrán (má tˇrídu .unselected), pak mají tyto bunky ˇ bílé pozadí – nejsou tedy vidˇet. Pˇri kliknutí na bunku ˇ zásobníku je jeho barva porovnána s obsahem globální promˇenné color. Pokud jsou rozdílné, color je pˇrepsána na hodnotu novˇe zvolené barvy, tˇrída .selected je odstranˇena ze starého a pˇri10


dána aktuálnímu zásobníku. Pro volbu barvy je možné použít také klávesové šipky. Akce je navázána na událost keydown, v tˇele funkce se testuje, která klávesa byla stisknuta, pomocí vlastnosti event.keyCode. Nejprve se všechny zásobníky oznaˇcí jako .unselected, poté se zvýší/sníží hodnota color a podle ní nastaví nový rˇ ádek .selected.

4.4

Pˇrebarvování polí

4.4.1 Ovládání Pˇri kliknutí na prázdné pole se toto pˇrebarví barvou zvoleného zásobníku, pokud jsou v nˇem ještˇe barevné náboje. Pokud má pole již barvu, která ovšem není aktuálnˇe zvolená, kliknutí zpusobí ˚ pˇrebarvení. Pokud jsou barvy shodné, pole se odbarví. Zásobník lze volit kliknutím myši nebo šipkami klávesnice. První možnost je ošetˇrena pomocí jQuery události click na objektu zásobníku. Kód provádˇející pˇrebarvení pole šachovnice je pomocí jQuery navázán na událost mouseover. To umožnuje ˇ hráˇci mˇenit barvu vˇetší oblasti jedním tahem myši. Zárovenˇ musí být levé tlaˇcítko stisknuté. Proto jsem zavedla globální promˇennou mouseMove, která je pˇri stisknutí tlaˇcítka nad šachovnicí nastavena na pravdu, pˇri uvolnˇení tlaˇcítka kdekoli v dokumentu je zmˇenˇena na nepravdu. Její hodnota je testována po vstupu do funkce spuštˇené pˇri mouseover. 4.4.2 Ubírání barvy Pokud je pole pˇred kliknutím již obarvené (a zásobník stále poskytuje barevné náboje), je potˇreba mu odebrat puvodní ˚ barvu bez ohledu na to, jestli mu bude nˇejaká barva navrácena. Zásobníky barev jsou v pamˇeti reprezentovány jako pole counts, jehož prvky jsou poˇcty náboju˚ jednotlivých barev. Index prvku odpovídá cˇ íslu dané barvy. Pˇri ubrání barvy se její poˇcet v tomto poli zvýší o 1. Pomocí puvodní ˚ barvy a tohoto poˇctu je v objektovém modelu dokumentu vyhledáno políˇcko v zásobníku, které se má doplnit - funkcí show() se jeho CSS vlastnost viditelnost zmˇení z hodnoty hidden na visible. Z promˇenné shapes[], která obsahuje id (souˇradnice) polí jednotlivých barevných tvaru, ˚ se odebere identifikátor aktuálního políˇcka. Každý tvar má pouze ty okraje (border), které jej ohraniˇcují zvenku. Pˇri odebírání je tedy tˇreba zkontrolovat, zda odbarvované políˇcko nesousedí 11


s polem stejné barvy – pokud ano, hranici, která nebyla díky právˇe jmenované vlastnosti viditelná je nutno obnovit1 . Okraje uvnitˇr tvaru mají nastavenou šíˇrku 0 px. Pro každé ze cˇ tyˇr sousedních polí (samozˇrejmˇe neplatí doslova pro políˇcka na kraji šachovnice) se zjistí, jestli je obarvené. Pokud ano, šíˇrka 2 px je znovu nastavena pro oba okraje mezi políˇcky - sousedova i odbarveného pole. 4.4.3 Pˇridávání barvy Pokud bylo pˇri kliknutí na políˇcko dost barevných náboju˚ ve zvoleném zásobníku, po odbarvení pole následuje nastavení nové barvy. Nejprve se poslední náboj skryje pomocí funkce hide(), která, stejnˇe jako show(), mˇení hodnotu viditelnosti elementu. Sníží se poˇcet náboju˚ v promˇenné counts a do pole, ve kterém jsou uloženy souˇradnice tvaru zvolené barvy, se pˇridá identifikátor aktuálního políˇcka. Poté se hodnota id pole rozdˇelí funkcí split() na x-ovou a y-ovou souˇradnici, aby bylo možno zjistit identifikátory sousedních polí. Napˇríklad pro pole vpravo od aktuálního je potˇreba x zvˇetšit o 1. Tady nastává drobný zádrhel - funkce split() rozdˇeluje textový rˇ etˇezec a jako taková vrací hodnoty opˇet v podobˇe textového rˇ etˇezce. Vzhledem k tomu, že v JavaScriptu je operátor + pˇretížen jak pro cˇ ísla, tak i pro textové rˇ etˇezce, pouhé pˇriˇctení jedniˇcky by zpusobilo ˚ pˇripsání cˇ íslice 1 na konec. Je tˇreba pˇrevést tuto textovou hodnotu na numerickou. K tomu slouží funkce parseInt(). Pro každé ze sousedních polí se zkontroluje, zda je obarvené zvolenou barvou. Pokud ano, hranice mezi nimi se zruší - okraji (border) jak aktuálního, tak sousedního pole bude nastavena šíˇrka 0 px.

4.5

Kontrola vítˇezství

4.5.1 Funkce check() Po pˇrebarvení pole se zkontroluje, obsahuje-li každá bunka ˇ pole counts 0, tedy jsou-li všechny zásobníky prázdné. Pokud ano, zavolá se funkce check() pro kontrolu správnosti hráˇcova rˇ ešení. První z tvaru˚ uložených v poli shapes je referenˇcní a všechny ostatní se porovnávají vuˇ ˚ ci nˇemu. Je normalizován a uložen v promˇenné zero. Pro 1. V prohlížeˇci Mozilla Firefox se pˇri pˇrebarvování políˇcek obˇcas objevují nechtˇené okraje. Bohužel tomu nejsem schopna zabránit – jedná se zˇrejmˇe o nˇejakou chybu renderování. Ve výpisu CSS je pˇri ladˇení vidˇet, že jejich šíˇrka je skuteˇcnˇe 0 px. Navíc pˇri pˇriblížení obsahu prohlížeˇce tyto chyby zmizí a pˇri zpˇetném oddálení se již neobjeví.

12


všechny ostatní tvary se provádí následující testy, každý zmˇení zkoumaný objekt a jeho normalizovanou formu porovná s polem zero. Pokud se pˇri jakémkoli testu uspˇeje, pokraˇcuje se ihned dalším tvarem. Poˇradí testu: ˚ 1.

puvodní ˚ tvar

2.

pˇreklopení vodorovnˇe

3.

rotace puvodního ˚ tvaru po smˇeru hodinových ruˇciˇcek

4.

rotace tvaru z bodu 3. po smˇeru hodinových ruˇciˇcek

5.


6.

rotace pˇreklopeného tvaru po smˇeru hodinových ruˇciˇcek

7.


8.

rotace tvaru z bodu 7. po smˇeru hodinových ruˇciˇcek Uspˇejí-li všechny testy, kolo se považuje za vyhrané.

4.5.2 Normalizace tvaru Normalizací je myšleno pˇrevedení souˇradnic tvaru na jednotnou formu tak, aby se jednotlivé dlaždice daly navzájem porovnávat. Dlaždice, reprezentována svými souˇradnicemi uloženými v poli, je pˇredána funkci normalize. Nejprve se souˇradnice seˇradí od nejnižší po nejvyšší (podle x, poté podle y) a pak se posunou tak, aby první políˇcko (získané pˇredchozím algoritmem) bylo na poˇcátku soustavy souˇradnic. JavaScript poskytuje funkci sort() pro rˇ azení prvku˚ pole. Pokud není žádoucí alfanumerické uspoˇrádání, lze jí jako argument pˇredat odkaz na funkci, která definuje jiný zpusob ˚ seˇrazení. Tato funkce (sortById()) vrací 0 pro shodné elementy, záporné cˇ íslo, pokud je poˇradí vyhovující, a kladné, je-li potˇreba dané prvky pˇrehodit. Po seˇrazení se hodnoty x-ové a y-ové souˇradnice prvního pole oznaˇcí jako offset. Tento offset se odeˇcte od souˇradnic všech polí. Dlaždice se tak ocitne prvním políˇckem na souˇradnici 0x0. 13


4.5.3 Rotace objektu Rotuje se o 90◦ po smˇeru hodinových ruˇciˇcek kolem prvního políˇcka dlaždice. Pro každé ze zbývajících polí se urˇcí jeho vzdálenost od poˇcáteˇcního pole ve smˇeru x i y. Tyto rozdíly jsou zaznamenány do polí xdiff a ydiff. Do pole rotated se vloží nejprve souˇradnice prvního pole, ostatní jsou zmˇenˇeny následujícím zpusobem: ˚ pro získání x-ové hodnoty se pˇriˇcte k xové souˇradnici poˇcáteˇcního políˇcka y-ový rozdíl (položka z pole ydiff), kdežto odeˇctení x-ové vzdálenost (prvek z xdiff) od y-ové souˇradnice prvního pole nám dá hodnotu y. Algoritmus tedy bere vzdálenost libovolného políˇcka od poˇcáteˇcního a tuto vzdálenost pouze nanese v jiném smˇeru (viz obr. 4.3 a 4.4 - svˇetlé pole je rotované kolem tmavého). 4.5.4 Pˇreklopení objektu Pˇreklopení objektu podle svislé osy zajišt’uje funkce flip(). V souˇradnici každého políˇcka je x-ová hodnota vynásobena -1, y-ová zustává ˚ zachována.

Obrázek 4.3: Algoritmus rotace: zjištˇení vzdáleností od poˇcáteˇcního pole.

4.5.5 Spojitost Algoritmus pro zjištˇení spojitosti pracuje jen s prvním tvarem, nebot’ se provede jen tehdy, pokud ostatní tvary prošly všemi testy a tudíž jsou shodné s prvním. 14


Obrázek 4.4: Algoritmus rotace: nanesení vzdáleností v jiném smˇeru. Do globální promˇenné neighbours se nejprve vloží souˇradnice prvního políˇcka tohoto tvaru. Postupnˇe se pˇridávají sousední stejnˇe obarvená pole. Po skonˇcení je poˇcet takto nalezených sousedu˚ porovnán s poˇctem polí prvního tvaru. Pokud jsou ruzné, ˚ existují políˇcka, která nejsou propojena s prvním, a tvar je tedy nespojitý. Funkce findNeighbours() má za úkol naplnit globální pole neighbours identifikátory políˇcek, která sousedí s polem, jež je funkci pˇredáno jako argument. Pro každého ze cˇ tyˇr sousedu˚ aktuálního pole je testováno, jestli je souˇcástí tvaru (který je také pˇredán jako argument) a zda pole ještˇe nebylo pˇridáno do pole neighbours. Pokud je podmínka splnˇena, identifikátor pole se uloží do pomocného pole temp. Nakonec se toto pole slouˇcí s promˇennou neighbours pomocí funkce jQuery merge(). Pro všechna políˇcka, která byla v tomto pruchodu ˚ získána (a tudíž jsou uložena v temp), se nakonec rekurzivnˇe volá funkce findNeighbours(). Algoritmus tedy pracuje na principu procházení grafu do šíˇrky.

15

Kapitola 5

Hra Skládaˇcka 5.1

Princip hry

Cílem hry Skládaˇcka je umístit všechny dlaždice, které se skládají z nˇekolika polí, na šachovnici tak, aby ji zcela vyplnily. Šachovnice má ruzný ˚ tvar podle zadání daného kola (obr. 5.1). Dlaždice se posouvají myší. Pˇri kliknutí bez pohybu se objekt otoˇcí ve smˇeru hodinových ruˇciˇcek. Kliknutí pravého tlaˇcítka myši vyvolá zrcadlení kolem svislé osy. Pokud se dlaždice ocitne na nesprávném místˇe, vrátí se do své výchozí pozice vpravo od šachovnice (obr. 5.2).

Obrázek 5.1: Herní pole Skládaˇcky.


16

ˇ 5. H RA S KLÁDA CKA

5.2

Rozmístˇení prvku˚

Puvodnˇ ˚ e bylo mým zámˇerem uložit dlaždice do samostatné tabulky vpravo od šachovnice. Jednotlivým políˇckum ˚ šachovnice by byla pˇriˇrazena tˇrída Droppable a dlaždicím draggable. Bohužel však pˇri upuštˇení dlaždice nebylo možné urˇcit, nad kterými poli se právˇe nacházela. Aktivovalo se sice jedno z políˇcek pod dlaždicí, ale jeho pozice se lišila tvar od tvaru. Proto jsem zvolila jiné rˇ ešení. Dlaždice i šachovnice jsou potomkem téže znaˇcky
. Umístˇení dlaždic do tabulky je simulováno s využitím absolutní pozice vzhledem k levému hornímu rohu rodiˇce. Výpoˇcet je naznacˇ en na obr. 5.3.

Obrázek 5.3: Výpoˇcet pozice dlaždic.

5.3

Prototypy

Pˇri vykreslování dlaždic i políˇcek šachovnice je využito prototypování. Jde o techniku, která nahrazuje to, co JavaScriptu po objektové stránce chybí – tˇrídy. Jako konstruktor se použije obyˇcejná funkce s názvem "tˇrídy"a parametry. Atributy se definují i volají pomocí klíˇcového slova this. Metody jsou zapsány jako atributy, jejichž hodnotou je funkce. Instance objektu se volá podobnˇe jako napˇr. v Javˇe: var instance = 17


new class(param1, param2). Po vytvoˇrení takového objektu lze pˇristupovat k jeho promˇenným i metodám pˇres teˇckovou notaci. Ve hˇre jsou využity prototypy pro abstrakci políˇcek šachovnice: Field a dlaždic: Tile. Políˇcka znají svoje souˇradnice, viditelnost a dlaždici, jíž je pole zrovna obsazeno. U dlaždic se zaznamenává domovská pozice (v pixelech) a další atributy nutné pro vykreslení, hlavnˇe však metody pro rotaci a zrcadlení dlaždice, vykreslení a pˇresun na výchozí umístˇení.

5.4

Rotace

Rotaci dlaždice zajišt’uje metoda jejího prototypu. Tvar je urˇcen textovou promˇennou, kdy x odpovídá vykreslenému a teˇcka skrytému poli, a údaji o výšce a šíˇrce. Pˇri volání tile.rotateRight() je tento rˇ etˇezec pozmˇenˇen a výška prohozena se šíˇrkou. ˇ ezec tvaru je nejprve zapsán do pomocného pole. Každé jeho políˇcko Retˇ reprezentuje jeden rˇ ádek tvaru a obsahuje pole jednotlivých znaku. ˚ Následnˇe se tyto pˇridávají k prázdnému rˇ etˇezci v následujícím poˇradí. Zaˇcíná se nultým prvkem posledního rˇ ádku, postupuje se takto po nultých prvcích všech rˇ ádku˚ až k poˇcáteˇcnímu. Inkrementuje se poˇradí prvku a pokraˇcuje dále, konˇcí se posledním znakem poˇcáteˇcního rˇ ádku. Po uložení nových hodnot atributu˚ se volá metoda pro znovuvykreslení dlaždice (smaže se obsah odpovídající tabulky a vykreslí podle aktuálních atributu˚ instance).

5.5

Zrcadlení

Zrcadlení se provádí také transformací rˇ etˇezce, který urˇcuje tvar. Znaky se zkopírují do pomocného pole shodného s tím, jež se použilo v pˇrípadˇe rotace a odtud se zapisují zpˇet do vyprázdnˇené promˇenné. Nejprve se zapíší znaky nultého rˇ ádku v opaˇcném poˇradí, takto se postupuje pˇres všechny rˇ ádky až k poslednímu. Poté je dlaždice pˇrekreslena podle nových hodnot atributu. ˚

5.6

Funkce fits()

Funkce fits(id) zjišt’uje, zda se objekt nachází na akceptovatelném místˇe (jestli není nad neviditelnými nebo obsazenými políˇcky, pˇrípadnˇe zda nepˇresahuje ven ze šachovnice). Musí být zavolána po každém pˇresunu a také každém otoˇcení nebo zrcadlení objektu, nebot’ dlaždice mohou mˇenit tvar, 18


i pokud leží na šachovnici. Jako parametr se pˇredává id dlaždice, podle nˇej je vyhledána jak v seznamu instancí Tile, tak v objektovém modelu dokumentu. Postupnˇe se prochází seznam instancí Field, dokud se nenajde pole šachovnice, které by bylo od dlaždice vzdáleno nejvýše polovinu délky strany políˇcka. Neníli žádné takové nalezeno, umístˇení není akceptováno a dlaždice je odeslána na domovskou pozici (tile.goHome()). Pokud se takové pole nalezne, pracuje se s ním dále (jde o políˇcko pod levým horním rohem dlaždice). Podle tvaru dlaždice se od tohoto políˇcka dopoˇcítají pole, která jsou pod ním. Tato jsou testována na viditelnost a obsazenost. Je-li pole neviditelné, není pozice akceptována stejnˇe jako v pˇrípadˇe, že je obsazeno nˇekým jiným, než aktuální dlaždicí. Je-li pˇri dopoˇcítávání dosaženo políˇcka mimo šachovnici, jde rovnˇež o nevyhovující stav. Projde-li dlaždice testy jako správnˇe umístˇená, je jí nastavena pozice, která se získá z atributu pozice políˇcka pod levým horním rohem dlaždice. Pokud neprojde, je odeslána na výchozí místo. V této funkci se rovnˇež instancím políˇcek šachovnice nastavuje atribut guest, v nˇemž je zaznamenáno id dlaždice, kterou je pole obsazeno, nebo -1, pokud je prázdné. Každá dlaždice obsahuje atributy fieldX a fieldY, které nesou sourˇ adnice (v rámci šachovnice, ne v pixelech) levého horního políˇcka pod sebou. Pokud není na šachovnici, jejich hodnota je nastavena na -1. V posledním pˇrípadˇe se po vstupu do fits() zavolá funkce removeGuest(tile). Zde se z instancí polí odstranuje ˇ id dané dlaždice z atributu guest. Procházena jsou políˇcka poˇcínaje tím, jež je urˇceno ve fieldX, fieldY dlaždice. Dále je zkoumána oblast velikosti cˇ tverce, jehož strana je dána vˇetší hodnotou z dvojice šíˇrka–výška dlaždice, nebot’ dlaždice mohla být pˇred voláním funkce fits() rotována. Tímto zpusobem ˚ se id dlaždice odstraní ze všech polí, na kterých tato pˇredtím ležela. Pokud je v tˇele funkce fits() vyhodnocena jako správnˇe umístˇená, na jejím konci jsou nastaveny její atributy fieldX a fieldY a políˇckum ˚ pod jejím tvarem je do atributu guest vloženo její id.

5.7

Ovládání

Ovládání bylo oproti puvodní ˚ verzi programu, která obsahovala grafická tlaˇcítka a možnost využití kláves, pˇrevedeno pouze na tlaˇcítka myši – levé pro otoˇcení dlaždice vpravo a pravé pro horizontální zrcadlení. Toto by mˇelo uživateli zjednodušit a zrychlit práci. 19


Otoˇcení se spustí jen tehdy, pokud s objektem nebylo pohnuto. Pˇri stisknutí levého tlaˇcítka myši nad dlaždicí (událost mousedown) se promˇenná mouseMove nastaví na nepravdu. Jestliže se poté s myší pohne (událost mousemove), zmˇení se na pravdu. Po uvolnˇení tlaˇcítka se spustí událost click – zde probíhá otáˇcení. Pokud s objektem nebylo pohnuto (zkontroluje se zmínˇená promˇenná), vyhledá se odpovídající prototyp v seznamu dlaždic a je na nˇem zavolána metoda rotateRight(). Vzhledem k tomu, že otoˇcení lze zavolat i nad dlaždicí, která se nachází na šachovnici, je po otoˇcení vždy zavolána metoda fits(), která ji odešle na její domovskou pozici, pokud se nachází nad neviditelnými nebo obsazenými poli. Zrcadlení se provádí hned pˇri stisknutí tlaˇcítka myši: pomocí promˇenné event.which lze zjistit, o které tlaˇcítko jde. Následnˇe je opˇet vyhledán prototyp dlaždice a zavolána jeho metoda mirrorHorizontal(). Pohyb myši není podstatný, nebot’ knihovna Draggable implementuje posouvání s objektem jen pro levé tlaˇcítko.

5.8

Kontrola vítˇezství

Po každém úspˇešném upuštˇení dlaždice (pˇríp. rotaci cˇ i zrcadlení) je volána funkce check(), která zjišt’uje, bylo-li dosaženo cíle hry. Zde se projdou všechny instance Field. Pokud je hodnota atributu guest jakéhokoli viditelného pole -1, pak šachovnice obsahuje neobsazené políˇcko a hra není ukonˇcena. V opaˇcném pˇrípadˇe je zavolána metoda after_win().

20

Kapitola 6

Hra Dlaždiˇcky 6.1

Princip hry

Dlaždiˇcky jsou známé také pod názvem Eternity. Cílem je poskládat dlaždice na šachovnici (obr. 6.1) tak, aby obrázky na sousedních kusech navazovaly (obr. 6.2). Šachovnice je vždy obdélníkového nebo cˇ tvercového tvaru. Dlaždice lze posouvat myší a otáˇcet kliknutím. Je možné je upustit na jakékoli pole ze šachovnice i z tabulky výchozího umístˇení.

Obrázek 6.1: Herní pole Dlaždiˇcek.


21

ˇ 6. H RA D LAŽDI CKY

6.2

Vykreslení

6.2.1 Herní pole Nejprve se jméno kola rozparsuje na jednotlivé informace - výšku a šíˇrku ˇ ezec udávající nastavení (plan) je šachovnice, poˇcet barevných vzoru. ˚ Retˇ rozdˇelen na zadání pro jednotlivé dlaždice. Podle získaných údaju˚ je šachovnice vykreslena formou tabulky, jejímž bunkám ˇ je pˇridˇelena tˇrída droppable. Atributy x a y obsahují údaje o poloze políˇcka. 6.2.2 Pole dlaždic Puvodní ˚ hra mˇela dlaždice na poˇcátku rozmístˇené pˇres celou hrací plochu, nˇekteré kameny pˇrekrývaly i hrací pole. Podle mého názoru je matoucí, když není na první pohled poznat, že dlaždice je nesprávnˇe umístˇena (napˇr. leží pod ní otvor v šachovnici). Z tohoto duvodu ˚ jsem zvolila jiný koncept - dlaždice mají svou domovskou pozici, na kterou se pˇri špatném umístˇení vracejí. Pole pro umístˇení dlaždic je vykresleno s využitím stejných parametru˚ jako herní šachovnice. Každé políˇcko je navíc rodiˇcem elementu
. Dlaždice jsou reprezentovány prototypem Tile. Ten obsahuje informaci, z jakých vzoru˚ je kus složen (vˇcetnˇe natoˇcení vzoru) ˚ a metody pro vykreslení do odpovídajícího prvku
a rotaci objektu na obˇe strany. Vzory jsou reprezentovány cˇ íslem 0–8, pˇriˇcemž 8 znamená bez vzoru. Vykreslení dlaždice se dˇeje pomocí metody redraw() objektu Tile. Nejprve se v objektovém modulu dokumentu vyhledá pˇríslušný element
(jehož id koresponduje s id instance) a všichni jeho potomci se odstraní. Poté se dlaždice skládá z nˇekolika obrázku˚ (obr. 6.3).

Obrázek 6.3: Souˇcásti k sestavení dlaždice. Pokud objekt obsahuje alesponˇ jednu prázdnou oblast, do prvku
22


se vloží šedý obrázek. Dále se projdou atributy up, right, down a left a pokud je jejich hodnota menší než 8, pˇridají se další obrázky odpovídající daným vzorum. ˚ Natoˇcení obrázku˚ se provádí pˇridˇelením nˇekteré z CSS tˇríd imgRight, imgDown nebo imgLeft. Nakonec se pˇridá obrázek s motivem kˇríže. Všechny obrázky mají stejnou velikost a kromˇe šedého obsahují pru˚ hledné oblasti tak, aby byly vidˇet vrstvy pod nimi.

6.3

Ovládání

Dlaždice se natáˇcejí kliknutím - pro otoˇcení po smˇeru hodinových ruˇciˇcek levé tlaˇcítko, pravé pro opaˇcný pohyb. První pˇrípad se obslouží ve funkci spojené s událostí click. Zárovenˇ je žádoucí zajistit, aby se dlaždice neotoˇcila, pokud se s ní pohne. Proto je na zaˇcátku pohybu s objektem draggable nastavena promˇenná mouseMove na pravdu, na konci se zmˇení na nepravdu (ošetˇreno pomocí vlastností draggable start a stop). Po kliknutí se tedy otoˇcení nespustí, pokud tato promˇenná neprojde testem. Stisknutí levého tlaˇcítka ovšem za bˇežných okolností vyvolá kontextovou nabídku – toto chování je potˇreba potlaˇcit. Na událost contextmenu se tedy naváže funkce, jejíž návratovou hodnotou je false. Pˇri stisknutí tlaˇcítka myši (mousedown) potom testujeme, zda bylo stisknuto pravé tlacˇ ítko, tedy je-li hodnota event.which rovna 3. V obou pˇrípadech se nejprve zjistí id prvku, na který bylo kliknuto. S jeho pomocí se nalezne odpovídající instance Tile. Zavolá se její metoda pro natoˇcení (rotateLeft() nebo rotateRight()) a potom pro pˇrekreslení (redraw()). Pokud je poˇcet upuštˇení dlaždic do políˇcek (drop) roven poˇctu dlaždic, zjistí se, byly-li splnˇeny podmínky pro dosažení vítˇezství. Od toho okamžiku se výhra kontroluje po každém upuštˇení i natoˇcení dlaždice.

6.4

Kontrola výhry

Nejprve se v cyklu projdou všechna pole šachovnice. Pokud se zjistí, že jakákoli bunka ˇ tabulky nemá žádného potomka (funkce children() vrací prázdné pole), kontrola se okamžitˇe pˇreruší. Pro detekci výhry je potˇreba zjistit, jestli obrázky na sousedních polích navazují, tedy jsou-li sousedící vzory shodné. Zaˇcíná se od levého horního rohu. Podle id elementu
dlaždice se 23


vyhledá odpovídající instance Tile. Vzor v pravé cˇ ásti se porovná se vzorem v levé cˇ ásti sousední dlaždice, tedy tile0.right == tile1.left. Obdobným zpusobem ˚ se dlaždice levého horního rohu porovná s dlaždicí pod sebou. Uvedený postup se aplikuje pro všechna pole kromˇe posledního sloupce a poslední rˇ ady. U sloupce se kontrola provádí jen smˇerem dolu, ˚ poslední rˇ ada porovnává smˇerem doprava (obr. 6.4).

Obrázek 6.4: Smˇer procházení šachovnice pˇri kontrole výhry.

24

Kapitola 7

Hra Barevné bludištˇe 7.1

Princip hry

Barevné bludištˇe má hrací desku ve tvaru šachovnice s ruznˇ ˚ e obarvenými poli (obr. 7.1). Panáˇcek má za úkol dostat se z levého spodního rohu do pravého horního. Musí pˇritom projít stejným poˇctem polí od každé barvy, bílá se nepoˇcítá. Panáˇcek se posouvá tažením myši, pˇrístup má jen na pole, kterými ještˇe neprošel. Na pravé horní pole mu vstup není umožnˇen, dokud nesplní podmínku pro vítˇezství (obr. 7.2).

Obrázek 7.1: Herní pole Barevného bludištˇe.


25

7. H RA B AREVNÉ BLUDIŠT Eˇ

7.2

Vykreslení herního plánku

ˇ ezec se zadáním plan obsahuje cˇ ísla barev políˇcek. Podle nich jsou bunRetˇ ˇ kám tabulky pˇri vykreslení pˇriˇrazeny CSS tˇrídy: color0 - color4 pro barevná políˇcka, flag pro pole s vlajkou. Do levého dolního rohu je vložen obrázek panáˇcka, kterému je pˇridˇelena tˇrída draggable, jeho pohyb je pomocí vlastnosti containment omezen jen na herní pole. Každé políˇcko je tˇrídy droppable, což umožnuje ˇ pˇri upuštˇení panáˇcka do pole volat vlastní kód. Na poˇcátku je všem polím deaktivována vlastnost droppable, kromˇe dvou políˇcek kolem levého dolního rohu. Id dosažitelných polí jsou uložena v poli motion. Vedle herního plánku je tabulka poˇcítaˇce barev. Poˇcty prošlých barev jsou uloženy v poli counts.

7.3

Událost over

V obsluze události over (pˇrejetí figurky nad políˇckem) je rˇ ešen veškerý pohyb panáˇcka. Pokud id aktuálního pole není dosažitelné (tedy není obsaženo v poli motion), nic se neprovede. V opaˇcném pˇrípadˇe se aktuální políˇcko prohlásí za nového rodiˇce panáˇcka - jeho souˇradnice se vloží do promˇenných x a y. Bývalý rodiˇc se uloží do oldX a oldY. Pole path obsahuje sekvenci id prošlých polí. Pokud je jeho délka 1 (jsme na zaˇcátku), políˇcko se pˇridá do cesty pomocí funkce addPath(). Ve funkci resolvePath() se zjistí, jestli po cestˇe couváme (tzn. je-li id políˇcka na pˇredposledním místˇe seznamu path). Podle výsledku zavoláme bud’ addPath() nebo removePath() pro odebrání pole z cesty. Pomocí funkce text() v bunkách ˇ tabulky se aktualizuje výpis prošlých barev, získáme je z promˇenné counts. 7.3.1 Funkce calculateMotion() Nyní je potˇreba pˇrepoˇcítat, na která pole bude panáˇcek z nové pozice moci vstoupit. Promˇenná motion se nejprve smaže (nastavením délky na 0). Poté se projdou všechna cˇ tyˇri pole okolo. Pokud není políˇcko za hranicí herního plánku, jeho id se pˇridá do motion. Pokud se nˇekteré z id polícˇ ek v motion nachází i v path, je smazáno (s výjimkou pˇredposledního záznamu v path, který se používá pro couvání). 26

7. H RA B AREVNÉ BLUDIŠT Eˇ Pokud se panáˇcek nachází 1 krok od cíle, zkontroluje se, jestli je splnˇena podmínka výhry. Projdou se všechny hodnoty v counts. Pokud jsou totožné, pole s vlajkou se také pˇridá do motion. Tímto je zajištˇeno, že na poslední pole nelze stoupnout, dokud jsou poˇcty barev rozdílné. 7.3.2 Funkce addPath() Do path se vloží id aktuálního domova panáˇcka podle hodnoty v x a y. Vypoˇcítá se poˇradí políˇcka v rˇ etˇezci zadání - zjistí se jeho barva. Inkrementuje se pˇríslušné pole v counts. Následuje vykreslení stop. Stopy jsou uloženy jako cˇ ásteˇcnˇe pruhledné ˚ obrázky. Tyto jsou pojmenovány jako N.png pro stopy jdoucí na sever do pulky ˚ pole, NE.png pro stopy, které smˇerˇ ují na sever a potom na východ, atd. Vykreslení obrázku˚ je zajištˇeno pˇridˇelením pˇríslušné CSS tˇrídy, napˇr. NE. Sekvence jejich názvu˚ se ukládá do pole feet. Pokud se jde na sever (oldY < y), stopy se z minulého políˇcka smažou – odebere se tˇrída, která je jako poslední ve feet. K jejímu názvu se nakonec pˇripojí ’N’ a poli se pˇridˇelí tato tˇrída. Do feet se pˇridá tˇrída N a nastaví se aktuálnímu políˇcku. Obdobnˇe se postupuje pro ostatní smˇery. Po prvním kroku hry je potˇreba použít speciální obrázky, které zaˇcínají od prostˇredku políˇcka - oznaˇceny jsou N1 a E1. 7.3.3 Funkce removePath() Pˇri couvání se z path odebere poslední záznam. Pomocí souˇradnic mazaného pole se jeho barva vyhledá v rˇ etˇezci zadání. Poˇcet této barvy se v poli counts sníží o 1. Minulému i souˇcasnému poli jsou odebrány odpovídající tˇrídy uložené ve feet. Poslední hodnota v tomto poli je smazána a pˇredposlední nahrazena svým prvním písmenem (jde vždy o pole se dvˇema smˇery, napˇr. NE, zachován je tedy jen smˇer do pole, nikoli ven z nˇej). Tato tˇrída je nastavena aktuálnímu políˇcku. Pokud jde o návrat na startovní pozici, rˇ ešení je lehce odlišné – obˇema políˇckum ˚ se stopami se tˇrídy odeberou a obsah promˇenné feet se smaže. 7.3.4 Kontrola výhry Kontrola je zajištˇena již pˇri pˇrepoˇcítávání motion. Pokud se tedy panácˇ ek nachází nad cílovým polem, znamená to výhru. Po výherním tahu se 27

7. H RA B AREVNÉ BLUDIŠT Eˇ draggable objektu odebere možnost pohybu nastavením volby destroy.

7.4

Událost drop

Událost drop se provede pˇri upuštˇení prvku do pole, tedy až po události over. Pokud jde o políˇcko, na které se smí vstoupit, vloží se do nˇej element panáˇcka, jinak se umístí do pˇredposledního pole uloženého v path. Nakonec se nastaví atributy left i top obrázku na 0. Duvodem ˚ je to, že draggable do nich ukládá informaci, o kolik bylo s objektem pohnuto vzhledem k puvodní ˚ pozici. Vzhledem k tomu, že domovská pozice je momentálnˇe v jiném, než puvodním ˚ políˇcku, panáˇcek by se posunul o tento offset od nového umístˇení, což je nežádoucí.

28

Kapitola 8

Logování 8.1

Úˇcel logu˚ v Problem Solving Tutoru

Pˇri každém hráˇcovˇe tahu je do logovacího rˇ etˇezce zaznamenána informace, která tah pomáhá zpˇetnˇe vysledovat, a odesílá se na server. Kromˇe zpˇetného vystopování tahu˚ je cílem zaznamenat takové informace, které mohou být pro statistické zpracování výsledku˚ zajímavé.

8.2

Logování v jednotlivých hrách

Log q se odesílá zavoláním externí funkce sendDataToInterface(q), zasílá se pomocí HTTP metody GET na adresu instance.PHP. Výherní tah se vždy oznaˇcí pˇriˇretˇezením win=1. 8.2.1 Barevné bludištˇe Hra Barevné bludištˇe má obsluhu tahu˚ rozdˇelenu mezi addPath() a removePath(). Sem se také umístí prubˇ ˚ ežné logování. Je vytvoˇren logovací rˇ etˇezec z promˇenných session_id, session_hash, move_number, move a direction. Hodnota prvních dvou je získána externˇe. Move_number je poˇradí tahu, promˇenná je vždy pˇred odesláním inkrementována. Move obsahuje popis tahu ve formátu kam<-odkud (id polícˇ ek). Oproti pˇredchozí verzi hry jsem pˇridala záznam o tom, je-li tah mazáním (direction=backward) nebo pˇridáváním cesty (direction=forward). Uvedené informace mohou ve statistickém zpracování pomoci urˇcit míru obtížnosti zadání. 8.2.2 Rozdˇelovaˇcka Formát logování je shodný s Barevným bludištˇem. Move je ve tvaru id: nováBarva <- puvodníBarva. ˚ Tak lze urˇcit, na kterém poli a jak se mˇenila barva. 29

8. L OGOVÁNÍ Poslední údaj jsem zahrnula, nebot’ z nˇej lze snadno urˇcit, kolikrát se hráˇc zmýlil. Vzhledem k tomu, že v logu jsou zahrnuty informace o konkrétních barvách, výzkum by mohl provˇerˇ it, jestli alesponˇ cˇ ást populace (pravdˇepodobnˇe s nˇekterou formou barvosleposti) chybuje cˇ astˇeji vzhledem k urcˇ ité barvˇe. Výsledek by se dal využít pro úpravu her tak, aby vyhovovaly širšímu okruhu uživatelu. ˚ 8.2.3 Skládaˇcka Rozdíl oproti pˇredchozím hrám je hlavnˇe v tom, že tu není jen jeden druh tahu: dlaždici lze bud’ modifikovat, nebo s ní pohnout. Promˇenná action tedy urˇcuje, co se s dlaždicí stalo. Move má formát kam <- odkud a v pˇrípadˇe modifikace dlaždice má mírnˇe odlišný význam. Pokud je dlaždice napˇríklad po rotaci vyhodnocena jako špatnˇe umístˇená a vrátí se na výchozí pozici, lze to poznat z move: kam bude mít hodnotu 0. Pro jiné než domovské pozice se použije id políˇcka pod levým horním rohem. 8.2.4 Dlaždice U hry dlaždice byly do promˇenné action vybrány následující hodnoty: left a right pro otoˇcení, move pro pohyb dlaždice, switch pro výmˇenu dvou kusu. ˚

30

Kapitola 9

Pˇríprava na zaˇclenˇení do systému Problem Solving Tutor 9.1

Nastavení kola

Zadání pˇríslušné úrovnˇe hry bude pˇredáno PHP skriptem do promˇenné plan. Stejnˇe tak se nastaví session_id a session_hash, které jsou potˇrebné pro identifikaci logu. ˚

9.2

Po výhˇre

Po výhˇre se naposledy odešle logovací záznam s pˇríznakem výhry (win=1). Zavolá se metoda after_win(), která je spoleˇcná pro všechny hry. Postará se o skrytí tlaˇcítek Nový pokus a Zkusit novou úlohu. Naopak se zviditelní oddíl, který ukazuje statistiky cˇ asu˚ rˇ ešení této úlohy, údaje o vlastním cˇ ase a nabídku dalšího postupu. Dále je u všech her nutné znemožnit jakýkoli další postup. Typicky jsou prvky draggable deaktivovány a všechny selektory, které se používají pro spuštˇení událostí myši a klávesnice se odeberou. Pˇrípadnˇe se nastaví pˇríznak won, který lze testovat pˇri vstupu do funkcí.

31

Kapitola 10

Závˇer Cílem této bakaláˇrské práce bylo provést analýzu problému souˇcasného rˇ ešení vybraných her Rozdˇelovaˇcky, Skládaˇcky, Dlaždiˇcek a Barevného bludištˇe a uskuteˇcnit návrhy na zlepšení. Všechny hry byly z puvodní ˚ implementace (Java applet) pˇrevedeny do kódu v jazyce JavaScript. Pˇri testování se ukázalo, že ovládání nˇekterých her by mohlo být realizováno lépe, a proto bylo upraveno tak, aby hráˇci zjednodušilo práci. Hry jsou nyní pˇripraveny na zavedení do systému Problem Solving Tutor. Provedené úpravy by mˇely po nasazení na server vést ke zvýšení návštˇevnosti uvedených her a tímto ke zkvalitnˇení výzkumu v oboru logických hádanek. Na tuto práci by bylo možné navázat pˇrevedením ostatních her, které bˇeží jako Java applety (Minotaurus, Robot Karel) také do JavaScriptu s využitím výše uvedených postupu. ˚

32

Literatura [1] J. Chaffer and K. Swedberg. Learning jQuery (3rd Edition). Packt Publishing Ltd., 2011. [2] D. Goodman, M. Morrison, and P. Novitski. JavaScript Bible (7th Edition). Wiley, 2010. [3] P. Jarušek and R. Pelánek. Analysis of a simple model of problem solving times. In Proc. of Intelligent Tutoring Systems (ITS), volume 7315 of LNCS, pages 379–388. Springer, 2012. [4] P. Jarušek and R. Pelánek. A web-based problem solving tool for introductory computer science. In Proceedings of the 17th ACM annual conference on Innovation and technology in computer science education, pages 371–371. ACM, 2012. [5] The jQuery Foundation. jQuery UI 1.10 API Documentation. http: //tutor.fi.muni.cz/index.php?p=article&id=30, 2013. [6] D. Wellman. jQuery UI 1.8 : The User Interface Library for jQuery. Packt Publishing Ltd., 2011.

33

Pˇríloha A

Obsah pˇriloženého CD CD obsahuje zdrojové kódy her a potˇrebné obrázky.

A.1 Struktura CD •

BarevneBludiste colormaze.js – JavaScriptová cˇ ást Barevného bludištˇe icolormaze.html – HTML kód s interním zápisem CSS img – obrázky pozadí, stop, panáˇcka a vlajky

•

Dlazdicky eternity.js – JavaScriptová cˇ ást Dlaždiˇcek ieternity.html – HTML kód s interním zápisem CSS textures – obrázky pozadí dlaždic

•

Rozdelovacka region.js – JavaScriptová cˇ ást Rozdˇelovaˇcky iregion.html – HTML kód s interním zápisem CSS

•

Skladacka pentomina.js – JavaScriptová cˇ ást Skládaˇcky ipentomina.html – HTML kód s interním zápisem CSS

34

012345

Recommend Documents