JavaScript: MatrixRain

Hier wird die Intro-Animation der Matrix-Filme nachgebildet (Font: Matrix-Code).
Und das ist der dazugehörige Quelltext:
Code kopieren
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>MatrixRain</title>
    <meta charset='UTF-8'>
    <style>
      body { background:hsl(220,85%,5%); }
      button { width:70px; }
      #matrixbox { margin:20px auto 0; text-align:center; }
      #matrix { background:hsl(125,85%,5%); margin:auto; position:relative; }
      #matrix b { position:absolute; font-size:16px; font-family:'Matrix-Code',monospace; font-weight:normal; text-anchor:middle; }
    </style>
    <script>
      function matrixChar() {
        return (Math.random() < .8 ? chars1[Math.floor(Math.random() * chars1.length)] : chars2[Math.floor(Math.random() * chars2.length)].replace(",", "&lt;").replace(".", "&gt;"));
      }
      
      function matrixInit() {
        if (typeof matrixID !== 'undefined' && matrixID) matrixPlayPause();
        matrix = document.getElementById('matrix');
        cols = 40;
        rows = 40;
        fs = 16;
        fx = fs * 1.1;
        fy = fs * 0.9;
        matrix.style.width  = cols * fx + "px";
        matrix.style.height = rows * fy + fs * .2 + "px";
        chars1 = "アウエオカキケコサシスセソタツテナニヌネハヒホマミムメモヤヨラリワ012345789";
        chars2 = "ー╌▪*+|z:©¦\",.";
        m = [];
        for (x = 0; x < cols; x++) {
          m[x] = [];
          for (y = 0; y < rows; y++) {
            m[x][y] = [matrixChar(), 0];
          }
        }
        matrixID = false;
        matrixPlayPause();
      }
      
      function matrixRain() {
        out = "";
        for (x = 0; x < cols; x++) {
          for (y = 0; y < rows; y++) {
            out += "<b style='left:" + ((x + .1) * fx) + "px;top:" + (y * fy) + "px;color:hsla(125,85%," + (5 + m[x][y][1] * (m[x][y][1] == 1 ? 80 : 50)) + "%," + (.5 + m[x][y][1] * .5) + ");text-shadow:0 0 6px hsl(125,85%," + (5 + m[x][y][1] * 60) + "%);'>" + m[x][y][0] + "</b>";
            if (Math.random() < .1) m[x][y][0] = matrixChar();
          }
          for (y = rows - 1; y >= 0; y--) {
            if (y) m[x][y][1] = m[x][y - 1][1];
            else {
              if (Math.random() < .07) m[x][0][1] = 1;
              else if (m[x][1][1] > .1) m[x][0][1] = m[x][1][1] - .1;
              else m[x][0][1] = 0;
            }
          }
        }
        matrix.innerHTML = out;
      }
      
      function matrixPlayPause() {
        if (matrixID) {
          clearInterval(matrixID);
          matrixID = false;
          document.getElementById('matrixButton1').innerHTML = "Play";
        } else {
          matrixID = setInterval(matrixRain, 150);
          document.getElementById('matrixButton1').innerHTML = "Pause";
        }
      }
    </script>
  </head>
  <body>
    <div id='matrixbox'>
      <div id='matrix'></div>
      <div>
        <button id='matrixButton1' class='smallbutton' onclick='matrixPlayPause();'>Play</button>
        <button id='matrixButton2' class='smallbutton' onclick='matrixInit();'>Restart</button>
      </div>
    </div>
    <div id='chars' style="color:white;font-family:'Matrix-Code',monospace;"></div>
    <script>matrixInit();</script>
  </body>
</html>