Js: Picture Puzzle
Sziasztok!
Egy elég összetett problémám lenne amivel kapcsolatban a segítségeteket szeretném kérni.
Beadandó feladatként egy Puzzle-t kell csinálnom JS-ben.
A képeket már össze tudom keverni, de a mozgatást nem tudom megoldani. A feladat az lenne, hogy csak 1 db képet tudjak megmozdítani a fehér kép mellett és az helyet cseréljen a fehérrel.
Puzzle - a function ellenorzes(x,y) -részben próbálkoztam, de elakadtam.
Ha valakinek van egy ötlete vagy javaslata amin el tudnék indulni vagy egy konkrét megoldás javaslata azt nagyon szívesen venném.
Előre is köszi mindenkinek!
■ Egy elég összetett problémám lenne amivel kapcsolatban a segítségeteket szeretném kérni.
Beadandó feladatként egy Puzzle-t kell csinálnom JS-ben.
A képeket már össze tudom keverni, de a mozgatást nem tudom megoldani. A feladat az lenne, hogy csak 1 db képet tudjak megmozdítani a fehér kép mellett és az helyet cseréljen a fehérrel.
Puzzle - a function ellenorzes(x,y) -részben próbálkoztam, de elakadtam.
Ha valakinek van egy ötlete vagy javaslata amin el tudnék indulni vagy egy konkrét megoldás javaslata azt nagyon szívesen venném.
Előre is köszi mindenkinek!
Szerintem
Van 4x4 cella és 15 kép. Az éppen üres cella id-jét mindenképp tudni kéne. A képekre kattintáskor kéne ellenőrizni, hogy az a kép, amire kattintottak, nincs-e 4-es szomszédságban (ugye csak 4 féle lehet mozogni) az üres cellával. Ha igen, akkor csere, ha nem false-al visszatér. Ha minden kocka a helyén van: gratulálok, nyertél.
A mozgatás gondolom kimerül egy képcserében, de ha valóban mozgatást akarsz, nézz meg valamilyen js keretrendszert (pl. jQuery). De szerintem elég a kattintásra való csere is.
javaslat
két dolog:
1, Én span/div elemekkel csinálnám (egyrészt gyorsabb a böngészőnek, másrészt neked is mert kevesebb elemet kell legenerálnod, újragenerálnod)
2, Most a keverés szerintem nem teljesen véletlenszerű, bár a forráskódod nem néztem át. (első keverésnél a fehér kép mindig az utolsó sorban volt).
üdv,
Balázs
Hehe
De, hogy konstruktív is legyek: legegyszerűbb megoldás, ha a mozgatást a kurzor billentyűkkel oldod meg, majd amikor leütötték valamelyiket, akkor megvizsgálod, hogy az a mozgatás megvalósítható-e. Pl. ha az üres négyzet a jobb oldali oszlopban van, akkor a balra mozgatás nem értelmezhető, ekkor nem csinálsz semmit.
Minden mozgatásnál felül kell írni az üres mező koordinátáit. Az pedig könnyen megadható, hogy az egyes mozgatási irányoknál a mozgatandó elem koordinátája mennyivel tér el (+1, -1 az X vagy Y koordináta, attól függően, hogy milyen irányba akarjuk mozgatni a részletet).
Az, hogy minden elem a helyén van, a puzzle-t megvalósító adatszerkezet bejárásával állapítható meg.
Persze ez csak egy megközelítés, még számtalan lehetséges megoldás van ...
Nem véletlen?
dinamikus tábla
Namármost, nem tudom nálatok, hogyan van, de nálunk szükség van 3x3-as, 4x4-es, 5x5-ös felosztásra is, és így beégetve a kódba a táblázatot, hát elég hosszadalmas lesz...
Na mindenesetre a kérdéses ellenőrzést én úgy csináltam, hogy vizsgáltam a felette, alatta, és a két mellette levő elemet - ami nem túl nehéz, ha a táblázat legenerálásakor az egyes cellákat sorszámozod. Pl 4x4-es puzzle esetén, ha a 5ös id-jű mező üres:
Én a helyedben a táblázatot minden kattintásnál újragenerálnám js-ből (így ugye a különböző méretű puzzle-okat is könnyedén meg lehet jeleníteni) és csak azokra a cellákra engedném a kattintást, ahol egyébként is lehet (tehát az ellenőrzés a kirajzoláskor történik, nem kattintáskor).
Mozgatás
Köszi mindenkinek
Köszi az elméleti segítséget mindenkinek. De elég új JS-ben így a színtaktikában nem vagy tul jártas sem az advanced html-ben.
Szoval ha egy kis kóddal megtudnátok segíteni az nagy előre lépést jelentene.
És köszi mindenkinek az eddigi segítséget!
Tessék
A kódodból elindulva, néhány óra alatt összedobtam valami alap használható puzzle-t. Nem neked írtam, hanem a saját szórakozásomra és js fejlődésemre, persze sok dolgot elleshetsz belőle, próbáld meg értelmezni a kódot, és hasonlót összedobni. Pár dolog más benne pl. te választod ki, melyik elem essen ki az elején, vagy mivel lusta voltam algoritmust írni a mozgásokra, így kézzel megadtam, melyik elem, merre mozoghat. A lustaság nagy úr, de majd megoldod, valaki írta feljebb, mi a megoldás.
Egyetlen kép van, az van background-position-nal széttologatva. A js kód formátuma nem a megszokott, ettől ne ijedj meg, én így szoktam js-t kódolni. Nem akartam nagyon elbonyolítani, van benne pár furcsaság (pl. a html rel tagját használtam azonosításra, nem szabadna, de ennyi kell). Sok szerencsét az átírásához :) (De nehogy ezt add be, mert mérges leszek :D)
http://code.drom.hu/puzzle/
Ezer köszi
Nincs mit
kéretik vigyázni ;)
http://mathworld.wolfram.com/15Puzzle.html