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[...]mentation/np-setStartOffsetXY

I ta opcja może być przydatna np. tu:
https://games.3n.com.pl/games[...]es/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 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0