全面战争：二战模拟器 body { font-family: 'Segoe UI', sans-serif; margin: 0; padding: 20px; background: #f0f0f0; } .container { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin-top: 20px; } .panel { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } #warMap { border: 2px solid #666; background: #e0f0ff; } .resource-bar { display: flex; gap: 10px; margin: 10px 0; } .resource-item { padding: 5px 10px; background: #eee; border-radius: 3px; } .tech-tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .tech-card { padding: 10px; background: #f8f8f8; border: 1px solid #ddd; cursor: pointer; } .modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; } button:disabled { opacity: 0.5; cursor: not-allowed; }

全面战争：二战模拟器

<div class="container">
    <!-- 左侧控制面板 -->
    <div class="panel">
        <div id="nationSelection">
            <h3>选择参战国:</h3>
            <button class="nation-btn" data-nation="germany">第三帝国</button>
            <button class="nation-btn" data-nation="usa">美利坚合众国</button>
            <button class="nation-btn" data-nation="uk">大英帝国</button>
            <button class="nation-btn" data-nation="ussr">苏联</button>
            <button class="nation-btn" data-nation="japan">日本帝国</button>
        </div>

        <div class="nation-info">
            <h2 id="nationName">国家状态</h2>
            <div class="resource-bar">
                <div class="resource-item">💰 <span id="economy">0</span>M</div>
                <div class="resource-item">🛢️ <span id="oil">0</span>K</div>
                <div class="resource-item">⚙️ <span id="steel">0</span>K</div>
            </div>
            <p>⚔️ 军事力量: <span id="military">0</span></p>
            <p>👥 人口: <span id="population">0</span>M</p>
            <p>💡 科技: <span id="technology">0</span>%</p>
            <p>😊 稳定度: <span id="stability">0</span>%</p>
        </div>

        <h3>战略决策</h3>
        <button id="buildFactory" onclick="buildFactory()">建造兵工厂 (需要5000万)</button>
        <button id="recruitArmy" onclick="recruitTroops()">征募军队 (需要1000万)</button>
        <button onclick="showTechTree()">开启科技树</button>
        <button onclick="endTurn()">结束回合</button>
    </div>

    <!-- 右侧地图区域 -->
    <div class="panel">
        <svg id="warMap" width="800" height="600">
            <!-- 简化版欧洲地图 -->
            <rect id="germany" x="400" y="250" width="100" height="80" fill="#666" 
                  onclick="handleMapClick('germany')"/>
            <rect id="france" x="350" y="300" width="80" height="60" fill="#999"
                  onclick="handleMapClick('france')"/>
            <rect id="uk" x="300" y="200" width="60" height="40" fill="#ccc"
                  onclick="handleMapClick('uk')"/>
        </svg>
    </div>
</div>

<!-- 科技树弹窗 -->
<div id="techModal" class="modal">
    <div class="modal-content">
        <h3>科技发展树 <button onclick="hideTechTree()">关闭</button></h3>
        <div class="tech-tree">
            <div class="tech-card" onclick="researchTech('tank')">
                <h4>装甲集群战术</h4>
                <p>需求：500钢铁</p>
                <p>效果：+30%陆军战斗力</p>
            </div>
            <div class="tech-card" onclick="researchTech('nuclear')">
                <h4>核能研究</h4>
                <p>需求：科技50%</p>
                <p>效果：解锁核武器</p>
            </div>
        </div>
    </div>
</div>

<script>
    // 游戏状态管理
    const gameState = {
        currentYear: 1939,
        currentNation: null,
        nations: {
            germany: { 
                economy: 8500, 
                military: 150, 
                population: 70, 
                oil: 500, 
                steel: 1200, 
                tech: 45, 
                stability: 65,
                ideology: 'totalitarianism', 
                allies: [], 
                atWar: [],
                territories: ['germany']
            },
            usa: {
                economy: 12000,
                military: 80,
                population: 131,
                oil: 2000,
                steel: 1500,
                tech: 60,
                stability: 75,
                ideology: 'capitalism',
                allies: [],
                atWar: [],
                territories: ['usa']
            }
        },
        techStatus: {
            germany: [],
            usa: []
        }
    };

    // 初始化事件监听
    function initEventListeners() {
        document.querySelectorAll('.nation-btn').forEach(btn => {
            btn.addEventListener('click', () => selectNation(btn.dataset.nation));
        });
    }

    // 选择国家
    function selectNation(nation) {
        gameState.currentNation = nation;
        updateDisplay();
        updateButtonStates();
    }

    // 更新显示
    function updateDisplay() {
        const n = gameState.nations[gameState.currentNation];
        document.getElementById('nationName').textContent = gameState.currentNation.toUpperCase();
        document.getElementById('economy').textContent = n.economy;
        document.getElementById('oil').textContent = n.oil;
        document.getElementById('steel').textContent = n.steel;
        document.getElementById('military').textContent = n.military;
        document.getElementById('population').textContent = n.population;
        document.getElementById('technology').textContent = n.tech;
        document.getElementById('stability').textContent = n.stability;
        
        // 更新地图颜色
        document.querySelectorAll('#warMap rect').forEach(region => {
            region.style.fill = gameState.nations[gameState.currentNation].territories.includes(region.id) 
                ? '#6c6' 
                : '#ccc';
        });
    }

    // 更新按钮状态
    function updateButtonStates() {
        const n = gameState.nations[gameState.currentNation];
        document.getElementById('buildFactory').disabled = n.economy < 5000;
        document.getElementById('recruitArmy').disabled = n.economy < 1000;
    }

    // 建造兵工厂
    function buildFactory() {
        const n = gameState.nations[gameState.currentNation];
        if(n.economy >= 5000) {
            n.economy -= 5000;
            n.steel += 200;
            n.tech += 5;
            updateDisplay();
            updateButtonStates();
        }
    }

    // 征募军队
    function recruitTroops() {
        const n = gameState.nations[gameState.currentNation];
        if(n.economy >= 1000) {
            n.economy -= 1000;
            n.military += 10;
            n.stability -= 3;
            updateDisplay();
            updateButtonStates();
        }
    }

    // 地图点击处理
    function handleMapClick(region) {
        const current = gameState.nations[gameState.currentNation];
        if(current.territories.includes(region)) {
            alert(`管理 ${region} 地区`);
        } else {
            if(confirm(`是否对 ${region} 发动进攻？(需要10军事力量)`)) {
                if(current.military >= 10) {
                    current.military -= 10;
                    current.territories.push(region);
                    updateDisplay();
                } else {
                    alert("军事力量不足！");
                }
            }
        }
    }

    // 科技系统
    function showTechTree() { document.getElementById('techModal').style.display = 'block'; }
    function hideTechTree() { document.getElementById('techModal').style.display = 'none'; }

    function researchTech(tech) {
        const n = gameState.nations[gameState.currentNation];
        switch(tech) {
            case 'tank':
                if(n.steel >= 500) {
                    n.steel -= 500;
                    n.tech += 15;
                    gameState.techStatus[gameState.currentNation].push(tech);
                }
                break;
            case 'nuclear':
                if(n.tech >= 50) {
                    n.tech += 30;
                    gameState.techStatus[gameState.currentNation].push(tech);
                }
                break;
        }
        updateDisplay();
    }

    // 游戏初始化
    document.addEventListener('DOMContentLoaded', () => {
        initEventListeners();
        selectNation('germany'); // 默认选择德国
    });
</script>