Discussion :

[loopio07]

Bonjour, je suis en train de créer un mini-jeu éducatif pour l'école primaire ou mes enfants sont scolarisés. C'est un QCM et quand les élèves obtiennent la moyenne, il gagne une image, un poisson au format PNG, qu'il placent ensuite dans un aquarium virtuel.

J'ai réussi à animer le poisson aléatoirement avec la fonction animate ci-dessous

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
$(document).ready(function() {
    animateDiv();
 
});
 
function makeNewPosition(){
 
    // Get viewport dimensions (remove the dimension of the div)
    var h = $('#global').height() - 64;
    var w = $('#global').width() - 80;
 
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
 
    return [nh,nw];    
 
}
 
function animateDiv() {
    var $target = $('#a');
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
 
    $('#a').animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv();
    });
 
};
 
function calcSpeed(prev, next) {
 
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
 
    var greatest = x > y ? x : y;
 
    var speedModifier = 0.05;
 
    var speed = Math.ceil(greatest / speedModifier);
 
    return speed;
 
}

j'ai une div

Code :

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

1
2
 
<div id='a' ><img src="fish.png" /></div>

Cela fonctionne à merveille et l'illusion est parfaite.

Pour plus de réalisme, je voudrais charger une div différente toutes les x secondes représentant le poisson dans un sens, puis dans l'autre, avec bien sur un PNG pour chaque état dans chaque div.

J'ai tenté avec la fonction fadeOut et FadeIn avec un delay, (j'ai bien entendu crée une autre fonction animate pour #a2)

Code :

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

1
2
3
 
<div id='a' ><img src="fish.png" /></div>
<div id='a2' ><img src="fish2.png" /

>

Code :

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

1
2
3
4
5
  jQuery(document).ready(function(){
    $("#a").delay(6000).fadeOut(500);
    $("#a2").delay(6500).fadeIn(500);
    $("#a2").delay(6500).fadeOut(500);
})

;


Mais les deux div sont malgré tout chargées, par contre elles disparaissent au bout d'un moment (ce qui est logique car je ne fais pas de boucle dans ma fonction)

Il y aurait il un moyen de combiner les deux choses, animate et fadeOut/In ?
L'idéal serait que dans la fonction animate, cela détecte quand le poisson se déplace vers la droite et charge la div #a, et quand il se déplace vers la gauche on charge la div #a2. ça à l'ai compliqué je sait (en tout cas pour mon niveau ! )

[SpaceFrog]

Code :

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

 $("#a2").delay(6500).fadeIn(500).delay(6500).fadeOut(500);