three实现三维塔防类游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维塔防类游戏代码，设置不同类型的防御塔来攻击路过的敌人，防止敌人全部通过。

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

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>三维塔防策略 · Three.js（精致UI · 自动/手动波次）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    :root{
      --bg:#0a0f1c;--panel:#0b1224cc;--text:#e5e7eb;--muted:#94a3b8;--accent:#22d3ee;--ok:#22c55e;--warn:#f59e0b;--bad:#ef4444;
      --glass:#0b152acc;--border:#1d2a46;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:
      radial-gradient(1300px 800px at 50% -220px,#0b1022,#060913) fixed;color:var(--text);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;overflow:hidden}

    /* 顶栏 */
    #ui{
      position:fixed;left:12px;top:12px;z-index:12;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
      background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:10px 12px;
      box-shadow:0 10px 30px #0009, inset 0 1px 0 #ffffff10;backdrop-filter:blur(8px)
    }
    #ui .chip{display:inline-flex;gap:6px;align-items:center;border:1px solid #223053;background:#0b152a;border-radius:999px;padding:4px 10px}
    .kbd{display:inline-block;border:1px solid #223053;background:#0b152a;border-radius:6px;padding:2px 6px;font-size:12px}

    button,select{
      background:#0b152a;border:1px solid #223053;color:#e5e7eb;border-radius:10px;padding:8px 12px;outline:none;transition:.2s;cursor:pointer
    }
    button.primary{background:linear-gradient(180deg,#1f3b74,#1b3364);border-color:#2b478a}
    button.warn{background:linear-gradient(180deg,#93620e,#7a520b);border-color:#81550d}
    button.bad{background:linear-gradient(180deg,#7a2323,#5a1a1a);border-color:#6e2323}
    button:hover,select:hover{border-color:#34508c}

    /* 自动/手动切换 + 倒计时 + 进度 */
    .toggle{
      display:inline-flex;align-items:center;gap:6px;border:1px solid #223053;background:#0b152a;border-radius:999px;padding:4px 8px
    }
    .toggle input{appearance:none;width:34px;height:18px;background:#23324f;border-radius:999px;position:relative;outline:none;cursor:pointer}
    .toggle input:before{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;background:#94a3b8;border-radius:50%;transition:.2s}
    .toggle input:checked{background:#1d7ed6}
    .toggle input:checked:before{left:18px;background:#e5e7eb}
    #cd-chip{display:none}
    #cd-chip.show{display:inline-flex}
    #wave-progress{width:180px;height:10px;background:#0b152a;border:1px solid #223053;border-radius:999px;overflow:hidden}
    #wave-progress>div{height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#3b82f6);transition:width .2s}

    /* 右侧塔信息 */
    #right{
      position:fixed;right:12px;top:12px;width:320px;z-index:11;background:var(--glass);
      border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:0 10px 30px #0009, inset 0 1px 0 #ffffff10;backdrop-filter:blur(8px)
    }
    #right h3{margin:6px 0 8px 0}
    #right .line{display:flex;justify-content:space-between;margin:4px 0;color:#cbd5e1}
    #right .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .panel{border:1px solid #1b2743;background:#0b152a;border-radius:10px;padding:8px;margin-top:8px}

    /* 底部塔牌 */
    #bottom{
      position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:11;
      background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:8px 10px;display:flex;gap:10px;align-items:center;
      box-shadow:0 10px 30px #0009, inset 0 1px 0 #ffffff10;backdrop-filter:blur(8px)
    }
    .tower-card{
      display:flex;gap:8px;align-items:center;border:1px solid #223053;background:#0b152a;border-radius:10px;padding:6px 10px;cursor:pointer
    }
    .tower-card.active{outline:2px solid #22d3ee}
    .sep{width:1px;height:24px;background:#223053}
    #hint{
      position:fixed;right:12px;bottom:12px;z-index:10;color:#a8b3d1;background:#0b152a80;border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:12px
    }

    /* 中心结果横幅 */
    #banner{
      position:fixed;left:50%;top:20%;transform:translateX(-50%);
      padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:#0b1224e6;color:#e5e7eb;z-index:20;display:none;
      box-shadow:0 10px 30px #000a;backdrop-filter:blur(8px)
    }
    #banner h2{margin:4px 0}

    .hidden{display:none}
  </style>
</head>
<body>
  <div id="ui">
    <button id="btn-start" class="primary">开始/下一波</button>
    <button id="btn-speed">速度 1x</button>
    <button id="btn-pause">暂停</button>

    <span class="chip">波次 <b id="wave">0</b></span>
    <span class="chip">金钱 <b id="money">0</b></span>
    <span class="chip">生命 <b id="lives">0</b></span>
    <span class="chip">敌人 <b id="enemies">0</b></span>

    <span class="toggle" title="自动下一波">
      <span class="kbd">自动</span>
      <input id="auto-next" type="checkbox" />
    </span>
    <span class="chip" id="cd-chip">下波 <b id="countdown">5.0</b>s</span>
    <div id="wave-progress" title="波次进度">
      <div id="wave-progress-inner"></div>
    </div>
  </div>

  <div id="right">
    <h3>塔信息</h3>
    <!-- 未选中任何塔/模板 -->
    <div id="tower-none">未选择塔。选择下方塔后点击绿色圈建造；点击塔查看属性。</div>

    <!-- 右侧：准备建造的塔模板参数（选中底部卡片时显示） -->
    <div id="build-preview" class="panel hidden">
      <div style="font-weight:700; margin-bottom:4px;">准备建造：<span id="bp-name">-</span></div>
      <div class="line"><span>费用</span><b id="bp-cost">-</b></div>
      <div class="line"><span>伤害</span><b id="bp-dmg">-</b></div>
      <div class="line"><span>射速</span><b id="bp-rof">-</b></div>
      <div class="line"><span>射程</span><b id="bp-range">-</b></div>
      <div class="line" id="bp-extra-line" style="display:none"><span id="bp-extra-name">-</span><b id="bp-extra-val">-</b></div>
      <div style="color:#94a3b8;font-size:12px;margin-top:6px">提示：将鼠标移动到绿色建造圈，点击即可放置。</div>
    </div>

    <!-- 右侧：已建塔的参数 -->
    <div id="tower-info" class="hidden panel">
      <div class="line"><span>类型</span><b id="ti-type">-</b></div>
      <div class="line"><span>等级</span><b id="ti-level">-</b></div>
      <div class="line"><span>伤害</span><b id="ti-dmg">-</b></div>
      <div class="line"><span>射速</sp.........完整代码请登录后点击上方下载按钮下载查看