[JS] Klasa do przesuwania img po ekranie, kazdy obiekt zachowuje sie inaczej Opcje

[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

[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

[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

edit:

[PHP] pobierz, plaintext 
 this.plynprawo=function()
 {
  imgTag.src='ryba0.png';
  var tutaj=this;
  if(tutaj.x<550)
  {
		tutaj.x+=(tutaj.x<500)? 50 : 550-tutaj.x;
		$('#'+tutaj.id).animate({left: tutaj.x+'px'}, 
		200,'linear', 
		function()	{ tutaj.plynprawo(); 	} );
 
	}
	else {  //tutaj.plynlewo(); }
   tutaj.x; bl = document.getElementById(tutaj.id).style.left; 
	 alert(this.id+'---'+bl+'---'+tutaj.x); 
	}
 }
[PHP] pobierz, plaintext 

Nie ma szans zebym tutaj cos zle liczyl
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
Pomocy !

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

[PHP] pobierz, plaintext 
this.plynprawo=function()
 {
  imgTag.src='ryba0.png';
  var tutaj=this;
	stab = this.id.split('fish');
  if(tutaj.x<550-(stab[1]*50))
  {
		tutaj.x+=(tutaj.x<500-(stab[1]*50))? 50 : 550-(stab[1]*50)-tutaj.x;
		$('#'+tutaj.id).animate({left: tutaj.x+'px'}, 
		200,'linear', 
		function()	{ tutaj.plynprawo(); 	} );
  }
  else 
  {  
 //tutaj.plynlewo(); }
   tutaj.x; bl = document.getElementById(tutaj.id).style.left; 
    alert(this.id+'---'+bl+'---'+tutaj.x); 
   }
 }
[PHP] pobierz, plaintext 

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

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

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

klopot sprawialo "position: relative" zmienilem na "absolute" i wszystko ok...
dzieki za pomoc, do zamkniecia...

Ten post edytował comanderv 23.02.2011, 11:16:15

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