Coder un bouton qui fuit quand on essaie de le cliquer avec HTML, CSS et JavaScript

Ce tutoriel montre comment créer un bouton web qui fuit devant le curseur de la souris en combinant HTML, CSS et JavaScript.

1. Structure (HTML) : Créez un élément <button> avec un identifiant unique (ex: id="fuyant") et un texte.
2. Style (CSS) : Utilisez le sélecteur d'ID pour centrer le bouton, le redimensionner et lui appliquer une couleur.
3. Logique (JavaScript) :
   • Récupérez le bouton via document.getElementById.
   • Ajoutez un écouteur d'événement mousemove sur la fenêtre.
   • Dans la fonction, comparez la position de la souris avec celle du bouton.
   • Calculez la distance entre les deux points.
   • Si la distance est inférieure à un seuil défini, changez la position du bouton (ex: en le déplaçant aléatoirement ou à l'opposé).

Exemple :

const btn = document.getElementById('fuyant');
window.addEventListener('mousemove', (e) => {
  const rect = btn.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  const distance = Math.sqrt((e.clientX - centerX)**2 + (e.clientY - centerY)**2);

  if (distance < 100) {
    // Déplace le bouton pour fuir
    btn.style.left = Math.random() * (window.innerWidth - 100) + 'px';
    btn.style.top = Math.random() * (window.innerHeight - 50) + 'px';
  }
});

Enregistrez le tout dans un fichier .html et ouvrez-le dans un navigateur pour voir le bouton esquiver le curseur.