Web前端实现的模拟黑客终端[附完整代码]

基于原生的Web技术栈构建的简易的模拟黑客控制终端，不依赖React/Vue/Angular等Web框架，实现出模拟黑客攻击的视觉效果。

编程语言：HTML5/CSS3/JavaScript(ES6+)

采用Canvas API作为图形渲染，实现了黑客帝国中的”代码雨”画面。

网页效果如下：

核心代码：
1.Canvas实现的黑客帝国风格[代码雨]
// 绘制代码雨
function drawMatrix() {
// 半透明背景创建拖尾效果
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++) {
    const text = charSet.charAt(Math.floor(Math.random() * charSet.length));
    const x = i * fontSize;
    const y = drops[i] * fontSize;

    ctx.fillText(text, x, y);

    // 重置位置当字符到达底部
    if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
        drops[i] = 0; // 重置雨滴位置
    }

    // 更新雨滴下落位置
    drops[i]++;
}
// 60fps 平滑动画
requestAnimationFrame(drawMatrix);

}

2.打印结构化代码的伪Python解释器
def scan_vulnerabilities(target):
“””扫描目标系统的常见漏洞”””
print(f”[SCAN] 开始扫描: {target}”)

# 模拟端口扫描
open_ports = [22, 80, 443, 3306]
print(f"[INFO] 发现开放端口: {', '.join(map(str, open_ports))}")

# 模拟服务识别
services = {
    80: "Apache 2.4.41",
    443: "Nginx 1.18.0",
    3306: "MySQL 8.0.25"
}
print("[INFO] 服务识别完成:")
for port, service in services.items():
    if port in open_ports:
        print(f"  - 端口 {port}: {service}")

# 检测漏洞
vulnerabilities = []
if80in open_ports and"Apache"in services[80]:
    vulnerabilities.append("Apache 2.4.41 - CVE-2021-41773 (路径遍历漏洞)")
if3306in open_ports:
    vulnerabilities.append("MySQL 8.0.25 - 可能存在弱密码配置")

if vulnerabilities:
    print("[WARNING] 检测到潜在漏洞:")
    for i, vuln in enumerate(vulnerabilities, 1):
        print(f"  {i}. {vuln}")
else:
    print("[INFO] 未发现已知漏洞")

return {
    "target": target,
    "open_ports": open_ports,
    "services": services,
    "vulnerabilities": vulnerabilities
}

3.响应式Flexbox
.main-content {
display: flex;
flex: 1;
gap: 15px;
height: calc(100% – 65px);
}

/* 左侧代码台 */
.code-console-container { width: 300px; }

/* 中间主终端（弹性伸缩） */
.console-container { flex: 1; }

/* 右侧目标选择器 */
.control-panels { width: 300px; }

完整的HTML网页代码如下：

在线黑客攻击模拟器