黑客帝国代码雨

原创已于 2025-06-27 13:43:45 修改 · 272 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-02 14:57:20 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑客帝国代码雨</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
font-family: 'Courier New', monospace;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="matrix"></canvas>

// 设置画布为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 字符集 - 包含一些日文片假名和特殊符号增加黑客感
const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+-=[]{};':\",./<>?\\|`~";

// 字体大小
const fontSize = 16;

// 计算列数
const columns = Math.floor(canvas.width / fontSize);

// 每列下落的位置
const drops = [];
for (let i = 0; i < columns; i++) {
drops[i] = Math.random() * -100; // 初始位置随机
}

// 绘制函数
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 monospace';

// 绘制每列字符
for (let i = 0; i < drops.length; i++) {
// 随机字符
let text;

// 有1%的概率显示特殊网址
if (Math.random() < 0.01 && drops[i] > 0) {
text = specialUrl;
} else {
text = chars.charAt(Math.floor(Math.random() * chars.length));
}

// 绘制字符
ctx.fillText(text, i * fontSize, drops[i] * fontSize);

// 如果到底部或者随机数决定，重置到顶部
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}

// 下落位置增加
drops[i]++;
}
}