一个AI做的HTML小游戏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红蓝对抗：全面战争 v3.0</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
background-color: #1a1a1a;
color: #e5e5e5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
canvas {
background-color: #2d3748;
box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
cursor: crosshair;
}
.glass-panel {
background: rgba(30, 41, 59, 0.85);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1a202c;
}
::-webkit-scrollbar-thumb {
background: #4a5568;
border-radius: 4px;
}
.stat-bar {
transition: width 0.3s ease;
}
</style>
</head>
<body class="h-screen flex flex-col">

<!-- Header -->
<header class="h-16 bg-slate-900 border-b border-slate-700 flex items-center justify-between px-6 shadow-lg z-10">
    <div class="flex items-center gap-3">
        <i class="fa-solid fa-chess-knight text-red-500 text-2xl"></i>
        <h1 class="text-xl font-bold tracking-wider text-white">WAR SIMULATOR <span class="text-xs text-slate-400 font-normal ml-2">v3.0 (Artillery Update)</span></h1>
    </div>
    <div class="flex gap-4 text-sm">
        <div class="flex items-center gap-2">
            <span class="w-3 h-3 rounded-full bg-red-600"></span>
            <span>红方: <span id="red-count" class="font-mono font-bold">0</span></span>
        </div>
        <div class="flex items-center gap-2">
            <span class="w-3 h-3 rounded-full bg-blue-500"></span>
            <span>蓝方: <span id="blue-count" class="font-mono font-bold">0</span></span>
        </div>
    </div>
    <div class="flex gap-2">
        <button id="btn-reset" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded text-white transition flex items-center gap-2">
            <i class="fa-solid fa-rotate-right"></i> 重置
        </button>
        <button id="btn-start" class="px-4 py-2 bg-green-600 hover:bg-green-500 rounded text-white font-bold transition flex items-center gap-2 shadow-lg shadow-green-900/50">
            <i class="fa-solid fa-play"></i> 开始战斗
        </button>
    </div>
</header>

<!-- Main Content -->
<main class="flex-1 flex relative">
    
    <!-- Canvas Area -->
    <div class="flex-1 relative bg-slate-800 overflow-hidden" id="canvas-container">
        <canvas id="battlefield" class="absolute top-0 left-0 w-full h-full block"></canvas>
        
        <!-- Overlay Info -->
        <div class="absolute top-4 left-4 glass-panel p-4 rounded-lg text-xs space-y-2 pointer-events-none select-none">
            <div class="flex justify-between w-48">
                <span class="text-slate-400">模拟时间:</span>
                <span id="sim-time" class="font-mono text-white">00:00</span>
            </div>
            <div class="flex justify-between w-48">
                <span class="text-slate-400">FPS:</span>
                <span id="fps-counter" class="font-mono text-green-400">60</span>
            </div>
            <div class="mt-2 pt-2 border-t border-slate-600">
                <p class="text-slate-500 mb-1">图例说明:</p>
                <div class="grid grid-cols-2 gap-x-4 gap-y-1">
                    <div class="flex items-center gap-2"><div class="w-2 h-2 bg-red-700 rounded-sm"></div><span>重型坦克</span></div>
                    <div class="flex items-center gap-2"><div class="w-2 h-2 bg-red-500 rounded-sm"></div><span>步战车</span></div>
                    <div class="flex items-center gap-2"><div class="w-2 h-2 bg-orange-500 rounded-full"></div><span>武装直升机</span></div>
                    <div class="flex items-center gap-2"><div class="w-2 h-2 bg-yellow-500 rounded-sm"></div><span>自行火炮(新)</span></div>
                    <div class="flex items-center gap-2"><div class="w-2 h-2 bg-blue-600 rounded-sm"></div><span>轻步兵</span></div>
                    <div class="flex items-center gap-2"><div class="w-2 h-2 bg-cyan-400 rounded-sm"></div><span>反坦克小组</span></div>
                    <div class="flex items-center gap-2"><div class="w-2 h-2 bg-purple-500 rounded-full"></div><span>狙击手(新)</span></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sidebar Controls -->
    <aside class="w-80 bg-slate-900 border-l border-slate-700 flex flex-col shadow-xl z-10">
        <div class="p-4 border-b border-slate-700">
            <h2 class="text-sm font-bold text-slate-300 uppercase tracking-wider mb-4"><i class="fa-solid fa-sliders mr-2"></i>兵力配置</h2>
            
            <!-- Red Team Config -->
            <div class="mb-6 bg-slate-800/50 p-3 rounded border border-red-900/30">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-red-400 font-bold text-sm">红方 (机械化+空中+炮兵)</span>
                </div>
                <div class="space-y-3">
                    <div>
                        <label class="text-xs text-slate-400 block mb-1">重型坦克 (M1A2)</label>
                        <input type="range" id="red-tanks" min="0" max="50" value="10" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-red-700">
                        <div class="flex justify-between text-xs font-mono mt-1">
                            <span>0</span>
                            <span id="val-red-tanks" class="text-red-400">10</span>
                            <span>50</span>
                        </div>
                    </div>
                    <div>
                        <label class="text-xs text-slate-400 block mb-1">步兵战车 (M2/M3)</label>
                        <input type="range" id="red-ifv" min="0" max="100" value="20" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-red-500">
                        <div class="flex justify-between text-xs font-mono mt-1">
                            <span>0</span>
                            <span id="val-red-ifv" class="text-red-400">20</span>
                            <span>100</span>
                        </div>
                    </div>
                    <div>
                        <label class="text-xs text-orange-400 block mb-1 font-bold"><i class="fa-solid fa-helicopter"></i> 武装直升机 (AH-64)</label>
                        <input type="range" id="red-heli" min="0" max="30" value="5" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-orange-500">
                        <div class="flex justify-between text-xs font-mono mt-1">
                            <span>0</span>
                            <span id="val-red-heli" class="text-orange-400">5</span>
                            <span>30</span>
                        </div>
                    </div>
                    <div class="pt-2 border-t border-slate-700/50">
                        <label class="text-xs text-yellow-500 block mb-1 font-bold"><i class="fa-solid fa-truck-monster"></i> 自行火炮 (M109)</label>
                        <input type="range" id="red-artillery" min="0" max="20" value="3" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-yellow-500">
                        <div class="flex justify-between text-xs font-mono mt-1">
                            <span>0</span>
                            <span id="val-red-artillery" class="text-yellow-500">3</span>
                            <span>20</span>
                        </div>
                        <p class="text-[10px] text-slate-500 mt-1">超远程/高伤/极慢速/无近战</p>
                    </div>
                </div>
            </div>

            <!-- Blue Team Config -->
            <div class="bg-slate-800/50 p-3 rounded border border-blue-900/30">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-blue-400 font-bold text-sm">蓝方 (人海+特种+支援)</span>
                </div>
                <div class="space-y-3">
                    <div>
                        <label class="text-xs text-slate-400 block mb-1">轻步兵 (Mass Infantry)</label>
                        <input type="range" id="blue-infantry" min="50" max="1000" value="300" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500">
                        <div class="flex justify-between text-xs font-mono mt-1">
                            <span>50</span>
                            <span id="val-blue-infantry" class="text-blue-400">300</span>
                            <span>1000</span>
                        </div>
                    </div>
                    <div>
                        <label class="text-xs text-cyan-400 block mb-1 font-bold"><i class="fa-solid fa-crosshairs"></i> 反坦克小组 (ATGM)</label>
                        <input type="range" id="blue-atgm" min="0" max="100" value="20" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-400">
                        <div class="flex justify-between text-xs font-mono mt-1">
                            <span>0</span>
                            <span id="val-blue-atgm" class="text-cyan-400">20</span>
                            <span>100</span>
                        </div>
                    </div>
                    <div class="pt-2 border-t border-slate-700/50">
                        <label class="text-xs text-purple-400 block mb-1 font-bold"><i class="fa-solid fa-user-ninja"></i> 狙击手 (Sniper)</label>
                        <input type="range" id="blue-sniper" min="0" max="50" value="10" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500">
                        <div class="flex justify-between text-xs font-mono mt-1">
                            <span>0</span>
                            <span id="val-blue-sniper" class="text-purple-400">10</span>
                            <span>50</span>
                        </div>
                        <p class="text-[10px] text-slate-500 mt-1">超远射程/高精度/低防御</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Panel -->
        <div class="flex-1 p-4 overflow-y-auto">
            <h2 class="text-sm font-bold text-slate-300 uppercase tracking-wider mb-4"><i class="fa-solid fa-chart-line mr-2"></i>实时战况</h2>
            
            <div class="space-y-4">
                <!-- Health Bars -->
                <div>
                    <div class="flex justify-between text-xs mb-1">
                        <span class="text-red-400">红方总战力</span>
                        <span id="red-power-pct">100%</span>
                    </div>
                    <div class="w-full bg-slate-700 rounded-full h-2.5">
                        <div id="red-power-bar" class="bg-gradient-to-r from-red-800 to-red-500 h-2.5 rounded-full stat-bar" style="width: 100%"></div>
                    </div>
                </div>
                
                <div>
                    <div class="flex justify-between text-xs mb-1">
                        <span class="text-blue-400">蓝方总战力</span>
                        <span id="blue-power-pct">100%</span>
                    </div>
                    <div class="w-full bg-slate-700 rounded-full h-2.5">
                        <div id="blue-power-bar" class="bg-gradient-to-r from-blue-800 to-blue-500 h-2.5 rounded-full stat-bar" style="width: 100%"></div>
                    </div>
                </div>

                <!-- Log -->
                <div class="mt-6">
                    <h3 class="text-xs font-bold text-slate-500 mb-2">战斗日志</h3>
                    <div id="battle-log" class="h-48 overflow-y-auto text-xs font-mono space-y-1 pr-2">
                        <div class="text-slate-500 italic">等待战斗开始...</div>
                    </div>
                </div>
            </div>
        </div>
    </aside>
</main>

<script src="app.js"></script>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红蓝对抗：全面战争 v3.0</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
background-color: #1a1a1a;
color: #e5e5e5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
canvas {
background-color: #2d3748;
box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
cursor: crosshair;
}
.glass-panel {
background: rgba(30, 41, 59, 0.85);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1a202c;
}
::-webkit-scrollbar-thumb {
background: #4a5568;
border-radius: 4px;
}
.stat-bar {
transition: width 0.3s ease;
}
</style>
</head>
<body class="h-screen flex flex-col">

<!-- Header -->
<header class="h-16 bg-slate-900 border-b border-slate-700 flex items-center justify-between px-6 shadow-lg z-10">
    <div class="flex items-center gap-3">
        <i class="fa-solid fa-chess-knight text-red-500 text-2xl"></i>
        <h1 class="text-xl font-bold tracking-wider text-white">WAR SIMULATOR <span class="text-xs text-slate-400 font-normal ml-2">v3.0 (Artillery Update)</span></h1>
    </div>
    <div class="flex gap-4 text-sm">
        <div class="flex items-center gap-2">
            <span class="w-3 h-3 rounded-full bg-red-600"></span>
            <span>红方: <span id="red-count" class="font-mono font-bold">0</span></span>
        </div>
        <div class="flex items-center gap-2">
            <span class="w-3 h-3 rounded-full bg-blue-500"></span>
            <span>蓝方: <span id="blue-count" class="font-mono font-bold">0</span></span>
        </div>
    </div>
    <div class="flex gap-2">
        <button id="btn-reset" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded text-white transition flex items-center gap-2">
            <i class="fa-solid fa-rotate-right"></i> 重置
        </button>
        <button id="btn-start" class="px-4 py-2 bg-green-600 hover:bg-green-500 rounded text-white font-bold transition flex items-center gap-2 shadow-lg shadow-green-900/50">
            <i class="fa-solid fa-play"></i> 开始战斗
        </button>
    </div>
</header>

<!-- Main Content -->
<main class="flex-1 flex relative">
    
    <!-- Canvas Area -->
    <div class="flex-1 relative bg-slate-800 overflow-hidden" id="canvas-container">
        <canvas id="battlefield" class="absolute top-0 left-0 w-full h-full block"></canvas>
        
        <!-- Overlay Info -->
        <div class="absolute top-4 left-4 glass-panel p-4 rounded-lg text-xs space-y-2 pointer-events-none select-none">
            <div class="flex justify-between w-48">
                <span class="text-slate-400">模拟时间:</span>
                <span id="sim-time" class="font-mono text-white">00:00</span>
            </div>
            <div class="flex justify-between w-48">
                <span class="text-slate-400">FPS:</span>
                <span id="fps-counter" class="font-mono text-green-400">60</span>
            </div>
            <div class="mt-2 pt-2 border-t border-slate-600">
                <p class="text-slate-500 mb-1">图例说明:</p>
                <div class="grid grid-cols-2 gap-x-4 gap-y-1">
                    <div class="flex items-center gap-2"><div class="w-2 h-2 bg-red-700 rounded-sm"></div><span>重型坦克</span></div>
                    <div class="flex items-center gap-2"><div class="w-2 h-