当前位置：首页 > news >正文

只用50行javascript代码，我把网页变成《黑客帝国》数字雨

news 2026/3/26 23:12:25

前言

同事上班摸鱼看《黑客帝国》，我直接让他的浏览器下起了“代码雨”…

一、一个恶作剧引发的技术狂欢

上周三下午3点，办公室安静得只有键盘声。我瞥见隔壁工位的小王，屏幕上不是代码编辑器，而是《黑客帝国》的经典片段——绿色数字如雨般落下。

“又摸鱼？”我心里暗笑，一个“邪恶”的想法突然冒出：能不能让他的浏览器真的下起代码雨？

30分钟后，我写了个链接发给他：“帮你重温经典。”他点开的瞬间，整个浏览器窗口变成了《黑客帝国》的现场版——绿色的数字和汉字从天而降，配上低沉的背景音效。

“卧槽！你对我电脑做了什么！”他的惊呼引来了半个办公室的围观。

两天后，这个恶作剧代码在全公司传开，连技术总监都跑来问：“这个效果怎么实现的？我们官网能不能加上？”

今天，我就把这50行代码的魔法完整公开。不仅教你如何实现，还要教你如何定制属于你自己的数字雨。

二、先体验，再理解：点开即用的数字雨

无需任何环境配置，复制下面这段代码，保存为matrix.html，用浏览器打开：

html

黑客帝国降临

<script> // 🎯 核心代码开始 const canvas = document.getElementById('matrix'); const ctx = canvas.getContext('2d'); // 全屏Canvas canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 字符集：数字 + 汉字 + 特殊符号 const chars = '01田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑'.split(''); // 初始化雨滴 const fontSize = 14; const columns = canvas.width / fontSize; const drops = new Array(columns).fill(1); // 🎬 动画主循环 function draw() { // 半透明黑色背景，制造拖尾效果 ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绿色文字 ctx.fillStyle = '#0F0'; ctx.font = `${fontSize}px "Courier New", monospace`; // 绘制每个雨滴 for (let i = 0; i < drops.length; i++) { const char = chars[Math.floor(Math.random() * chars.length)]; ctx.fillText(char, i * fontSize, drops[i] * fontSize); // 雨滴下落 drops[i]++; // 随机重置雨滴 if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } } } // 启动动画（35ms一帧 ≈ 30fps） setInterval(draw, 35); // 🎯 核心代码结束 </script>

运行效果：你的浏览器瞬间变成《黑客帝国》终端界面，绿色的字符如瀑布般倾泻而下。

三、逐行解析：代码背后的魔法原理

Canvas - 我们的“数字画布”
javascript
const canvas = document.getElementById(‘matrix’);
const ctx = canvas.getContext(‘2d’);
是HTML5的绘图标签，相当于一张空白画布。getContext(‘2d’) 获取2D绘图上下文——我们的“画笔”。

为什么用Canvas而不是DOM？

性能：绘制数千个字符，DOM会卡死，Canvas流畅如丝

控制：像素级操作，实现各种炫酷效果

字符集设计 - 不只是0和1
javascript
const chars = ‘01田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑’.split(‘’);
我特意加入了汉字偏旁部首，让数字雨更有“黑客感”。你可以替换成任何字符：

纯数字：‘0123456789’

二进制：‘01’

代码符号：‘{}<>;:=±*/’

表情符号：‘💻🔥🚀🎮🎯’

核心算法 - 雨滴如何下落？
javascript
// 关键三行代码理解雨滴逻辑
const columns = canvas.width / fontSize; // 计算屏幕能放多少列
const drops = new Array(columns).fill(1); // 每列的起始位置

drops[i]++; // 雨滴下落：其实就是y坐标增加
可视化理解：

text
初始状态：
drops = [1, 1, 1, 1, 1, …] // 每列雨滴都在顶部

第一帧后：
drops = [2, 2, 2, 2, 2, …] // 所有雨滴下移1像素

某个雨滴触底后：
drops[3] = 0 // 第4列雨滴回到顶部重新开始
4. 视觉魔法 - 为什么会有拖尾效果？
javascript
ctx.fillStyle = ‘rgba(0, 0, 0, 0.05)’;
ctx.fillRect(0, 0, canvas.width, canvas.height);
这是最巧妙的一行！我们用半透明的黑色矩形覆盖整个画布，而不是完全清空。上一帧的图像会留下淡淡的痕迹，形成自然的拖尾效果。

四、进阶改造：从“恶作剧”到“实用工具”

版本1：交互式数字雨（点击切换效果）
javascript
// 在原有代码基础上添加
let effectType = ‘matrix’; // matrix | snow | reverse

canvas.addEventListener(‘click’, () => {
effectType = effectType === ‘matrix’ ? ‘snow’ : ‘matrix’;
chars = effectType === ‘matrix’
? ‘01田由甲申’.split(‘’)
: ‘❄︎✦✧❅❆’.split(‘’);
ctx.fillStyle = effectType === ‘matrix’ ? ‘#0F0’ : ‘#FFF’;
});

// 修改draw函数中的下落逻辑
if (effectType === ‘snow’) {
drops[i] += Math.random() * 0.5 + 0.5; // 雪花飘落速度
}
版本2：网站背景特效
javascript
// 作为网站动态背景
function initMatrixBackground() {
const canvas = document.createElement(‘canvas’);
canvas.style.cssText =position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0.3; // 半透明，不干扰主要内容;
document.body.appendChild(canvas);

// ... 原有数字雨代码，但调整透明度 ctx.fillStyle = 'rgba(0, 255, 0, 0.3)';

}
版本3：程序员表白神器
javascript
// 特定时间显示隐藏消息
const secretMessages = [
{ time: 5000, text: ‘💻 我写过最好的代码’, color: ‘#FF6B8B’ },
{ time: 10000, text: ‘🚀 是喜欢你这件事’, color: ‘#4ECDC4’ },
{ time: 15000, text: ‘❤️ 编译通过，永不报错’, color: ‘#FFD166’ }
];

let startTime = Date.now();

function draw() {
// … 原有绘制代码

// 绘制秘密消息 const elapsed = Date.now() - startTime; secretMessages.forEach(msg => { if (elapsed > msg.time && elapsed < msg.time + 2000) { ctx.fillStyle = msg.color; ctx.font = 'bold 24px Arial'; ctx.fillText(msg.text, canvas.width/2 - 100, canvas.height/2); } });

}

五、性能优化：当10000个字符同时下落

原版代码在普通电脑上能流畅运行约2000个字符。如果需要更密集的效果：

javascript
// 优化技巧1：预渲染字符
const charCache = {};
function getCharImage(char) {
if (!charCache[char]) {
const canvas = document.createElement(‘canvas’);
const ctx = canvas.getContext(‘2d’);
canvas.width = fontSize;
canvas.height = fontSize;
ctx.fillStyle = ‘#0F0’;
ctx.font =${fontSize}px monospace;
ctx.fillText(char, 0, fontSize);
charCache[char] = canvas;
}
return charCache[char];
}

// 优化技巧2：使用requestAnimationFrame代替setInterval
let lastTime = 0;
function animate(timestamp) {
if (timestamp - lastTime > 35) {
draw();
lastTime = timestamp;
}
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

六、意想不到的应用场景

加载动画
javascript
// 数字雨 + 加载进度
let progress = 0;
function draw() {
// … 原有绘制代码
// 绘制进度条
ctx.fillStyle = ‘#0F0’;
ctx.fillRect(50, canvas.height - 30, progress * 3, 20);
ctx.fillText(加载中... ${progress}%, 60, canvas.height - 15);
if (progress < 100) progress += 0.5;
}

// 资源加载完成后切换页面
if (progress >= 100) {
window.location.href = ‘main.html’;
}
2. 加密信息传输
javascript
// 在数字雨中隐藏摩斯电码
const morseMessage = ‘… … --…-- / .-- — .-. .-… -…’;
let morseIndex = 0;

function draw() {
// … 原有绘制代码

// 特定位置的字符显示摩斯电码 if (drops[10] * fontSize % 100 < 20) { const morseChar = morseMessage[morseIndex % morseMessage.length]; ctx.fillText(morseChar, 10 * fontSize, drops[10] * fontSize); morseIndex++; }

}
3. 代码评审特效
javascript
// 把团队成员的代码变成数字雨
const teamCode = {
‘张三’: ‘function foo() { return 42; }’,
‘李四’: ‘const bar = () => console.log(“hello”);’,
‘王五’: ‘// TODO: 这里需要优化’
};

// 解析代码为字符流
let codeChars = Object.values(teamCode).join(‘’).split(‘’);
// 然后用codeChars替换原有的chars数组