JavaScript : initiation aux animations

Maintenant vous savez modifier le DOM de la page vous êtes capables de produire de petites animations voire de petits jeux sympathiques dans une page web ...

Pour tester tous les exemples de ce chapitre il faut afficher la console JavaScript !!!

Pour afficher la console JS sous Chrome produisez la commande :
Personnaliser Chrome (trois points verticaux en haut à droite) / plus d'outils / outils de développement / onglet "console"

Pour afficher la console "web" sous Firefox la commande est :
Ouvrir menu (trois traits horizontaux) / outils de développement / console web

La problématique

Une animation 2D basique c'est une zone d'animation (une balise DIV) avec en "background" une image faisant fonction de décor.
A cela ajouter des "sprites" (ou lutins) c'est à dire des personnages sous forme d'images GIF (animées ou pas).

Dans le cadre du responsive design la largeur de la zone d'animation ne doit pas être exprimée en pixels mais en pourcentages ! Donc concernant les "sprites" positionnés en absolu dans la zone d'animation, les valeurs de la propriété left (ou right) doivent aussi être exprimées en %.

Exemple

... <div style = "display : block ; width : 100% ; height : 400px ; position : relative ; background : url(../images/fond3.jpg) ; margin : auto ; background-size : cover ; " > <img src ='../images/requin.gif' style = "position : absolute ; top : 50px; left : 10% ; width : 10%; " > </div> <script> // variables globales var zone = document.querySelector('div'); var requin = document.querySelector('img'); var X,Y,x,y ; // récupération dimensions zone et position du sprite : première solution X = zone.style.width; Y =zone.style.height; x = requin.style.left; y = requin.style.top ; w= requin.style.width; affichage(); // récupération dimensions zone et position du sprite : deuxièm solution X = getComputedStyle(zone).width; Y = getComputedStyle(zone).height; x = getComputedStyle(requin).left; y = getComputedStyle(requin).top; w = getComputedStyle(requin).width ; affichage(); function affichage() { console.log("largeur zone :" + X + " " + typeof(X)); console.log("hauteur zone :" + Y + " " + typeof(Y)); console.log("positionX du requin " + x + " " + typeof(x)); console.log("positionY du requin " + y + " " + typeof(y)); console.log("largeur du requin " + w + " " + typeof(y)); } </script> ...

Notez bien que la largeur de la zone d'animation est exprimée en pourcentage : 100% (du conteneur).

Essayez ce code !

Ces deux techniques ne donnent pas les mêmes résultats.
Dans les deux cas les valeurs retournées sont de type string.
La méthode getComputedStyle fait une conversion ; les dimensions et positions sur l'axe horizontal sont exprimées en pixels (et non pas en pourcentages).
Réduisez la largeur de la fenêtre et actualiser la page ! Vous voyez que le résultat n'est plus le même avec la deuxième méthode alors que la première méthode affiche toujours les mêmes pourcentages.

Animation contrôlée par l'internaute

Maintenant que l'on connait le type et le format des retours vous pouvez animer le sprite

Dans l'exemple ci-dessous l'internaute déplace le requin dans un beau décor grâce à un clavier tactile.

Le code correspondant

... <style> th, img {border : none ; } </style> <div id = 'decor'style = "display : block ; width : 100% ; height : 400px ; position : relative ; background : url(../images/fond3.jpg) ; margin : auto ; background-size : cover ; " > <img id ='requin' src ='../images/requin.gif' style = "position : absolute ; top : 50px; left : 10% ; width : 10%; " > </div> <table style ="width : 50%" > <caption>Déplacer le squale</caption> <tr><th></th><th><button id ='haut' >&uarr;</button></th><th></th></tr> <tr><th><button id ='gauche'>&larr;</button></th><th></th> <th><button id ='droite'>&rarr;</button></th></tr> <tr><th></th><th><button id = 'bas'>&darr;</button></th><th></th></tr> </table> <script> var requin = document.querySelector('#requin') ; x = requin.style.left; y = requin.style.top; console.log(x); console.log(y); document.querySelector('#droite').onclick = function() { x = parseInt(x) ; x+=3 ; x = x +'%' ; requin.style.left = x ; finfo();} document.querySelector('#gauche').onclick = function() { x = parseInt(x) ; x -=3 ; x = x +'%' ; requin.style.left = x ; finfo();} document.querySelector('#haut').onclick = function() { y = parseInt(y) ; y-=20; y = y +'px' ; requin.style.top = y ; finfo();} document.querySelector('#bas').onclick = function() { y = parseInt(y) ; y+=20; y = y +'px' ; requin.style.top = y ;finfo();} function finfo() { console.log("positionX du requin " + x ); console.log("positionY du requin " + y ); } </script> ...

A propos du CSS et du HTML

La zone d'animation fait 100% par 400px.
Déplacement du "sprite" par un clavier tactile avec quatre touches (flèches). Le clavier tactile est un tableau de 9 cellules (3 par 3) donc cinq cellules vides et quatre cellules contenant un bouton. Chaque bouton affiche une flèche (emploi des entités de caractère) et chaque bouton a un ID.

A propos du script

Comme j'utilise la syntaxe élément.style.left pour récupérer la positionX du requin la nouvelle valeur de left doit être exprimé en pourcentages ! Ici la variation est de 3% horizontalement (et de 20px verticalement).
Si j'avais utilisé la deuxième syntaxe la nouvelle valeur de left devrait être exprimée en "px".

Il faut bien sûr convertir une donnée string en int.

Si clic sur l'un des boutons appel d'une des quatre fonctions anonymes.
Dans chaque fonction il faut convertir le contenu de x (ou y) en un entier (se débarrasser de "px" ou "%") puis il faut faire incrémenter (ou décrémenter) x ou y puis il faut rajouter "px" à x et "%" à y et enfin il faut modifier la valeur des propriétés left & top.
Chaque fonction anonyme appelle la fonction finfo() qui indique la nouvelle position du requin dans le décor (ou en dehors ...).

Le requin peut sortir du décor car ici les "effets de bord" ne sont pas gérés.
Essayez !

Déplacer les "sprites" par le clavier

Si vous connaissez l'objet Event vous savez que l'une des propriétés de cet objet est keyCode (code ASCII de la touche appuyée).
Vous devez alors comprendre le code du jeu ci-dessous car il repose sur la programmation du clavier.

Il s'agit d'un jeu certes "bébête" mais l'intérêt est que sa programmation est simple , à votre niveau (lol) !
Ce jeu se joue à deux ! Un joueur déplace le requin avec les touches "gauche" "droite" "haut" "bas" du clavier pour tenter de croquer le plongeur.
L'autre joueur déplace le plongeur avec les touches U (up) D (down) L (left) et R (right) du clavier pour échapper aux dents du requin.

Le code de la page (extraits)

... <body> ... <div id = 'decor' style = "display : block ; width : 600px ; height : 400px ; position : relative ; background : url(../images/fond3.jpg) ; margin : auto ; background-size : cover;" > <img id ='requin' src ='../images/requin.gif' style = "position : absolute ; top : 10px; left : 20px ; width :10%; " > <img id ='plongeur' src ='../images/plongeur3.gif' style = "position : absolute ; top : 350px; left : 500px ; width : 10% ; " > </div> <script> var requin = document.querySelector('#requin') ; var plongeur = document.querySelector('#plongeur') ; var zone = document.querySelector('#decor'); X = zone.style.width ; // pour récupérer la largeur de la boîte X = parseInt(X) ; // conversion en entier Y = zone.style.height ; Y = parseInt(Y) ; x_maxi = X-100 ; y_maxi = Y-70; var xr = requin.style.left; var yr = requin.style.top; var xp = plongeur.style.left; var yp = plongeur.style.top; document.onkeydown = fclavier_lire; // fonction appelée à chaque fois qu'une touche du clavier est enfoncée function fclavier_lire(e) { // déplacement requin if (e.keyCode == 37) gauche_r(); if (e.keyCode == 39) droite_r(); if (e.keyCode == 38) haut_r(); if (e.keyCode == 40) bas_r(); // déplacement plongeur if (e.keyCode == 76) gauche_p(); if (e.keyCode == 82) droite_p(); if (e.keyCode == 85) haut_p(); if (e.keyCode == 68) bas_p(); } // fonctions pour déplacement du requin function gauche_r() { xr = parseInt(xr) ; xr = xr - 6 ; if( xr <= 0) xr = 0; xr = xr +'px' ; requin.style.left = xr ; } function droite_r() { xr = parseInt(xr) ; xr = xr + 6 ; if (xr >= x_maxi) xr = x_maxi ; xr = xr +'px' ; requin.style.left =xr ;} function haut_r() { yr = parseInt(yr) ; yr= yr - 6; if (yr <= 0) yr = 0 ; yr = yr +'px' ; requin.style.top = yr ; } function bas_r() { yr = parseInt(yr) ; yr= yr + 6; if (yr >= y_maxi) yr = y_maxi ;yr = yr +'px' ; requin.style.top = yr ; } // fonctions pour déplacement du plongeur function gauche_p() { xp = parseInt(xp) ; xp = xp - 10 ; if( xp <= 0) xp = 0; xp = xp +'px' ; plongeur.style.left = xp ; } function droite_p() { xp = parseInt(xp) ; xp = xp + 10 ; if (xp >= x_maxi) xp = x_maxi ; xp = xp +'px' ; plongeur.style.left =xp ;} function haut_p() { yp = parseInt(yp) ; yp= yp - 10; if (yp <= 0) yp = 0 ; yp = yp +'px' ; plongeur.style.top = yp ; } function bas_p() { yp = parseInt(yp) ; yp= yp + 10; if (yp >= y_maxi) yp = y_maxi ;yp = yp +'px' ; plongeur.style.top = yp ; } </script> ...

Le code CSS et le code HTMl ne présentent aucune difficulté. La zone d'animation exprimée en pixels : 600 par 400 (n'est pas adaptative).
Donc et quelque soit la méthode utilisée (getComputedStyle() ou syntaxe simplifiée) la valeur retournée sera toujours exprimée en pixels.
Un gif (le requin) est positionné en haut à gauche de la boite DIV et un autre gif (le plongeur est positionné en bas à droite).

Par contre le JavaScript présente une grande nouveauté : la programmation des touches du clavier.
Examinons quelques instructions :
document.onkeydown = fclavier_lire: si frappe d'une touche du clavier alors appel de la fonction fclavier_lire.
function fclavier_lire(e): dans cette instruction l'argument e représente l'évènement qui a entre autres comme propriété keyCode
if (e.keyCode == 37) gauche_r() : Chaque touche a un code ; la touche ← a le code 37. Donc si appui sur la touche ← appel de la fonction gauche_r

Ces fonctions ne présentent aucune difficulté si vous avez compris le code de l'animation précédente.

Ce chapitre est terminé. J'espère qu'il vous aura plus et vous donnera des idées d'animation.
Jouez !
Retour menu