JS: l'inseguitore

Mi sono ricordato che negli anni 1990 e 2000 andava di moda su Internet il volto che inseguiva il puntatore del mouse. C'erano diversi esempi fatti in SWF.

Questa è una mia implementazione veloce in javascript.
    1 <!DOCTYPE html>
    2 <html>
    3     <head>
    4         <meta charset="utf-8">
    5         <title>Inseguitore</title>
    6         <style>
    7             .inseguitore {
    8                 position: relative;
    9                 width: 20em;
   10                 height: 20em;
   11                 border-radius: 50%;
   12                 background-color: #a0a050;
   13                 display: flex;
   14                 justify-content: center;
   15                 align-items: center;
   16             }
   17             .occhi {
   18                 display: flex;
   19                 position: absolute;
   20                 top: 25%;
   21             }
   22             .occhiodietro {
   23                 position: relative;
   24                 display: flex;
   25                 width: 4em;
   26                 height: 4em;
   27                 background-color: white;
   28                 border-radius: 50%;
   29             }
   30             .occhio {
   31                 position: absolute;
   32                 width: 2em;
   33                 height: 2em;
   34                 background-color: black;
   35                 border-radius: 50%;
   36             }
   37             .occhio1 {
   38                 top: -60%;
   39                 left: -30%;
   40             }
   41             .occhio2 {
   42                 top: -50%;
   43                 left: 30%;
   44             }
   45         </style>
   46     </head>
   47     <body>
   48         <div class="inseguitore">
   49             <div class="occhi">
   50                 <div class="occhiodietro occhio1">
   51                     <div class="occhio"></div>
   52                 </div>
   53                 <div class="occhiodietro occhio2">
   54                     <div class="occhio"></div>
   55                 </div>
   56             </div>
   57         </div>
   58         <script>
   59             function occhinseguono(evento) {
   60                 const occhio = document.querySelectorAll(".occhio");
   61                 occhio.forEach(function (varocchio) {
   62                     let rect = varocchio.getBoundingClientRect();
   63 
   64                     let x = evento.clientX - rect.x;
   65                     let y = evento.clientY - rect.y;
   66                     if (x > 30)
   67                         x = 30;
   68                     else if (x < 0)
   69                         x = 0;
   70                     if (y > 30)
   71                         y = 30;
   72                     else if (y < 0)
   73                         y = 0;
   74 
   75                     varocchio.style.position = "relative";
   76                     varocchio.style.left = x + "px";
   77                     varocchio.style.top = y + "px";
   78                 });
   79             }
   80             document.body.addEventListener("mousemove", occhinseguono);
   81         </script>
   82     </body>
   83 </html>
2023
29 dic