《黑客帝国》的代码雨：用TypeScript重现经典特效

《黑客帝国》的代码雨：用TypeScript重现经典特效

1. 引言

还记得《黑客帝国》中那标志性的绿色代码雨吗？今天，我们将用TypeScript和HTML5 Canvas来重现这一经典特效！通过不到50行的代码，你就能在自己的网页上创造出令人惊叹的数字雨效果。让我们一起来看看这段神奇的代码是如何实现的吧！

2. 代码解析

2.1 Canvas初始化

let canvas: HTMLCanvasElement = document.querySelector('canvas')!;
if (!canvas) {
  throw new Error('Canvas element not found');
}

首先，我们获取页面中的 元素。如果没有找到，就抛出一个错误。这是我们的“画布”，所有的代码雨都将在这里呈现。

2.2 2D上下文获取

let ctx: CanvasRenderingContext2D = canvas.getContext('2d')!;
if (!ctx) {
  throw new Error('2D context not available');
}

接下来，我们获取2D渲染上下文。这是我们的“画笔”，用于在画布上绘制图形和文本。

2.3 画布设置

canvas.style.backgroundColor = 'black';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

我们将画布的背景色设置为黑色，并将画布的宽度和高度设置为浏览器窗口的大小，确保代码雨充满整个屏幕。

2.4 字符和位置数组

let str: string[] = "ZXCVBNMLOKIJUHYGTFRDESWAQ52146358790".split('');
let arr: number[] = Array(Math.ceil(canvas.width / 10)).fill(0).map(() => Math.random() * canvas.height / 2);

这里我们定义了两个数组：

• str ：包含所有可能显示的字符，看起来就像随机的代码。
• arr ：存储每个“雨滴”的初始位置，随机分布在画布的上半部分。

2.5 雨滴效果函数

const rain = (): void => {
  if (!ctx) return;

  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = '#0f0';
  arr.forEach((num, index) => {
    ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, num + 10);
    arr[index] = num > canvas.height ? 0 : num + 10;
  });
}

这是核心函数，负责绘制每一帧的代码雨：

• 使用半透明的黑色矩形覆盖画布，创建“拖尾”效果。
• 设置文本颜色为绿色（ #0f0 ）。
• 遍历 arr 数组，在随机位置绘制字符，并更新每个字符的位置。如果字符超出画布底部，就将其重置到顶部。

2.6 定时器

setInterval(rain, 40);

最后，我们使用 setInterval 每40毫秒调用一次 rain 函数，创建流畅的动画效果。

3. 实现效果

4. 拓展

颜色变化 让代码雨的颜色随时间变化：

let hue = 0;
const rain = (): void => {
  // ... 其他代码 ...
  ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
  hue = (hue + 1) % 360;
}

5. 效果

6. 总结

1. 使用 canvas 绘制字符，并随机分布在画布上。
2. 字符的随机分布、字符的随机选择、字符的随机位置、字符的随机速度。
3. 其实就是学习 TypeScript 的一个练习，没有什么难度，主要是理顺其中的逻辑。