import React, { useEffect, useRef } from 'react'; const RedBlueWarfare = () => { const canvasRef = useRef(null); const containerRef = useRef(null); // 使用 Ref 存储动画状态，避免 React 渲染循环 const gameState = useRef({ frame: 0, width: 0, height: 0, redNodes: [], blueNodes: [], centerNode: { x: 0, y: 0, health: 100, maxHealth: 100, shield: 100 }, packets: [], // 传输的数据包/攻击 particles: [], // 爆炸碎片 logs: [], // 滚动日志 scanLineY: 0 }); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); let animationFrameId; // 初始化尺寸 const resize = () => { if (!canvas || !containerRef.current) return; const { clientWidth, clientHeight } = containerRef.current; // 高清屏适配 const dpr = window.devicePixelRatio || 1; canvas.width = clientWidth * dpr; canvas.height = clientHeight * dpr; ctx.scale(dpr, dpr); gameState.current.width = clientWidth; gameState.current.height = clientHeight; gameState.current.centerNode = { x: clientWidth / 2, y: clientHeight / 2, health: 100, maxHealth: 100, shield: 100 }; initNodes(clientWidth, clientHeight); }; // 初始化节点 const initNodes = (w, h) => { const redCount = 5; const blueCount = 5; const newRedNodes = []; const newBlueNodes = []; // 红方节点 (左侧) for (let i = 0; i < redCount; i++) { newRedNodes.push({ x: w * 0.1 + Math.random() * (w * 0.15), y: h * 0.2 + (i / redCount) * (h * 0.6) + (Math.random() - 0.5) * 50, id: `R-${i}`, label: ['Botnet', 'C2 Server', 'Proxy', 'Injector', 'Scanner'][i], pulse: Math.random() * Math.PI }); } // 蓝方节点 (右侧) for (let i = 0; i < blueCount; i++) { newBlueNodes.push({ x: w * 0.75 + Math.random() * (w * 0.15), y: h * 0.2 + (i / blueCount) * (h * 0.6) + (Math.random() - 0.5) * 50, id: `B-${i}`, label: ['Firewall', 'IPS', 'SIEM', 'Honeypot', 'Analyzer'][i], pulse: Math.random() * Math.PI }); } gameState.current.redNodes = newRedNodes; gameState.current.blueNodes = newBlueNodes; }; // 辅助函数：添加日志 const addLog = (text, type = 'info') => { const logs = gameState.current.logs; const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false }); logs.push({ text: `[${timestamp}] ${text}`, type, time: 100 }); if (logs.length > 8) logs.shift(); }; // 辅助函数：生成粒子 const spawnParticles = (x, y, color, count = 5) => { for (let i = 0; i < count; i++) { const angle = Math.random() * Math.PI * 2; const speed = Math.random() * 3 + 1; gameState.current.particles.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, life: 1.0, color }); } }; // 绘图主循环 const render = () => { const state = gameState.current; const w = state.width; const h = state.height; state.frame++; // 1. 清空背景 (带拖尾效果) ctx.fillStyle = '#0f172a'; ctx.fillRect(0, 0, w, h); // 绘制网格背景 ctx.strokeStyle = 'rgba(30, 41, 59, 0.5)'; ctx.lineWidth = 1; const gridSize = 40; ctx.beginPath(); for (let x = 0; x <= w; x += gridSize) { ctx.moveTo(x, 0); ctx.lineTo(x, h); } for (let y = 0; y <= h; y += gridSize) { ctx.moveTo(0, y); ctx.lineTo(w, y); } ctx.stroke(); // 2. 逻辑更新 // 随机生成攻击 (红 -> 中) if (state.frame % 40 === 0) { const source = state.redNodes[Math.floor(Math.random() * state.redNodes.length)]; state.packets.push({ x: source.x, y: source.y, tx: state.centerNode.x, ty: state.centerNode.y, type: 'attack', speed: 4 + Math.random() * 2, color: '#ef4444', label: ['DDoS', 'SQLi', 'XSS', 'BruteForce'][Math.floor(Math.random() * 4)] }); if (Math.random() > 0.7) addLog(`检测到异常流量来源: ${source.id}`, 'alert'); } // 随机生成防御/修复 (蓝 -> 中) if (state.frame % 30 === 0) { const source = state.blueNodes[Math.floor(Math.random() * state.blueNodes.length)]; state.packets.push({ x: source.x, y: source.y, tx: state.centerNode.x, ty: state.centerNode.y, type: 'defense', speed: 5 + Math.random() * 2, color: '#3b82f6', label: 'Patch' }); } // 更新所有包 for (let i = state.packets.length - 1; i >= 0; i--) { const p = state.packets[i]; const dx = p.tx - p.x; const dy = p.ty - p.y; const dist = Math.sqrt(dx*dx + dy*dy); if (dist < p.speed) { // 击中目标 state.packets.splice(i, 1); spawnParticles(p.tx, p.ty, p.color, 8); if (p.type === 'attack') { state.centerNode.shield = Math.max(0, state.centerNode.shield - 5); if (state.centerNode.shield <= 0) state.centerNode.health = Math.max(0, state.centerNode.health - 2); addLog(`拦截失败: ${p.label} 攻击命中`, 'danger'); } else { state.centerNode.shield = Math.min(100, state.centerNode.shield + 8); } } else { p.x += (dx / dist) * p.speed; p.y += (dy / dist) * p.speed; } } // 更新粒子 for (let i = state.particles.length - 1; i >= 0; i--) { const p = state.particles[i]; p.x += p.vx; p.y += p.vy; p.life -= 0.03; if (p.life <= 0) state.particles.splice(i, 1); } // 3. 绘制层 // 连接线 ctx.lineWidth = 1; state.redNodes.forEach(node => { ctx.strokeStyle = `rgba(239, 68, 68, ${0.1 + Math.random()*0.2})`; ctx.beginPath(); ctx.moveTo(node.x, node.y); ctx.lineTo(state.centerNode.x, state.centerNode.y); ctx.stroke(); }); state.blueNodes.forEach(node => { ctx.strokeStyle = `rgba(59, 130, 246, ${0.1 + Math.random()*0.2})`; ctx.beginPath(); ctx.moveTo(node.x, node.y); ctx.lineTo(state.centerNode.x, state.centerNode.y); ctx.stroke(); }); // 绘制数据包 state.packets.forEach(p => { ctx.fillStyle = p.color; ctx.shadowBlur = 10; ctx.shadowColor = p.color; if (p.type === 'attack') { // 攻击者是三角形/尖锐形状 ctx.beginPath(); ctx.moveTo(p.x + 8, p.y); ctx.lineTo(p.x - 4, p.y + 4); ctx.lineTo(p.x - 4, p.y - 4); ctx.fill(); } else { // 防御者是圆形/盾牌 ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI * 2); ctx.fill(); } ctx.shadowBlur = 0; // 绘制微小的文字标签 ctx.fillStyle = 'rgba(255,255,255,0.7)'; ctx.font = '10px monospace'; ctx.fillText(p.label, p.x, p.y - 10); }); // 绘制粒子 state.particles.forEach(p => { ctx.fillStyle = p.color; ctx.globalAlpha = p.life; ctx.fillRect(p.x, p.y, 3, 3); ctx.globalAlpha = 1; }); // 绘制红方节点 (Attackers) state.redNodes.forEach(node => { const pulse = Math.sin(state.frame * 0.1 + node.pulse) * 5; // 故障效果 const glitchX = Math.random() > 0.95 ? (Math.random() - 0.5) * 5 : 0; ctx.fillStyle = '#1e1b2e'; ctx.strokeStyle = '#ef4444'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(node.x + glitchX, node.y - 10); ctx.lineTo(node.x + 10 + glitchX, node.y + 10); ctx.lineTo(node.x - 10 + glitchX, node.y + 10); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.fillStyle = '#ef4444'; ctx.font = '12px monospace'; ctx.fillText(node.label, node.x - 20, node.y + 25); ctx.fillStyle = 'rgba(239, 68, 68, 0.5)'; ctx.fillText(node.id, node.x - 10, node.y - 15); }); // 绘制蓝方节点 (Defenders) state.blueNodes.forEach(node => { const pulse = Math.sin(state.frame * 0.05 + node.pulse) * 3; ctx.fillStyle = '#1e293b'; ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 2; // 六边形 ctx.beginPath(); for (let i = 0; i < 6; i++) { const angle = (i * 60 * Math.PI) / 180; const r = 12 + pulse; const px = node.x + r * Math.cos(angle); const py = node.y + r * Math.sin(angle); if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py); } ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.fillStyle = '#3b82f6'; ctx.font = '12px monospace'; ctx.fillText(node.label, node.x - 20, node.y + 30); ctx.fillStyle = 'rgba(59, 130, 246, 0.5)'; ctx.fillText(node.id, node.x - 10, node.y - 20); }); // 绘制中心核心节点 const c = state.centerNode; // 护盾光圈 ctx.beginPath(); ctx.arc(c.x, c.y, 40, 0, Math.PI * 2); ctx.fillStyle = '#0f172a'; ctx.fill(); // 护盾条 (环形) ctx.beginPath(); ctx.arc(c.x, c.y, 45, -Math.PI/2, -Math.PI/2 + (Math.PI * 2 * c.shield / 100)); ctx.strokeStyle = c.shield > 30 ? '#3b82f6' : '#ef4444'; ctx.lineWidth = 4; ctx.stroke(); // 核心图标 ctx.fillStyle = '#fff'; ctx.font = 'bold 14px monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('CORE SYSTEM', c.x, c.y); ctx.font = '10px monospace'; ctx.fillStyle = c.shield > 50 ? '#4ade80' : '#f87171'; ctx.fillText(`INTEGRITY: ${Math.floor(c.shield)}%`, c.x, c.y + 15); // 4. 绘制UI层 (HUD) // 顶部标题栏 ctx.textAlign = 'left'; ctx.fillStyle = 'rgba(15, 23, 42, 0.8)'; ctx.fillRect(w/2 - 150, 0, 300, 40); ctx.strokeStyle = '#3b82f6'; ctx.strokeRect(w/2 - 150, 0, 300, 40); ctx.fillStyle = '#fff'; ctx.font = 'bold 16px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('网络攻防态势感知 (Cyber Warfare Map)', w/2, 25); // 左下角：攻击日志 const logBoxX = 20; const logBoxY = h - 200; ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; ctx.fillRect(logBoxX, logBoxY, 300, 180); ctx.strokeStyle = '#ef4444'; ctx.lineWidth = 1; ctx.strokeRect(logBoxX, logBoxY, 300, 180); ctx.textAlign = 'left'; ctx.fillStyle = '#ef4444'; ctx.font = 'bold 12px monospace'; ctx.fillText('THREAT LOG / 威胁日志', logBoxX + 10, logBoxY + 20); state.logs.forEach((log, i) => { ctx.fillStyle = log.type === 'alert' ? '#fbbf24' : (log.type === 'danger' ? '#f87171' : '#94a3b8'); ctx.font = '11px monospace'; ctx.fillText(log.text, logBoxX + 10, logBoxY + 40 + i * 18); }); // 右下角：防御状态 const statusBoxX = w - 220; const statusBoxY = h - 150; ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; ctx.fillRect(statusBoxX, statusBoxY, 200, 130); ctx.strokeStyle = '#3b82f6'; ctx.strokeRect(statusBoxX, statusBoxY, 200, 130); ctx.fillStyle = '#3b82f6'; ctx.font = 'bold 12px monospace'; ctx.fillText('DEFENSE STATUS / 防御状态', statusBoxX + 10, statusBoxY + 20); const stats = [ { l: 'Active Firewall', v: 'ON', c: '#4ade80' }, { l: 'IPS Rules', v: 'UPDATING...', c: '#fbbf24' }, { l: 'Packet Filter', v: 'HIGH', c: '#4ade80' }, { l: 'Threat Level', v: 'ELEVATED', c: '#f87171' } ]; stats.forEach((stat, i) => { ctx.fillStyle = '#cbd5e1'; ctx.fillText(stat.l, statusBoxX + 10, statusBoxY + 45 + i * 20); ctx.fillStyle = stat.c; ctx.textAlign = 'right'; ctx.fillText(stat.v, statusBoxX + 190, statusBoxY + 45 + i * 20); ctx.textAlign = 'left'; }); // 扫描线效果 state.scanLineY += 2; if (state.scanLineY > h) state.scanLineY = 0; ctx.beginPath(); ctx.moveTo(0, state.scanLineY); ctx.lineTo(w, state.scanLineY); ctx.strokeStyle = 'rgba(59, 130, 246, 0.3)'; ctx.lineWidth = 2; ctx.stroke(); animationFrameId = requestAnimationFrame(render); }; // 启动 resize(); window.addEventListener('resize', resize); render(); return () => { window.removeEventListener('resize', resize); cancelAnimationFrame(animationFrameId); }; }, []); return (

); }; export default RedBlueWarfare;