aaaa
2026-10-17 17:34:19
发布于：浙江
2阅读
0回复
0点赞
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红蓝对抗：全面战争 v4.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">v4.0 (Super Tank & Drone)</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-900 rounded-sm border border-red-500"></div><span>超级重型坦克(加强)</span></div>
<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 class="flex items-center gap-2"><div class="w-2 h-2 bg-indigo-400 rounded-sm animate-pulse"></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 class="pt-2 border-t border-slate-700/50">
<label class="text-xs text-red-300 block mb-1 font-bold"><i class="fa-solid fa-shield-halved"></i> 超级重型坦克 (Mammoth)</label>
<input type="range" id="red-super-tank" min="0" max="10" value="2" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-red-900">
<div class="flex justify-between text-xs font-mono mt-1">
<span>0</span>
<span id="val-red-super-tank" class="text-red-300">2</span>
<span>10</span>
</div>
<p class="text-[10px] text-slate-500 mt-1">极高生命/高伤/慢速/核心单位</p>
</div>
<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>
<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>
</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>
<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>
</div>
<div class="pt-2 border-t border-slate-700/50">
<label class="text-xs text-indigo-400 block mb-1 font-bold"><i class="fa-solid fa-plane-up"></i> 自爆无人机 (Kamikaze)</label>
<input type="range" id="blue-drone" min="0" max="100" value="30" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-indigo-500">
<div class="flex justify-between text-xs font-mono mt-1">
<span>0</span>
<span id="val-blue-drone" class="text-indigo-400">30</span>
<span>100</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>红蓝对抗：全面战争 v5.0 (Optimized)</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: #0f172a;
color: #e2e8f0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
user-select: none;
}
canvas {
background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
cursor: crosshair;
}
.glass-panel {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(148, 163, 184, 0.1);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.stat-bar { transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
/* Animations */
@keyframes pulse-red {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.btn-combat {
animation: pulse-red 2s infinite;
}
</style>
</head>
<body class="h-screen flex flex-col">
<!-- Header -->
<header class="h-16 bg-slate-900/90 border-b border-slate-700 flex items-center justify-between px-6 shadow-xl z-20 backdrop-blur-md">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-red-600 to-orange-600 rounded-lg flex items-center justify-center shadow-lg shadow-red-900/50">
<i class="fa-solid fa-chess-knight text-white text-xl"></i>
</div>
<div>
<h1 class="text-lg font-bold tracking-wider text-white leading-tight">WAR SIMULATOR <span class="text-xs text-cyan-400 font-normal ml-1">v5.0 OPTIMIZED</span></h1>
<p class="text-[10px] text-slate-400">Tactical Battlefield Environment</p>
</div>
</div>
<!-- Live Stats Header -->
<div class="flex gap-8 text-sm bg-slate-800/50 px-6 py-2 rounded-full border border-slate-700">
<div class="flex items-center gap-2">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-600"></span>
</span>
<span class="text-slate-300">红方存活: <span id="red-count" class="font-mono font-bold text-red-400 text-lg">0</span></span>
</div>
<div class="w-px h-6 bg-slate-600"></div>
<div class="flex items-center gap-2">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-600"></span>
</span>
<span class="text-slate-300">蓝方存活: <span id="blue-count" class="font-mono font-bold text-blue-400 text-lg">0</span></span>
</div>
</div>
<div class="flex gap-3">
<button id="btn-reset" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 active:scale-95 rounded-lg text-white transition flex items-center gap-2 border border-slate-600 shadow-lg">
<i class="fa-solid fa-rotate-right"></i> 重置战场
</button>
<button id="btn-start" class="px-6 py-2 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-500 hover:to-emerald-500 active:scale-95 rounded-lg text-white font-bold transition flex items-center gap-2 shadow-lg shadow-green-900/50 btn-combat">
<i class="fa-solid fa-play"></i> 开始演习
</button>
</div>
</header>
<!-- Main Content -->
<main class="flex-1 flex relative overflow-hidden">
<!-- Canvas Area -->
<div class="flex-1 relative bg-slate-900" 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-xl text-xs space-y-3 pointer-events-none select-none max-w-xs">
这里空空如也
有帮助，赞一个