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 href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#0b1118; --panel:rgba(13,21,30,.92); --line:#2b3d50;
  --ink:#e3edf5; --dim:#8fa3b5;
  --amber:#ffb02e; --cyan:#54d1e8; --red:#ff5340; --green:#7fd45f;
  --disp:'ZCOOL QingKe HuangYou','Noto Sans SC','Microsoft YaHei',sans-serif;
  --body:'Noto Sans SC','Microsoft YaHei',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--body);color:var(--ink);user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0}
#app canvas{display:block;touch-action:none;cursor:crosshair}

#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#topbar{position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#brand{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:8px;padding:8px 14px;box-shadow:0 6px 22px rgba(0,0,0,.45)}
#brand .logo{font-family:var(--disp);font-size:30px;color:#0b1118;background:var(--amber);width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:6px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
#brand h1{font-family:var(--disp);font-size:19px;letter-spacing:2px;line-height:1.1}
#brand p{font-size:11px;color:var(--dim);letter-spacing:1px}

#stormbox{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 18px 10px;text-align:center;box-shadow:0 6px 22px rgba(0,0,0,.45);min-width:210px}
#phase{font-size:11px;letter-spacing:4px;color:var(--cyan)}
#timer{font-family:var(--disp);font-size:38px;line-height:1.05;color:var(--amber);text-shadow:0 0 18px rgba(255,176,46,.35)}
#rainmeter{display:flex;gap:3px;justify-content:center;margin-top:4px}
#rainmeter i{width:13px;height:6px;background:#20303f;border-radius:2px;transition:background .3s,box-shadow .3s}
#rainmeter i.on{background:var(--cyan);box-shadow:0 0 6px rgba(84,209,232,.7)}
#rainmeter i.hot{background:var(--red);box-shadow:0 0 7px rgba(255,83,64,.8)}

#sysbtns{display:flex;gap:8px}
#sysbtns button{pointer-events:auto;width:42px;height:42px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:17px;cursor:pointer;transition:.18s}
#sysbtns button:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-2px)}
#sysbtns button.off{color:#57697c;text-decoration:line-through}

#tooldock{position:absolute;left:16px;bottom:16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:270px;box-shadow:0 10px 30px rgba(0,0,0,.5);pointer-events:auto}
.dock-head{font-family:var(--disp);font-size:15px;letter-spacing:2px;color:var(--amber);margin-bottom:8px}
.dock-head span{float:right;font-family:var(--body);font-size:10px;color:var(--dim);margin-top:3px}
.tools{display:flex;gap:8px;margin-bottom:10px}
.tool{flex:1;background:#16222e;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px 6px 7px;cursor:pointer;text-align:center;transition:.16s;position:relative}
.tool em{display:block;font-style:normal;font-size:10px;color:var(--dim);margin-top:2px}
.tool kbd{position:absolute;top:4px;right:5px;font-size:9px;border:1px solid var(--line);border-radius:3px;padding:0 3px;color:var(--dim)}
.tool:hover{transform:translateY(-2px);border-color:#4b657e}
.tool.active{border-color:var(--amber);background:#241f10;box-shadow:0 0 14px rgba(255,176,46,.25)}
.tool.active em{color:#d8b878}
#tooldock label{font-size:11px;color:var(--dim);display:flex;align-items:center;gap:8px}
#tooldock input[type=range]{flex:1;accent-color:var(--amber)}
#brushVal{color:var(--amber);font-weight:700;min-width:38px;text-align:right}
.dock-hint{margin-top:8px;font-size:10px;color:#5f7488;letter-spacing:1px;border-top:1px dashed #253646;padding-top:7px}

#paddyCard{position:absolute;right:16px;bottom:16px;width:250px;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.card-head{font-family:var(--disp);letter-spacing:3px;font-size:15px;padding:7px 14px;color:#0b1118;
  background:repeating-linear-gradient(45deg,var(--amber) 0 10px,#e69a17 10px 20px)}
#paddyCard .bd{padding:10px 14px 12px}
.row{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin:7px 0 4px}
.row b{color:var(--ink);font.........完整代码请登录后点击上方下载按钮下载查看