Forum PHP.pl > [JS] Dziwne zatrzymanie ruchu obiektu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JS] Dziwne zatrzymanie ruchu obiektu

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Madlova

5.04.2013, 23:00:15

Hej,

Z nieznanych mi przyczyn mój obrazek, który wprawiam w ruch zatrzymuje się zamiast od razu wykonywać inny ruch:
Chcę, by po kliknięciu start obrazek się poruszał, po kliknięciu w dany obrazek - zaczął poruszać się w inną stronę. Niestety obrazek za 1szym klikiem zatrzymuje się, a dopiero drugi klik wprawia go w ruch przeciwny. A tak być nie może:(

[HTML] pobierz, plaintext 
<div id="start" onClick="start()">Start</div>
<img src="robak.png" id="robak" onClick="zmiana()" style="position: absolute; top: 400px; left: 600px;"/>
 
<script type="text/javascript">
var x=600;
function start(){
	document.getElementById("start").innerHTML="";
 
	document.getElementById("robak").style.left=x+'px';
	x--;
	t=setTimeout("start()",20);	
	if(x==300){
		clearTimeout(t);
	}
 
}
function zmiana(){
 
	x++;
	document.getElementById("robak").style.right=x+'px';
 
	t=setTimeout("zmiana()",20);	
	if(x==900){
		clearTimeout(t);
	}
}
 
</script>
[HTML] pobierz, plaintext

Wskazówki mile widziane!

PrinceOfPersia

6.04.2013, 07:41:01

to proste, po prostu w momencie jak klikniesz, funkcja start dalej się wykonuje, i ruch w prawo i ruch w lewo znoszą się wzajemnie.
dopisz to co jest pogrubione:

Cytat

var x=600;
var t;

oraz:

Cytat

clearTimeout(t);
t=setTimeout("zmiana()",20);

_Borys_

6.04.2013, 11:10:24

[HTML] pobierz, plaintext 
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
	<script type="text/javascript">
var move = false;
var x=600;
function start(){
	document.getElementById("start").innerHTML="";
    zmiana();
}
function zmiana(){
    document.getElementById("robak").style.left=x+'px';
    !move ? x-- : x++ ;
    x == 300 || x == 900 ? clearTimeout(t):t=setTimeout("zmiana()",20);
 }
</script>
</head>
 
<body>
<div id="start" onClick="start();">Start</div>
<img src="robak.png" id="robak" onClick="!move ? move = true : move = false;clearTimeout(t);zmiana();" style="position: absolute; top: 400px; left: 600px;"/>
 
 
 
</body>
</html>
[HTML] pobierz, plaintext

Madlova

6.04.2013, 14:24:39

Dzięki wielkie Wam obojgu!

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.