ugrás a tartalomhoz

Js: Picture Puzzle

Vakond · 2008. Okt. 31. (P), 12.23
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!
 
1

Szerintem

cSuwwi · 2008. Okt. 31. (P), 13.34
Ötletem az van hogy kéne, szerintem neked is, a megoldása már nehezebb, persze nem lehetetlen.
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.
2

javaslat

solkprog · 2008. Okt. 31. (P), 13.45
kb azt kell csinálni amit cSuwwi mond.
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
3

Hehe

Max Logan · 2008. Okt. 31. (P), 14.22
Kicsi a világ, éppen a minap írtam meg ezt valakinek :-)

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 ...
4

Nem véletlen?

janoszen · 2008. Okt. 31. (P), 14.23
Csak nem véletlen az ELTÉ-s scriptnyelvek tárgyhoz kell? :) Én is kisvártatva fogok segíteni valakinek. Egyszerű és buta megoldás, hogy egy táblázat celláinak innerHTMLjeit cserélgeted. Nem próbáltam ki, de mivel 16 mező lesz akár minden mozdulat után megnézheted a sorrendet akár képnevek, akár DIV ID-k alapján.
5

dinamikus tábla

Drawain · 2008. Okt. 31. (P), 16.03
Véletlen nem Web Programozás 1 beadandó? :) Csak mert nekem webprog2-ből kell ugyanezt a feladatot leadnom, csak Asp.NET-ben (még a kiadott mintakép is ugyanez :)).

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:

0   1  2  3
4   5  6  7
8   9 10 11
12 13 14 15
vizsgálni kell 1,4,6,9-et. Ez felette és alatta egyszerűbb, ha 5ből kivonsz négyet (a puzzle mérete), akkor ugye 1-et kapsz, ha a kapott szám 0-nál nagyobb akkor ide lehet kattintani. Ez fordítva működik lefele is, a két mellette levőnél kicsit gondolkodni kell, annyit segítek, hogy ott osztani kell meg maradékokat vizsgálni (lehet van más megoldás is, mielőtt leragadnál ennél :)). Maga a csere egyszerű, ha az adott ponton lehet kattintani, akkor a kattintott id-jű cella tartalma üres lesz, az eddigi üres meg megkapja a kattintott képet.
É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).
6

Mozgatás

Poetro · 2008. Okt. 31. (P), 18.06
Ha mozgatni szeretnél, és ragaszkodsz a táblázatos felosztáshoz, akkor érdemes background-image-t használni a képek megjelenítéséhez, és azok background-position-jét változtatni dinamikusan a mozgás imitálásához.
7

Köszi mindenkinek

Vakond · 2008. Okt. 31. (P), 18.48
Igen ELTÉ-s tárgyra lesz, mégpedig Webfejlesztés 2.-re

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!
8

Tessék

cSuwwi · 2008. Okt. 31. (P), 23.42
Szerencséd, hogy szeretem az ilyen tologatós puzzle-okat :)
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/
9

Ezer köszi

Vakond · 2008. Nov. 1. (Szo), 11.15
cSuwwi: nagyon köszönöm a kódodat. Nagyon sokat segített!
10

Nincs mit

cSuwwi · 2008. Nov. 1. (Szo), 12.50
Nincs mit, sok sikert az átíráshoz
11

kéretik vigyázni ;)

numen · 2008. Nov. 2. (V), 03.34
a linkelt oldalon használt keverési algoritmus vezethet megoldhatatlan feladványhoz, lásd:
http://mathworld.wolfram.com/15Puzzle.html