Créer une animation manuelle au clavier en jQuery avec gestion des collisions

Mathieu Chartier 15 septembre 2015 à 10:25 Tutoriels illustrés 0 commentaire

Dans le tutoriel précédent, nous avons appris à créer une animation automatique sans gestion des mouvements. Dans ce second tutoriel du même acabit, nous allons créer une animation entièrement gérée au clavier (avec les flèches de déplacement) qui prend en compte les collisions et impacts contre des bordures.

Effets de rebond en jQuery avec impact et zone de déplacement au clavier

Chevauchement et collision en jQuerySouvent, les effets ne gèrent pas les collisions ni les impacts et la zone d'animation est en réalité inutile puisque les déplacements dépassent le cadre. Ici, nous allons montrer comment faire les déplacements mais aussi les zones d'impact afin de toujours rester bloqué dans la zone de déplacement autorisée.

Vous pouvez télécharger le résultat des deux tutoriels dans l'archive suivante :

Télécharger “Effet d'animation en jQuery (avec collisions et rebonds)”rebond1.zip – Téléchargé 3564 fois – 83,49 Ko

Étape n°1

Création de l’HTML

Ajout de la zone de déplacement autorisée et de l’élément à déplacer (une balle ici) dans le <body>.

<div id="zone">
    <div id="rebond"></div>
</div>

Étape n°2

Création du CSS d’origine

Ajout du style de la zone délimitée et de la balle à déplacer.

* {padding:0; margin:0; font-size:1em; border:0}

#zone {border:3px solid #007da0; margin:3em; height:150px; width:300px}
#rebond {background:red; width:1em; height:1em; border-radius:20px}

Étape n°3

Ajout de jQuery et des fonctions initiales

Ajoutez jQuery ainsi que les scripts de départ (fonctions d’initialisation) pour préparer la programmation de l’effet.

<script type="application/javascript" src="jquery-1.11.3.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
   function rebondsManuels() {
      // Code à ajouter
   }
   rebondsManuels();
});
</script>

Étape n°4

Récupération des dimensions et des délimitations de zone

Créez plusieurs variables pour récupérer les dimensions des éléments (zone rectangulaire + balle dans l’exemple) mais aussi pour délimiter le quadrillage autorisé pour les déplacements.

Cette étape est fondamentale pour bien gérer les déplacements mais surtout les dépassements de blocs (collisions et impacts contre les bords).

// Variable générale
var z = $('#zone'); // Zone
var el = $('#rebond'); // Elément à déplacer
        
// Enregistrement des dimensions de l'élément à déplacer
var hauteurElement = el.height();
var largeurElement = el.width();
        
// Enregistrement des dimensions de la zone
var hauteurZone = z.innerHeight();
var largeurZone = z.innerWidth();
        
// Epaisseur de la bordure de zone
var bordureZone = 3;
        
// "Quadrillage" en pixel (pour savoir où sont les bordures)
var pixelHaut = z.offset().top + bordureZone;
var pixelGauche = z.offset().left + bordureZone;
var pixelBas = pixelHaut + hauteurZone - bordureZone;
var pixelDroite = pixelGauche + largeurZone - bordureZone;

Étape n°5

Création des variables de mouvement

Ajoutez plusieurs variables pour gérer les sens des mouvements (orientations sur les axes X et Y), les déplacements (initialisés à 0) et la vitesse de déplacement (timing).

Les valeurs des orientations de mouvement et du timing joue sur la fluidité de l’animation !

// Variable utile pour la boucle de mouvement
var orientationX = 3; // Valeur de déplacement
var orientationY = 3; // Valeur de déplacement
deplacementX = 0; // Variable globale par défaut (pour éviter les mauvais déplacements)
deplacementY = 0; // Variable globale par défaut (pour éviter les mauvais déplacements)
var timing = 1000/25000; // x images par seconde

Étape n°6

Gérer les événements au clavier et les appuis multiples

Ajoutez ces quelques lignes pour gérer les appuis multiples au clavier. En effet, sans cette astuce, il sera compliqué de jouer avec les déplacements en diagonale…

// Gestion du clavier (pour les appuis multiples notamment)
var keys = {}
$(document).keydown(function(e) {
   keys[e.keyCode] = true;
});
$(document).keyup(function(e) {
   delete keys[e.keyCode];
});

Étape n°7

Préparer la boucle des déplacements

Ajoutez ces quelques lignes pour prendre en compte les nouveaux déplacements (étapes suivantes). Il ne s’agit pas réellement d’une boucle mais d’une prise en compte des événements jQuery au clavier.

// Boucle manuelle pour créer le mouvement
$(document).keydown(function(ev) {
   
   // Codes des étapes suivantes à ajouter
   
   position = el.offset({
      left:offsetGauche + deplacementX,
      top:offsetHaut + deplacementY
   });
});

Étape n°8

Récupération de l’emplacement de l’élément en mouvement

Il faut absolument récupérer l’emplacement de l’élément à déplacer pendant son mouvement afin de créer les collisions.

// Pixels occupés par l'élément à déplacer
var offsetHaut = el.offset().top;
var offsetGauche = el.offset().left;
var offsetBas = offsetHaut + hauteurElement;
var offsetDroite = offsetGauche + largeurElement;

Étape n°9

Gestion des déplacements au clavier et des collisions

Les deux étapes sont indissociables, il convient de gérer les mouvements au clavier mais aussi le cas des collisions (dépassements de zones).

Bouclez les événements au clavier (pour mieux gérer les appuis multiples) et selon les cas, modifiez le déplacement :

  1. S’il n’y a pas de collision, on multiplie le déplacement par 1 (vers le bas ou vers la droite) ou par -1 (vers le haut ou vers la gauche).
  2. S’il y a collision, on multiplie par 0 pour bloquer le déplacement. Ainsi, aucun chevauchement ou dépassement de zone ne se produit.

Les codes 37, 38, 39 et 40 correspondent aux touches fléchées du clavier.

for(var direction in keys) {
   // Flèche Droite
   if(direction == 39) {
      if(offsetDroite >= pixelDroite) {
         var deplacementX = orientationX * 0;
      } else {
         var deplacementX = orientationX * 1;
      }
   }
   // Flèche Gauche
   if(direction == 37) {
      if(offsetGauche <= pixelGauche) {
         var deplacementX = orientationX * 0;
      } else {
         var deplacementX = orientationX * -1;
      }
   }
   // Flèche Haut
   if(direction == 38) {
      if(offsetHaut <= pixelHaut) {
         var deplacementY = orientationY * 0;
      } else {
         var deplacementY = orientationY * -1;
      }
   }
   // Flèche Bas
   if(direction == 40) {
      if(offsetBas >= pixelBas) {
         var deplacementY = orientationY * 0;
      } else {
         var deplacementY = orientationY * 1;
      }
   }
}

Étape n°10

Résultat de l’animation manuelle au clavier. Ici, les déplacements se font avec les flèches et lorsque l’on touche un bord, soit la balle se bloque, soit elle continue le déplacement le long de la bordure (si le mouvement est en diagonale).

Déplacements manuels en jQuery avec collisions et clavier

Conclusion

Les déplacements au clavier peuvent paraître saccadés selon les réglages que nous faisons dans les variables d’orientation en X et Y, mais aussi en fonction de la vitesse (timing) choisie. Il convient de jouer avec ces valeurs pour obtenir un résultat satisfaisant.

Idéalement, ce type d’animation correspond à un petit jeu vidéo ou à un ensemble d’éléments en mouvement. Ce tutoriel ne donne que la base et l’idée générale pour gérer les mouvements, les animations, les déplacements et les collisions. Je vous laisse imaginer le reste pour créer des effets plus puissants comme des effets Parallax au clavier, etc. ^^