Discussion :

[axolotl_1]

Je programme un jeu pour enfants où des crocodiles se baladent en bas de l'écran: ils rentrent et ressortent par les bords droit et gauche.

pour avoir le contrôle et mettre en pause ou reprendre l'animation à volonté, il y aurait 2 moyens==>
Ajouter un CSS par

Code CSS :

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

1
2
3
      .paused-animation {
  animation-play-state: paused !important;
}

et dans le script

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
function pauseAnimation() {
  animationPaused = true;
  crocodile2.classList.add("paused-animation");
 
  setTimeout(function() {
    animationPaused = false;
    crocodile2.classList.remove("paused-animation");
    currentPosition += 1;
  }, 2000);
}

Normalement la fonction setTimeout attend 2000 msec avant de reprendre l'animation
Pour reprendre et updater avec currentPosition mesurant la position du crocodile et targetPosition l'endroit où il doit s'arrêter==>

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 updateAnimation() {
  if (!animationPaused) {
    // Mettre à jour la position de l'animation
    // ...
        if (Math.abs(currentPosition) >= Math.abs(targetPosition) - 10) {
      pauseAnimation();
    } else {
// Vérifier si l'animation doit être mise en pause
currentPosition+=3;
  }
  }
requestAnimationFrame(updateAnimation);
}

Ça ne marche pas!! L'autre méthode consisterait à jouer sur les instances==>

Code :

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

1
2
3
crocodile2.style.animationPlayState = "paused";
//...
crocodile2.style.animationPlayState = "running";

Ça ne marche pas non plus: jusqu'ici j'ai été incapable de trouver le moyen optimum d'arrêter puis reprendre une animation là où elle était.
Si vous avez des idées....

[ASCIIDEFOND]

Salut axolotl_1,

Et comme ça ?

Code JavaScript :

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

1
2
crocodile2.style.cssText  = "animation-play-state: paused;"
crocodile2.style.cssText  = "animation-play-state: running;"

[axolotl_1]

J'ai essayé ces 4 instructions censées plus ou moins arrêter l'animation==>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (currentPosition >= targetPosition) {
  isMovingLeft = false;
  cancelAnimationFrame(crocodile1AnimationId); // Utilisez l'identifiant de l'animation pour l'annuler
  crocodile1.style.transitionDuration = "2s"; // Ajoutez une transition de 2 secondes pour la fluidité
  crocodile1.style.animationPlayState = 'paused';
  crocodile1.style.animation = "none";
  crocodile1.style.animation_play_state = 'paused';
  crocodile1.style.right = currentPosition + "px";
 
 
    setTimeout(function() {
    console.log("Je passe dans setTimeout après 2 secondes");
    crocodile1.style.transitionDuration = ""; // Réinitialisez la durée de transition à sa valeur par défaut
}, 2000);

Ceci devrait immobiliser l'animation pendant 2 secondes mais aucune ne marche visiblement.
À moins qu'ailleurs dans mon programme il y ait une interférence mais la console marque bien "Je passe dans setTimeout après 2 secondes".
Ou alors comme je suis sur un MacBook 2014 avec Mojave, la version de Javascript date un peu trop, la version de Safari étant trop ancienne ?
Normalement il devrait exécuter ces instructions séquentiellement donc arrêter le croco pendant 2 secondes ce qu'il ne fait pas.
aucune de toutes ces instructions n'arrive à le stopper.

[ASCIIDEFOND]

Dans l'inspecteur de code, il y a un changement de style pour les éléments "crocodile" ?

...la version de Safari étant trop ancienne ?

Une mise à jour Safari ou alors avec le navigateur TenFourFox (si compatible) ?

[axolotl_1]

Comment est-ce qu'on manie l'inspecteur de code ?
Comment voir s'il y a un changement de style pour le crocodile ?
Merci

[ASCIIDEFOND]

Comment est-ce qu'on manie l'inspecteur de code ?

https://support.monday.com/hc/fr/art...C3%A9veloppeur

Ou en vidéo à ~6,40mn pour la console dans Safari

https://www.youtube.com/watch?v=OFj8hFVS1KY

[axolotl_1]

Merci mais je savais lancer la console Javascript sur Safari. Par contre j'ai appris comment la lancer sur Chrome: utile Cmd+Alt+J

[ASCIIDEFOND]

A présent dans l'inspecteur de code, tu peux voir les changements faits dans l'attribut style des éléments.

[axolotl_1]

Il effectue les changements de style dans mon code ci-dessus d'après la console Javascript==>

[Log] crocodile1.style.animationPlayState = – "initial" – "crocodile1.style.animation=" – "none" (banane_tester2.html, line 501)
[Log] crocodile1.style.animation_play_state = – "paused" – "crocodile1.style.right=" – "906px" (banane_tester2.html, line 502)

Et avant il y a l'instruction cancelAnimationFrame(crocodile1AnimationId); et j'ai défini précédemment crocodile1AnimationId=requestAnimationFrame(movecrocodile1);
...et il passe ensuite après toutes ces instructions ci-dessus censées arrêter l'animation et le prolonger par le setTimeout de 2 secondes.
Mais le crocodile ne s'arrête pas: ni pendant 0.5 et encore moins 2 secondes. Il continue sa route comme si de rien n'était...

J'y comprends rien!

[ASCIIDEFOND]

[Log] crocodile1.style.animation_play_state = – "paused"...

Il y a une erreur avec animation_play_state

Dans style Css -> animation-play-state
Et en JavaScript -> animationPlayState

[axolotl_1]

Tout à fait exact
Je viens de m'acheter la bible Javascript qui fait environ 1000 pages (en anglais évidemment) plus un CD d'exemples...
De quoi lire pendant les longues soirées d'hiver!!

Je viens de résoudre mon problème en bidouillant les setTimeout et en en rajoutant et en imbriquant 4 au total et ça marche: un peu au hasard mais je suis arrivé à ce que je voulais.
Un crocodile doit se balader de droite à gauche sur la ligne du bas de l'écran, puis s'arrêter au milieu pendant 2 secondes et repartir dans l'autre sens ouf!
Donc résolu ==> je touche plus à rien
RÉSOLU!!

[ASCIIDEFOND]

Bonne lecture pour tes longues soirées d'hiver.

[NoSmoking]

Bonjour,
j'ai du mal à comprendre la démarche attendu que d'un côté tu utilises requestAnimationFrame pour gérer ton animation et que de l'autre tu essaies d'appliquer des propriétés CSS liées aux règles keyFrame, les deux techniques sont indépendantes.

Je viens de résoudre mon problème en bidouillant les setTimeout et en en rajoutant et en imbriquant 4 au total et ça marche: un peu au hasard mais je suis arrivé à ce que je voulais.

Tu pourrais nous montrer ta solution, cela me paraît bizarre cette imbrication !

Un crocodile doit se balader de droite à gauche sur la ligne du bas de l'écran, puis s'arrêter au milieu pendant 2 secondes et repartir dans l'autre sens ouf!

Pour le coup cette animation peur être simplement réalisée en CSS via les règles keyFrame, le retour pouvant être réalisé par une déclaration : animation-direction: alternate.

[axolotl_1]

en fait c'est plus compliqué que cela.
Je voulais que l'image gif du crocodile -qui ouvre et ferme la gueule alternativement- s'arrête au milieu de l'écran pendant 4 secondes et reparte ensuite dans l'autre sens. E
Et ça, beaucoup plus que retourner le croco pour qu'il aille en sens inverse, ce fut diablement compliqué car il s'agissait non plus seulement de faire faire un aller et retour au croco au milieu de l'écran mais faire qu'il s'arrête 4 secondes au milieu de l'écran en ouvrant et fermant la gueule pour obtenir un effet sympa.
Et là j'en ai sué des ronds de chapeau mais ça marche.
Je vais faire une video pour vous montrer car je cherche des idées pour le scénario ensuite.
J'ai pas essayé

animation-direction: alternate

mais je la garde en réserve au cas où

[SpaceFrog]

Pour déplacer des "personnages" tu peux utiliser des sprites ...

https://www.developpez.net/forums/d9...-dessin-anime/

https://blog.developpez.com/spacefro...per-vos-images

[axolotl_1]

Merci ça a l'air beaucoup plus simple comme ça effectivement.
où se procure-t-on ces plug-ins de sprite ?
Là je débute en javascript donc j'y vais doucement
===============================
voici l'animation enregistrée sur DropBox==>
https://www.dropbox.com/s/0w12ov0akf...croco.mov?dl=0
c'est mon premier projet en Javascript donc j'y connais pas grand chose.
À ce stade, trois options s'offrent à moi pour terminer l'animation.
1° L'interaction singe-croco est sans incidence sur le jeu: le singe et le crocodile peuvent se croiser mais s'ils se touchent, pas de pénalités. Ça reste purement ludique.
2° Chaque fois que le croco attrape le singe, le compteur redescend de 10 points... Et les crocos surgissent tous les 10 points chacun de son côté à tour de rôle.
Plus le joueur a de points, plus les crocos deviennent rapides à l'aller, plus lents au retour.
3° Quand le croco et le singe se rencontrent, soit le jeu est fini carrément en Game Over, soit si j'ai de l'énergie et du temps le singe a un crédit de mettons 3 ou 5 vies au départ et il en perdra une à chaque fois le croco l'attrape.
Mais déjà le programme est assez long: j'ai pas choisi la voie la plus simple pour programmer cela et je suis sûr qu'il en existe de + simple et + économique.

Il faut que ce soit ludique et assez simple, le public visé est disons de 6 à 12 ans.
Donc si vous avez des idées, pas trop compliquées à programmer...

[SpaceFrog]

Dans les liens fournis, ou avec une recherche sur google...

https://blaiprat.github.io/jquery.animateSprite/