Discussion :

[klaiko]

Bonjour à tous,


Voilà peu de temps je suis passé à jquery et j'aimerai relever la position d'une élément (div) HTML ayant une class.

Pour être plus précis :

1. lorsque l'on appuie sur une touche CTRL il appel la fonction tireCanonAmi() (point 5)
2. la fonction tireCanonAmi() va ajouter par un élément div ayant une class .tireLaser dans le document principale #zoneGame
3. on lui attribue des propriétés css avec .css()
4. on lui attribue une méthode .animate() lui donnant un déplacement vers le haut jusque -35px

Jusque là tout est ok et cela fonctionne très bien.

Mais comment puis-je connaitre en temps réel la position Top de la div qui viens juste d’être animée par la méthode .animate() sans faire planter le navigateur ?

J'ai essayé avec un setInterval() mais setInterval() continue après que le Laser aie passer la coordonnée Top -35 !
L' écoute avec setInterval() continue et est relancée à chaque tire vu que l'événement clavier entraine l'appel de la fonction et donc setInterval() par la même occasion.

Içi j'ai virer mon code contenant setInterval() vu que cela fait planter le navigateur qui est ralentit de plus en plus jusque à se planter car avec ce setInterval() qui ne se stoppe pas je suis dans une boucle infinie.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
$(function(){
 
// 1.  Délimitation de la zone
	$("body").css({width: '1200px', backgroundColor: '#F9BBBB', margin: '10px auto'});
 
// 2. Elément zoneGame  (zone totale du jeux et délimitation de la taille de la zone
	$("body").append('<div id="zoneGame"></div>');
	$("#zoneGame").css({width: '892px', height: '768px', position: 'relative', margin: '5px auto', backgroundColor: '#000', borderBox: "2px solid #555", opacity: '0.9'});
 
// 3. Elément Mobile (le canon ami)
	$("#zoneGame").append('<div id="canon"></div>');
	$("#canon").css({position: "absolute", top: 660, left: 426, width: "40px", height: "24px", backgroundImage: "url('img/ami/40x24/canon.png')"});
 
// 4. Événements clavier
	$(document).keydown(function(e){						// on place un écouteur sur le document
		if(e.which == 37){							// touche de déplacement vers la gauche
			canonX = parseInt($('#canon').css('left'));	
				if(canonX > 4){						// extrémité gauche de canon à > que 4 
					$('#canon').css('left',canonX -= 8);		// step de déplacement du canon
				}
		}   	
		if(e.which == 39){							// touche de déplacement vers la droite
			canonX = parseInt($('#canon').css('left'));
				if(canonX < 848){					// extrémité gauche de canon à < que 626
					$('#canon').css('left',canonX += 8);	        // step de déplacement du canon
				}
		}
		if(e.which == 17){							// si touche CTRL pressée
			tireCanonAmi();							// appel la fonction tireAmi
		}
	});
 
//5. Fonction tireLaser (le missile)
		function tireCanonAmi(){
			$("#zoneGame").append('<div class="tireLaser"></div>'); // on ajoute l'élément
 
			// on écoute la position du canon et on met les coordonnées dans des variables pour ensuite faire partir le missile au bout du canon
			var posiCanonLeft =  parseInt($('#canon').position().left) + 18;    // origine 316 (40-4)/2=18  missile fait 4px en width
 
                        // propriétés de l'élément tireLaser
			$("#zoneGame .tireLaser").css({width: "4px", height: "16px", position: "absolute", top: 630, left: posiCanonLeft, backgroundImage: "url('img/ami/40x24/missile-ami.png')"});
 
                        // animation de l'élément tireLaser
			$("#zoneGame .tireLaser").animate({top: '-35px', left: posiCanonLeft}, "slow", 'linear');
		}
});

Si vous avez une idée qui permettrai de faire un setInterval() récupérant la position TOP en temps réel et stoppant setInterval() lorsque le Laser arrive à une position verticale par exemple -35 TOP ?

Je vous remercie cela me permettrai d'avancer dans mon exercice.

Bien à vous,

Klaiko

[SpaceFrog]

en passant pas le step de animate
http://jsfiddle.net/aYVUE/

[klaiko]

Merci SpaceFrog pour votre réponse très rapide et surtout pour l'exemple,

Je viens de tester le lien http://jsfiddle.net/aYVUE/ qui m'a placé sur la voie et qui va m'éviter d'utiliser un setInterval() grâce à l'option step de la méthode .animate() ;-)

J'ai placé un console.log pour voir exactement ce que me renvoyait var pos = $('#wrapper').position(); comme ceci console.log(pos);

Je constate que le résultat de console.log(pos); me renvoi un Object sous cette forme Object { top=65.01666259765625, left=67.33332824707031} :-) et que cela ne continue plus.

Puisque c'est d'un objet qu'il s’agit je dois pouvoir atteindre la valeur top comme ceci pos[top] pour pouvoir utiliser la valeur top stockée dans la variable locale pos et là j'ai une erreur de type undefined

J'utilise console.log(pos[top]); qui me renvoi undefined

[Watilin]

C’est pos.top ou alors pos['top']

[klaiko]

Je vous remercie Watilin,

Je vais tester cela avec le reste.