js+css实现水管开启闸门引水游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+css实现水管开启闸门引水游戏代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --disp:'ZCOOL KuaiLe','Noto Sans SC',sans-serif;
  --body:'Noto Sans SC',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --ink:#dcecf5; --mut:#7f9cae; --copper:#d99a55; --water:#35d6ff; --good:#3ddc84; --bad:#ff5a4e;
  --line:#27455a;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--body); color:var(--ink); user-select:none; touch-action:manipulation;
  background:
    radial-gradient(1100px 650px at 75% -10%, #14374d, transparent 60%),
    radial-gradient(900px 600px at 5% 110%, #10303f, transparent 60%),
    linear-gradient(#08111a,#0b1826);
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
}
.orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.14;pointer-events:none;z-index:0}
.o1{width:420px;height:420px;background:#2ec8f0;top:-120px;right:8%;animation:drift 19s ease-in-out infinite alternate}
.o2{width:360px;height:360px;background:#d98a3f;bottom:-140px;left:4%;animation:drift 23s ease-in-out infinite alternate-reverse}
.o3{width:260px;height:260px;background:#3ddc84;top:40%;left:60%;opacity:.07;animation:drift 27s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,-50px) scale(1.15)}}

header{
  position:relative;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;
  padding:12px 20px;background:linear-gradient(#16303f,#0f2231);
  border-bottom:1px solid #2b4a5f;box-shadow:inset 0 -3px 0 rgba(217,154,85,.28),0 8px 24px rgba(0,0,0,.35);
}
.brand{display:flex;align-items:center;gap:10px}
.brand .drop{filter:drop-shadow(0 0 6px rgba(53,214,255,.5));animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.brand h1{font-family:var(--disp);font-weight:400;font-size:27px;letter-spacing:3px;color:#f3e2c2;text-shadow:0 0 14px rgba(217,154,85,.35);line-height:1}
.brand span{font-size:10.5px;letter-spacing:3px;color:var(--mut)}
#levels{display:flex;gap:7px;flex-wrap:wrap}
.lv{font-family:var(--disp);font-size:13px;color:var(--ink);background:#0c1b26;border:1px solid var(--line);
  border-radius:10px;padding:5px 10px;cursor:pointer;transition:.18s;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.lv i{font-style:normal;font-size:10px;color:#ffd257;letter-spacing:2px}
.lv:hover{transform:translateY(-2px);border-color:#3f6a86;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.lv.on{border-color:var(--copper);background:rgba(217,154,85,.14);box-shadow:0 0 14px rgba(217,154,85,.25)}
.lv em{font-style:normal;font-size:9px;color:#ff9b91;letter-spacing:1px}
#stats{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#0c1b26;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;color:var(--mut);display:flex;gap:6px;align-items:center}
.chip b{font-family:var(--disp);font-weight:400;font-size:16px;color:var(--water)}
.chip i{font-style:normal;font-size:11px;opacity:.8}
.btns{display:flex;gap:8px;margin-left:auto}
.btn{font-family:var(--disp);font-size:14px;letter-spacing:1px;color:var(--ink);cursor:pointer;
  background:linear-gradient(#1d3a4c,#132a3a);border:1px solid #35597088;border-radius:10px;padding:8px 14px;transition:.16s}
.btn:hover{transform:translateY(-2px);border-color:var(--copper);box-shadow:0 6px 16px rgba(0,0,0,.4),0 0 10px rgba(217,154,85,.2)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(#e0a954,#b4763a);color:#231204;border-color:#f0c47e;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{box-shadow:0 8px 20px rgba(224,169,84,.35)}

main{position:relative;z-index:1;flex:1;display:flex;align-items:flex-start;justify-content:center;padding:22px 14px 30px}
.frame{
  position:relative;padding:16px 16px 12px;border-radius:18px;max-width:100%;
  background:
    radial-gradient(circle 5px at 14px 14px,#6f8ba0 40%,#27404f 62%,transparent 64%),
    radial-gradient(circle 5px at calc(100% - 14px) 14px,#6f8ba0 40%,#27404f 62%,transparent 64%),
    radial-gradient(circle 5px at 14px calc(100% - 14px),#6f8ba0 40%,#27404f 62%,transparent 64%),
    radial-gradient(circle 5px at calc(100% - 14px) calc(100% - 14px),#6f8ba0 40%,#27404f 62%,transparent 64%),
    linear-gradient(#1a3547,#10222f);
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 0 0 1px #2c4c61;
}
canvas{display:block;max-width:100%;height:auto;border-radius:10px}
.shake{animation:.........完整代码请登录后点击上方下载按钮下载查看