three实现三维水库水渠修建规划闯关游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维水库水渠修建规划闯关游戏代码,任务目标河谷中的每一块农田都必须被灌溉,预算内完成即过关。核心规则水库是全网的源头,必须修建在紧邻河道(流动的青色水面)的草地上。水渠可从水库向上/下/左/右蔓延,连成水网;水会自动沿连通的水渠流动。农田只要紧邻任一通水的水渠或水库即可灌溉,水不会穿过农田本身。岩石与河道上不能修建;拆除返还一半造价,撤销可全额退回。操作方式左键 / 点按:使用当前工具 · 拖拽:旋转视角 · 滚轮 / 双指:缩放 · 右键拖拽:平移快捷键:1

代码标签： 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, maximum-scale=1.0, user-scalable=no">
<title>水到渠成 · 三维水库水渠修建规划</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0e2b26; --panel:rgba(13,40,35,.9); --line:rgba(233,180,76,.42);
  --paper:#f4ecd8; --gold:#e9b44c; --aqua:#45c8b3; --red:#c8442f;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Noto Sans SC',sans-serif;color:var(--paper);
  background:linear-gradient(#8fc7e2,#dfeee0);
  user-select:none;-webkit-user-select:none;
}
#stage{position:fixed;inset:0}
#stage canvas{display:block;touch-action:none}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(9,28,24,.38) 100%)}
/* ---------- 顶部 HUD ---------- */
#hud{position:fixed;top:14px;left:16px;right:16px;z-index:2;display:flex;
  justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;pointer-events:auto}
.seal{width:46px;height:46px;background:var(--red);color:#fff;border-radius:8px;
  display:flex;align-items:center;justify-content:center;transform:rotate(-4deg);
  font-family:'Ma Shan Zheng';font-size:30px;box-shadow:0 4px 14px rgba(120,30,20,.45),inset 0 0 0 2px rgba(255,255,255,.28)}
.brand h1{font-family:'Ma Shan Zheng',serif;font-weight:400;font-size:30px;line-height:1;
  color:#fdf7e6;text-shadow:0 2px 8px rgba(10,35,30,.55);letter-spacing:2px}
.brand p{font-size:11px;letter-spacing:3px;color:#d8e6d2;margin-top:4px}
.stats{display:flex;gap:10px;flex-wrap:wrap;pointer-events:auto}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 14px;min-width:104px;backdrop-filter:blur(5px);box-shadow:0 6px 18px rgba(8,25,21,.35)}
.stat small{display:block;font-size:10px;letter-spacing:2px;color:#9fc3b2;margin-bottom:2px}
.stat b{font-size:19px;font-weight:700;color:var(--paper)}
.stat b.gold{color:var(--gold)} .stat b.aqua{color:var(--aqua)}
.bar{margin-top:6px;height:9px;border-radius:6px;background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;width:0%;border-radius:6px;transition:width .5s ease;
  background:linear-gradient(90deg,#2f9e8f,#5fd6c0,#2f9e8f);background-size:200% 100%;
  animation:flow 2.2s linear infinite}
@keyframes flow{to{background-position:-200% 0}}
/* ---------- 底部工具栏 ---------- */
#toolbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  display:flex;gap:9px;padding:10px 12px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(8,25,21,.45)}
.tool{width:76px;padding:8px 4px 7px;border-radius:10px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(#17453c,#11332d);color:var(--paper);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.tool svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool .nm{font-size:13px;font-weight:700;letter-spacing:2px}
.tool .cost{font-size:11px;color:var(--gold)}
.tool:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.4);border-color:var(--gold)}
.tool:active{transform:translateY(0) scale(.96)}
.tool.active{border-color:var(--gold);background:linear-gradient(#1e5c4e,#144038);
  box-shadow:0 0 0 2px rgba(233,180,76,.35),0 8px 18px rgba(0,0,0,.4)}
.tool.poor .cost{color:#ff8f7d}
.sep{width:1px;background:rgba(255,255,255,.15);margin:4px 2px}
/* ---------- 右侧按钮 ---------- */
#side{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;gap:8px}
.rbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:var(--panel);color:var(--paper);display:flex;align-items:center;justify-content:center;
  transition:transform .15s,border-color .15s;backdrop-filter:blur(5px)}
.rbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rbtn:hover{transform:scale(1.12);border-color:var(--gold)}
.rbtn:active{transform:scale(.94)}
#hint{position:fixed;left:16px;bottom:16px;z-index:2;font-size:11.5px;letter-spacing:1px;
  color:rgba(244,236,216,.85);background:rgba(13,40,35,.6);padding:6px 12px;border-radius:8px;
  bord.........完整代码请登录后点击上方下载按钮下载查看