js+svg实现策略类人机攻城守城大战游戏代码-html代码-BFW代码库

js+svg实现策略类人机攻城守城大战游戏代码

代码语言：html

所属分类：游戏

代码描述：js+svg实现策略类人机攻城守城大战游戏代码，类似魔兽争霸挖金矿和伐木创建兵营，训练士兵攻击，还能修建城墙、箭塔来防御。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>王权争霸：守城与围城 </title>
    <style>
        :root {
            --primary: #2c3e50;
            --player: #3498db;
            --enemy: #e74c3c;
            --gold: #f1c40f;
            --wood: #27ae60;
            --bg: #ecf0f1;
            --panel: #ffffff;
        }
        body {
            margin: 0; padding: 0;
            background-color: #1e272e;
            color: #333;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex; flex-direction: column; align-items: center;
            height: 100vh; overflow: hidden; user-select: none;
        }
        #game-wrapper {
            margin-top: 15px; background: var(--bg);
            border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.6);
            overflow: hidden; display: flex; flex-direction: column;
            border: 4px solid #34495e;
        }
        #top-bar {
            background: var(--primary); padding: 12px 25px;
            display: flex; justify-content: space-between; align-items: center;
            color: white; font-weight: bold; font-size: 16px;
        }
        .resource-group { display: flex; gap: 25px; align-items: center; }
        .res { display: flex; align-items: center; gap: 8px; }
        .res img { width: 22px; height: 22px; }
        
        .hp-bar-container { display: flex; gap: 20px; font-size: 18px;}
        .hp-p1 { color: #81ecec; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
        .hp-p2 { color: #ff7675; text-shadow: 0 0 5px rgba(0,0,0,0.5); }

        canvas { display: block; cursor: crosshair; background: #dcdde1; }

        #bottom-bar {
            background: var(--panel); padding: 15px 25px;
            display: flex; justify-content: space-between; gap: 20px;
        }
        .panel { flex: 1; background: #f5f6fa; padding: 12px; border-radius: 8px; border: 1px solid #dcdde1;}
        .panel-title { font-size: 13px; font-weight: bold; color: #7f8c8d; margin-bottom: 10px; display: flex; justify-content: space-between; }
        .btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
        button {
            background: var(--player); color: white; border: none;
            padding: 8px 12px; border-radius: 6px; cursor: pointer;
            font-weight: bold; transition: 0.2s; display: flex;
            flex-direction: column; align-items: center; min-width: 90px;
            box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
        }
        button:hover { background: #2980b9; transform: translateY(-2px); box-shadow: 0 6px 10px rgba(52, 152, 219, 0.4);}
        button:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);}
        button:disabled { background: #95a5a6; cursor: not-allowed; transform: none; box-shadow: none;}
        button .cost { font-size: 11px; font-weight: normal; margin-top: 5px; color: #dff9fb;}
        button img { width: 24px; height: 24px; margin-bottom: 4px; }

        .worker-controls { display: flex; flex-direction: column; gap: 8px; }
        .worker-assign { display: flex; align-items: center; background: #fff; border-radius: 6px; padding: 4px 8px; gap: 10px; border: 1px solid #dcdde1; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);}
        .worker-assign img { width: 18px; height: 18px; }
        .worker-assign button { min-width: 24px; padding: 2px 8px; font-size: 16px; background: #7f8c8d; box-shadow: none; flex-direction: row;}
        .worker-assign button:hover { background: #34495e; }
        .worker-assign b { display: inline-block; width: 20px; text-align: center; }

        #msg-overlay {
            position: absolute; top: 50%; left: 50%; transform: translate(-.........完整代码请登录后点击上方下载按钮下载查看