Puzzle - zabawa

4

Chciałbym Wam (oczywiście tylko chętnym :-)) zaproponować zabawę. Co prawda na co dzień programuję w C i C++ i uważam, że od tego należałoby zacząć, ale do tej zabawy chyba lepszy będzie JavaScript, bo każdy to ma i wynikami zabawy będziemy mogli spokojnie się dzielić w sieci.
Czytam listy, że nie wiadomo od czego zacząć, że przerobiłem ileś tam zadań i co dalej.

Więc - tu jest kod w JavaScrypcie:
https://3n.com.pl/puzzle
Są trzy pliki:
https://3n.com.pl/puzzle/index.htm
https://3n.com.pl/puzzle/puzzle.js
https://3n.com.pl/puzzle/style.css

Każdy może to ściągnąć na swój komputer i odpalić lokalnie.
Potem pozmieniać, wrzucić gdzieś do sieci i się pochwalić :-).

Zadania nr 1.
Zrobić tak, żeby puzzle po losowaniu nie zakrywały centralnej planszy (na której były początkowo). Mają ułożyć się wokół planszy, ale nie wyjść poza okno przeglądarki. Mogą nachodzić na siebie, ale dobrze byłoby, żeby jednak niecałkowicie. Załóżmy, ze 20% (szerokości lub wysokości) ma "wystawać".

0

Zadanie nr 2.
Jak zrobić, żeby klocki miały kształt puzzli?
(na razie sam nie wiem, jak je rozwiązać ;-), pod Windowsem - to spoko, tu na razie mam koncepcję z canvasem i kanałem alpha, ale trzeba by to oprogramować).

0

Mam nadzieję, że nie popsuję zabawy
https://www.codeproject.com/Articles/395453/Html5-Jigsaw-Puzzle

0

Jak zrobić, żeby klocki miały kształt puzzli?

Jeszcze mógłbyś doprecyzować, czy wszystkie puzzle mają być takie same (np. dziura dół i prawa strona, a "dzyndzoł" po lewej i na górze) czy w ogóle chcesz poszaleć i jeszcze różne klocki powrzucać :)

0

Na razie nie wiem. Dużo zależy od inwencji współuczestników :-), o ile tacy będą.
Myślę, że jak się rozgryzie ideę nieregularnego kształtu, to potem "dzyndzle" będą się robiły same.
W Windowsie kiedyś zrobiłem coś takiego. Tam jest koncepcja 'Regionu". W przeglądarce jeszcze tego nie robiłem.

1

Odzew słaby :-)
Ale co tam - jedziemy dalej :-)
Na serwerze są dwie wersje. Wersja stara
https://3n.com.pl/puzzle/index1.htm
https://3n.com.pl/puzzle/style1.css
https://3n.com.pl/puzzle/puzzle1.js

i wersja nowa
https://3n.com.pl/puzzle/index.htm
https://3n.com.pl/puzzle/style.css
https://3n.com.pl/puzzle/puzzle.js

W wersji nowej powiększyłem puzzle (tak, żeby zachodziły na siebie) i naniosłem na nie kształt (za pomocą svg).
Kształt na razie jest "kanciasty", ale zawsze można go zaokrąglić bezierami, na razie nie ma to znaczenia.
Zrobiłem "wypustki" górne i dolne.

Zadanie nr 3 - zrobić wypustki "lewe" i "prawe".
Zadanie nr 1 - pozostaje w mocy.

Plan docelowy jest taki, żeby zdjęcie było ze 100% przeźoczystością i przekopiujemy je na canvas, po czym zadziałamy na warstwie alpha tak, żeby to co jest klockiem stało się widoczne.
Zobaczymy czy to się uda.

0

Korciło mnie, żeby sprawdzić, czy tę koncepcję z canvasem uda się zrealizować.

Na serwerze są teraz trzy wersje.
Wersja pierwsza:
https://3n.com.pl/puzzle/index1.htm
https://3n.com.pl/puzzle/style1.css
https://3n.com.pl/puzzle/puzzle1.js

Wersja druga:
https://3n.com.pl/puzzle/index2.htm
https://3n.com.pl/puzzle/style2.css
https://3n.com.pl/puzzle/puzzle2.js

i wersja aktualna (uwaga, może trzeba odświeżyć cache przeglądarki, żeby wczytała się wersja najnowsza)
https://3n.com.pl/puzzle/index.htm
https://3n.com.pl/puzzle/style.css
https://3n.com.pl/puzzle/puzzle.js

Minimalnie zmieniłem koncepcję. Zrezygnowałem z svg i narysowałem puzzel wprost na kontekście. Okazało się, że jest funkcja pozwalająca sprawdzić, czy punkt znajduje się wewnątrz ścieżki. To ułatwiło zadanie i działa :-).

Przycisk Początek powinien ustawić puzzle w pozycji wyjściowej.

Zadanie nr 4 - naprawić działanie przycisku Początek

3

Temat puzzli upadł na forum, ale była taka potrzeba, więc skończyłem :-).

Tu można zagrać:
https://games.3n.com.pl

(jakby ktoś zagrał i zauważył jakieś niedostatki - to proszę o info :-))

1

Wprawdzie do tworzenia puzzli się nie włączyłem - częściowo z braku czasu, bardziej z braku umiejętności, ale przynajmniej mogę skomentować ;)

Ogólnie bardzo OK, tylko jedną rzecz bym zmienił. Brakuje jakiegoś miejsca z boku do odłożenia elementów. Co chwila trzeba przesuwać albo już ułożoną układankę, albo poszczególne klocki, żeby zobaczyć, co jeszcze leży na planszy. W temacie przesuwania - przydałoby się dodanie możliwości zaznaczenia kilku elementów - analogicznie do tego, jak się zaznacza ikony w folderach/na pulpicie, czyli klikasz w jednym miejscu i przesuwając kursor tworzysz ramkę, która zaznacza wszystkie elementy w niej zawarte.

EDIT dopiero po zakończeniu gry wysunęło mi się z boki menu z ustawieniami. Jest tam możliwość skalowania mapy, dając mniejszą wartość zoomu mamy więcej miejsca na ekranie. ALE żeś Pan skopał ikonkę do tego, bo znak zapytania chyba nikomu nie kojarzy się z ustawieniami, a raczej z pomocą. Widziałem ten przycisk, ale nie wpadłem na to, żeby tam kliknąć, bo do głowy mi nie przyszło, że odpowiada on za zmianę ustawień.

1

Jeśli chodzi o ikony, to rzeczywiście tam miała by pomoc, która potem przerodziła się w opcje :-)
Zrobiłem sobie krój z ikonami:
https://vg.3n.com.pl/topic/vg/icons
Dzięki temu ikony są responsywne i mogę dowolnie zmieniać im kolor.
W sumie nie wiem, która byłaby lepsza: H, czy s (w kroju, który podałem wyżej) - na razie dałem H.

Jeśli chodzi o przesuwanie puzzli w grupach - tak przydałoby się. W wolnej chwili doprogramuję :-)

Jeśli chodzi o położenie puzzli po losowaniu, to są dwie opcje.
One nie były "wypuszczone" na panel.
Teraz jedną z nich dodałem (w grupie Plansza -> Położenie po losowaniu)
Polecam zagrać w puzzle "okragłe" :-)
https://games.3n.com.pl/topic/games/puzzle/~/play/shape-2

Druga opcja pozwala zupełnie odsunąć puzzle na bok:
https://games.3n.com.pl/topic/games/puzzle/~/documentation/np-setStartOffsetXY

I ta opcja może być przydatna np. tu:
https://games.3n.com.pl/games/examples/puzzle/puzzle_antispam.htm

Ale nad tym zabezpieczeniem jeszcze pracuję, bo samo zabezpieczenie po stronie klienta - to słabe jest.
Muszę jeszcze jakoś to uzbroić po stronie serwera.
Jakieś pomysły?

1

lepsza: H, czy s (w kroju, który podałem wyżej) - na razie dałem H.

Moim zdaniem odwrotnie. Od zawsze i wszędzie ikoną ustawień jest koło zębate - czyli "s", a Twoje "H" to raczej jest ikonka pasująca do menu. A ten panel, który się rozwija to ewidentnie ustawienia, więc raczej bardziej pasuje zębatka.

A co do captcha w postaci puzzli - jeśli chcesz zrobić walidację po stronie serwera, to pierwsze (niekoniecznie najlepsze) co mi przyszło do głowy, to wysłanie razem z formularzem jakiegoś stringa, który powstaje ze złożenia puzzli. Każdy z nich będzie miał przypisaną jakąś wartość - czy to liczbową, czy literkę. Podczas wysyłania, skrypt bierze pod uwagę kolejność/układ puzzli (np. od lewej do prawej i od góry do dołu) i przesyła wartość do serwera. Jeśli puzzle są ułożone poprawnie, to kod będzie się zgadzać. Jeśli ktoś ich nie ułoży odpowiednio i jedynie wymusi/obejdzie wysłanie formularza, to ten string albo będzie pusty, albo będzie miał nieprawidłową wartość. Ponieważ front/przeglądarka nie będzie znać poprawnej wartości, nie da się tego oszukać. Skrypt ma jedynie przesłać to, co będzie wynikać ze sposobu ułożenia puzzli, ale walidacja jest po stronie serwera. Jeśli podany ciąg nie będzie się zgadzać z tym, którego oczekujesz, to znaczy, że captcha nie została poprawnie rozwiązana.

Co sądzisz o takim pomyśle?

0

Jest zębatka :-)

Rozważam różne pomysły, ale chciałbym jak najmniej angażować użytkownika.
Na razie wychodzi mi, że bez wymuszenia na użytkowniku jakiejś dodatkowej akcji (poza układaniem) - to zawsze można obejść.
Gdyby było tak, że te cyfry (literki) w Twoim pomyśle są przypisane na stałe, to po ich odgadnięciu system pada
(chyba, ze czego nie widzę - to podpowiedz).
Więc nie mogą być na stałe (czyli losowane). Ale wtedy serwer nie wie z czym porównać.
Widzę dwie możliwości - serwer wysyłając zdjęcie wysyła również losowanie (może być zakodowane), ale odgadnięcie sposobu kodowania rozbija system.
Lub - losowanie jest odsyłane do serwera (również w jakiś sposób zakodowane), ale sytuacja jest jak wyżej (po odgadnięciu sposobu kodowania leżymy).

Chyba, żeby uzależnić układ np. od daty, godziny, itp. Wtedy przeglądarka i serwer znając datę i godzinę mogą sobie wygenerować ten sam układ i go porównać.
Tu odgadnięcie układu niewiele daje, bo za godzinę układ by się zmienił. Ale odgadnięcie algorytmu generowania układu znowu sprawę psuje. A algorytm musiałby być przesłany do klienta, więc znów można to podejrzeć.

Widzę sposób z zaangażowaniem użytkownika. Serwer stawia na losowym puzzlu kropkę.
Polecenie jest: "zacznij układać od puzzla z kropką".

Wtedy skrypt łamiący musiałby analizować obraz i wybrać ten z "kropką", co chyba nie byłoby łatwe przy odpowiednio spreparowanych puzzlach.

Ale - po pierwsze, jeśli puzzli jest mało (4), to szansa na przypadkowe trafienie jest duża (gdyby skrypt łamiący zastosował rozwiązanie siłowe).
Po drugie - jest to angażowanie użytkownika w "odgadywanie" - czyli wracamy do klasycznych rozwiązań.

Zadanie ogólne jest "jak odróżnić inteligencję naturalną od sztucznej?"
Wydaje się, że problem ułożenia puzzli (zwłaszcza np. okrągłych) nadaje się na taki test, ale jeszcze nie wiem, jak to zaimplementować.

Szczerze powiedziawszy nie zajmowałem się nigdy takimi zabezpieczeniami. Tak mi przy okazji prac na grą przyszło do głowy, ale muszę to zgłębić.

1

No ale nie do końca się chyba rozumiemy.
Pytanie - skąd się biorą puzzle w przeglądarce? Są zawarte w treści kodu HTML/JS, prawda?
A skąd się bierze HTML/JS w przeglądarce? Jest wysyłany tam przez serwer, prawda?
No to teraz wystarczy, żeby serwer podczas generowania strony, w chwili, w której PHP (czy cokolwiek innego) wysyła fragment ze skryptem JS (albo HTML, w którym ten skrypt jest osadzony) wygenerował jakiś losywy ciąg/ID klucza, a następnie przypisał puzzlom losowe literki. Za każdym razem będą to inne wartości, ale tak czy siak - na front trafi jakiś zestaw puzzli z przypisanymi wartościami do każdego z nich (wartości losowe, zmienne za każdym razem) oraz ID.

Po ułożeniu puzzli, skrypt przesyła do serwera dwie rzeczy dodatkowo - ID układu oraz zwracany ciąg. Serwer sprawdza, jaki ciąg powinien być zwrócony dla danego ID i wszystko w temacie. Systemu nie da się złamać, bo dane potrzebne do weryfikacji poprawności są trzymane jedynie po stronie serwera. Front coś układa, ale nie wie, czy wygenerowany na podstawie układu klocków ciąg jest poprawny. Czy teraz jest OK?

0

Załóżmy że mamy cztery puzzle. Puzzlom przypisujemy losowo cyfry:
LG (Lewa góra) - 100
PG (prawa góra) - 20
LD (lewy doł) - 12
PD (prawy dół) 6.
I ten układ ma losowo nadany ID, np. 1111.
Dobrze rozumiem ideę?

Te liczby są przesyłane do klienta. np. w takiej kolejności
1111, 12, 6, 20, 100

Liczby za każdym razem są inne. I w innej kolejności.
Ok. Co robi przeglądarka?
Przeglądarka rozrzuca puzzle, ale przed ich rozrzuceniem musi puzzle ponumerować (żeby po ułożeniu odczytać ich kolejność), czyli musi znać przypisania:
LG = ?
PG = ?
LD = ?
PD = ?
Chyba że nie musi?
Jeśli musi - to musimy je przesłać - i tu sprawa leży. Chyba, że jakimś dziwnym algorytmem to ustawimy. Np. najmniejsza jest zawsze w prawym dolnym, nieparzysta - w lewym górnym, podzielna przez trzy - gdzieś tam, itd. Ale algorytm też musi być przesłany.

Można byłoby chyba zrezygnować z ID i porównywać IP klienta.
Ale skąd przeglądarka po ułożeniu puzzli będzie wiedziała co odesłać, jeśli wcześniej nie przypiszemy prawidłowych liczb do poszczególnych puzzli?

Może czegoś nie widzę :-) (długo siedziałem w nocy :-)).

0

Nie wiem, na jakiej zasadzie działa twój skrypt, więc może mój pomysł się nie sprawdzi. Niemniej ja to widziałem tak, że serwer przesyła do klienta zestaw puzzli, z czego każdy element dostaje losowy numer/literkę. Żeby nie doszło do tego, o czym piszesz, klocki mogą być podawane na stronę w losowej kolejności. Front nie wie, jaki wynik złożenia jest pożądany, jedynie umie go sobie sklecić na podstawie tego, jak użytkownik ułożył klocki.

0

Przesyłane jest jedno zdjęcie i ono jest cięte przez przeglądarkę. Gdyby pociąć je na serwerze i nie przesłać informacji o prawidłowym ułożeniu, to mógłbyś je poukładać, ale nie działałyby "zatrzaski". Program nie wiedziałby, czy dwa sąsiednie pasują do siebie, czy nie.
To jest jakaś koncepcja. Użytkownik układa, ale nie ma "zaskakiwania". Lub jest, ale na zasadzie dopasowania kształtu, ale nie treści. Czyli możliwe byłoby połączenie dwóch puzzli pasujących tylko kształtem, a nie treścią (w tej wersji programu to nie jest możliwe - puzzle nie "zaskoczą").
W takim rozwiązaniu, użytkownik nie wiedziałby, czy dobrze ułożył. Dopiero po wysłaniu - serwer by to sprawdził (czyli nie byłoby odblokowywania przycisku "Wyślij", jak jest teraz). Przycisk "Wyślij" byłby cały czas aktywny, użytkownik układa (lub nie, jak mu się nie chce), klika "Wyślij", przeglądarka wysyła współrzędne puzzli, a serwer (z jakąś granicą błędu) sprawdza ułożenie.
Może dałoby się to zaimplementować w moim rozwiązaniu. Muszę to przemyśleć, chociaż podoba mi się efekt odblokowywania przycisku "Wyślij". No ale żeby to było możliwe, przeglądarka musi wiedzieć, kiedy jest dobrze. A jeśli przeglądarka wie, to w sumie każdy może się tego dowiedzieć.
Chyba nie da się tego zrobić tak, jakbym chciał.

1 użytkowników online, w tym zalogowanych: 0, gości: 1