|  Tantárgy:|[[egyetem:webc2:menu|Webes rendszerek kliens oldali programozása 2. [IM3314, WP3316] ]]|
|  Tananyag:|[[egyetem:webc2:jquery:menu|jQuery - Bevezetés]]|
====== Tologatós játék ======
===== Feladat =====
Készítsünk négyzet tologatós játékot
===== Specifikáció =====
  - Készítsünk el egy 4 x 4 -es négyzetrácsot, úgy, hogy a jobb alsó kockát ne helyezzük fel! (összesen: 15 db kocka) \\ [[egyetem:webc2:jquery:f3:help1|Segítség a megoldásához (elakadás esetére!)]]
  - Az egyes sorokban lévő kockákat azonos színnel jelöljük meg (kék (4 db); zöld (4 db); piros (4 db); sárga (3 db)) \\ [[egyetem:webc2:jquery:f3:help2|Segítség a megoldásához (elakadás esetére!)]]
  - Az üres kockahely arra való, hogy a mellette lévő bármelyik kockát oda lehet mozgatni. \\ [[egyetem:webc2:jquery:f3:help3|Segítség a megoldásához (elakadás esetére!)]]
  - Az oldal betöltődésekor rajzoljuk ki a mátrixunkat a képernyőre, majd futtassunk egy összekeverő algoritmust, ami animációval összekeveri a képernyőn elhelyezett kockákat. \\ [[egyetem:webc2:jquery:f3:help7|Segítség a megoldásához (elakadás esetére!)]]
  - Használjuk a jQuery animációs technológiát a kockák mozgatásához. \\ [[egyetem:webc2:jquery:f3:help4|Segítség a megoldásához (elakadás esetére!)]]
  - Ha olyan kockára kattintunk rá, amelyik a lyukas terület mellett helyezkedik el, akkor mozgassuk át az adott kockát a lyukas területre.  \\ [[egyetem:webc2:jquery:f3:help8|Segítség a megoldásához (elakadás esetére!)]]

===== Specifikáció haladóknak =====
  - Ha egy sorban a jobb szélső kockahely üres, akkor ne csak a mellette lévő kockára lehessen rákattintani, hanem a 2 ill. 3. kockára is. Ebben az esetben értelem szerűen mind a kettő vagy három kocka együtt mozduljon el. \\ [[egyetem:webc2:jquery:f3:help5|Segítség a megoldásához (elakadás esetére!)]]
  - Ha sikeresen kirakott a játékos egy szabályos formát (pl.: minden sorban azonos szín jelenik meg), akkor gratuláljon a játék megnyeréséhez. \\ [[egyetem:webc2:jquery:f3:help6|Segítség a megoldásához (elakadás esetére!)]]
===== Megoldás =====
Az itt megjelenített megoldást lehetőleg csak arra használja, hogy segítséget nyerjen a feladat megfogalmazásának megértésére, de ne használja a program kódját az Ön által elkészítendő program kódjának megírásához! A másolással csak magát csapja be és megfosztja magát a szoftver fejlesztési képességének fejlődésétől! \\ \\
[[http://tptg.hu/egyetem/webc2/jquery_f3.htm|Megoldás megtekintése]] \\ \\
A forráslistát csak akkor tekintse meg, ha már végrehajtotta önálló munkával az adott feladat kidolgozását. Az itt megtekinthető megoldás csak segítség arra vonatkozólag, hogy milyen egy elkészített megoldás amely lefedi a feladat kiírásban foglaltakat maradéktalanul. Tudjuk, hogy egy kiírt feladat megoldáshoz számtalan formában juthatunk el, így ha az Ön megoldása megfelel a feladat kiírásban megfogalmazottaknak, akkor tökéletesen végrehajtotta a célt! Az, hogy egy kód mennyire optimális az már a fejlesztő tudásától, gyakorlatától és tapasztalatától függ, minél többet gyakorolja a fejlesztést annál inkább optimálisabb kódot fog készíteni. \\ \\
[[egyetem:webc2:jquery:f3:forrasanyag|Elkészített program forráskódja]]