Avancer un objet avec Effect.Move et Effect.Parallel
Bonjour à tout le monde,
Je dois réaliser une course de formule1 à l'aide de frameworks javascript. Le but est de faire avancer aléatoirement des voitures. Je calcule une valeur aléatoire correspondant au "saut" effectué de la voiture puis j'avance la voiture et je réitère l'opération jusqu'à la ligne d'arrivée.
Mon problème pour le moment est que je n'arrive pas a fluidifier le mouvement de la voiture entre chaque saut... hormis en trafiquant les valeurs des différent champs d'une manière pas très belle ... Alors d'abord le code :
Html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" xml:lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Test de Effect.Opacity</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="deplacement.js"></script>
</head>
<body>
<input type="button" id="bouton_depart" value="Lancer la course" /><br />
<div id="voiture1" ><img src="voiture.png" /></div><br />
<div id="voiture2" ><img src="voiture2.png" /></div><br />
<div id="voiture3" ><img src="voiture3.png" /></div>
</body>
</html> |
Css :
Code:
1
2
3
| #voiture1 ,#voiture2, #voiture3{
display : inline;
} |
Javascript :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| function applyEffect(e) {
Event.stop(e);
avanceVoiture();
} // applyEffect
function avanceVoiture()
{
new Effect.Parallel([
new Effect.MoveBy('voiture1',0,5, {sync: true, fps : 100}),
new Effect.MoveBy('voiture2',0,10, {sync: true, fps : 100}),
new Effect.MoveBy('voiture3',0,5, {sync: true, fps : 100})
],{delay : 0.0, duration : 10, fps : 100, from:0.0, to:1.0
, afterFinish:avanceVoiture
}
);
}//avanceVoiture
function chargement() {
Event.observe('bouton_depart', 'click', applyEffect);
} // bindTestElements
Event.observe(window, 'load', chargement); |
Après plusieurs heures de test aussi peu fructueux les uns que les autres je me suis dit que j'allais trafiquer d'une façon peu banale les attributs delay et from, c'est a dire en leur passant des valeurs négatives. A ma grande surprise j'arrive a un bon résultat. Je débute vraiment en javascript mais le bouquin que j'ai lu spécifie des valeurs entre 0.0 et 1.0 pour from, et une valeur d'attente pour delay... mettre une valeur d'attente négative je ne trouve pas cela très élégant... alors si vous aviez une solution plus potable a me transmettre j'en serais ravi
P.S : pour le moment je n'ai pas de pas aléatoires c'est normal, je ferais ce point à partir du moment où l'avancer des mes voitures sera fluide
Cordialement
