祖冲之号 - 2D 模型图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>祖冲之号 - 2D 模型图</title>
    <style>
        body {
            margin: 0;
            background: #0a0f1a;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: 'Courier New', monospace;
            color: #00ffff;
        }
        canvas {
            border: 1px solid #1e3a5f;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.1);
            background: #060b13;
        }
        .info {
            margin-top: 15px;
            font-size: 12px;
            color: #5a7a9a;
            letter-spacing: 1px;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div class="info">祖冲之号 · 激光护卫巡洋舰 · 2D俯视结构图</div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // 画布中心点
        const CX = canvas.width / 2;
        const CY = canvas.height / 2;

        // ---- 配色 ----
        const COLOR = {
            hull: '#6B7280',        // 主装甲
            hullDark: '#4B5563',     // 暗部
            hullLight: '#9CA3AF',    // 亮部
            core: '#1E3A8A',         // AI核心
            coreGlow: '#3B82F6',
            weapon: '#7F1D1D',       // 武器模块
            laser: '#22D3EE',        // 激光
            laserGlow: '#67E8F9',
            radiator: '#F97316',     // 散热
            radiatorHot: '#EF4444',
            thruster: '#FB923C',
            outline: '#111827',
            text: '#00ffff'
        };

        // ---- 绘制辅助函数 ----
        function drawRect(x, y, w, h, fillColor, strokeColor, lineWidth = 2) {
            ctx.fillStyle = fillColor;
            ctx.fillRect(x, y, w, h);
            if (strokeColor) {
                ctx.strokeStyle = strokeColor;
                ctx.lineWidth = lineWidth;
                ctx.strokeRect(x, y, w, h);
            }
        }

        function drawCircle(cx, cy, r, fillColor, strokeColor) {
            ctx.beginPath();
            ctx.arc(cx, cy, r, 0, Math.PI * 2);
            ctx.fillStyle = fillColor;
            ctx.fill();
            if (strokeColor) {
                ctx.strokeStyle = strokeColor;
                ctx.lineWidth = 2;
                ctx.stroke();
            }
        }

        // ---- 绘制祖冲之号 ----
        function drawZuchongzhi() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // ========== 1. 中央脊线 ==========
            const spineW = 40;
            const spineX = CX - spineW / 2;

            // 顶部对接环
            drawRect(spineX - 5, CY - 260, spineW + 10, 30, COLOR.hullDark, COLOR.outline);
            // 顶部备用模块
            drawRect(spineX, CY - 230, spineW, 50, COLOR.hull, COLOR.outline);
            // AI核心/电子战模块
            drawRect(spineX, CY - 180, spineW, 70, COLOR.core, COLOR.coreGlow, 2);
            // 生活舱
            drawRect(spineX, CY - 110, spineW, 50, COLOR.hullLight, COLOR.outline);
            // 干扰/推进模块
            drawRect(spineX, CY - 60, spineW, 90, COLOR.hullDark, COLOR.outline);
            // 尾部推进器
            drawRect(spineX - 8, CY + 30, spineW + 16, 20, COLOR.thruster, COLOR.outline);
            for (let i = 0; i < 4; i++) {
                drawRect(spineX + 4 + i * 9, CY + 50, 5, 15, '#FDE68A', null);
            }

            // ========== 2. 两侧散热巨翼 ==========
            const wingW = 180;
            const wingH = 140;
            const wingY = CY - 120;

            // 左翼
            drawRect(CX - spineW/2 - wingW, wingY, wingW, wingH, 'rgba(249, 115, 22, 0.15)', COLOR.radiator, 1.5);
            // 左翼散热栅格
            for (let i = 0; i < 8; i++) {
                drawRect(CX - spineW/2 - wingW + 15 + i * 20, wingY + 10, 2, wingH - 20, COLOR.radiatorHot, null);
            }
            // 左翼连接支架
            drawRect(CX - spineW/2 - 20, CY - 30, 20, 15, COLOR.hull, COLOR.outline);

            // 右翼
            drawRect(CX + spineW/2, wingY, wingW, wingH, 'rgba(249, 115, 22, 0.15)', COLOR.radiator, 1.5);
            for (let i = 0; i < 8; i++) {
                drawRect(CX + spineW/2 + 15 + i * 20, wingY + 10, 2, wingH - 20, COLOR.radiatorHot, null);
            }
            drawRect(CX + spineW/2, CY - 30, 20, 15, COLOR.hull, COLOR.outline);

            // ========== 3. 武器模块 ==========
            // 主炮（舰首左侧）
            drawRect(CX - 80, CY - 200, 12, 60, COLOR.weapon, COLOR.outline);
            // 主炮发光炮口
            drawRect(CX - 78, CY - 200, 8, 15, COLOR.laser, COLOR.laserGlow);
            // 主炮光晕效果
            ctx.shadowColor = COLOR.laserGlow;
            ctx.shadowBlur = 15;
            ctx.fillStyle = COLOR.laser;
            ctx.fillRect(CX - 78, CY - 200, 8, 15);
            ctx.shadowBlur = 0;

            // 六门点射拦截炮（环绕）
            const interceptors = [
                { x: CX, y: CY - 280 },      // 顶部
                { x: CX, y: CY + 80 },       // 底部
                { x: CX - 120, y: CY - 50 }, // 左侧
                { x: CX + 120, y: CY - 50 }, // 右侧
                { x: CX - 100, y: CY + 40 }, // 左后
                { x: CX + 100, y: CY + 40 }, // 右后
            ];
            interceptors.forEach(pos => {
                drawCircle(pos.x, pos.y, 6, COLOR.laser, COLOR.outline);
                // 炮塔基座
                drawCircle(pos.x, pos.y + 2, 9, COLOR.hullDark, COLOR.outline);
            });

            // ========== 4. 开火修正喷口 ==========
            const thrusters = [
                { x: CX - spineW/2 - wingW - 5, y: CY - 50, dir: -1 },  // 左翼端
                { x: CX + spineW/2 + wingW + 5, y: CY - 50, dir: 1 },   // 右翼端
                { x: CX, y: CY - 290, dir: 0 },                          // 顶部
                { x: CX, y: CY + 95, dir: 0 },                           // 底部
            ];
            thrusters.forEach(t => {
                ctx.beginPath();
                if (t.dir === -1) {
                    ctx.moveTo(t.x, t.y - 6);
                    ctx.lineTo(t.x - 8, t.y);
                    ctx.lineTo(t.x, t.y + 6);
                } else if (t.dir === 1) {
                    ctx.moveTo(t.x, t.y - 6);
                    ctx.lineTo(t.x + 8, t.y);
                    ctx.lineTo(t.x, t.y + 6);
                } else {
                    ctx.moveTo(t.x - 6, t.y);
                    ctx.lineTo(t.x, t.y - 8);
                    ctx.lineTo(t.x + 6, t.y);
                }
                ctx.closePath();
                ctx.fillStyle = COLOR.thruster;
                ctx.fill();
                ctx.strokeStyle = COLOR.outline;
                ctx.lineWidth = 1;
                ctx.stroke();
            });

            // ========== 5. 细节标注 ==========
            ctx.font = '10px Courier New';
            ctx.fillStyle = COLOR.text;
            ctx.textAlign = 'left';
            ctx.fillText('AI核心', CX + spineW/2 + 5, CY - 150);
            ctx.fillText('生活舱', CX + spineW/2 + 5, CY - 85);
            ctx.fillText('散热巨翼', CX + spineW/2 + wingW + 10, CY - 60);
            ctx.fillText('主炮', CX - 110, CY - 180);
            ctx.fillText('拦截炮', CX - 135, CY - 65);
        }

        // 执行绘制
        drawZuchongzhi();

        // 添加旋转动画（可选，用于预览）
        let angle = 0;
        function animate() {
            // 如果想看静态图，注释掉下面这行
            // drawZuchongzhi();
            // angle += 0.002;
            // ctx.save();
            // ctx.translate(CX, CY);
            // ctx.rotate(angle);
            // ctx.translate(-CX, -CY);
            // drawZuchongzhi();
            // ctx.restore();
            requestAnimationFrame(animate);
        }
        // animate(); // 取消注释以启用旋转
    </script>
</body>
</html>