Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Klasa do przesuwania img po ekranie
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
comanderv
witać,
mam klasę w JS która zajmuje sie animowanie obiektow, przesuwają je w prawo aż do granicy diva, później odpalana jest metoda do przesuwania w lewo az do granicy diva i wtedy znowu w lewo w prawo w lewo w prawo... dla jednego obiektu wszystko jest ok, wymierzone co do piksela, natomiast gdy dodam kolejne obiekty cos sie dzieje, kazdy zachowuje sie inaczej (kazdy nastepny obiekt ma wieksze odchylenie od granic), czy to jest blad klasy czy poprostu nie tedy droga czy jak?

calosc tutaj: http://www.rytroman.za.pl/maping/fish/fish.html

z góry dziękuje za pomoc smile.gif
askone
Według mnie - bez spojrzenia w kod - mogę powiedzieć, iż wygląda to na błąd związany z przesunięciem względnym. Sprawdź dokładnie:
  1. w jaki sposób inicjalizujesz minimalną wartość współrzędnej X
  2. w jaki sposób obliczasz deltę ruchu po osi X


W tych fragmentach szukałbym błędu...
comanderv
wartosc poczatkowo przypisuje losowo z przedzialu 0-150, dalej poruszam sie co 50px a gdy jestem blizej jak 50px od krawedzi to ruch wykonywany jest do krawedzi, dla jednego obiektu wszystko dziala idealnie...

w tych fragmentach raczej nie ma nic sknocone, warunki sa proste, obliczenia niewielkie - wszystko dziala dla jednego obiektu....
nie jest dobrze...
askone
A spróbuj logować w konsoli Firebuga aktualne współrzędne każdej z rybek. Dodatkowo daj też info o dokonanym nawrocie... Może to naprowadzi Cię na błąd w logice - bo zapewne jakiś tam jest wink.gif
comanderv
cos jest w tej klasie nie tak, bo mimo ze za kazda animacja zmieniam this.x w tych funkcjach to jednak te wartosci nie odpowiadaja polozeniu img... dlatego zczytywalem te polozenia za pomoca getElementById ...
ja cos ogolnie chyba w tej klasie knoce... no nic pobawie sie tym jutro...
dzieki za starania smile.gif

edit:

  1. this.plynprawo=function()
  2. {
  3. imgTag.src='ryba0.png';
  4. var tutaj=this;
  5. if(tutaj.x<550)
  6. {
  7. tutaj.x+=(tutaj.x<500)? 50 : 550-tutaj.x;
  8. $('#'+tutaj.id).animate({left: tutaj.x+'px'},
  9. 200,'linear',
  10. function() { tutaj.plynprawo(); } );
  11.  
  12. }
  13. else { //tutaj.plynlewo(); }
  14. tutaj.x; bl = document.getElementById(tutaj.id).style.left;
  15. alert(this.id+'---'+bl+'---'+tutaj.x);
  16. }
  17. }

Nie ma szans zebym tutaj cos zle liczyl sleep.gif
poddaje sie...
http://www.rytroman.za.pl/maping/fish/fish.html
pozycja left:550px to pozycja maksymalna, dalej juz ryba wystaje poza (bo ma dlugosc 50px to img) wszystko licze na sztywno ustawiam do jakiego przesuniecia ma sie zanimowac, NIE WIEM CO JEST ZLE, na koncu ruchu wywalam .x (przesuniecie na jakim ma ryba wyladowac losow, pozniej ja zwiekszam ciagle) i .style.left i oba sa 550 tak jak ma byc! ale wyraznie widac ze kazda nowa ryba ma o 50px dalej polozenie mimo ze JS widzi ze kazda jest na 550px sleep.gif
Pomocy ! wink.gif

edit:
doszedlem do glupiego wniosku... .id mowi o przesunieciu... element o id 0 idzie idelanie, 1 juz o 50px za daleko, 2 o 100px zadaleko...itd...
wzialem to pod uwage w kodzie...
  1. this.plynprawo=function()
  2. {
  3. imgTag.src='ryba0.png';
  4. var tutaj=this;
  5. stab = this.id.split('fish');
  6. if(tutaj.x<550-(stab[1]*50))
  7. {
  8. tutaj.x+=(tutaj.x<500-(stab[1]*50))? 50 : 550-(stab[1]*50)-tutaj.x;
  9. $('#'+tutaj.id).animate({left: tutaj.x+'px'},
  10. 200,'linear',
  11. function() { tutaj.plynprawo(); } );
  12. }
  13. else
  14. {
  15. //tutaj.plynlewo(); }
  16. tutaj.x; bl = document.getElementById(tutaj.id).style.left;
  17. alert(this.id+'---'+bl+'---'+tutaj.x);
  18. }
  19. }

dzialac dziala... ALE, dlaczego na przesunicie na ekranie wplywa mi jakakolwiek zmienna ? sleep.gif

edit: zrobic zrobilem.... ale to nie ma sensu ;/ im wieksze id (ost cyfra id... bo id ida 'fish0' 'fish1' 'fish2' ...) tym wieksze przesuniecie od krawedzi mam ktorego nawet JS nie dostrzega sleep.gif

edit: sprawdzalem dla 18 elementow, nawet liczby losowe z przedzialu 0-150 dla niektorych wynosily ponad 600 (te liczby to mialy byc odsuniecia left i top)

Dlaczego ta klasa sie tak zachowuje?? na serwie max 12 rybek zeby sie nie psulo... potem juz za duze liczby wychodza i jakies przesuneicia chore... zapraszam do ogladania i szukania gdzies w tym logiki haha.gif

klopot sprawialo "position: relative" zmienilem na "absolute" i wszystko ok...
dzieki za pomoc, do zamkniecia...
wszerad
Może warto pomyśleć o canvas? Mam wrażenie, że chcesz robić jakieś proste gierki ale niestety przesuwanie elementów DOM często okazuję się wolniejsze niż rendowanie grafiki. Kurs Canvas tu masz nawet przykład bardzo podobny do twojej strony z tym, że użyte są gwiazdki.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.