Animation déplacement d'éléments
Bonjour, je débute en jQuery et pour m'exercer, j'ai décidé de coder un petit casse-briques, après être parvenu (Non sans mal) à animer un rectangle représentant la raquette en même temps que la souris, je ne parviens pas à faire se déplacer la balle, je souhaite que celle-ci se déplace vers le haut après que l'utilisateur ait cliqué, j'utilise pour cela une variable initialisée à false que je mets à true lors du clic avec la méthode click() ; puis, lorsque la variable est à true, la variable représentant la hauteur de la balle est décrémentée mais pourtant, la balle ne bouge pas d'une once.
Voici mon code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html>
<head>
<script src="../jquery-3.3.1.min.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="Raquette"></div>
<img class="Balle" src="img/Balle.jpg">
</body>
</html> |
Mon code JavaScript :
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
48
49
| $(document).ready(function()
{
var xRaquette;
var largMax = $(window).width() - 200;
var continuer = true;
var balleLancee = false;
var xBalle;
var yBalle;
$(document).click(function() //Lancer de la balle
{
balleLancee = true;
});
$(document).mousemove(function(e) //Déplacement raquette
{
if(e.pageX < largMax)
xRaquette = e.pageX;
else
xRaquette = largMax;
$('.Raquette').offset(
{
left : xRaquette,
top : $(window).height() - 20
}
);
});
if(!balleLancee) //Position initiale balle
{
xBalle = $(window).width()/2 - 15;
yBalle = $(window).height() - 20 - 30;
}
if(balleLancee) //Déplacement balle
{
yBalle-=10;
}
$('.Balle').offset( //Position balle
{
left : xBalle,
top : yBalle
}
);
}); |
Mon code CSS :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| .Raquette
{
width : 200px;
height : 20px;
background-color: red;
}
.Balle
{
width : 30px;
height : auto;
} |
Il y a quelque chose que je ne comprends pas : Moi qui ai l'habitude de coder en C, il faut une boucle pour avoir un programme qui s'exécute en continu. Ici j'ai du mal à comprendre comment ça fonctionne, étant donné qu'on peut à tout moment détecter des événements tels que clics ou déplacements de curseur, j'en déduis que cette boucle existe déjà "en arrière-plan", je me trompe ?
Merci par avance, et bravo aux Bleus !
