three实现三维水渠农田灌溉游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：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>灌溉调度站 · 三维水利调度游戏</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#06161d; --panel:rgba(8,27,35,.92); --panel2:rgba(10,34,43,.92);
  --line:#1d4a56; --line2:#2b6270;
  --teal:#3ecfcf; --teal-dim:#1d7f86; --amber:#ffb454; --red:#ff5c5c;
  --green:#4fd68a; --gold:#ffd166; --ink:#e8f6f4; --mut:#8fb3b5;
  --disp:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;
  --body:'Noto Sans SC',sans-serif;
  --cham:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);font-family:var(--body);color:var(--ink);-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0}
#app canvas{position:absolute;inset:0;z-index:0;touch-action:none;display:block}

/* ---------- 3D 浮动标签 ---------- */
#labels{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.flabel{position:absolute;left:0;top:0;transform:translate(-50%,-100%);background:rgba(6,22,28,.85);
  border:1px solid var(--line);border-top:2px solid var(--teal);padding:3px 8px 5px;min-width:86px;text-align:center;
  clip-path:var(--cham);transition:border-color .3s}
.flabel .lname{font-size:11px;letter-spacing:1px;color:var(--mut);display:block}
.flabel .lbar{display:block;height:5px;background:#0a2029;margin-top:3px;position:relative}
.flabel .lbar b{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#1d8fa8,var(--teal));transition:width .2s}
.flabel.warn{border-top-color:var(--red);animation:blink .5s steps(2) infinite}
.flabel.done{border-top-color:var(--gold)}
.flabel.done .lbar b{background:linear-gradient(90deg,#c89b2e,var(--gold))}
.flabel.flood{border-top-color:var(--red);opacity:.75}
.flabel.flood .lbar b{background:#7a4034}

/* ---------- HUD 通用 ---------- */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none}
#hud .pane{pointer-events:auto;background:var(--panel);border:1px solid var(--line);clip-path:var(--cham);
  box-shadow:0 6px 24px rgba(0,0,0,.35);position:relative}
#hud .pane::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(180deg,var(--teal),transparent)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:.35}}

/* 顶栏 */
#topbar{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:10px 18px;background:linear-gradient(180deg,rgba(5,17,22,.94),rgba(5,17,22,0));pointer-events:none}
#topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px}
.brand .drop{width:30px;height:30px;flex:none}
.brand h2{font-family:var(--disp);font-weight:400;font-size:22px;letter-spacing:3px;line-height:1}
.brand small{display:block;font-size:9px;letter-spacing:3px;color:var(--mut);font-family:var(--body)}
#lvlChip{margin-left:12px;font-size:12px;padding:3px 10px;border:1px solid var(--line2);color:var(--teal);
  clip-path:var(--cham);background:rgba(14,44,54,.8);letter-spacing:2px}
#timer{font-family:var(--disp);font-size:36px;letter-spacing:4px;color:var(--ink);text-shadow:0 0 18px rgba(62,207,207,.35);line-height:1}
#timer.low{color:var(--red);animation:blink .6s steps(2) infinite}
.t-right{display:flex;gap:14px;justify-content:flex-end;align-items:center;font-size:12px;color:var(--mut)}
.t-right b{color:var(--gold);font-size:16px;font-family:var(--disp);letter-spacing:1px;margin-left:4px}
.t-right .go b{color:var(--teal)}

/* 左侧水位计 */
#gauge{position:absolute;left:16px;top:86px;width:118px;padding:12px 12px 10px;animation:fadeUp .5s .1s backwards}
#gauge h4{font-size:11px;letter-spacing:2px;color:var(--mut);font-weight:500}
.g-wrap{display:flex;gap:10px;align-items:stretch;margin-top:8px;height:172px}
.g-tube{width:22px;background:#081c24;border:1px solid var(--line2);position:relative;overflow:hidden}
#gaugeFill{position:absolute;left:0;bottom:0;width:100%;height:100%;background:linear-gradient(180deg,#5fe0e0,#157389);transition:height .25s}
#gaugeFill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.12) 6px 7px);animation:scan 2.4s linear infinite}
@keyframes scan{to{transform:translateY(7px)}}
.g-nums{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--mut);padding:1px 0}
#gaugePct{font-family:var(--disp);font-size:24px;color:var(--teal);margin-top:8px;letter-spacing:1px}
.g-row{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);border-top:1px dashed var(--line);padding-top:6px;margin-top:6px}
.g-row b{color:var(--ink)}
.legend{margin-top:8px;font-size:10px;color:var(--mut);line-height:1.9}
.legend i{display:inline-block;width:8px;height:8px;margin-right:5px;vertical-align:middle}

/* 右侧田块监视 */
#monitor{position:absolute;right:16px;top:86px;bottom:64px;width:252px;display:flex;flex-direction:column;animation:fadeUp .5s .2s backwards}
#monitor h3{font-family:var(--disp);font-weight:400;font-size:16px;letter-spacing:3px;padding:10px 14px 8px;border-bottom:1px solid var(--line);color:var(--teal)}
#cards{flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:7px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
#monitor footer{font-size:10px;color:var(--mut);padding:7px 14px;border-top:1px solid var(--line);letter-spacing:1px}
.fcard{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--mut);padding:7px 9px;cursor:pointer;
  clip-p.........完整代码请登录后点击上方下载按钮下载查看