マトリックス風な画面作ってみる

現実逃避をかねてちょっと遊んでみたら意外と楽しかったので書く

HTML
js
実際に動かしたらこんな感じ
参考記事

HTML

<!DOCTYPE html>
<html lang="ja"">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matrix text</title>
<script type="text/javascript" src="./matrix.js"></script>
</head>
<body>
<canvas id="q"></canvas>    
</body>
</html>

js

window.onload = Matrix = () => {
  // canvas領域のサイズを画面サイズに設定する
  const screen = window.screen;
  const width = (q.width = screen.width);
  const height = (q.height = screen.height);

  // 文字を256文字の座標を1で初期化する
  let letters = Array(256).join(1).split("");

  const draw = () => {
    // canvasのコンテキストを取得する
    const ctx = q.getContext("2d");

    // 黒でcanvas領域を塗りつぶす(alpha 0.12)
    // 半透明の黒で塗りつぶすので、前回書き込まれた文字は薄暗くなるものの、1回の描画では真っ黒にならない
    // 塗りつぶしの色を設定
    ctx.fillStyle = "rgba(0, 0, 0, .09";
    // 矩形領域を塗りつぶす
    ctx.fillRect(0, 0, width, height);
    // 文字の描画色を設定する
    ctx.fillStyle = "#0F0";

    // 1文字ずつ描画処理を行う
    letters.map(
      (textRender = (y, index) => {
        // 0xfeff0021 - feff007e (半角の英数記号)の範囲の文字コードを取得する(UTF-16)
        let code = 0xfeff0021 + Math.random() * 93;
        // 指定文字コードの文字を取得する(UTF-16の文字コードを指定する)
        text = String.fromCharCode(code);
        x = index * 10;
        // テキストをcanvas領域に描画する
        ctx.fillText(text, x, y);
        // 文字のy座標を下に移動する。yが700+ランダム値を超えたらyをリセットする。
        letters[index] = y > 700 + Math.random() * 10000 ? 0 : y + 10;
      })
    );
  };
  setInterval(draw, 30);
};