Déplacer un élément avec les flèches du clavier en JavaScript

Étape 1 : Créer la structure HTML

<div class="playground">
    <div class="movable-box"></div>
</div>

Explication du Code HTML

• <div class="playground"> : Conteneur où l'élément sera déplacé.
• <div class="movable-box"> : L'élément qui se déplace lorsqu'on utilise les flèches.

Maintenant que nous avons créé la structure de base, voyons comment lui ajouter du style.

Étape 2 : Ajouter des styles CSS

.playground {
    width: 300px;
    height: 300px;
    border: 2px solid #000;
    position: relative;
    margin: 20px auto;
    box-sizing: content-box;
}
                
.movable-box {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    position: absolute;
    top: 0;
    left: 0;
}

Explication du Code CSS

• Définition du conteneur (.playground)
  .playground { width: 300px; height: 300px; ... }
  Crée un conteneur carré de 300x300 pixels pour délimiter l'espace de déplacement.
• Bordure et centrage horizontal
  border: 2px solid #000;
margin: 20px auto;
  Ajoute une bordure noire et centre le conteneur horizontalement sur la page.
• Positionnement relatif
  position: relative;
  Définit un contexte de positionnement pour les éléments enfants, permettant de positionner .movable-box en absolu.
• Gestion des dimensions avec box-sizing sur .playground
box-sizing: content-box;
  Avec cette valeur (par défaut), les dimensions spécifiées de width et height incluent uniquement la zone de contenu, excluant la bordure et le padding. Cela garantit que le conteneur reste exactement de 300x300 pixels, même avec une bordure de 2px. Si on utilisait border-box, la zone de contenu serait réduite, ce qui affecterait la logique de déplacement.
• Définition de la boîte mobile (.movable-box)
  .movable-box { width: 50px; height: 50px; ... }
  Crée une boîte carrée de 50x50 pixels, destinée à être déplacée.
• Couleur de fond
  background-color: #3498db;
  Applique une couleur bleue à la boîte pour qu'elle soit bien visible.
• Positionnement initial absolu
  position: absolute;
top: 0; left: 0;
  Place la boîte dans le coin supérieur gauche du conteneur .playground.

Avec la structure et les styles en place, il est temps d'ajouter l'interactivité grâce à JavaScript.

Étape 3 : Ajouter le JavaScript

document.addEventListener('keydown', function(event) {
    const box = document.querySelector('.movable-box');
    const step = 10;
    const playground = box.parentNode;

    const currentTop = parseInt(box.style.top, 10) || 0;
    const currentLeft = parseInt(box.style.left, 10) || 0;

    const maxTop = playground.clientHeight - box.offsetHeight;
    const maxLeft = playground.clientWidth - box.offsetWidth;

    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
        event.preventDefault();
    }

    switch (event.key) {
        case 'ArrowUp':
            if (currentTop - step >= 0) {
                box.style.top = `${currentTop - step}px`;
            }
            break;
        case 'ArrowDown':
            if (currentTop + step <= maxTop) {
                box.style.top = `${currentTop + step}px`;
            }
            break;
        case 'ArrowLeft':
            if (currentLeft - step >= 0) {
                box.style.left = `${currentLeft - step}px`;
            }
            break;
        case 'ArrowRight':
            if (currentLeft + step <= maxLeft) {
                box.style.left = `${currentLeft + step}px`;
            }
            break;
    }
});

Explication du Code JavaScript

• Écouteur d'événements (keydown)
  document.addEventListener('keydown', function(event) { ... });
  Permet d'exécuter une fonction à chaque pression de touche.
• Sélection de l'élément à déplacer
  const box = document.querySelector('.movable-box');
  Sélectionne l'élément ayant la classe movable-box pour pouvoir le manipuler.
• Initialisation de la vitesse de déplacement
  const step = 10;
  Définit un déplacement de 10 pixels à chaque pression de touche.
• Définition des limites du conteneur
  const playground = box.parentNode;
  Récupère l'élément parent pour définir le conteneur.
• Calcul de la position actuelle
  const currentTop = parseInt(box.style.top, 10) || 0;
const currentLeft = parseInt(box.style.left, 10) || 0;
  Permet de connaître la position actuelle de l'élément, en partant de 0 si aucune valeur n'est définie.
• Calcul des limites de déplacement
  const maxTop = playground.clientHeight - box.offsetHeight;
const maxLeft = playground.clientWidth - box.offsetWidth;
  Assure que la boîte reste dans les limites de son conteneur.
• Empêcher le comportement par défaut des touches fléchées
  event.preventDefault();
  Empêche le défilement de la page.
• Déplacement de l'élément
  switch (event.key) { ... }
  Vérifie la touche pressée et ajuste la position top ou left de la boîte, en respectant les limites.

Exemple

Utilisez les flèches de votre clavier pour déplacer la boîte bleue dans l'espace ci-dessous.