Ecouter et récupérer la position d'un élément en mouvement par .animate() avec setinterval()
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 :
- lorsque l'on appuie sur une touche CTRL il appel la fonction tireCanonAmi() (point 5)
- la fonction tireCanonAmi() va ajouter par un élément div ayant une class .tireLaser dans le document principale #zoneGame
- on lui attribue des propriétés css avec .css()
- 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:
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
