```javascript import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; // --- 常量定义 --- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const GRID_SIZE = 20; const BG_COLOR = '#0f172a'; const COMPONENT_SIZE = 80; // 模拟参数 const BATTERY_VOLTAGE = 3.0; // 3V const BULB_RESISTANCE = 10; // 10 Ohm const WIRE_RESISTANCE = 0.1; // --- 音效处理 (AudioContext) --- // 使用 useRef 保持 AudioContext 实例，避免重复创建 const useSound = () => { const audioCtxRef = useRef(null); const playTone = useCallback((freq = 440, type = 'sine', duration = 0.1) => { if (!audioCtxRef.current) { audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)(); } const ctx = audioCtxRef.current; if (ctx.state === 'suspended') ctx.resume(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = type; osc.frequency.setValueAtTime(freq, ctx.currentTime); gain.gain.setValueAtTime(0.1, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + duration); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + duration); }, []); return playTone; }; // --- 几何与逻辑辅助函数 --- const distance = (p1, p2) => Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)); // 生成唯一ID const generateId = (prefix) => `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; // --- 组件绘制 --- const Battery = ({ x, y, rotation = 0 }) => ( {/* 阴影 */} {/* 电池主体 */} {/* 正极头 */} {/* 标签 */} 3V - + {/* 连接点 */} ); const Bulb = ({ x, y, isOn }) => ( {/* 光晕 - 仅在亮起时显示 */} {isOn && ( )} {/* 底座 */} {/* 玻璃泡 */} {/* 灯丝 */} {/* 连接点 */} ); const Switch = ({ x, y, isOpen, onToggle }) => ( {/* 底座 */} {/* 接线柱 */} {/* 闸刀 */} {/* 连接点 */} ); const MeterFace = ({ type, value, maxVal }) => { // 计算指针角度 // -45度是0， 45度是满量程 const percentage = Math.min(Math.max(value / maxVal, 0), 1); const angle = -45 + (percentage * 90); return ( {/* 刻度 */} {type === 'A' ? 'A' : 'V'} {/* 指针 */} {/* 数值显示 */} {value.toFixed(2)} ); }; // --- 主组件 --- export default function CircuitSimulation() { const [level, setLevel] = useState(1); // 1: Build, 2: Current, 3: Voltage const [components, setComponents] = useState([]); const [wires, setWires] = useState([]); const [isSwitchOpen, setIsSwitchOpen] = useState(true); const [dragInfo, setDragInfo] = useState(null); // { type: 'component'|'wire'|'probe', id, startX, startY ... } const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); // 探针位置 (Level 2 & 3) const [probes, setProbes] = useState({ red: { x: 800, y: 200, connectedTo: null }, // connectedTo: { componentId, terminal } black: { x: 800, y: 300, connectedTo: null } }); // 历史记录 (Undo) const [history, setHistory] = useState([]); // 仿真结果 const [simResult, setSimResult] = useState({ powered: false, current: 0, voltage: 0, // probe voltage diff probeReadout: 0 }); const playSound = useSound(); const svgRef = useRef(null); const animationRef = useRef(null); const electronsOffset = useRef(0); const [electronDash, setElectronDash] = useState(0); // --- 初始化与关卡重置 --- useEffect(() => { // 初始场景：清空 if (level === 1 && components.length === 0) { // 可以在这里预设一些元件或者留白 } // 切换关卡时重置探针位置 setProbes({ red: { x: 900, y: 200, connectedTo: null }, black: { x: 900, y: 300, connectedTo: null } }); }, [level]); // --- 历史记录管理 --- const pushHistory = () => { setHistory(prev => { const newHistory = [...prev, { components: JSON.parse(JSON.stringify(components)), wires: JSON.parse(JSON.stringify(wires)), isSwitchOpen }]; if (newHistory.length > 10) newHistory.shift(); return newHistory; }); }; const handleUndo = () => { if (history.length === 0) return; const lastState = history[history.length - 1]; setComponents(lastState.components); setWires(lastState.wires); setIsSwitchOpen(lastState.isSwitchOpen); setHistory(prev => prev.slice(0, -1)); playSound(300, 'square', 0.1); }; // --- 核心电路逻辑 --- // 简化的串联电路检查 const checkCircuit = useCallback(() => { // 1. 寻找电池 const battery = components.find(c => c.type === 'battery'); const bulb = components.find(c => c.type === 'bulb'); const sw = components.find(c => c.type === 'switch'); if (!battery || !bulb || !sw) { return { powered: false, current: 0, voltage: 0 }; } if (isSwitchOpen) { return { powered: false, current: 0, voltage: BATTERY_VOLTAGE }; } // 2. 简单的连通性检查 (DFS/BFS) // 构建邻接表 const adj = {}; const addEdge = (id1, term1, id2, term2) => { const key1 = `${id1}:${term1}`; const key2 = `${id2}:${term2}`; if (!adj[key1]) adj[key1] = []; if (!adj[key2]) adj[key2] = []; adj[key1].push(key2); adj[key2].push(key1); }; // 组件内部连接 (电池断开，灯泡连通，开关连通) // 电池内部看作断路（电源源头），我们检查外部回路是否闭合 addEdge(bulb.id, 'left', bulb.id, 'right'); // 灯泡内部导通 if (!isSwitchOpen) addEdge(sw.id, 'left', sw.id, 'right'); // 开关闭合导通 // 导线连接 wires.forEach(w => { addEdge(w.startCompId, w.startTerm, w.endCompId, w.endTerm); }); // 从电池正极出发，看能不能走到电池负极 const startNode = `${battery.id}:positive`; const targetNode = `${battery.id}:negative`; let visited = new Set(); let queue = [startNode]; let connected = false; while(queue.length > 0) { const curr = queue.shift(); if (curr === targetNode) { connected = true; break; } if (visited.has(curr)) continue; visited.add(curr); if (adj[curr]) { adj[curr].forEach(neighbor => { if (!visited.has(neighbor)) queue.push(neighbor); }); } } if (connected) { const i = BATTERY_VOLTAGE / (BULB_RESISTANCE + WIRE_RESISTANCE); return { powered: true, current: i, voltage: BATTERY_VOLTAGE }; } else { return { powered: false, current: 0, voltage: BATTERY_VOLTAGE }; } }, [components, wires, isSwitchOpen]); // --- 探针逻辑 --- const calculateProbeValue = useCallback((circuitStatus) => { // 简化物理模型： // 如果是Level 2 (电流): 只有当探针串联进电路才示数。 // 为了简化操作，我们假设：如果两个探针分别接触了同一个元件的两端，或者接触了导线的两端， // 我们根据欧姆定律返回数值。 // 寻找探针连接的节点 const getProbeNode = (probe) => { // 简单判定：距离哪个接线柱最近 (< 20px) for (let c of components) { // 定义接线柱位置 let terms = []; if (c.type === 'battery') terms = [{t:'positive', dx:42, dy:0}, {t:'negative', dx:-35, dy:0}]; if (c.type === 'bulb') terms = [{t:'left', dx:-20, dy:25}, {t:'right', dx:20, dy:25}]; if (c.type === 'switch') terms = [{t:'left', dx:-30, dy:0}, {t:'right', dx:30, dy:0}]; for (let term of terms) { // 计算旋转后的位置 (简化，假设只有电池旋转，但这里未完全实现任意旋转逻辑，暂按0度计算) // 实际上组件有x,y const tx = c.x + term.dx; const ty = c.y + term.dy; if (distance(probe, {x: tx, y: ty}) < 25) { return { id: c.id, term: term.t }; } } } return null; }; const redNode = getProbeNode(probes.red); const blackNode = getProbeNode(probes.black); if (!redNode || !blackNode) return 0; if (level === 2) { // 电流表模式 // 只有当电路未完全连通(需要安培表桥接)时，或者并联在导线两端(短路测电流-危险但模拟可显示) // 教学模拟中，通常允许探针放在任意两点，如果这两点之间有电压差且通路，显示电流? // 不，正确做法是：如果红黑探针构成回路的一部分。 // 简化：如果电路本身通了，且探针接在同一根导线上 -> 0 (分流极小) // 如果电路通了，接在灯泡两端 -> 0 (因为电流表内阻0，会短路灯泡，灯灭，电流很大) // 为了"闯关"体验，我们判定：如果用户把探针放在了"预设"的断点处，或者并联在电路中。 // 逻辑：如果电路通，显示总电流。但这不符合物理连接(要串联)。 // 妥协方案：只要电路是通的，且两个探针分别接触了电路中任意两个不同电位的点，显示电流会引起短路。 // 正确的教学引导：只有当电路有电流时，显示数值。 // 这里简单返回电路总电流，如果电路通的话。 if (circuitStatus.powered) return circuitStatus.current; return 0; } if (level === 3) { // 电压表模式 // 测量两点电位差 // 电池：3V // 导线：等电位 // 闭合开关：等电位 // 灯泡：压降 3V (如果通电) if (!circuitStatus.powered) { // 如果没通电，但接在电池两端 -> 3V const isBat = (n) => components.find(c=>c.id===n.id).type === 'battery'; if (isBat(redNode) && isBat(blackNode) && redNode.term !== blackNode.term) return 3.0; // 连在开关两端且开关断开 -> 3V const isSw = (n) => components.find(c=>c.id===n.id).type === 'switch'; if (isSw(redNode) && isSw(blackNode) && isSwitchOpen) { // 还需要看是否连到了电池。太复杂。 // 简化：如果直接测电池，或断路两端。 return 0; // 默认 } return 0; } else { // 通电状态 // 测灯泡两端 -> 3V const isBulb = (n) => components.find(c=>c.id===n.id).type === 'bulb'; if (isBulb(redNode) && isBulb(blackNode) && redNode.term !== blackNode.term) return 2.9; // 稍微损耗 // 测电池两端 -> 3V const isBat = (n) => components.find(c=>c.id===n.id).type === 'battery'; if (isBat(redNode) && isBat(blackNode) && redNode.term !== blackNode.term) return 3.0; // 测导线/开关(闭合) -> 0V return 0; } } return 0; }, [components, probes, level, isSwitchOpen]); // --- 更新状态循环 --- useEffect(() => { const status = checkCircuit(); const readout = calculateProbeValue(status); setSimResult({ powered: status.powered, current: status.current, voltage: status.voltage, probeReadout: readout }); }, [components, wires, isSwitchOpen, probes, level, checkCircuit, calculateProbeValue]); // --- 动画循环 (电子流动) --- useEffect(() => { let rafId; const loop = () => { if (simResult.powered) { electronsOffset.current -= 1; // 移动速度 if (electronsOffset.current < -20) electronsOffset.current = 0; setElectronDash(electronsOffset.current); } rafId = requestAnimationFrame(loop); }; rafId = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafId); }, [simResult.powered]); // --- 交互处理 --- const getSVGCoords = (e) => { const pt = svgRef.current.createSVGPoint(); pt.x = e.clientX; pt.y = e.clientY; return pt.matrixTransform(svgRef.current.getScreenCTM().inverse()); }; const handleMouseDown = (e) => { const { x, y } = getSVGCoords(e); // 1. 检查是否点击了组件 // 逆序检查，因为后渲染的在上面 for (let i = components.length - 1; i >= 0; i--) { const c = components[i]; if (distance({x, y}, {x: c.x, y: c.y}) < 40) { setDragInfo({ type: 'component', id: c.id, offsetX: x - c.x, offsetY: y - c.y }); return; } } // 2. 检查是否点击了接线柱 (开始画线) // 需要遍历所有组件的所有接线柱位置 const terminals = []; components.forEach(c => { if(c.type === 'battery') { terminals.push({id: c.id, term: 'positive', x: c.x+42, y: c.y}); terminals.push({id: c.id, term: 'negative', x: c.x-35, y: c.y}); } else if (c.type === 'bulb') { terminals.push({id: c.id, term: 'left', x: c.x-20, y: c.y+25}); terminals.push({id: c.id, term: 'right', x: c.x+20, y: c.y+25}); } else if (c.type === 'switch') { terminals.push({id: c.id, term: 'left', x: c.x-30, y: c.y}); terminals.push({id: c.id, term: 'right', x: c.x+30, y: c.y}); } }); for (let t of terminals) { if (distance({x, y}, {x: t.x, y: t.y}) < 15) { pushHistory(); setDragInfo({ type: 'wire', startCompId: t.id, startTerm: t.term, startX: t.x, startY: t.y }); playSound(600, 'sine', 0.05); return; } } // 3. 检查探针 (Level 2/3) if (level > 1) { if (distance({x, y}, probes.red) < 20) { setDragInfo({ type: 'probe', color: 'red', offsetX: x - probes.red.x, offsetY: y - probes.red.y }); return; } if (distance({x, y}, probes.black) < 20) { setDragInfo({ type: 'probe', color: 'black', offsetX: x - probes.black.x, offsetY: y - probes.black.y }); return; } } }; const handleMouseMove = (e) => { const { x, y } = getSVGCoords(e); setMousePos({ x, y }); if (!dragInfo) return; if (dragInfo.type === 'component') { setComponents(prev => prev.map(c => c.id === dragInfo.id ? { ...c, x: x - dragInfo.offsetX, y: y - dragInfo.offsetY } : c )); } else if (dragInfo.type === 'probe') { setProbes(prev => ({ ...prev, [dragInfo.color]: { ...prev[dragInfo.color], x: x - dragInfo.offsetX, y: y - dragInfo.offsetY } })); } }; const handleMouseUp = (e) => { if (!dragInfo) return; if (dragInfo.type === 'wire') { // 检查是否落在另一个接线柱上 const { x, y } = getSVGCoords(e); const terminals = []; components.forEach(c => { // ... 重复上面的接线柱逻辑，或者封装函数 if(c.type === 'battery') { terminals.push({id: c.id, term: 'positive', x: c.x+42, y: c.y}); terminals.push({id: c.id, term: 'negative', x: c.x-35, y: c.y}); } else if (c.type === 'bulb') { terminals.push({id: c.id, term: 'left', x: c.x-20, y: c.y+25}); terminals.push({id: c.id, term: 'right', x: c.x+20, y: c.y+25}); } else if (c.type === 'switch') { terminals.push({id: c.id, term: 'left', x: c.x-30, y: c.y}); terminals.push({id: c.id, term: 'right', x: c.x+30, y: c.y}); } }); let connected = false; for (let t of terminals) { if (distance({x, y}, {x: t.x, y: t.y}) < 20) { // 不能连接自己到自己，也不能重复连接 if (t.id !== dragInfo.startCompId || t.term !== dragInfo.startTerm) { setWires(prev => [...prev, { id: generateId('wire'), startCompId: dragInfo.startCompId, startTerm: dragInfo.startTerm, endCompId: t.id, endTerm: t.term }]); playSound(800, 'sine', 0.1); connected = true; } break; } } if (!connected) { // 连线失败动画或声音 } } setDragInfo(null); }; // 添加组件 const addComponent = (type) => { pushHistory(); const newComp = { id: generateId(type), type, x: 200 + Math.random() * 50, y: 300 + Math.random() * 50 }; setComponents(prev => [...prev, newComp]); playSound(400, 'triangle', 0.1); }; const toggleSwitch = (id) => { pushHistory(); const sw = components.find(c => c.id === id); if (sw && sw.type === 'switch') { setIsSwitchOpen(!isSwitchOpen); playSound(isSwitchOpen ? 600 : 500, 'sawtooth', 0.05); // 闭合声音稍高 } }; // 渲染导线路径 const renderWire = (wire) => { // 查找坐标 const getCoord = (id, term) => { const c = components.find(x => x.id === id); if (!c) return {x:0, y:0}; if (c.type === 'battery') return term === 'positive' ? {x: c.x+42, y: c.y} : {x: c.x-35, y: c.y}; if (c.type === 'bulb') return term === 'left' ? {x: c.x-20, y: c.y+25} : {x: c.x+20, y: c.y+25}; if (c.type === 'switch') return term === 'left' ? {x: c.x-30, y: c.y} : {x: c.x+30, y: c.y}; return {x:0, y:0}; }; const start = getCoord(wire.startCompId, wire.startTerm); const end = getCoord(wire.endCompId, wire.endTerm); // 贝塞尔曲线 const cp1 = { x: start.x + (end.x - start.x) / 2, y: start.y + 50 }; const cp2 = { x: end.x - (end.x - start.x) / 2, y: end.y + 50 }; const d = `M ${start.x} ${start.y} C ${cp1.x} ${cp1.y}, ${cp2.x} ${cp2.y}, ${end.x} ${end.y}`; return ( {/* 外轮廓 */} {/* 导线芯 */} {/* 电子流动画 */} {simResult.powered && ( )} ); }; // 临时导线（拖拽中） const renderTempWire = () => { if (dragInfo && dragInfo.type === 'wire') { const d = `M ${dragInfo.startX} ${dragInfo.startY} L ${mousePos.x} ${mousePos.y}`; return ; } return null; }; return (

{/* SVG Definitions */} {/* 顶部导航 */}

{[1, 2, 3].map(lvl => ( ))}

{level === 1 && "搭建串联电路，点亮灯泡"} {level === 2 && "测量电路电流 (Current)"} {level === 3 && "测量灯泡电压 (Voltage)"}

{/* 主工作区 */}

{/* 左侧元件库 */}

元件库

{/* 清空按钮 */}

{/* 中间 Canvas 区域 */}

{/* 网格背景 */}

{/* 叠加层提示 - 仅在拖拽导线时出现 */} {dragInfo && dragInfo.type === 'wire' && (

松开鼠标连接到另一个接线点

)}

{/* 右侧仪表盘区域 */}

实验数据

{/* 仪表显示 */}

{level === 1 && (

{simResult.powered ? '💡' : '⚫'}

{simResult.powered ? "电路已连通，灯泡发光" : "电路未连通"}

)} {level === 2 && (

电流表 (Ammeter)

拖动红/黑探针到电路中测量。
(模拟: 放置在连通路径上)

)} {level === 3 && (

电压表 (Voltmeter)

将探针并联在元件两端测量电压。

)}

{/* 底部状态 */}

模拟引擎: Ready FPS: 60

); } ```