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:
- 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>
- Külső stíluslapra hivatkozással:
<head>
<link rel="stylesheet" href="kulso.css" type="text/css">
</head>
- Importálással:
<style>
@import url(http://www.mypage.hu/style/other.css);
</style>
- 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
A második fordulóban egy olyabn oldal elkészítése a cél, amely egy egyszerű "autóversenyt" valósít meg.
Az autók egy négyzetrácsos pályán, társasjáték-szerűen, kockadobásokkal közlekednek.
Az autók célja minél gyorsabban végigérni a pályán. A feladat részletes leírása az oldal alján található.
« 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 a feladat alapjait. Az alábbi kód kirajzol egy táblázatot, aminek cellái a pálya elemei.
Az szeretnénk, hogy a pálya könnyen módosítható és kezelhető legyen, ezért JavaScript segítségével építjük fel.
A script elején megadjuk a méretet, illetve egy tömböt, ami megadja a pályát.
A tömb minden eleme egy új tömb 2 elemmel, az első a sort, a második az oszlopot jelöli (a bal felső sarok a 0,0).
A tömb nem csak a pálya mezőit jelöli ki, hanem a sorrendet is. Az autók a legelső mezőről indulnak majd (más a színe).
Ebben a kódban még nincsenek autók, csak a pálya felépítése.
Illetve az eseménykezelés ismétlés a kód átszínez egy mezőt, amire rákattintunk.
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 feladat a tényleges autóverseny elkészítése, amikor autók is mozognak az ismertetett pályán.
Beküldhető feladatok:
- A feladatok, amik rátok várnak:
- A versenyt az nyeri, aki a leghamarabb ér körbe, és halad át a start mezőn.
- A táblázat mezőiben mozogjanak az autók (pl karakterek, amiket a meőzkbe írtok). Egy mezőn csak egy autó állhat.
- A versenyt 3 játékos játszhatja. Kezdetben a kezdőjátékos autója kezd a start mezőről, a 2. játékosé eggyel előtte, a 3. játékosé pedig ő előtte:
- Minden kocsihoz tartozik egy üzemanyag tartály, ami 10 egységnyi üzemanyagot képes tárolni. A verseny elején minden kocsi 5 egységgel indul.
- A versenyben az első játékos lép először, majd a második, majd a harmadik, és kezdik újra.
- A játékos 3 lehetőség közül választhat:
- Dob egy sima, 6 oldalú dobókockával, és annyit lép, amennyit dobott. Ezzel 1 egységnyi üzemanyagot el is fogyaszt a tartályából.
- Dob egy nagyobb, 12 oldalú dobókockával, és annyit lép, amennyit dobott. Ez 4 egységnyi üzemanyagba kerül.
- Nem lép, hanem előveszi a tartalék kannákat, és 5 egységnyi üzemanyagot tölt a tartályába.
- A játékos csak akkor választhatja valamelyik lépés lehetőséget, ha van elég üzemanyaga. A nem használható opciók kiszürkítve jelenjenek meg.
- Egy mezőn csak egy autó állhat. Ha valaki olyan mezőre lépne, ahol másik kocsi áll, akkor nem lép el odáig, csak az előtt lévő szabad mezőre.
Legrosszabb esetben sehova sem lép.
- Az oldalon legyen egy kijelző, amely minden játékoshoz mutatja, hogy mennyi üzemanyaga van még, illetve mennyi lépésre van a céltól.
Az aktuális játékos itt tudja kiválasztani a lehetőséget is.
- A játék végén a honlap hirdesse ki az eredményt.
- Oldjátok meg, hogy az automatikus feltöltés ne csak a pálya mezőit határozza meg,
hanem minden mezőben jelezze azt is, hogy tőle merre van a következő (célszerű képekkel megoldani):
- A kocsikat cseréljétek le karakterek helyett képekre.
- A játékosoknak legyen 2 újabb választási lehetőségük a saját körükben, de ezeket csak egyszer-egyszer hajthassák végre a játék során:
- Kitesz egy csapdát a pálya bármely üres mezőjére (ahol nincs sem autó, sem másik csapda).
Amikor egy kocsi a csapdára lép, azonnal megáll, mindegy mennyi mezőt léphetne még a körben. Ez a saját csapdára lépéskor is igaz.
- 2 üzemanyagért egy turbólöket segítségével odaugorhat közvetlenül az előtte lévő autó mögé, amennyiben 2 feltétel teljesül:
(a) látja az előző autót (ez azt jelenti hogy egy egyenesben vannak, nincs közöttük kanyar), illetve (b) nincs a kettejük között csapda.
1100 1100|2 pont
(A feladatok elkészíté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