Discussion :

[crozet.magenta]

Bonjour,
J'ai une fonction anime qui produit une animation en s'appelant elle même
de cette forme :

Code javascript :

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

1
2
3
4
5
 
function anime(){
 diverses commandes;
 anime();
}

est-il possible de faire une fonction pour stopper l'animation (sortir de la "boucle") et une autre pour la mettre en pause à l'endroit où elle en est puis reprendre à l'appui sur une touche du clavier ?

Merci d'avance pour vos réponses

[MaitreKaio]

Si tu codes de cette manière, tout ton CPU va passer dans animate. Outre que cela risque de fortement ennuyer l'utilisateur (et le navigateur), c'est inutile puisque ta boucle d'animation sera exécutée bien plus souvent que nécessaire.
En général, un résultat de 60 frames/secondes est un bon résultat, sans saccade. Ce qui veut dire que tu veux exécuter ta fonction anime() 1000/60 fois par seconde. Pour cela, tu peux demander, à la fin de ta fonction anime(), à ce qu'elle soit exécutée à nouveau passé un certain délai:

Code :

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

1
2
3
4
5
6
7
8
 
function anime(){
 diverses commandes;
 setTimeout(
  function (e) {
   anime();          
  }, 1000 / 60);
}

Pour gérer les pauses, le principe est de gérer un booléen qui t'indique si ton jeu est en pause ou non, et de ne pas exécuter la fonction anime() si c'est le cas.

Note:
Je n'entre pas dans le détail de requestAnimationFrame(), une nouveauté HTML5 qui permet de gérer plus finement l'exécution de la boucle d'animation

[crozet.magenta]

Merci pour ta réponse très rapide
je note ton conseil pour le framerate et je vais essayer de m'en souvenir

concernant la pause, si j'ai bien compris ça donnerait un truc dans ce genre

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function pause_switch(){
    if(pause == false) pause = true;
    else pause = false;
}
 
function anime(){
    diverses commandes;
    while(pause);
    setTimeout(
      function (e) {
       anime();          
    }, 1000 / 60);
}

et pour le stop je mets

Code javascript :

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

if(stop) setTimout(function(e) {anime();},1000/60);

ou il existe un moyen de stopper l'exécution d'une fonction ?

[Bovino]

Code :

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

while(pause);

Je suis toujours ému quand je vois une boucle infinie !

Plus sérieusement, une animation ne se gère en aucun cas avec des boucles mais avec des timers.
Quelques mots clé : requestAnimationFrame, setTimeout, clearTimeout, setInterval, clearInterval.

[MaitreKaio]

Quand l'utilisateur demande une pause, tu peux attendre la prochaine exécution de ta boucle d'animation pour mettre en oeuvre la pause, vu que c'est fait n fois par seconde.
Donc tu auras un écouteur d’évènement clavier qui va juste inverser ton booléen (donc appeler pause_switch()) et ta boucle d'animation n’appellera le setTimeout() que si l'on n'est pas en pause.
En tous cas ça me parait une bonne piste de départ.

[crozet.magenta]

ok donc si j'ai bien compris ça donnerait un truc du genre de ça dans la fonction pause_switch :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
 
function pause_switch(){
    if(pause == false) {
      pause = true;
      time = 10000000;
    }
    else {
      pause = false;
      time = 1000/60;
    }
}

et la variable time est utilisée dans la fonction setTimeout

[Bovino]

Euh... non, tu n'as rien compris...

Tu n'as pas besoin de modifier time, juste de donner la bonne valeur à pause :

Code :

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

1
2
3
4
5
6
function pause_switch(){
    pause = !pause;
    if(!pause){
        anim();
    }
}

puis dans anim(), appeler ou non setTimeout() selon la valeur de pause !