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

A Reversi (vagy Othello) játék

Reversi Leírás

A játékot két játékos játssza egy négyzethálós játéktéren. A játékosok felváltva helyezik el korongjaikat, a még üres négyzetek valamelyikébe. Minden korong lehelyezése után az ellenfél közrefogott korongjai (vízszintesen, függőlegesen, átlósan) a saját színünkre fordulnak. Az a játékos nyer, akinek a játék végén több korongja van a pályán.

« Előző | Lap eleje

7

Egy kis ráhangolódás a feladatra:

A leckében tárgyaltak összefoglalásaként nézzünk meg egy egyszerűbb Reversi játék megvalósítását, amely csak a függőleges átfordításokat veszi figyelembe, a játék akkor ér véget ha minden mezőben van korong, illetve a korongok színeit O és X jelölik. 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!

A korábbiakban bemutattunk egy egyszerűbb Reversi játékot, de ahhoz, hogy a szabályoknak megfelelően 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. További fejlesztési lehetőségek, amik rátok várnak:
    • Készítsétek el a vízszintesen és az átlók mentén is történő átforgatás!
    • Legyen az oldalon pontszámláló, ami folyamatosan nyilván tartja a két játékos pontszámát!
    • A játék végén írja ki a program hogy ki nyert!
    • A játék mindig jelezze, hogy éppen melyik játékos következik!
    • A játék során mindenki csak olyan helyre tehessen, ahol tud átforgatni! Ha egy játékos nem tud tenni, akkor kimarad.
    • A játék vége feltételt módosítsátok a hivatalos változatra! (Akkor is vége van, ha már senki sem tud tenni.)
    • Cseréljétek le a játékosokat jelző X és O jelöléseket színes korongok képeire!
    • Adjatok hozzá egy órát, amely másodperc pontossággal kijelzi a játék megkezdése óta eltelt időt!
    • Az átforgatás ne egyszerre történjen, hanem hullámszerűen! (A lerakott korongtól induljon, a messzebbiek később forduljanak át.) Amíg az animácó tart, addig ne lehessen korongot lerakni.

    1100 0000|2 pont

  2. (A feladatok elkésíztése során nem kell követni a minta feladatot, azt teljes egészében saját elképzelések alapján újra írhatjátok, csak arra figyeljetek, hogy funkcionalitást ne veszítsen az alkalmazás.)

« 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)