Créer une animation manuelle au clavier en jQuery avec gestion des collisions
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.
Souvent, 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 :
É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 :
- 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).
- 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).
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. ^^