canvasは使わずに短いコードでスクリーンセーバーのような色んな色の線が残像を残しながら上下左右ランダムに移動する

以下が実装例です。ランダムな色と移動方向を決め、移動距離をランダムに決めることで、スクリーンセーバーのような動きを実現しています。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>スクリーンセーバー風アプリ</title>
    <style>
      html, body {
        height: 100%;
      }
      body {
        margin: 0;
        background-color: black;
        overflow: hidden;
      }
      #line {
        position: absolute;
        width: 2px;
        height: 2px;
      }
    </style>
  </head>
  <body>
    <script>
      const line = document.createElement("div");
      line.id = "line";
      document.body.appendChild(line);

      let x = Math.random() * innerWidth;
      let y = Math.random() * innerHeight;
      let dx = (Math.random() - 0.5) * 2;
      let dy = (Math.random() - 0.5) * 2;
      let distance = Math.random() * 10 + 1;
      let color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")";

      function animate() {
        if (x > innerWidth || x < 0) {
          dx = -dx;
          distance = Math.random() * 10 + 1;
          color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")";
        }

        if (y > innerHeight || y < 0) {
          dy = -dy;
          distance = Math.random() * 10 + 1;
          color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")";
        }

        x += dx * distance;
        y += dy * distance;

        line.style.backgroundColor = color;
        line.style.transform = "translate(" + x + "px, " + y + "px)";
        requestAnimationFrame(animate);
      }

      animate();
    </script>
  </body>
</html>
```

ジョークとして、プログラムのコメントに「正しいJavaScriptの使い方」と書いておくのも面白いかもしれません。