Animation pause et stop

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

Code:

---

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 :)

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:

---

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

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:

---

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:

---

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

---

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

Code:

---

while(pause);

---

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

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.

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.

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

Code:

---

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

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

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

Code:

---

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 !

Et même encore plus simple:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function pause_switch(){ pause = !pause; }   function anime(){ diverses commandes; if (!pause) { setTimeout( function (e) { anime(); }, 1000 / 60); } }

---

Bah non... comment tu relances le timer sinon ?
Sinon:

Code:

---

setTimeout(anime, 1000 / 60);

---

;)

tout à fait vrai, désolé !

Je t'en voudrais volontiers, mais ça supposerait que de mon côté, je ne commette jamais d'erreur... :aie:

je récapitule pour voir si j'ai tout compris :

Code:

---

setTimeout(anime, 1000 / 60);

---

sert à économiser le CPU en mettant un framerate à 60 fps environ.

Code:

---

1 2 3 4 5 6

function pause_switch(){ pause = !pause; if(!pause){ anim(); } }

---

change la valeur de pause et relance l'animation à la sortie de la pause

Code:

---

1 2 3 4 5 6 7 8 9

function anime(){ diverses commandes; if (!pause && !end) { setTimeout( function (e) { anime(); }, 1000 / 60); } }

---

relance l'animation si la pause est désactivée et si end est à false

Tu as saisi :ccool:

Super, merci pour votre aide