ctx.fillStyle = astGrad;
                ctx.beginPath();
                ctx.arc(ast.x, ast.y, size, 0, Math.PI * 2);
                ctx.fill();
                
                // 选中效果
                if (ast === selected) {
                    ctx.strokeStyle = '#ffd700';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.arc(ast.x, ast.y, size + 2, 0, Math.PI * 2);
                    ctx.stroke();
                }
            });
            
            // 粒子
            particles.forEach(p => p.draw(ctx));
            
            // 恢复状态
            ctx.restore();
        }

        // 大气层摧毁效果
        function createAtmosphereDestruction(ast) {
            for (let i = 0; i < 30; i++) {
                particles.push(new Particle(
                    ast.x, ast.y,
                    (Math.random() - 0.5) * 3,
                    (Math.random() - 0.5) * 3,
                    20 + Math.random() * 20,
                    '#ff8c00'
                ));
            }
            notify(`大气层拦截: ${ast.name || '小行星'}`);
        }

        // 撞击效果
        function createImpact(ast) {
            impactCount++;
            
            // 计算撞击能量（兆吨TNT当量）
            const energy = (0.5 * ast.diameter * ast.diameter * ast.diameter * 3000 * 12 * 12) / 4.184e15;
            
            // 计算陨石坑大小（千米）
            const craterSize = Math.pow(energy, 0.29) * 0.1;
            
            // 计算火球半径（千米）
            const fireballRadius = Math.pow(energy, 0.4) * 0.1;
            
            // 计算冲击波半径（千米）
            const shockwaveRadius = Math.pow(energy, 0.33) * 2;
            
            // 计算震级
            const magnitude = Math.log10(energy * 4.184e15) / 1.5 - 4;
            
            // 创建陨石坑
            craters.push({
                x: ast.x,
                y: ast.y,
                r: Math.max(5, Math.log(ast.diameter) * 2),
                time: Date.now()
            });
            
            // 创建爆炸粒子
            for (let i = 0; i < 100; i++) {
                particles.push(new Particle(
                    ast.x, ast.y,
                    (Math.random() - 0.5) * 5,
                    (Math.random() - 0.5) * 5,
                    30 + Math.random() * 30,
                    i < 50 ? '#ff6b35' : '#ffd700'
                ));
            }
            
            // 更新撞击面板
            document.getElementById('target').textContent = ast.name || '未知';
            document.getElementById('energy').textContent = energy.toFixed(1) + ' MT';
            document.getElementById('crater').textContent = craterSize.toFixed(1) + ' km';
            document.getElementById('coords').textContent = `X:${Math.round(ast.x)} Y:${Math.round(ast.y)}`;
            document.getElementById('fireball').textContent = fireballRadius.toFixed(1) + ' km';
            document.getElementById('shockwave').textContent = shockwaveRadius.toFixed(1) + ' km';
            document.getElementById('magnitude').textContent = magnitude.toFixed(1);
            
            notify(`撞击发生! ${ast.name || '小行星'} - 能量: ${energy.toFixed(1)} MT`);
        }

        // 点击事件
        function onClick(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            
            // 查找点击的小行星
            for (let i = asteroids.length - 1; i >= 0; i--) {
                const ast = asteroids[i];
                const dist = Math.sqrt((x - ast.x) ** 2 + (y - ast.y) ** 2);
                if (dist <= ast.size + 5) {
                    select(ast);
                    return;
                }
            }
            
            // 如果没有点击到小行星，取消选择
            selected = null;
            document.getElementById('impactBtn').disabled = true;
            updateList();
        }

        // 选择小行星
        function select(ast) {
            selected = ast;
            document.getElementById('impactBtn').disabled = false;
            updateList();
            notify(`选择: ${ast.name || '小行星'}`);
        }

        // 更新小行星列表
        function updateList() {
            const list = document.getElementById('list');
            if (asteroids.length === 0) {
                list.innerHTML = '<div style="text-align: center; color: #666; padding: 10px; font-size: 8px;">暂无小行星</div>';
                return;
            }
            
            list.innerHTML = asteroids.map(ast => `
                <div class="item ${ast === selected ? 'selected' : ''} ${ast.danger ? 'danger' : ''}" onclick="select(this.ast)" ast='${JSON.stringify(ast).replace(/'/g, "\\'")}'>
                    <div style="font-weight: bold;">${ast.name || '小行星'}</div>
                    <div style="font-size: 7px; color: #aaa;">
                        ${ast.diameter}m | ${Math.sqrt(ast.vx * ast.vx + ast.vy * ast.vy).toFixed(1)}km/s
                    </div>
                </div>
            `).join('');
        }

        // 添加小行星
        function addAsteroid() {
            const angle = Math.random() * Math.PI * 2;
            const dist = 200 + Math.random() * 100;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = 0.5 + Math.random() * 0.5;
            
            const ast = {
                id: Date.now(),
                name: `小行星-${asteroids.length + 1}`,
                diameter: 100 + Math.random() * 400,
                danger: Math.random() > 0.7,
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            ast.size = Math.max(3, Math.log(ast.diameter) * 1.2);
            asteroids.push(ast);
            updateList();
            notify(`生成: ${ast.name}`);
        }

        // 添加目标小行星
        function addTarget() {
            const ast = ASTEROIDS[Math.floor(Math.random() * ASTEROIDS.length)];
            const angle = Math.random() * Math.PI * 2;
            const dist = 250;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = 1.0;
            
            const newAst = {
                ...ast,
                id: Date.now(),
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            newAst.size = Math.max(3, Math.log(newAst.diameter) * 1.2);
            asteroids.push(newAst);
            updateList();
            notify(`目标: ${newAst.name}`);
        }

        // 创建自定义小行星
        function createCustom() {
            const size = parseInt(document.getElementById('size').value);
            const speedVal = parseInt(document.getElementById('speed').value);
            const angleVal = parseInt(document.getElementById('angle').value);
            
            const angle = angleVal * Math.PI / 180;
            const dist = 200;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = speedVal / 10;
            
            const ast = {
                id: Date.now(),
                name: `自定义-${size}m`,
                diameter: size,
                danger: size > 500,
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            ast.size = Math.max(3, Math.log(ast.diameter) * 1.2);
            asteroids.push(ast);
            updateList();
            notify(`自定义: ${ast.name}`);
        }

        // 更新参数显示
        function updateParams() {
            document.getElementById('sizeVal').textContent = document.getElementById('size').value + 'm';
            document.getElementById('speedVal').textContent = document.getElementById('speed').value + 'km/s';
            document.getElementById('angleVal').textContent = document.getElementById('angle').value + '°';
        }

        // 撞击功能
        function impact() {
            if (!selected) return;
            
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const earthRadius = 45;
            
            // 计算撞击点（地球表面）
            const angle = Math.atan2(selected.y - centerY, selected.x - centerX);
            const impactX = centerX + Math.cos(angle) * earthRadius;
            const impactY = centerY + Math.sin(angle) * earthRadius;
            
            // 设置撞击模式
            selected.impacting = true;
            selected.impactStartTime = Date.now();
            selected.impactDuration = 2000; // 2秒撞击过程
            selected.startX = selected.x;
            selected.startY = selected.y;
            selected.targetX = impactX;
            selected.targetY = impactY;
            
            document.getElementById('impactBtn').disabled = true;
            notify(`撞击模式启动: ${selected.name}`);
        }

        // 清除所有
        function clearAll() {
            asteroids = [];
            particles = [];
            craters = [];
            selected = null;
            impactCount = 0;
            atmosphereDestroyCount = 0;
            updateList();
            document.getElementById('impactBtn').disabled = true;
            notify('已清除所有小行星');
        }

        // 清除小行星
        function clear() {
            if (asteroids.length === 0) return;
            asteroids.pop();
            if (selected && !asteroids.includes(selected)) {
                selected = null;
                document.getElementById('impactBtn').disabled = true;
            }
            updateList();
            notify('清除一个小行星');
        }

        // 更新UI
        function updateUI() {
            document.getElementById('count').textContent = asteroids.length;
            document.getElementById('impacts').textContent = impactCount;
            document.getElementById('atmosphere').textContent = atmosphereDestroyCount;
            document.getElementById('memory').textContent = memory.toFixed(1) + ' MB';
            
            // 威胁等级
            const threat = asteroids.filter(a => a.danger).length;
            document.getElementById('threat').textContent = 
                threat > 3 ? '极高' : threat > 1 ? '高' : threat > 0 ? '中' : '低';
            document.getElementById('threat').style.color = 
                threat > 3 ? '#ff4757' : threat > 1 ? '#ffa502' : threat > 0 ? '#ffd700' : '#00ff88';
        }

        // 更新NASA面板
        function updateNASAPanel() {
            document.getElementById('neoCount').textContent = REAL_TIME_ASTEROIDS.length;
            document.getElementById('hazardCount').textContent = REAL_TIME_ASTEROIDS.filter(a => a.danger).length;
            document.getElementById('fireballCount').textContent = FIREBALL_DATA.length;
            document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();
            document.getElementById('dataSource').textContent = 'NASA NeoWs API';
        }

        // 刷新NASA数据
        function refreshNASAData() {
            initNASAData();
            notify('刷新NASA数据...');
        }

        // 切换所有面板显示
        function toggleAllPanels() {
            const panels = document.querySelectorAll('.panel');
            const viewControls = document.getElementById('viewControls');
            const toggleBtn = document.getElementById('toggleBtn');
            
            const allHidden = panels[0].classList.contains('hidden');
            
            panels.forEach(panel => {
                if (allHidden) {
                    panel.classList.remove('hidden');
                } else {
                    panel.classList.add('hidden');
                }
            });
            
            if (allHidden) {
                viewControls.classList.remove('hidden');
                toggleBtn.textContent = '隐藏界面';
                toggleBtn.classList.remove('all-hidden');
            } else {
                viewControls.classList.add('hidden');
                toggleBtn.textContent = '显示界面';
                toggleBtn.classList.add('all-hidden');
            }
        }

        // 设置视角
        function setView(viewType, evt) {
            if (evt && evt.target) {
                // 更新按钮状态
                document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
                evt.target.classList.add('active');
            }
            
            currentView = viewType;
            
            switch (viewType) {
                case 'default':
                    viewScale = 1;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'close':
                    viewScale = 2;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'wide':
                    viewScale = 0.5;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'follow':
                    if (selected) {
                        followTarget = selected;
                        viewScale = 1.5;
                    } else {
                        notify('请先选择一个小行星');
                        return;
                    }
                    break;
            }
            
            notify(`视角切换: ${getViewName(viewType)}`);
        }

        function getViewName(viewType) {
            const names = {
                'default': '标准视角',
                'close': '近距离',
                'wide': '广角视角',
                'follow': '跟踪模式'
            };
            return names[viewType] || viewType;
        }

        // 暂停/继续
        function togglePause() {
            isPaused = !isPaused;
            const pauseBtn = document.getElementById('pauseBtn');
            pauseBtn.textContent = isPaused ? '继续' : '暂停';
            notify(isPaused ? '模拟暂停' : '模拟继续');
        }

        // 页面加载完成后初始化
        window.addEventListener('load', init);
        
        // 窗口大小变化时调整canvas
        window.addEventListener('resize', () => {
            if (canvas) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
        });

        // 初始化参数显示
        updateParams();
    </script>
</body>
</html>
                ctx.beginPath();
                ctx.arc(ast.x, ast.y, size, 0, Math.PI * 2);
                ctx.fill();
                
                // 选中效果
                if (ast === selected) {
                    ctx.strokeStyle = '#ffd700';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.arc(ast.x, ast.y, size + 2, 0, Math.PI * 2);
                    ctx.stroke();
                }
            });
            
            // 粒子
            particles.forEach(p => p.draw(ctx));
            
            // 恢复状态
            ctx.restore();
        }

        // 大气层摧毁效果
        function createAtmosphereDestruction(ast) {
            for (let i = 0; i < 30; i++) {
                particles.push(new Particle(
                    ast.x, ast.y,
                    (Math.random() - 0.5) * 3,
                    (Math.random() - 0.5) * 3,
                    20 + Math.random() * 20,
                    '#ff8c00'
                ));
            }
            notify(`大气层拦截: ${ast.name || '小行星'}`);
        }

        // 撞击效果
        function createImpact(ast) {
            impactCount++;
            
            // 计算撞击能量（兆吨TNT当量）
            const energy = (0.5 * ast.diameter * ast.diameter * ast.diameter * 3000 * 12 * 12) / 4.184e15;
            
            // 计算陨石坑大小（千米）
            const craterSize = Math.pow(energy, 0.29) * 0.1;
            
            // 计算火球半径（千米）
            const fireballRadius = Math.pow(energy, 0.4) * 0.1;
            
            // 计算冲击波半径（千米）
            const shockwaveRadius = Math.pow(energy, 0.33) * 2;
            
            // 计算震级
            const magnitude = Math.log10(energy * 4.184e15) / 1.5 - 4;
            
            // 创建陨石坑
            craters.push({
                x: ast.x,
                y: ast.y,
                r: Math.max(5, Math.log(ast.diameter) * 2),
                time: Date.now()
            });
            
            // 创建爆炸粒子
            for (let i = 0; i < 100; i++) {
                particles.push(new Particle(
                    ast.x, ast.y,
                    (Math.random() - 0.5) * 5,
                    (Math.random() - 0.5) * 5,
                    30 + Math.random() * 30,
                    i < 50 ? '#ff6b35' : '#ffd700'
                ));
            }
            
            // 更新撞击面板
            document.getElementById('target').textContent = ast.name || '未知';
            document.getElementById('energy').textContent = energy.toFixed(1) + ' MT';
            document.getElementById('crater').textContent = craterSize.toFixed(1) + ' km';
            document.getElementById('coords').textContent = `X:${Math.round(ast.x)} Y:${Math.round(ast.y)}`;
            document.getElementById('fireball').textContent = fireballRadius.toFixed(1) + ' km';
            document.getElementById('shockwave').textContent = shockwaveRadius.toFixed(1) + ' km';
            document.getElementById('magnitude').textContent = magnitude.toFixed(1);
            
            notify(`撞击发生! ${ast.name || '小行星'} - 能量: ${energy.toFixed(1)} MT`);
        }

        // 点击事件
        function onClick(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            
            // 查找点击的小行星
            for (let i = asteroids.length - 1; i >= 0; i--) {
                const ast = asteroids[i];
                const dist = Math.sqrt((x - ast.x) ** 2 + (y - ast.y) ** 2);
                if (dist <= ast.size + 5) {
                    select(ast);
                    return;
                }
            }
            
            // 如果没有点击到小行星，取消选择
            selected = null;
            document.getElementById('impactBtn').disabled = true;
            updateList();
        }

        // 选择小行星
        function select(ast) {
            selected = ast;
            document.getElementById('impactBtn').disabled = false;
            updateList();
            notify(`选择: ${ast.name || '小行星'}`);
        }

        // 更新小行星列表
        function updateList() {
            const list = document.getElementById('list');
            if (asteroids.length === 0) {
                list.innerHTML = '<div style="text-align: center; color: #666; padding: 10px; font-size: 8px;">暂无小行星</div>';
                return;
            }
            
            list.innerHTML = asteroids.map(ast => `
                <div class="item ${ast === selected ? 'selected' : ''} ${ast.danger ? 'danger' : ''}" onclick="select(this.ast)" ast='${JSON.stringify(ast).replace(/'/g, "\\'")}'>
                    <div style="font-weight: bold;">${ast.name || '小行星'}</div>
                    <div style="font-size: 7px; color: #aaa;">
                        ${ast.diameter}m | ${Math.sqrt(ast.vx * ast.vx + ast.vy * ast.vy).toFixed(1)}km/s
                    </div>
                </div>
            `).join('');
        }

        // 添加小行星
        function addAsteroid() {
            const angle = Math.random() * Math.PI * 2;
            const dist = 200 + Math.random() * 100;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = 0.5 + Math.random() * 0.5;
            
            const ast = {
                id: Date.now(),
                name: `小行星-${asteroids.length + 1}`,
                diameter: 100 + Math.random() * 400,
                danger: Math.random() > 0.7,
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            ast.size = Math.max(3, Math.log(ast.diameter) * 1.2);
            asteroids.push(ast);
            updateList();
            notify(`生成: ${ast.name}`);
        }

        // 添加目标小行星
        function addTarget() {
            const ast = ASTEROIDS[Math.floor(Math.random() * ASTEROIDS.length)];
            const angle = Math.random() * Math.PI * 2;
            const dist = 250;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = 1.0;
            
            const newAst = {
                ...ast,
                id: Date.now(),
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            newAst.size = Math.max(3, Math.log(newAst.diameter) * 1.2);
            asteroids.push(newAst);
            updateList();
            notify(`目标: ${newAst.name}`);
        }

        // 创建自定义小行星
        function createCustom() {
            const size = parseInt(document.getElementById('size').value);
            const speedVal = parseInt(document.getElementById('speed').value);
            const angleVal = parseInt(document.getElementById('angle').value);
            
            const angle = angleVal * Math.PI / 180;
            const dist = 200;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = speedVal / 10;
            
            const ast = {
                id: Date.now(),
                name: `自定义-${size}m`,
                diameter: size,
                danger: size > 500,
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            ast.size = Math.max(3, Math.log(ast.diameter) * 1.2);
            asteroids.push(ast);
            updateList();
            notify(`自定义: ${ast.name}`);
        }

        // 更新参数显示
        function updateParams() {
            document.getElementById('sizeVal').textContent = document.getElementById('size').value + 'm';
            document.getElementById('speedVal').textContent = document.getElementById('speed').value + 'km/s';
            document.getElementById('angleVal').textContent = document.getElementById('angle').value + '°';
        }

        // 撞击功能
        function impact() {
            if (!selected) return;
            
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const earthRadius = 45;
            
            // 计算撞击点（地球表面）
            const angle = Math.atan2(selected.y - centerY, selected.x - centerX);
            const impactX = centerX + Math.cos(angle) * earthRadius;
            const impactY = centerY + Math.sin(angle) * earthRadius;
            
            // 设置撞击模式
            selected.impacting = true;
            selected.impactStartTime = Date.now();
            selected.impactDuration = 2000; // 2秒撞击过程
            selected.startX = selected.x;
            selected.startY = selected.y;
            selected.targetX = impactX;
            selected.targetY = impactY;
            
            document.getElementById('impactBtn').disabled = true;
            notify(`撞击模式启动: ${selected.name}`);
        }

        // 清除所有
        function clearAll() {
            asteroids = [];
            particles = [];
            craters = [];
            selected = null;
            impactCount = 0;
            atmosphereDestroyCount = 0;
            updateList();
            document.getElementById('impactBtn').disabled = true;
            notify('已清除所有小行星');
        }

        // 清除小行星
        function clear() {
            if (asteroids.length === 0) return;
            asteroids.pop();
            if (selected && !asteroids.includes(selected)) {
                selected = null;
                document.getElementById('impactBtn').disabled = true;
            }
            updateList();
            notify('清除一个小行星');
        }

        // 更新UI
        function updateUI() {
            document.getElementById('count').textContent = asteroids.length;
            document.getElementById('impacts').textContent = impactCount;
            document.getElementById('atmosphere').textContent = atmosphereDestroyCount;
            document.getElementById('memory').textContent = memory.toFixed(1) + ' MB';
            
            // 威胁等级
            const threat = asteroids.filter(a => a.danger).length;
            document.getElementById('threat').textContent = 
                threat > 3 ? '极高' : threat > 1 ? '高' : threat > 0 ? '中' : '低';
            document.getElementById('threat').style.color = 
                threat > 3 ? '#ff4757' : threat > 1 ? '#ffa502' : threat > 0 ? '#ffd700' : '#00ff88';
        }

        // 更新NASA面板
        function updateNASAPanel() {
            document.getElementById('neoCount').textContent = REAL_TIME_ASTEROIDS.length;
            document.getElementById('hazardCount').textContent = REAL_TIME_ASTEROIDS.filter(a => a.danger).length;
            document.getElementById('fireballCount').textContent = FIREBALL_DATA.length;
            document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();
            document.getElementById('dataSource').textContent = 'NASA NeoWs API';
        }

        // 刷新NASA数据
        function refreshNASAData() {
            initNASAData();
            notify('刷新NASA数据...');
        }

        // 切换所有面板显示
        function toggleAllPanels() {
            const panels = document.querySelectorAll('.panel');
            const viewControls = document.getElementById('viewControls');
            const toggleBtn = document.getElementById('toggleBtn');
            
            const allHidden = panels[0].classList.contains('hidden');
            
            panels.forEach(panel => {
                if (allHidden) {
                    panel.classList.remove('hidden');
                } else {
                    panel.classList.add('hidden');
                }
            });
            
            if (allHidden) {
                viewControls.classList.remove('hidden');
                toggleBtn.textContent = '隐藏界面';
                toggleBtn.classList.remove('all-hidden');
            } else {
                viewControls.classList.add('hidden');
                toggleBtn.textContent = '显示界面';
                toggleBtn.classList.add('all-hidden');
            }
        }

        // 设置视角
        function setView(viewType, evt) {
            if (evt && evt.target) {
                // 更新按钮状态
                document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
                evt.target.classList.add('active');
            }
            
            currentView = viewType;
            
            switch (viewType) {
                case 'default':
                    viewScale = 1;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'close':
                    viewScale = 2;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'wide':
                    viewScale = 0.5;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'follow':
                    if (selected) {
                        followTarget = selected;
                        viewScale = 1.5;
                    } else {
                        notify('请先选择一个小行星');
                        return;
                    }
                    break;
            }
            
            notify(`视角切换: ${getViewName(viewType)}`);
        }

        function getViewName(viewType) {
            const names = {
                'default': '标准视角',
                'close': '近距离',
                'wide': '广角视角',
                'follow': '跟踪模式'
            };
            return names[viewType] || viewType;
        }

        // 暂停/继续
        function togglePause() {
            isPaused = !isPaused;
            const pauseBtn = document.getElementById('pauseBtn');
            pauseBtn.textContent = isPaused ? '继续' : '暂停';
            notify(isPaused ? '模拟暂停' : '模拟继续');
        }

        // 页面加载完成后初始化
        window.addEventListener('load', init);
        
        // 窗口大小变化时调整canvas
        window.addEventListener('resize', () => {
            if (canvas) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
        });

        // 初始化参数显示
        updateParams();
    </script>
</body>
</html>
                ctx.beginPath();
                ctx.arc(ast.x, ast.y, size, 0, Math.PI * 2);
                ctx.fill();
                
                // 选中效果
                if (ast === selected) {
                    ctx.strokeStyle = '#ffd700';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.arc(ast.x, ast.y, size + 2, 0, Math.PI * 2);
                    ctx.stroke();
                }
            });
            
            // 粒子
            particles.forEach(p => p.draw(ctx));
            
            // 恢复状态
            ctx.restore();
        }

        // 大气层摧毁效果
        function createAtmosphereDestruction(ast) {
            for (let i = 0; i < 30; i++) {
                particles.push(new Particle(
                    ast.x, ast.y,
                    (Math.random() - 0.5) * 3,
                    (Math.random() - 0.5) * 3,
                    20 + Math.random() * 20,
                    '#ff8c00'
                ));
            }
            notify(`大气层拦截: ${ast.name || '小行星'}`);
        }

        // 撞击效果
        function createImpact(ast) {
            impactCount++;
            
            // 计算撞击能量（兆吨TNT当量）
            const energy = (0.5 * ast.diameter * ast.diameter * ast.diameter * 3000 * 12 * 12) / 4.184e15;
            
            // 计算陨石坑大小（千米）
            const craterSize = Math.pow(energy, 0.29) * 0.1;
            
            // 计算火球半径（千米）
            const fireballRadius = Math.pow(energy, 0.4) * 0.1;
            
            // 计算冲击波半径（千米）
            const shockwaveRadius = Math.pow(energy, 0.33) * 2;
            
            // 计算震级
            const magnitude = Math.log10(energy * 4.184e15) / 1.5 - 4;
            
            // 创建陨石坑
            craters.push({
                x: ast.x,
                y: ast.y,
                r: Math.max(5, Math.log(ast.diameter) * 2),
                time: Date.now()
            });
            
            // 创建爆炸粒子
            for (let i = 0; i < 100; i++) {
                particles.push(new Particle(
                    ast.x, ast.y,
                    (Math.random() - 0.5) * 5,
                    (Math.random() - 0.5) * 5,
                    30 + Math.random() * 30,
                    i < 50 ? '#ff6b35' : '#ffd700'
                ));
            }
            
            // 更新撞击面板
            document.getElementById('target').textContent = ast.name || '未知';
            document.getElementById('energy').textContent = energy.toFixed(1) + ' MT';
            document.getElementById('crater').textContent = craterSize.toFixed(1) + ' km';
            document.getElementById('coords').textContent = `X:${Math.round(ast.x)} Y:${Math.round(ast.y)}`;
            document.getElementById('fireball').textContent = fireballRadius.toFixed(1) + ' km';
            document.getElementById('shockwave').textContent = shockwaveRadius.toFixed(1) + ' km';
            document.getElementById('magnitude').textContent = magnitude.toFixed(1);
            
            notify(`撞击发生! ${ast.name || '小行星'} - 能量: ${energy.toFixed(1)} MT`);
        }

        // 点击事件
        function onClick(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            
            // 查找点击的小行星
            for (let i = asteroids.length - 1; i >= 0; i--) {
                const ast = asteroids[i];
                const dist = Math.sqrt((x - ast.x) ** 2 + (y - ast.y) ** 2);
                if (dist <= ast.size + 5) {
                    select(ast);
                    return;
                }
            }
            
            // 如果没有点击到小行星，取消选择
            selected = null;
            document.getElementById('impactBtn').disabled = true;
            updateList();
        }

        // 选择小行星
        function select(ast) {
            selected = ast;
            document.getElementById('impactBtn').disabled = false;
            updateList();
            notify(`选择: ${ast.name || '小行星'}`);
        }

        // 更新小行星列表
        function updateList() {
            const list = document.getElementById('list');
            if (asteroids.length === 0) {
                list.innerHTML = '<div style="text-align: center; color: #666; padding: 10px; font-size: 8px;">暂无小行星</div>';
                return;
            }
            
            list.innerHTML = asteroids.map(ast => `
                <div class="item ${ast === selected ? 'selected' : ''} ${ast.danger ? 'danger' : ''}" onclick="select(this.ast)" ast='${JSON.stringify(ast).replace(/'/g, "\\'")}'>
                    <div style="font-weight: bold;">${ast.name || '小行星'}</div>
                    <div style="font-size: 7px; color: #aaa;">
                        ${ast.diameter}m | ${Math.sqrt(ast.vx * ast.vx + ast.vy * ast.vy).toFixed(1)}km/s
                    </div>
                </div>
            `).join('');
        }

        // 添加小行星
        function addAsteroid() {
            const angle = Math.random() * Math.PI * 2;
            const dist = 200 + Math.random() * 100;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = 0.5 + Math.random() * 0.5;
            
            const ast = {
                id: Date.now(),
                name: `小行星-${asteroids.length + 1}`,
                diameter: 100 + Math.random() * 400,
                danger: Math.random() > 0.7,
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            ast.size = Math.max(3, Math.log(ast.diameter) * 1.2);
            asteroids.push(ast);
            updateList();
            notify(`生成: ${ast.name}`);
        }

        // 添加目标小行星
        function addTarget() {
            const ast = ASTEROIDS[Math.floor(Math.random() * ASTEROIDS.length)];
            const angle = Math.random() * Math.PI * 2;
            const dist = 250;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = 1.0;
            
            const newAst = {
                ...ast,
                id: Date.now(),
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            newAst.size = Math.max(3, Math.log(newAst.diameter) * 1.2);
            asteroids.push(newAst);
            updateList();
            notify(`目标: ${newAst.name}`);
        }

        // 创建自定义小行星
        function createCustom() {
            const size = parseInt(document.getElementById('size').value);
            const speedVal = parseInt(document.getElementById('speed').value);
            const angleVal = parseInt(document.getElementById('angle').value);
            
            const angle = angleVal * Math.PI / 180;
            const dist = 200;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = speedVal / 10;
            
            const ast = {
                id: Date.now(),
                name: `自定义-${size}m`,
                diameter: size,
                danger: size > 500,
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            ast.size = Math.max(3, Math.log(ast.diameter) * 1.2);
            asteroids.push(ast);
            updateList();
            notify(`自定义: ${ast.name}`);
        }

        // 更新参数显示
        function updateParams() {
            document.getElementById('sizeVal').textContent = document.getElementById('size').value + 'm';
            document.getElementById('speedVal').textContent = document.getElementById('speed').value + 'km/s';
            document.getElementById('angleVal').textContent = document.getElementById('angle').value + '°';
        }

        // 撞击功能
        function impact() {
            if (!selected) return;
            
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const earthRadius = 45;
            
            // 计算撞击点（地球表面）
            const angle = Math.atan2(selected.y - centerY, selected.x - centerX);
            const impactX = centerX + Math.cos(angle) * earthRadius;
            const impactY = centerY + Math.sin(angle) * earthRadius;
            
            // 设置撞击模式
            selected.impacting = true;
            selected.impactStartTime = Date.now();
            selected.impactDuration = 2000; // 2秒撞击过程
            selected.startX = selected.x;
            selected.startY = selected.y;
            selected.targetX = impactX;
            selected.targetY = impactY;
            
            document.getElementById('impactBtn').disabled = true;
            notify(`撞击模式启动: ${selected.name}`);
        }

        // 清除所有
        function clearAll() {
            asteroids = [];
            particles = [];
            craters = [];
            selected = null;
            impactCount = 0;
            atmosphereDestroyCount = 0;
            updateList();
            document.getElementById('impactBtn').disabled = true;
            notify('已清除所有小行星');
        }

        // 清除小行星
        function clear() {
            if (asteroids.length === 0) return;
            asteroids.pop();
            if (selected && !asteroids.includes(selected)) {
                selected = null;
                document.getElementById('impactBtn').disabled = true;
            }
            updateList();
            notify('清除一个小行星');
        }

        // 更新UI
        function updateUI() {
            document.getElementById('count').textContent = asteroids.length;
            document.getElementById('impacts').textContent = impactCount;
            document.getElementById('atmosphere').textContent = atmosphereDestroyCount;
            document.getElementById('memory').textContent = memory.toFixed(1) + ' MB';
            
            // 威胁等级
            const threat = asteroids.filter(a => a.danger).length;
            document.getElementById('threat').textContent = 
                threat > 3 ? '极高' : threat > 1 ? '高' : threat > 0 ? '中' : '低';
            document.getElementById('threat').style.color = 
                threat > 3 ? '#ff4757' : threat > 1 ? '#ffa502' : threat > 0 ? '#ffd700' : '#00ff88';
        }

        // 更新NASA面板
        function updateNASAPanel() {
            document.getElementById('neoCount').textContent = REAL_TIME_ASTEROIDS.length;
            document.getElementById('hazardCount').textContent = REAL_TIME_ASTEROIDS.filter(a => a.danger).length;
            document.getElementById('fireballCount').textContent = FIREBALL_DATA.length;
            document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();
            document.getElementById('dataSource').textContent = 'NASA NeoWs API';
        }

        // 刷新NASA数据
        function refreshNASAData() {
            initNASAData();
            notify('刷新NASA数据...');
        }

        // 切换所有面板显示
        function toggleAllPanels() {
            const panels = document.querySelectorAll('.panel');
            const viewControls = document.getElementById('viewControls');
            const toggleBtn = document.getElementById('toggleBtn');
            
            const allHidden = panels[0].classList.contains('hidden');
            
            panels.forEach(panel => {
                if (allHidden) {
                    panel.classList.remove('hidden');
                } else {
                    panel.classList.add('hidden');
                }
            });
            
            if (allHidden) {
                viewControls.classList.remove('hidden');
                toggleBtn.textContent = '隐藏界面';
                toggleBtn.classList.remove('all-hidden');
            } else {
                viewControls.classList.add('hidden');
                toggleBtn.textContent = '显示界面';
                toggleBtn.classList.add('all-hidden');
            }
        }

        // 设置视角
        function setView(viewType, evt) {
            if (evt && evt.target) {
                // 更新按钮状态
                document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
                evt.target.classList.add('active');
            }
            
            currentView = viewType;
            
            switch (viewType) {
                case 'default':
                    viewScale = 1;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'close':
                    viewScale = 2;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'wide':
                    viewScale = 0.5;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'follow':
                    if (selected) {
                        followTarget = selected;
                        viewScale = 1.5;
                    } else {
                        notify('请先选择一个小行星');
                        return;
                    }
                    break;
            }
            
            notify(`视角切换: ${getViewName(viewType)}`);
        }

        function getViewName(viewType) {
            const names = {
                'default': '标准视角',
                'close': '近距离',
                'wide': '广角视角',
                'follow': '跟踪模式'
            };
            return names[viewType] || viewType;
        }

        // 暂停/继续
        function togglePause() {
            isPaused = !isPaused;
            const pauseBtn = document.getElementById('pauseBtn');
            pauseBtn.textContent = isPaused ? '继续' : '暂停';
            notify(isPaused ? '模拟暂停' : '模拟继续');
        }

        // 页面加载完成后初始化
        window.addEventListener('load', init);
        
        // 窗口大小变化时调整canvas
        window.addEventListener('resize', () => {
            if (canvas) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
        });

        // 初始化参数显示
        updateParams();
    </script>
</body>
</html>
                ctx.beginPath();
                ctx.arc(ast.x, ast.y, size, 0, Math.PI * 2);
                ctx.fill();
                
                // 选中效果
                if (ast === selected) {
                    ctx.strokeStyle = '#ffd700';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.arc(ast.x, ast.y, size + 2, 0, Math.PI * 2);
                    ctx.stroke();
                }
            });
            
            // 粒子
            particles.forEach(p => p.draw(ctx));
            
            // 恢复状态
            ctx.restore();
        }

        // 大气层摧毁效果
        function createAtmosphereDestruction(ast) {
            for (let i = 0; i < 30; i++) {
                particles.push(new Particle(
                    ast.x, ast.y,
                    (Math.random() - 0.5) * 3,
                    (Math.random() - 0.5) * 3,
                    20 + Math.random() * 20,
                    '#ff8c00'
                ));
            }
            notify(`大气层拦截: ${ast.name || '小行星'}`);
        }

        // 撞击效果
        function createImpact(ast) {
            impactCount++;
            
            // 计算撞击能量（兆吨TNT当量）
            const energy = (0.5 * ast.diameter * ast.diameter * ast.diameter * 3000 * 12 * 12) / 4.184e15;
            
            // 计算陨石坑大小（千米）
            const craterSize = Math.pow(energy, 0.29) * 0.1;
            
            // 计算火球半径（千米）
            const fireballRadius = Math.pow(energy, 0.4) * 0.1;
            
            // 计算冲击波半径（千米）
            const shockwaveRadius = Math.pow(energy, 0.33) * 2;
            
            // 计算震级
            const magnitude = Math.log10(energy * 4.184e15) / 1.5 - 4;
            
            // 创建陨石坑
            craters.push({
                x: ast.x,
                y: ast.y,
                r: Math.max(5, Math.log(ast.diameter) * 2),
                time: Date.now()
            });
            
            // 创建爆炸粒子
            for (let i = 0; i < 100; i++) {
                particles.push(new Particle(
                    ast.x, ast.y,
                    (Math.random() - 0.5) * 5,
                    (Math.random() - 0.5) * 5,
                    30 + Math.random() * 30,
                    i < 50 ? '#ff6b35' : '#ffd700'
                ));
            }
            
            // 更新撞击面板
            document.getElementById('target').textContent = ast.name || '未知';
            document.getElementById('energy').textContent = energy.toFixed(1) + ' MT';
            document.getElementById('crater').textContent = craterSize.toFixed(1) + ' km';
            document.getElementById('coords').textContent = `X:${Math.round(ast.x)} Y:${Math.round(ast.y)}`;
            document.getElementById('fireball').textContent = fireballRadius.toFixed(1) + ' km';
            document.getElementById('shockwave').textContent = shockwaveRadius.toFixed(1) + ' km';
            document.getElementById('magnitude').textContent = magnitude.toFixed(1);
            
            notify(`撞击发生! ${ast.name || '小行星'} - 能量: ${energy.toFixed(1)} MT`);
        }

        // 点击事件
        function onClick(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            
            // 查找点击的小行星
            for (let i = asteroids.length - 1; i >= 0; i--) {
                const ast = asteroids[i];
                const dist = Math.sqrt((x - ast.x) ** 2 + (y - ast.y) ** 2);
                if (dist <= ast.size + 5) {
                    select(ast);
                    return;
                }
            }
            
            // 如果没有点击到小行星，取消选择
            selected = null;
            document.getElementById('impactBtn').disabled = true;
            updateList();
        }

        // 选择小行星
        function select(ast) {
            selected = ast;
            document.getElementById('impactBtn').disabled = false;
            updateList();
            notify(`选择: ${ast.name || '小行星'}`);
        }

        // 更新小行星列表
        function updateList() {
            const list = document.getElementById('list');
            if (asteroids.length === 0) {
                list.innerHTML = '<div style="text-align: center; color: #666; padding: 10px; font-size: 8px;">暂无小行星</div>';
                return;
            }
            
            list.innerHTML = asteroids.map(ast => `
                <div class="item ${ast === selected ? 'selected' : ''} ${ast.danger ? 'danger' : ''}" onclick="select(this.ast)" ast='${JSON.stringify(ast).replace(/'/g, "\\'")}'>
                    <div style="font-weight: bold;">${ast.name || '小行星'}</div>
                    <div style="font-size: 7px; color: #aaa;">
                        ${ast.diameter}m | ${Math.sqrt(ast.vx * ast.vx + ast.vy * ast.vy).toFixed(1)}km/s
                    </div>
                </div>
            `).join('');
        }

        // 添加小行星
        function addAsteroid() {
            const angle = Math.random() * Math.PI * 2;
            const dist = 200 + Math.random() * 100;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = 0.5 + Math.random() * 0.5;
            
            const ast = {
                id: Date.now(),
                name: `小行星-${asteroids.length + 1}`,
                diameter: 100 + Math.random() * 400,
                danger: Math.random() > 0.7,
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            ast.size = Math.max(3, Math.log(ast.diameter) * 1.2);
            asteroids.push(ast);
            updateList();
            notify(`生成: ${ast.name}`);
        }

        // 添加目标小行星
        function addTarget() {
            const ast = ASTEROIDS[Math.floor(Math.random() * ASTEROIDS.length)];
            const angle = Math.random() * Math.PI * 2;
            const dist = 250;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = 1.0;
            
            const newAst = {
                ...ast,
                id: Date.now(),
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            newAst.size = Math.max(3, Math.log(newAst.diameter) * 1.2);
            asteroids.push(newAst);
            updateList();
            notify(`目标: ${newAst.name}`);
        }

        // 创建自定义小行星
        function createCustom() {
            const size = parseInt(document.getElementById('size').value);
            const speedVal = parseInt(document.getElementById('speed').value);
            const angleVal = parseInt(document.getElementById('angle').value);
            
            const angle = angleVal * Math.PI / 180;
            const dist = 200;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = speedVal / 10;
            
            const ast = {
                id: Date.now(),
                name: `自定义-${size}m`,
                diameter: size,
                danger: size > 500,
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            ast.size = Math.max(3, Math.log(ast.diameter) * 1.2);
            asteroids.push(ast);
            updateList();
            notify(`自定义: ${ast.name}`);
        }

        // 更新参数显示
        function updateParams() {
            document.getElementById('sizeVal').textContent = document.getElementById('size').value + 'm';
            document.getElementById('speedVal').textContent = document.getElementById('speed').value + 'km/s';
            document.getElementById('angleVal').textContent = document.getElementById('angle').value + '°';
        }

        // 撞击功能
        function impact() {
            if (!selected) return;
            
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const earthRadius = 45;
            
            // 计算撞击点（地球表面）
            const angle = Math.atan2(selected.y - centerY, selected.x - centerX);
            const impactX = centerX + Math.cos(angle) * earthRadius;
            const impactY = centerY + Math.sin(angle) * earthRadius;
            
            // 设置撞击模式
            selected.impacting = true;
            selected.impactStartTime = Date.now();
            selected.impactDuration = 2000; // 2秒撞击过程
            selected.startX = selected.x;
            selected.startY = selected.y;
            selected.targetX = impactX;
            selected.targetY = impactY;
            
            document.getElementById('impactBtn').disabled = true;
            notify(`撞击模式启动: ${selected.name}`);
        }

        // 清除所有
        function clearAll() {
            asteroids = [];
            particles = [];
            craters = [];
            selected = null;
            impactCount = 0;
            atmosphereDestroyCount = 0;
            updateList();
            document.getElementById('impactBtn').disabled = true;
            notify('已清除所有小行星');
        }

        // 清除小行星
        function clear() {
            if (asteroids.length === 0) return;
            asteroids.pop();
            if (selected && !asteroids.includes(selected)) {
                selected = null;
                document.getElementById('impactBtn').disabled = true;
            }
            updateList();
            notify('清除一个小行星');
        }

        // 更新UI
        function updateUI() {
            document.getElementById('count').textContent = asteroids.length;
            document.getElementById('impacts').textContent = impactCount;
            document.getElementById('atmosphere').textContent = atmosphereDestroyCount;
            document.getElementById('memory').textContent = memory.toFixed(1) + ' MB';
            
            // 威胁等级
            const threat = asteroids.filter(a => a.danger).length;
            document.getElementById('threat').textContent = 
                threat > 3 ? '极高' : threat > 1 ? '高' : threat > 0 ? '中' : '低';
            document.getElementById('threat').style.color = 
                threat > 3 ? '#ff4757' : threat > 1 ? '#ffa502' : threat > 0 ? '#ffd700' : '#00ff88';
        }

        // 更新NASA面板
        function updateNASAPanel() {
            document.getElementById('neoCount').textContent = REAL_TIME_ASTEROIDS.length;
            document.getElementById('hazardCount').textContent = REAL_TIME_ASTEROIDS.filter(a => a.danger).length;
            document.getElementById('fireballCount').textContent = FIREBALL_DATA.length;
            document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();
            document.getElementById('dataSource').textContent = 'NASA NeoWs API';
        }

        // 刷新NASA数据
        function refreshNASAData() {
            initNASAData();
            notify('刷新NASA数据...');
        }

        // 切换所有面板显示
        function toggleAllPanels() {
            const panels = document.querySelectorAll('.panel');
            const viewControls = document.getElementById('viewControls');
            const toggleBtn = document.getElementById('toggleBtn');
            
            const allHidden = panels[0].classList.contains('hidden');
            
            panels.forEach(panel => {
                if (allHidden) {
                    panel.classList.remove('hidden');
                } else {
                    panel.classList.add('hidden');
                }
            });
            
            if (allHidden) {
                viewControls.classList.remove('hidden');
                toggleBtn.textContent = '隐藏界面';
                toggleBtn.classList.remove('all-hidden');
            } else {
                viewControls.classList.add('hidden');
                toggleBtn.textContent = '显示界面';
                toggleBtn.classList.add('all-hidden');
            }
        }

        // 设置视角
        function setView(viewType, evt) {
            if (evt && evt.target) {
                // 更新按钮状态
                document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
                evt.target.classList.add('active');
            }
            
            currentView = viewType;
            
            switch (viewType) {
                case 'default':
                    viewScale = 1;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'close':
                    viewScale = 2;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'wide':
                    viewScale = 0.5;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'follow':
                    if (selected) {
                        followTarget = selected;
                        viewScale = 1.5;
                    } else {
                        notify('请先选择一个小行星');
                        return;
                    }
                    break;
            }
            
            notify(`视角切换: ${getViewName(viewType)}`);
        }

        function getViewName(viewType) {
            const names = {
                'default': '标准视角',
                'close': '近距离',
                'wide': '广角视角',
                'follow': '跟踪模式'
            };
            return names[viewType] || viewType;
        }

        // 暂停/继续
        function togglePause() {
            isPaused = !isPaused;
            const pauseBtn = document.getElementById('pauseBtn');
            pauseBtn.textContent = isPaused ? '继续' : '暂停';
            notify(isPaused ? '模拟暂停' : '模拟继续');
        }

        // 页面加载完成后初始化
        window.addEventListener('load', init);
        
        // 窗口大小变化时调整canvas
        window.addEventListener('resize', () => {
            if (canvas) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
        });

        // 初始化参数显示
        updateParams();
    </script>
</body>
</html>
                ctx.beginPath();
                ctx.arc(ast.x, ast.y, size, 0, Math.PI * 2);
                ctx.fill();
                
                // 选中效果
                if (ast === selected) {
                    ctx.strokeStyle = '#ffd700';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.arc(ast.x, ast.y, size + 2, 0, Math.PI * 2);
                    ctx.stroke();
                }
            });
            
            // 粒子
            particles.forEach(p => p.draw(ctx));
            
            // 恢复状态
            ctx.restore();
        }

        // 大气层摧毁效果
        function createAtmosphereDestruction(ast) {
            for (let i = 0; i < 30; i++) {
                particles.push(new Particle(
                    ast.x, ast.y,
                    (Math.random() - 0.5) * 3,
                    (Math.random() - 0.5) * 3,
                    20 + Math.random() * 20,
                    '#ff8c00'
                ));
            }
            notify(`大气层拦截: ${ast.name || '小行星'}`);
        }

        // 撞击效果
        function createImpact(ast) {
            impactCount++;
            
            // 计算撞击能量（兆吨TNT当量）
            const energy = (0.5 * ast.diameter * ast.diameter * ast.diameter * 3000 * 12 * 12) / 4.184e15;
            
            // 计算陨石坑大小（千米）
            const craterSize = Math.pow(energy, 0.29) * 0.1;
            
            // 计算火球半径（千米）
            const fireballRadius = Math.pow(energy, 0.4) * 0.1;
            
            // 计算冲击波半径（千米）
            const shockwaveRadius = Math.pow(energy, 0.33) * 2;
            
            // 计算震级
            const magnitude = Math.log10(energy * 4.184e15) / 1.5 - 4;
            
            // 创建陨石坑
            craters.push({
                x: ast.x,
                y: ast.y,
                r: Math.max(5, Math.log(ast.diameter) * 2),
                time: Date.now()
            });
            
            // 创建爆炸粒子
            for (let i = 0; i < 100; i++) {
                particles.push(new Particle(
                    ast.x, ast.y,
                    (Math.random() - 0.5) * 5,
                    (Math.random() - 0.5) * 5,
                    30 + Math.random() * 30,
                    i < 50 ? '#ff6b35' : '#ffd700'
                ));
            }
            
            // 更新撞击面板
            document.getElementById('target').textContent = ast.name || '未知';
            document.getElementById('energy').textContent = energy.toFixed(1) + ' MT';
            document.getElementById('crater').textContent = craterSize.toFixed(1) + ' km';
            document.getElementById('coords').textContent = `X:${Math.round(ast.x)} Y:${Math.round(ast.y)}`;
            document.getElementById('fireball').textContent = fireballRadius.toFixed(1) + ' km';
            document.getElementById('shockwave').textContent = shockwaveRadius.toFixed(1) + ' km';
            document.getElementById('magnitude').textContent = magnitude.toFixed(1);
            
            notify(`撞击发生! ${ast.name || '小行星'} - 能量: ${energy.toFixed(1)} MT`);
        }

        // 点击事件
        function onClick(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            
            // 查找点击的小行星
            for (let i = asteroids.length - 1; i >= 0; i--) {
                const ast = asteroids[i];
                const dist = Math.sqrt((x - ast.x) ** 2 + (y - ast.y) ** 2);
                if (dist <= ast.size + 5) {
                    select(ast);
                    return;
                }
            }
            
            // 如果没有点击到小行星，取消选择
            selected = null;
            document.getElementById('impactBtn').disabled = true;
            updateList();
        }

        // 选择小行星
        function select(ast) {
            selected = ast;
            document.getElementById('impactBtn').disabled = false;
            updateList();
            notify(`选择: ${ast.name || '小行星'}`);
        }

        // 更新小行星列表
        function updateList() {
            const list = document.getElementById('list');
            if (asteroids.length === 0) {
                list.innerHTML = '<div style="text-align: center; color: #666; padding: 10px; font-size: 8px;">暂无小行星</div>';
                return;
            }
            
            list.innerHTML = asteroids.map(ast => `
                <div class="item ${ast === selected ? 'selected' : ''} ${ast.danger ? 'danger' : ''}" onclick="select(this.ast)" ast='${JSON.stringify(ast).replace(/'/g, "\\'")}'>
                    <div style="font-weight: bold;">${ast.name || '小行星'}</div>
                    <div style="font-size: 7px; color: #aaa;">
                        ${ast.diameter}m | ${Math.sqrt(ast.vx * ast.vx + ast.vy * ast.vy).toFixed(1)}km/s
                    </div>
                </div>
            `).join('');
        }

        // 添加小行星
        function addAsteroid() {
            const angle = Math.random() * Math.PI * 2;
            const dist = 200 + Math.random() * 100;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = 0.5 + Math.random() * 0.5;
            
            const ast = {
                id: Date.now(),
                name: `小行星-${asteroids.length + 1}`,
                diameter: 100 + Math.random() * 400,
                danger: Math.random() > 0.7,
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            ast.size = Math.max(3, Math.log(ast.diameter) * 1.2);
            asteroids.push(ast);
            updateList();
            notify(`生成: ${ast.name}`);
        }

        // 添加目标小行星
        function addTarget() {
            const ast = ASTEROIDS[Math.floor(Math.random() * ASTEROIDS.length)];
            const angle = Math.random() * Math.PI * 2;
            const dist = 250;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = 1.0;
            
            const newAst = {
                ...ast,
                id: Date.now(),
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            newAst.size = Math.max(3, Math.log(newAst.diameter) * 1.2);
            asteroids.push(newAst);
            updateList();
            notify(`目标: ${newAst.name}`);
        }

        // 创建自定义小行星
        function createCustom() {
            const size = parseInt(document.getElementById('size').value);
            const speedVal = parseInt(document.getElementById('speed').value);
            const angleVal = parseInt(document.getElementById('angle').value);
            
            const angle = angleVal * Math.PI / 180;
            const dist = 200;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = speedVal / 10;
            
            const ast = {
                id: Date.now(),
                name: `自定义-${size}m`,
                diameter: size,
                danger: size > 500,
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed
            };
            
            ast.size = Math.max(3, Math.log(ast.diameter) * 1.2);
            asteroids.push(ast);
            updateList();
            notify(`自定义: ${ast.name}`);
        }

        // 更新参数显示
        function updateParams() {
            document.getElementById('sizeVal').textContent = document.getElementById('size').value + 'm';
            document.getElementById('speedVal').textContent = document.getElementById('speed').value + 'km/s';
            document.getElementById('angleVal').textContent = document.getElementById('angle').value + '°';
        }

        // 撞击功能
        function impact() {
            if (!selected) return;
            
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const earthRadius = 45;
            
            // 计算撞击点（地球表面）
            const angle = Math.atan2(selected.y - centerY, selected.x - centerX);
            const impactX = centerX + Math.cos(angle) * earthRadius;
            const impactY = centerY + Math.sin(angle) * earthRadius;
            
            // 设置撞击模式
            selected.impacting = true;
            selected.impactStartTime = Date.now();
            selected.impactDuration = 2000; // 2秒撞击过程
            selected.startX = selected.x;
            selected.startY = selected.y;
            selected.targetX = impactX;
            selected.targetY = impactY;
            
            document.getElementById('impactBtn').disabled = true;
            notify(`撞击模式启动: ${selected.name}`);
        }

        // 清除所有
        function clearAll() {
            asteroids = [];
            particles = [];
            craters = [];
            selected = null;
            impactCount = 0;
            atmosphereDestroyCount = 0;
            updateList();
            document.getElementById('impactBtn').disabled = true;
            notify('已清除所有小行星');
        }

        // 清除小行星
        function clear() {
            if (asteroids.length === 0) return;
            asteroids.pop();
            if (selected && !asteroids.includes(selected)) {
                selected = null;
                document.getElementById('impactBtn').disabled = true;
            }
            updateList();
            notify('清除一个小行星');
        }

        // 更新UI
        function updateUI() {
            document.getElementById('count').textContent = asteroids.length;
            document.getElementById('impacts').textContent = impactCount;
            document.getElementById('atmosphere').textContent = atmosphereDestroyCount;
            document.getElementById('memory').textContent = memory.toFixed(1) + ' MB';
            
            // 威胁等级
            const threat = asteroids.filter(a => a.danger).length;
            document.getElementById('threat').textContent = 
                threat > 3 ? '极高' : threat > 1 ? '高' : threat > 0 ? '中' : '低';
            document.getElementById('threat').style.color = 
                threat > 3 ? '#ff4757' : threat > 1 ? '#ffa502' : threat > 0 ? '#ffd700' : '#00ff88';
        }

        // 更新NASA面板
        function updateNASAPanel() {
            document.getElementById('neoCount').textContent = REAL_TIME_ASTEROIDS.length;
            document.getElementById('hazardCount').textContent = REAL_TIME_ASTEROIDS.filter(a => a.danger).length;
            document.getElementById('fireballCount').textContent = FIREBALL_DATA.length;
            document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();
            document.getElementById('dataSource').textContent = 'NASA NeoWs API';
        }

        // 刷新NASA数据
        function refreshNASAData() {
            initNASAData();
            notify('刷新NASA数据...');
        }

        // 切换所有面板显示
        function toggleAllPanels() {
            const panels = document.querySelectorAll('.panel');
            const viewControls = document.getElementById('viewControls');
            const toggleBtn = document.getElementById('toggleBtn');
            
            const allHidden = panels[0].classList.contains('hidden');
            
            panels.forEach(panel => {
                if (allHidden) {
                    panel.classList.remove('hidden');
                } else {
                    panel.classList.add('hidden');
                }
            });
            
            if (allHidden) {
                viewControls.classList.remove('hidden');
                toggleBtn.textContent = '隐藏界面';
                toggleBtn.classList.remove('all-hidden');
            } else {
                viewControls.classList.add('hidden');
                toggleBtn.textContent = '显示界面';
                toggleBtn.classList.add('all-hidden');
            }
        }

        // 设置视角
        function setView(viewType, evt) {
            if (evt && evt.target) {
                // 更新按钮状态
                document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
                evt.target.classList.add('active');
            }
            
            currentView = viewType;
            
            switch (viewType) {
                case 'default':
                    viewScale = 1;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'close':
                    viewScale = 2;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'wide':
                    viewScale = 0.5;
                    viewOffsetX = 0;
                    viewOffsetY = 0;
                    followTarget = null;
                    break;
                case 'follow':
                    if (selected) {
                        followTarget = selected;
                        viewScale = 1.5;
                    } else {
                        notify('请先选择一个小行星');
                        return;
                    }
                    break;
            }
            
            notify(`视角切换: ${getViewName(viewType)}`);
        }

        function getViewName(viewType) {
            const names = {
                'default': '标准视角',
                'close': '近距离',
                'wide': '广角视角',
                'follow': '跟踪模式'
            };
            return names[viewType] || viewType;
        }

        // 暂停/继续
        function togglePause() {
            isPaused = !isPaused;
            const pauseBtn = document.getElementById('pauseBtn');
            pauseBtn.textContent = isPaused ? '继续' : '暂停';
            notify(isPaused ? '模拟暂停' : '模拟继续');
        }

        // 页面加载完成后初始化
        window.addEventListener('load', init);
        
        // 窗口大小变化时调整canvas
        window.addEventListener('resize', () => {
            if (canvas) {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
        });

        // 初始化参数显示
        updateParams();
    </script>
</body>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小行星撞击模拟器</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: Arial, sans-serif; background: #000; color: white; overflow: hidden; 
        }
        #container { position: relative; width: 100vw; height: 100vh; }
        canvas { display: block; background: #001122; }
        
        .panel {
            position: absolute; background: rgba(0, 20, 40, 0.9);
            border: 1px solid #00ff88; border-radius: 8px; padding: 15px;
        }
        
        #info { top: 20px; left: 20px; width: 250px; }
        #controls { top: 20px; right: 20px; width: 200px; transition: transform 0.3s ease, opacity 0.3s ease; }
        #controls.hidden { transform: translateX(240px); opacity: 0.1; }
        #params { bottom: 20px; left: 20px; width: 280px; }
        #impact { bottom: 20px; right: 20px; width: 250px; }
        
        h3 { color: #00ff88; margin-bottom: 10px; font-size: 14px; }
        .row { display: flex; justify-content: space-between; margin: 5px 0; font-size: 11px; }
        .label { color: #aaa; }
        .value { color: #00ff88; font-weight: bold; }
        
        button {
            background: linear-gradient(45deg, #00ff88, #00aa66);
            border: none; color: white; padding: 8px 12px; margin: 3px;
            border-radius: 4px; cursor: pointer; font-size: 10px; width: 100%;
        }
        button:hover { transform: translateY(-1px); }
        button.danger { background: linear-gradient(45deg, #ff4757, #ff3742); }
        button:disabled { opacity: 0.5; cursor: not-allowed; }
        
        .param { margin: 8px 0; display: flex; align-items: center; justify-content: space-between; }
        .param label { font-size: 10px; color: #aaa; }
        .param input { width: 100px; margin: 0 5px; }
        .param .val { font-size: 10px; color: #00ff88; min-width: 35px; }
        
        .list {
            max-height: 100px; overflow-y: auto; margin: 10px 0;
            border: 1px solid #00ff88; border-radius: 4px;
        }
        
        .item {
            padding: 5px; border-bottom: 1px solid rgba(0, 255, 136, 0.2);
            cursor: pointer; font-size: 9px;
        }
        .item:hover { background: rgba(0, 255, 136, 0.1); }
        .item.selected { background: rgba(255, 215, 0, 0.2); }
        .item.danger { border-left: 3px solid #ff4757; }
        
        /* 右侧弹窗消息系统 */
        .notification-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 2000;
            max-width: 300px;
        }
        
        .notification {
            background: rgba(0, 40, 80, 0.95);
            border: 1px solid #00ff88;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
            font-size: 12px;
            color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            animation: slideInRight 0.3s ease-out;
            max-height: 100px;
            overflow: hidden;
        }
        
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .notification.fade-out {
            animation: slideOutRight 0.3s ease-in forwards;
        }
        
        @keyframes slideOutRight {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }
        
        .toggle-btn {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.6);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 15px;
            cursor: pointer;
            font-size: 11px;
            z-index: 1001;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            width: auto;
            min-width: 80px;
        }
        
        .toggle-btn.all-hidden {
            padding: 4px 8px;
            font-size: 10px;
            background: rgba(0,0,0,0.3);
        }
        
        .toggle-btn:hover {
            background: rgba(0,0,0,0.8);
            transform: translateX(-50%) scale(1.1);
        }
        
        .panel.hidden {
            transform: scale(0.8);
            opacity: 0;
            pointer-events: none;
        }
        
        .view-controls {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            transition: all 0.3s ease;
        }
        
        .view-controls.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        .view-btn {
            background: rgba(0,0,0,0.6);
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 15px;
            cursor: pointer;
            font-size: 10px;
            backdrop-filter: blur(5px);
            transition: all 0.2s ease;
        }
        
        .view-btn:hover {
            background: rgba(0,0,0,0.8);
            transform: translateY(-2px);
        }
        
        .view-btn.active {
            background: rgba(0, 255, 136, 0.8);
            color: black;
        }
        
        /* NASA小行星列表样式 */
        #nasa-asteroids {
            top: 150px;
            left: 20px;
            width: 280px;
            height: 200px;
        }
        
        .nasa-item {
            padding: 6px;
            border-bottom: 1px solid rgba(0, 255, 136, 0.2);
            cursor: pointer;
            font-size: 9px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .nasa-item:hover {
            background: rgba(0, 255, 136, 0.1);
        }
        
        .nasa-item.selected {
            background: rgba(255, 215, 0, 0.2);
        }
        
        .nasa-danger {
            color: #ff4757;
            font-weight: bold;
        }
        
        .nasa-safe {
            color: #00ff88;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    
    <!-- 右侧弹窗消息容器 -->
    <div class="notification-container" id="notificationContainer"></div>
    
    <button class="toggle-btn" onclick="toggleAllPanels()" id="toggleBtn">隐藏界面</button>
    
    <div class="view-controls" id="viewControls">
        <button class="view-btn" onclick="togglePause()" id="pauseBtn">暂停</button>
        <button class="view-btn active" onclick="setView('default', event)">标准视角</button>
        <button class="view-btn" onclick="setView('close', event)">近距离</button>
        <button class="view-btn" onclick="setView('wide', event)">广角视角</button>
        <button class="view-btn" onclick="setView('follow', event)">跟踪模式</button>
    </div>
    
    <div id="info" class="panel">
        <h3>地球防御</h3>
        <div class="row"><span class="label">小行星:</span><span class="value" id="count">0</span></div>
        <div class="row"><span class="label">撞击:</span><span class="value" id="impacts">0</span></div>
        <div class="row"><span class="label">大气拦截:</span><span class="value" id="atmosphere">0</span></div>
        <div class="row"><span class="label">威胁:</span><span class="value" id="threat">低</span></div>
        <div class="row"><span class="label">内存:</span><span class="value" id="memory">10.5 MB</span></div>
        <div class="row"><span class="label">FPS:</span><span class="value" id="fps">60</span></div>
    </div>
    
    <div id="controls" class="panel">
        <h3>控制</h3>
        <button onclick="addAsteroid()">生成小行星</button>
        <button onclick="addTarget()">目标小行星</button>
        <button onclick="clearAll()" class="danger">清除</button>
        <div class="list" id="list">
            <div style="text-align: center; color: #666; padding: 10px; font-size: 8px;">
                暂无小行星
            </div>
        </div>
        <button onclick="impact()" id="impactBtn" disabled>撞击</button>
    </div>
    
    <div id="params" class="panel">
        <h3>参数</h3>
        <div class="param">
            <label>直径:</label>
            <input type="range" id="size" min="50" max="1500" value="500" oninput="updateParams()">
            <span class="val" id="sizeVal">500m</span>
        </div>
        <div class="param">
            <label>速度:</label>
            <input type="range" id="speed" min="5" max="25" value="12" oninput="updateParams()">
            <span class="val" id="speedVal">12km/s</span>
        </div>
        <div class="param">
            <label>角度:</label>
            <input type="range" id="angle" min="0" max="360" value="45" oninput="updateParams()">
            <span class="val" id="angleVal">45°</span>
        </div>
        <button onclick="createCustom()">自定义小行星</button>
    </div>
    
    <div id="impact" class="panel">
        <h3>撞击数据</h3>
        <div class="row"><span class="label">目标:</span><span class="value" id="target">无</span></div>
        <div class="row"><span class="label">能量:</span><span class="value" id="energy">0 MT</span></div>
        <div class="row"><span class="label">陨石坑:</span><span class="value" id="crater">0 km</span></div>
        <div class="row"><span class="label">坐标:</span><span class="value" id="coords">N/A</span></div>
        <div class="row"><span class="label">火球半径:</span><span class="value" id="fireball">0 km</span></div>
        <div class="row"><span class="label">冲击波:</span><span class="value" id="shockwave">0 km</span></div>
        <div class="row"><span class="label">震级:</span><span class="value" id="magnitude">0.0</span></div>
    </div>
    
    <!-- NASA小行星列表 -->
    <div id="nasa-asteroids" class="panel">
        <h3>NASA小行星列表</h3>
        <div class="list" id="nasaList">
            <div style="text-align: center; color: #666; padding: 10px; font-size: 8px;">
                加载中...
            </div>
        </div>
        <button onclick="selectNASAForImpact()" id="nasaImpactBtn" disabled>选择撞击</button>
    </div>
    
    <div id="nasa-data" class="panel" style="top: 370px; left: 20px; width: 280px;">
        <h3>NASA实时数据</h3>
        <div class="row"><span class="label">数据源:</span><span class="value" id="dataSource">加载中...</span></div>
        <div class="row"><span class="label">近地天体:</span><span class="value" id="neoCount">0</span></div>
        <div class="row"><span class="label">危险天体:</span><span class="value" id="hazardCount">0</span></div>
        <div class="row"><span class="label">火球事件:</span><span class="value" id="fireballCount">0</span></div>
        <div class="row"><span class="label">更新:</span><span class="value" id="lastUpdate">-</span></div>
        <button onclick="refreshNASAData()" style="margin-top: 10px;">刷新数据</button>
    </div>

    <!-- NASA API 模块 -->
    <script src="nasa-api.js"></script>
    <!-- 物理引擎模块 -->
    <script src="physics-engine.js"></script>
    
    <script>
        // 实时NASA数据（初始使用备用数据）
        let REAL_TIME_ASTEROIDS = [];
        let FIREBALL_DATA = [];
        let selectedNASA = null;
        
        // 右侧弹窗消息系统
        function notify(msg, duration = 3000) {
            const container = document.getElementById('notificationContainer');
            const notification = document.createElement('div');
            notification.className = 'notification';
            notification.textContent = msg;
            
            container.appendChild(notification);
            
            // 限制最多显示5条消息
            if (container.children.length > 5) {
                container.removeChild(container.firstChild);
            }
            
            setTimeout(() => {
                notification.classList.add('fade-out');
                setTimeout(() => {
                    if (notification.parentNode) {
                        notification.parentNode.removeChild(notification);
                    }
                }, 300);
            }, duration);
        }
        
        // 初始化NASA数据
        async function initNASAData() {
            try {
                const today = new Date().toISOString().split('T')[0];
                const weekLater = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
                
                // 获取接近数据
                const approachData = await nasaService.getCloseApproaches(today, weekLater);
                REAL_TIME_ASTEROIDS = processNASAData(approachData);
                
                // 获取火球数据
                const fireballData = await nasaService.getFireballData();
                FIREBALL_DATA = fireballData.data || [];
                
                console.log(`加载了 ${REAL_TIME_ASTEROIDS.length} 个实时小行星数据`);
                console.log(`加载了 ${FIREBALL_DATA.length} 个火球事件`);
                
                // 更新NASA数据面板
                updateNASAPanel();
                updateNASAList();
                
                notify('NASA数据加载完成');
                
            } catch (error) {
                console.error('NASA数据初始化失败:', error);
                // 使用备用数据
                REAL_TIME_ASTEROIDS = [
                    { name: "Apophis", diameter: 370, danger: true, id: "99942", velocity: 12.6, missDistance: 31000 },
                    { name: "Bennu", diameter: 492, danger: true, id: "101955", velocity: 12.4, missDistance: 750000 },
                    { name: "Eros", diameter: 16700, danger: false, id: "433", velocity: 10.3, missDistance: 22500000 },
                    { name: "Itokawa", diameter: 535, danger: false, id: "25143", velocity: 11.7, missDistance: 2000000 }
                ];
                updateNASAPanel();
                updateNASAList();
                notify('使用备用NASA数据');
            }
        }
        
        // 处理NASA API数据
        function processNASAData(nasaData) {
            const asteroids = [];
            const nearEarthObjects = nasaData.near_earth_objects;
            
            for (const date in nearEarthObjects) {
                nearEarthObjects[date].forEach(neo => {
                    const diameter = neo.estimated_diameter?.meters?.estimated_diameter_min || 100;
                    const velocity = parseFloat(neo.close_approach_data?.[0]?.relative_velocity?.kilometers_per_second || "12");
                    
                    asteroids.push({
                        name: neo.name,
                        diameter: diameter,
                        danger: neo.is_potentially_hazardous_asteroid,
                        id: neo.id,
                        velocity: velocity,
                        missDistance: parseFloat(neo.close_approach_data?.[0]?.miss_distance?.kilometers || "10000000")
                    });
                });
            }
            
            return asteroids;
        }
        
        // 更新NASA小行星列表
        function updateNASAList() {
            const nasaList = document.getElementById('nasaList');
            const nasaImpactBtn = document.getElementById('nasaImpactBtn');
            
            if (REAL_TIME_ASTEROIDS.length === 0) {
                nasaList.innerHTML = '<div style="text-align: center; color: #666; padding: 10px; font-size: 8px;">暂无数据</div>';
                nasaImpactBtn.disabled = true;
                return;
            }
            
            nasaList.innerHTML = REAL_TIME_ASTEROIDS.map((ast, i) => `
                <div class="nasa-item ${selectedNASA === ast ? 'selected' : ''}" onclick="selectNASA(${i})">
                    <div>
                        <div style="font-weight: bold;">${ast.name}</div>
                        <div style="font-size: 7px; color: #aaa;">
                            ${ast.diameter}m | ${ast.velocity}km/s
                        </div>
                    </div>
                    <div class="${ast.danger ? 'nasa-danger' : 'nasa-safe'}">
                        ${ast.danger ? '危险' : '安全'}
                    </div>
                </div>
            `).join('');
            
            nasaImpactBtn.disabled = selectedNASA === null;
        }
        
        // 选择NASA小行星
        function selectNASA(index) {
            selectedNASA = REAL_TIME_ASTEROIDS[index];
            updateNASAList();
            notify(`选择NASA小行星: ${selectedNASA.name}`);
        }
        
        // 选择NASA小行星进行撞击
        function selectNASAForImpact() {
            if (!selectedNASA) return;
            
            // 创建基于NASA数据的小行星
            const angle = Math.random() * Math.PI * 2;
            const dist = 300;
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const startX = centerX + Math.cos(angle) * dist;
            const startY = centerY + Math.sin(angle) * dist;
            
            const dirX = centerX - startX;
            const dirY = centerY - startY;
            const len = Math.sqrt(dirX * dirX + dirY * dirY);
            const speed = 1.0;
            
            const ast = {
                ...selectedNASA,
                id: Date.now(),
                x: startX, y: startY,
                vx: (dirX / len) * speed,
                vy: (dirY / len) * speed,
                size: Math.max(3, Math.log(selectedNASA.diameter) * 1.2)
            };
            
            asteroids.push(ast);
            selected = ast;
            document.getElementById('impactBtn').disabled = false;
            
            notify(`NASA小行星 ${selectedNASA.name} 已加入模拟`);
            selectedNASA = null;
            updateNASAList();
        }

        // 备用数据
        const ASTEROIDS = [
            { name: "Apophis", diameter: 370, danger: true, id: "99942" },
            { name: "Bennu", diameter: 492, danger: true, id: "101955" },
            { name: "Eros", diameter: 16700, danger: false, id: "433" },
            { name: "Itokawa", diameter: 535, danger: false, id: "25143" }
        ];

        // 粒子类
        class Particle {
            constructor(x, y, vx, vy, life, color) {
                this.x = x; this.y = y; this.vx = vx; this.vy = vy;
                this.life = life; this.maxLife = life; this.color = color;
                this.size = Math.random() * 2 + 1;
            }
            
            update() {
                this.x += this.vx; this.y += this.vy;
                this.vy += 0.03; this.life--;
                this.vx *= 0.99; this.vy *= 0.99;
            }
            
            draw(ctx) {
                const alpha = this.life / this.maxLife;
                ctx.globalAlpha = alpha;
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
                ctx.globalAlpha = 1;
            }
        }

        // 全局变量
        let canvas, ctx, asteroids = [], particles = [], selected = null;
        let impactCount = 0, memory = 10.5, frameCount = 0, lastTime = 0;
        let craters = [];
        let earthRotation = 0; // 地球自转角度
        let atmosphereDestroyCount = 0; // 大气层摧毁的小行星数量
        let currentView = 'default'; // 当前视角
        let viewScale = 1; // 视角缩放
        let viewOffsetX = 0, viewOffsetY = 0; // 视角偏移
        let followTarget = null; // 跟踪目标
        let isPaused = false; // 暂停状态

        // 地球纹理
        const earthTexture = createEarthTexture();

        function createEarthTexture() {
            const canvas = document.createElement('canvas');
            canvas.width = 256;
            canvas.height = 256;
            const ctx = canvas.getContext('2d');
            
            // 创建地球纹理
            const gradient = ctx.createRadialGradient(128, 128, 0, 128, 128, 128);
            gradient.addColorStop(0, '#4a90e2');
            gradient.addColorStop(0.7, '#2171b5');
            gradient.addColorStop(1, '#08519c');
            
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, 256, 256);
            
            // 添加大陆纹理
            ctx.fillStyle = '#228B22';
            ctx.beginPath();
            ctx.arc(80, 80, 25, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.fillStyle = '#32CD32';
            ctx.beginPath();
            ctx.arc(180, 120, 20, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.fillStyle = '#90EE90';
            ctx.beginPath();
            ctx.arc(120, 180, 15, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.fillStyle = '#228B22';
            ctx.beginPath();
            ctx.arc(60, 160, 10, 0, Math.PI * 2);
            ctx.fill();
            
            // 添加云层效果
            ctx.globalAlpha = 0.3;
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(150, 60, 15, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc(100, 140, 12, 0, Math.PI * 2);
            ctx.fill();
            
            return canvas;
        }

        async function init() {
            try {
                canvas = document.createElement('canvas');
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                ctx = canvas.getContext('2d');
                
                if (!ctx) {
                    throw new Error('无法创建Canvas上下文，请检查浏览器兼容性');
                }
                
                document.getElementById('container').appendChild(canvas);
                canvas.addEventListener('click', onClick);
                
                // 初始化NASA数据
                await initNASAData();
                
                animate();
                addTarget(); // 添加初始小行星
                notify('模拟器已启动 - NASA数据加载完成');
            } catch (error) {
                console.error('初始化错误:', error);
                notify('模拟器初始化失败: ' + error.message, 5000);
            }
        }

        function animate(time = 0) {
            try {
                frameCount++;
                if (time - lastTime >= 1000) {
                    document.getElementById('fps').textContent = frameCount;
                    frameCount = 0;
                    lastTime = time;
                }
                
                update();
                render();
                updateUI();
                requestAnimationFrame(animate);
            } catch (error) {
                console.error('动画循环错误:', error);
                // 尝试重新启动动画循环
                setTimeout(() => requestAnimationFrame(animate), 100);
            }
        }

        function update() {
            // 如果暂停，只更新地球自转，其他都停止
            if (isPaused) {
                // 地球自转（暂停时也继续转动）
                earthRotation += 0.008;
                if (earthRotation >= Math.PI * 2) {
                    earthRotation = 0;
                }
                return;
            }
            
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            
            // 更新小行星
            asteroids.forEach((ast, i) => {
                // 检查是否是撞击模式的小行星
                if (ast.impacting) {
                    const elapsed = Date.now() - ast.impactStartTime;
                    const progress = Math.min(elapsed / ast.impactDuration, 1);
                    
                    // 使用缓动函数让飞行更真实
                    const easeProgress = 1 - Math.pow(1 - progress, 3); // ease-out cubic
                    
                    // 更新位置
                    ast.x = ast.startX + (ast.targetX - ast.startX) * easeProgress;
                    ast.y = ast.startY + (ast.targetY - ast.startY) * easeProgress;
                    
                    // 检查是否撞击地球表面
                    const distToCenter = Math.sqrt((ast.x - centerX) ** 2 + (ast.y - centerY) ** 2);
                    const earthRadius = 45;
                    
                    if (distToCenter <= earthRadius + ast.size || progress >= 1) {
                        // 确保撞击点在地球表面
                        if (distToCenter > earthRadius) {
                            const angle = Math.atan2(ast.y - centerY, ast.x - centerX);
                            ast.x = centerX + Math.cos(angle) * earthRadius;
                            ast.y = centerY + Math.sin(angle) * earthRadius;
                        }
                        
                        createImpact(ast);
                        asteroids.splice(i, 1);
                        if (selected === ast) {
                            selected = null;
                            document.getElementById('impactBtn').disabled = true;
                        }
                        return;
                    }
                    
                    // 添加尾迹效果
                    if (Math.random() < 0.3) {
                        particles.push(new Particle(
                            ast.x + (Math.random() - 0.5) * 3,
                            ast.y + (Math.random() - 0.5) * 3,
                            (Math.random() - 0.5) * 0.5,
                            (Math.random() - 0.5) * 0.5,
                            15 + Math.random() * 10,
                            '#ff6b35'
                        ));
                    }
                } else {
                    // 正常移动
                    ast.x += ast.vx;
                    ast.y += ast.vy;
                    
                    // 大气层保护检测
                    const dist = Math.sqrt((ast.x - centerX) ** 2 + (ast.y - centerY) ** 2);
                    const earthRadius = 45;
                    const atmosphereRadius = earthRadius + 12; // 大气层厚度
                    
                    // 检查是否进入大气层
                    if (dist <= atmosphereRadius && dist > earthRadius + ast.size) {
                        // 大气层摧毁概率计算（基于小行星大小）
                        const destructionChance = Math.max(0.1, 1 - (ast.diameter / 1000)); // 越小越容易被摧毁
                        
                        if (Math.random() < destructionChance * 0.02) { // 每帧2%的基础概率
                            // 大气层摧毁小行星
                            createAtmosphereDestruction(ast);
                            asteroids.splice(i, 1);
                            if (selected === ast) selected = null;
                            atmosphereDestroyCount++;
                            return;
                        }
                        
                        // 在大气层中添加摩擦效果
                        ast.vx *= 0.98;
                        ast.vy *= 0.98;
                        
                        // 添加大气层燃烧粒子
                        if (Math.random() < 0.5) {
                            particles.push(new Particle(
                                ast.x + (Math.random() - 0.5) * ast.size,
                                ast.y + (Math.random() - 0.5) * ast.size,
                                (Math.random() - 0.5) * 1,
                                (Math.random() - 0.5) * 1,
                                10 + Math.random() * 15,
                                '#ff8c00'
                            ));
                        }
                    }
                    
                    // 地面碰撞检测
                    if (dist <= earthRadius + ast.size) {
                        createImpact(ast);
                        asteroids.splice(i, 1);
                        if (selected === ast) selected = null;
                        return;
                    }
                    
                    // 清理离屏小行星
                    if (ast.x < -50 || ast.x > canvas.width + 50 || 
                        ast.y < -50 || ast.y > canvas.height + 50) {
                        asteroids.splice(i, 1);
                        if (selected === ast) selected = null;
                        return;
                    }
                }
            });
            
            // 更新粒子
            particles = particles.filter(p => {
                p.update();
                return p.life > 0;
            });
            
            // 限制粒子数量
            if (particles.length > 100) {
                particles = particles.slice(-100);
            }
            
            // 清理陨石坑
            craters = craters.filter(c => Date.now() - c.time < 20000);
            
            // 地球自转（每秒约0.5度）
            earthRotation += 0.008;
            if (earthRotation >= Math.PI * 2) {
                earthRotation = 0;
            }
            
            memory = 10.5 + asteroids.length * 0.3 + particles.length * 0.005;
        }

        function render() {
            // 清屏
            ctx.fillStyle = '#000011';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 保存当前状态
            ctx.save();
            
            // 计算视角变换
            let centerX = canvas.width / 2;
            let centerY = canvas.height / 2;
            
            // 跟踪模式
            if (currentView === 'follow' && followTarget) {
                viewOffsetX = centerX - followTarget.x;
                viewOffsetY = centerY - followTarget.y;
            }
            
            // 应用视角变换
            ctx.translate(centerX, centerY);
            ctx.scale(viewScale, viewScale);
            ctx.translate(-centerX + viewOffsetX, -centerY + viewOffsetY);
            
            // 重新计算中心点（用于后续绘制）
            const earthCenterX = canvas.width / 2;
            const earthCenterY = canvas.height / 2;
            
            // 星星
            for (let i = 0; i < 50; i++) {
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(
                    (i * 137.5) % canvas.width,
                    (i * 73.3) % canvas.height,
                    0.5, 0, Math.PI * 2
                );
                ctx.fill();
            }
            
            // 地球
            const radius = 45;
            
            // 使用纹理绘制地球
            ctx.save();
            ctx.translate(earthCenterX, earthCenterY);
            ctx.rotate(earthRotation);
            
            // 绘制地球球体
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, Math.PI * 2);
            ctx.closePath();
            
            // 创建径向渐变模拟光照
            const gradient = ctx.createRadialGradient(-15, -15, 0, 0, 0, radius);
            gradient.addColorStop(0, 'rgba(255, 255, 255, 0.8)');
            gradient.addColorStop(0.2, 'rgba(200, 220, 255, 0.6)');
            gradient.addColorStop(1, 'rgba(100, 150, 255, 0.3)');
            
            ctx.fillStyle = gradient;
            ctx.fill();
            
            // 绘制纹理
            ctx.globalCompositeOperation = 'overlay';
            ctx.drawImage(earthTexture, -radius, -radius, radius * 2, radius * 2);
            ctx.restore();
            
            // 大气层
            ctx.strokeStyle = 'rgba(135, 206, 250, 0.5)';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(earthCenterX, earthCenterY, radius + 6, 0, Math.PI * 2);
            ctx.stroke();
            
            // 陨石坑
            craters.forEach(c => {
                const age = Date.now() - c.time;
                const alpha = Math.max(0, 1 - age / 20000);
                ctx.globalAlpha = alpha;
                ctx.fillStyle = '#8B4513';
                ctx.beginPath();
                ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2);
                ctx.fill();
                ctx.globalAlpha = 1;
            });
            
            // 小行星
            asteroids.forEach(ast => {
                const size = Math.max(3, Math.log(ast.diameter) * 1.2);
                
                // 主体
                const astGrad = ctx.createRadialGradient(
                    ast.x - size/3, ast.y - size/3, 0,
                    ast.x, ast.y, size
                );
                astGrad.addColorStop(0, '#888');
                astGrad.addColorStop(0.7, '#555');
                astGrad.addColorStop(1, '#222');
                
                ctx.fillStyle = astGrad;