Współrzędne elementu

0

Cześć.

Tworze taką prostą grę... wyścigi psów. Mam problem bo nie wiem jak rozwiązać to, że gdy pies (.img o rozmiarze 100px, 100px) dobiegnie do granicy diva, a jest on kontenerem flex, to nie wiem jak pobrać współrzędne aby przekazać je do JS'a gdy prawa strona obrazka dotknie prawego border diva i wtedy wsio się zatrzyma. Problem jest o tyle większy, że chcę aby to było responsywne wiec np. coś w stylu img zatrzymuje się się 98% aktualnej szerokości diva będącego kontenerem.
Proszę o pomoc.

0

Taa, raczej tak się nie robi (z powodów, które sam zauważyłeś) - dlaczego nie wykorzystasz elementu canvas lub WebGL?
Przynajmniej taka wiedza Ci się przyda ;-)

0

Nie da sie pobrać współrzędnych gdy obiekt bedzie sie znajdowal np. 98% od granicy diva?

0

Jeśli to Ty sterujesz obrazkiem, można kombinować z https://developer.mozilla.org/pl/docs/Web/API/Element/getBoundingClientRect i podobnymi, ale ogólnie rzecz biorąc będzie to niepotrzebnie ciężkie do wykonania :-P

0

Napisz sobie tzw. "siatkę" - mapę bitową, np. tak:

0 - brak kolizji
1 - kolizja
2 - przedmiot, który można podnieść
3 - potworek, którego można ubić
4 - gracz

Współrzędne umownie: (x,y), możesz mieć odwrotnie, czyli (y,x).

Jeśli gracz znajduje się na 1,1 (współrzędne), to ściana (kolizja) powinna być zbudowana mniej więcej tak:

0,0 -- 7,0
0,1 -- 7,1
...
0,7 -- 7,7

Mapa wyglądałaby tak:

var map_world = [
   1,1,1,1,1,1,1,1,
   1,4,0,0,0,0,0,1,
   1,0,0,0,0,0,0,1,
   1,0,0,0,0,0,0,1,
   1,0,0,0,0,0,0,1,
   1,0,0,0,0,0,0,1,
   1,0,2,2,2,3,0,1,
   1,1,1,1,1,1,1,1
];

Po napisaniu mapy, możesz przekonwertować taką tablicę na inną, aby mieć układ y, x lub x,y; żeby lepiej Ci się pracowało na danych. I teraz jeśli następnym ruchem postaci byłoby wyjście poza obszar mapy, czyli wejście na 1, to nie pozwól na taki ruch, uruchom blokadę zdarzenia odopowiadający za ruch w tę stronę. Później dzięki mapie najlepiej przekonwertowanej (subiektywna opinia) tworzysz elementy, które będą stały na wirtualnym płótnie, czyli np. canvas, html, czy jeszcze jakieś inne opcje dostępne do osadzania elementów dla interpretera przeglądarki.

Sterowanie możesz napisać tak:

Jeśli następny możliwy ruch jest 0., to wyrzuć poprzedni element np. i wrzuć go przed następny element, czyli jeśli stoi na 1,1 to następny możliwy ruch np. w prawo to 2,1; więc element z 1,1 powinien zostać zdjęty z mapy (usunięty), a nowy wrzucony przed współrzędne 2,1. Ogólnie to możesz napisać to dla dwóch map, jedna będzie odpowiadała za widok, a druga za mechanikę. Na końcu nałożysz te dwie mapy na siebie, np. dając wcześniej elementowi jakiemuś position:relative, a następnemu position:absolute i tyle.

Ogólnie jest sporo możliwości do napisania gry, więc nie generalizowałbym.

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