three实现三维城市道路规划缓解拥堵游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维城市道路规划缓解拥堵游戏代码，晚高峰来临，车流从绿色入口涌向橙色出口，自动选择最快路线按住左键拖拽即可规划新路：沿网格自动取直，跨河自动架桥（更贵）路上的热力条绿→黄→红表示拥堵程度，修新路把红色车流分走在倒计时结束前完成运送目标即可过关；全城长时间瘫痪会提前失败左键画路 / 拆除右键拖动旋转视角滚轮缩放 Shift+右键平移 1/2/3/4切换工具空格暂停 H热力图 Esc取消画路

代码标签： three 三维城市道路规划缓解拥堵游戏代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>治堵工程师 · 3D 路网规划</title>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
  :root{
    --sign:#0d7a43; --sign-d:#0a5c34; --amber:#ffc233; --red:#ff5147;
    --panel:#10161f; --line:#2c3a4d; --ink:#dfe8f2;
  }
  *{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}
  html,body{width:100%;height:100%;overflow:hidden;background:#1a2230;
    font-family:'Noto Sans SC',sans-serif;color:var(--ink)}
  canvas{display:block}
  #c3d{position:fixed;inset:0}
  .disp{font-family:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;letter-spacing:.04em}

  /* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;pointer-events:none;z-index:10}
  .panel{background:var(--panel);border:2px solid var(--line);border-radius:10px;
    box-shadow:0 5px 0 rgba(0,0,0,.35);padding:10px 14px;pointer-events:auto}
  #topbar{position:absolute;top:12px;left:12px;right:12px;display:flex;
    justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
  #lvlName{font-size:20px;color:var(--amber)}
  #topbar .row{display:flex;align-items:center;gap:10px;margin-top:6px}
  #timer{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;min-width:86px}
  #prog{width:170px;height:12px;background:#0a0f16;border:1px solid var(--line);border-radius:6px;overflow:hidden}
  #progFill{height:100%;width:0%;background:linear-gradient(90deg,#2fd672,#8ff05a);transition:width .3s}
  #progText{font-weight:700;font-size:13px;color:#9fb3c8;white-space:nowrap}
  #pGauge{text-align:center;min-width:280px}
  .lbl{font-size:12px;color:#8ea3ba;letter-spacing:.2em}
  #gaugeBar{position:relative;width:240px;height:16px;margin:6px auto 2px;border-radius:8px;
    background:linear-gradient(90deg,#22c55e 0%,#f59e0b 55%,#ef4444 85%);overflow:hidden;border:1px solid #000}
  #gaugeCover{position:absolute;top:0;right:0;bottom:0;width:100%;background:#0a0f16;transition:width .25s}
  #gaugeText{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
  #pMoney{text-align:right}
  #money{display:block;font-size:30px;font-weight:900;color:var(--amber);font-variant-numeric:tabular-nums}
  #money.shake{animation:shake .35s}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

  #jamWarn{position:absolute;top:96px;left:50%;transform:translateX(-50%);display:none;
    background:repeating-linear-gradient(45deg,#1c1c1c 0 14px,var(--amber) 14px 28px);
    padding:4px;border-radius:8px;pointer-events:none}
  #jamWarn span{display:block;background:#1c1c1c;color:var(--amber);font-weight:900;
    padding:6px 18px;border-radius:5px;font-size:15px}

  #toastWrap{position:absolute;top:150px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
  .toast{background:linear-gradient(var(--sign),var(--sign-d));border:3px solid #fff;
    outline:3px solid var(--sign-d);border-radius:10px;padding:8px 20px;font-weight:700;
    color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.35);animation:tin .3s ease-out}
  .toast.bad{background:linear-gradient(#c73e36,#9c2d27);outline-color:#9c2d27}
  @keyframes tin{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}

  /* ---------- 工具栏 ---------- */
  #toolbar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;pointer-events:auto}
  #toolRow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .tool{background:#1a2432;border:2px solid #35455c;border-radius:8px;color:var(--ink);
    padding:9px 13px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 #05080c;
    transition:transform .12s,border-color .12s,background .12s;font-family:inherit;display:flex;flex-direction:column;align-items:center;min-width:86px}
  .tool small{font-weight:400;color:#8ea3ba;font-size:11px;margin-top:2px}
  .tool:hover{transform:translateY(-2px);border-color:var(--amber)}
  .tool.active{background:var(--amber);color:#141a22;border-color:#fff}
  .tool.active small{color:#5c4a12}
  .tgl{min-width:auto;flex-direction:row;gap:6px;padding:9px 12px}
  .tgl.on{background:#22c55e;border-color:#fff;color:#06281a}
  #stripe{width:100%;height:8px;margin-top:10px;border-radius:4px;
    background:repeating-linear-gradient(45deg,#e9b93c 0 12px,#171717 12px 24px);opacity:.85}

  #hint{position:absolute;bottom:16px;left:16px;font-size:12px;color:#7e93aa;
    background:rgba(10,15,22,.7);padding:8px 12px;border-radius:8px;max-width:270px;line-height:1.7;pointer-events:none}
  #hint b{color:var(--amber)}

  #sideMinimap{position:absolute;right:14px;bottom:14px;pointer-events:auto}
  #minimap{display:block;border-radius:6px;background:#0b111a}
  #legend{display:flex;gap:10px;margin-top:8px;font-size:11px;color:#9fb3c8;align-items:center;flex-wrap:wrap}
  .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}

  #costTag{position:fixed;display:none;z-index:30;pointer-events:none;background:#141a22;
    border:2px solid var(--amber);color:var(--amber);font-weight:900;padding:4px 10px;border-radius:8px;font-size:14px}
  #costTag.bad{border-color:var(--red);color:var(--red)}

  .float{position:fixe.........完整代码请登录后点击上方下载按钮下载查看