JavaScriptSviluppo

JavaScript: semplice animazione in stile Matrix

Questo codice utilizza la funzione setInterval per una semplice animazione in stile Matrix di colore verde:

<html>
  <head>
    <style>

      body {
        background-color: black;
      }

      #matrix {
        font-family: monospace;
        color: #00FF00;
        font-size: 12px;
      }
    </style>
  </head>
  <body>

    <pre id="matrix"></pre>

    <script>
      // Lista di caratteri per la matrice
      var characters = "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ";

      // Matrice vuota
      var matrix = [];
  
      // Inizializza la matrice
      for (var i = 0; i < 40; i++) {
         matrix[i] = "";
         for (var j = 0; j < 40; j++) {
            matrix[i] += characters.charAt(Math.floor(Math.random() * characters.length));
         }
      }
  
      // Aggiorna la matrice ogni 50 millisecondi
      setInterval(function() {
         for (var i = 0; i < matrix.length; i++) {
            var newLine = "";
            for (var j = 0; j < matrix[i].length; j++) {
               // Se il carattere corrente è in fondo alla matrice, sostituiscilo con un nuovo carattere casuale
               if (i == matrix.length - 1) {
                  newLine += characters.charAt(Math.floor(Math.random() * characters.length));
               } else {
                  newLine += matrix[i + 1].charAt(j);
               }
            }
            matrix[i] = newLine;
         }
         document.getElementById("matrix").innerHTML = matrix.join("\n");
     }, 50);
    </script>
  </body>
</html>
/ 5
Grazie per aver votato!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *