JavaScript folytatás

2. Samuel Loyd feladvány

Bizonyára sokan ismeritek Samuel Loyd 1878-ban kitalált Boss-Puzzle játékát. A korábban "15-ös játék" néven ismertté vált feladványban a 4x4 férőhelyet tartalmazó sík keret 1-től 15-ig számozott négyzetlapocskái a 16. "üres hely" vándoroltatásával rendezhetők sorba. Az évek múlásával a lapocskák számozását mozaikra szétvágott képek váltották fel, mintegy játékossá téve a eredeti matematikai probléma megoldását. Igen, ez a Tili-Toli néven elhíresült tologatós játék, amelyet most a virtuális síkban fogunk kifaragni.

Bemenet: A böngésző munkaterületén kialakított játéktér.

Kimenet: A puzzle elemei, valamint a számított eredmények.

Változók: Játéktér sor és oszlop elemei, illetve a HTML dokumentum azonosított elemei.

Algoritmus: A HTML kód "puzzle" azonosítójú táblázatát feltöltjük a row vektorba ágyazott cell tömb formázott elemeivel. A tömbelemek az egéresemények bekövetkezésekor meghívják a mozgatási műveletek eljárását, ami a kijelölt dokumentumelemeket felcseréli. A sikeres megoldás a DOM modell metódusaira épül.

Eseménykezelés: Az onclick esemény bekövetkezésekor végrehajtandó utasításokat a mystep() függvényben rögzítjük.

Az alábbiakban rendszerezzük a megoldáshoz szükséges ismereteket. A platformfüggetlen megoldás elkészítéséhez gyakorlatilag egy böngésző programra, és esetleg egy egyszerűbb editorra van szükség. A lecke mintaprogramjai a böngészőben kipróbálhatók és módosíthatók a forráskód alatti "Próbáld ki! »" gombra kattintás után.

1

Hogyan épül fel a DOM modell?

"A Document Object Model egy platform- és nyelvfüggetlen interfész, amely hozzáférést biztosít a programok és szkriptek számára a dokumentumtartalmakhoz. Modellezi a dokumentum szerkezetét és lehetővé teszi annak tartalmi és vizulális változtatását. Lényegében összeköttetést képez a weblapok és a script- vagy programozási nyelvek között.

Minden tulajdonságot, metódust és eseményt, ami a webfejlesztő számára rendelkezésre áll a weboldalak szerkesztése és változtatása során, objektumokba rendszerez. (pl. a document objektum jelöli a dokumentumot, a table objektum jelöli a HTML táblázatokat, stb.) Ezek az objektumok hozzáférhetőek a script-nyelvek számára az újabb böngészőkben.

A DOM-ot leggyakrabban JavaScript-tel együtt használják. Azaz a kód JavaScript-ben van írva, de a DOM-ot használja a weboldalhoz és elemeihez való hozzáférés során.

A DOM-ot azonban úgy tervezték hogy független legyen minden programozási nyelvtől, ezért a dokumentum szerkezeti modellje egyetlen, önálló és konzisztens API-ból érhető el. Bár a továbbiakban a JavaScriptre fogunk összpontosítani, a DOM-ot tulajdonképpen bármilyen nyelvből elérhetjük.

A World Wide Web Consortium (W3C) meghatározta a standard DOM-ot, amit W3C DOM-nak neveznek. Ma már a legfontosabb böngészők ezt támogatják, ezzel lehetővé teszik browserfüggetlen alkalmazások létrehozását."[1]

Kezdetben arra ügyeljünk, hogy minden tartalmi elem kapjon azonosítót az id=" " attribútumban.

« Előző | Lap eleje

2

Miért használjunk CSS-t a formázáshoz?

A CSS szabvány leírása 1996. december 17-n látott napvilágot a W3C honlapján. "A CSS jelentése Cascading Style Sheets, azaz egymásba ágyazott stíluslapok. A HTML oldalaink megjelenését befolyásoló egyszerű szabványról van szó, mely segítségével meghatározhatjuk, hogy hogyan (és hol) jelenjenek meg az egyes HTML elemek (paragrafusok, címsorok, stb.), többek között befolyásolhatjuk a színüket, méretüket, elhelyezkedésüket, margóikat, stb. Az egymásba ágyazhatóság (kaszkádolás) arra utal, hogy több stíluslapot, meghatározást is megadhatunk egyszerre, illetve egy stílus lehet több elemre is érvényes, amit egy másik stílussal felüldefiniálhatunk. A stílusok öröklődnek az oldal hierarchiája szerint, ha például a gyökér elemre definiálunk egy stílust, akkor az többnyire az oldal összes elemére érvényes (a tulajdonságok örökölhetőségétől függően)."[2]

Stíluslapot négyféleképpen használhatunk a dokumentumban:

  1. Beágyazott stíluslapként a HTML oldal fejlécében:
    <head>  
    <style>
      h1{
        color:#1f2839;
        font-size:2.5em;
        text-shadow: 6px 6px 2px #d0d0d0;
      }
    </style>
    </head>  

  2. Külső stíluslapra hivatkozással:
    <head>  
      <link rel="stylesheet" href="kulso.css" type="text/css">  
    </head>  

  3. Importálással:
    <style>
      @import url(http://www.mypage.hu/style/other.css);
    </style>

  4. Elemhez rendelt stílusként a style="" attribútumban leírva.
    <h1 style="color:#1f2839;font-size:2.5em;text-shadow: 6px 6px 2px #d0d0d0;">Címsor</h1>

A CSS formázások a boxmodellre épülnek, a részletes leírások és példák a w3schools.com oldalon elérhetőek. További magyar nyelvű források: A dobozmodell; CSS alapok; CSS kijelölők; HTML5.0 + CSS3. A stíluslapok alkalmazásával az alapvető formázási beállítások módosítása a tartalmi elemek változtatása nélkül megoldható. Az alábbiakban nézzük meg a kirakójáték kódjában használt CSS beállításokat. A body elemnél beállítjuk a használt betűtípust és a középre igazítást. A section elemnél megadjuk a játékteret is magába foglaló dokumentumrész jellemzőit. Meghatározzuk a h1 és p elemek stílusát, majd definiáljuk a puzzle azonosítóhoz rendelt elem megjelenítési beállításait.

« Előző | Lap eleje

3

Töltsük fel a játéktáblát új cellákkal!

A HTML dokumentumban helyet foglalunk puzzle azonosítóval a játéktáblának. A sorokat és a cellákat még nem definiáljuk, mert azokat a JavaScrpit kóddal fogjuk előállítani. Elhelyezünk egy gombot, amelynek lenyomása az onclick esemény révén indítja el a mozaik keverését.

A HTML kódban csak egy üres táblát definiáltunk puzzle azonosítóval. Ezért most az insertRow() metódussal létrehozzuk a tábla sorait, illetve az insertCell() metódussal a sorok celláit, majd beállítjuk az így implementált cellák tulajdonságait, és az eseménykezeléshez használni kívánt függvényhivatkozást is. Figyeljétek meg, hogy minden cella kapott egy azonosítót, amit a tt[i][j].id=i*ncell+j; (vagyis sorszám*cellák_száma+cellaszám) kifejezéssel számoltunk ki. Ez az azonosító bármikor konvertálható sor és oszlop indexre.

« Előző | Lap eleje

4

Keverjük össze a cellákat!

A HMTL kód letöltésekor a játéktábla a kirakott állapotot mutatja, így meggyőződhetünk arról, hogy valamennyi szám bekerült a játéktérbe. A játék indításához azonban, össze kellene kevernünk a mozaikot. A keverés gombhoz rendelt metódus ezt a feladatot írányítja. Működése nagyon egyszerű, hiszen egy kocka négy irányba mozoghat, csak arra kell vigyáznunk, hogy a tábla sor vagy oszlopszámánál nagyobb értéket ne adjon a léptető metódusnak.

« Előző | Lap eleje

5

Kezeljük le az egéreseményeket!

Elérkeztünk a játék lényegéhez, a mozaik léptetését kezelő metódushoz. Ha a játéktáblán olyan kockára kattintunk, amelyiknek üres cella az élszomszédja, akkor bizony helyet kell cserélniük egymással. Ehhez a felismeréshez az if utasításban kifejtett összetett logikai kifejezéssel jutunk el.

« Előző | Lap eleje

6

The show must go on!

A Tili-Toli egy egyszemélyes logikai játék, amit a leggyakrabban 3x3, 4x4, vagy 5x5-ös méretű táblán játszanak. A táblán a mérettől függően, 9-25 mező található. A mezőkön egészszámok találhatóak, (1-8 1-15, 1-24) között, ezen felül egy üres mező. Az üres mezővel felcserélhetőek a körülötte lévő mezők. A játék kezdetekor a mezők elhelyezkedése véletlenszerű. A feladat az, hogy a számokat sorfolytonosan rendezzük úgy, hogy az üres mező a tábla jobb alsó sarkában helyezkedjen el.[3]

« Előző | Lap eleje

7

Próbáld ki a megoldást!

A leckében tárgyaltak összefoglalásaként tekintsük át és próbáljuk ki az eredeti feladat megoldását. Figyeljük meg a CSS beállítások elhelyezését és tartalmát, a dokumentumelemek azonosítását, a komponensek futásidejű lérehozásának módszerét és az eseménykezelést. Gondoljátok át, vajon miért került most a script a HTML kód végére?

« Előző | Lap eleje

8

Oldd meg a feladatokat!

Kedves Bakonyi Bitfaragó Jelöltek!

Elkészítettünk egy egszerűbb kirakós játékot, de ahhoz, hogy mérhessük a játékban elért eredményeket még néhány kiegészítő feladatot meg kellene oldanunk.

Beküldhető feladatok:

  1. Egészítsétek ki a bemutatott táblajátékot további praktikus szolgáltatásokkal!
    • Építsetek be egy kattintás-számlálót?
    • Adjatok hozzá egy órát, amely másodperc pontossággal kijelzi a játék megkezdése óta eltelt időt!
    • Szükség lenne egy állapotjelzőre, amely százalékos formában kijelzi a helyes és helytelen pozicióban lévő kockák arányát!
    • Készítsetek egy naplózó metódust, amely gyűjti a játék során elért eredményeket!
    • Gombnyomásra irassátok ki a naplózott helyezéseket!
    • Oldjátok meg, hogy a játék indulása előtt meg lehessen adni a játéktábla sorainak és oszlopainak számát!

    100 0000|2 pont

  2. Kódoljatok a minta alapján egy képkockákkal működő Tili-Toli puzzle-klónt!

    10 0000|2 pont

Az algoritmikus gondolkodás serkentésének érdekében lenne még három egyszerűbb feladat, amelyek helyes megoldásával további pontokat gyűjthettek.

Beküldhető feladatok:

  1. Számítsuk ki PI értékét a Leibniz-féle sorozattal, a felhasználó által megadott, legalább 4 tizedesjegy pontossággal:

    PI = 4 * (1 - 1/3 + 1/5 - 1/7 + …)

    1 0000|2 pont

  2. Írassuk ki a beolvasott n és m számok közötti tökéletes számokat egy eljárás segítségével? Tökéletes számnak nevezzük azokat az egészeket, amelyek megegyeznek osztóik összegével (az 1-et beleértve, önmagukat kivéve). A legkisebb tökéletes szám a 6, amelynek önmagánál kisebb osztói az 1, a 2 és a 3, ezek összege pedig 1 + 2 + 3 = 6. A második legkisebb tökéletes szám a 28, melynek osztói az 1, 2, 4, 7 és 14 számok. A soron következő két tökéletes szám a 496 és a 8128.

    1 0000|2 pont

  3. Olvassunk be egy mondatot, majd döntsük el, hogy a beolvasott szöveg palindrom-e?

    1000|2 pont

« Előző | Lap eleje

Hivatkozások, felhasznált források

[1] Mozilla developer network: DOM (2013.11.13)

[2] CSS alapjai I. (2004.03.18)

[3] Ócsvári Áron: Tilitoli (Sliding puzzle) dokumentáció (2013.11.13)