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
| 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:
- 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
(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