three实现水底洞穴深潭营救游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现水底洞穴深潭营救游戏代码，暴雨令地下河倒灌,三名洞穴测绘潜水员在水下 50 米的迷宫中失联。你是唯一的救援者:从潜水钟出发,凭借一口有限的呼吸深入黑暗, 找到他们、递出备用呼吸器,再逐一拖回潜水钟气室。岩顶的滞留气泡是途中仅有的补给——规划路线,别贪快。

代码标签： 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>暗渊回息 · UNDERCAVE RESCUE</title>
<style>
:root{
  --ink:#dff6f2; --dim:#7fa8a4; --teal:#39e6c4; --amber:#ffb454; --red:#ff5d5d;
  --panel:rgba(4,22,32,.72); --line:rgba(88,214,197,.22);
  --mono:"SFMono-Regular",Consolas,"Courier New",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#02090f;
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;color:var(--ink);
  user-select:none;-webkit-user-select:none}
canvas{display:block}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(0,4,8,.62) 100%)}
#danger{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;
  box-shadow:inset 0 0 180px 60px rgba(255,40,40,.55);transition:opacity .25s}
#fade{position:fixed;inset:0;pointer-events:none;z-index:7;background:#01060a;opacity:0;transition:opacity .9s}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;display:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;
  backdrop-filter:blur(3px);position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px)}
#panelLeft{position:absolute;top:18px;left:18px;width:250px}
#panelLeft h3{font-size:11px;letter-spacing:.35em;color:var(--dim);font-weight:600;margin-bottom:10px}
.srow{margin-bottom:10px}
.srow .lr{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.srow .nm{font-weight:700;letter-spacing:.08em}
.srow .st{font-size:11px;color:var(--dim);font-family:var(--mono)}
.sbar{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.sbar i{display:block;height:100%;width:100%;border-radius:3px;background:var(--teal);transition:width .3s}
.srow.crit .sbar i{background:var(--red);animation:blink .7s infinite}
@keyframes blink{50%{opacity:.35}}
#objLine{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:12px;color:var(--amber);
  font-family:var(--mono);letter-spacing:.05em;line-height:1.6}
#panelRight{position:absolute;top:18px;right:18px;text-align:right;font-family:var(--mono)}
#panelRight .big{font-size:26px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
#panelRight .lab{font-size:10px;letter-spacing:.4em;color:var(--dim);margin-top:2px}
#panelRight .sub{margin-top:10px;font-size:12px;color:var(--dim);line-height:1.7}
#panelRight .sub b{color:var(--teal);font-weight:700}
#cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#dot{width:4px;height:4px;border-radius:50%;background:rgba(200,255,244,.85);
  position:absolute;left:-2px;top:-2px;box-shadow:0 0 6px rgba(57,230,196,.9)}
#ring{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(120,220,205,.35)}
#eRing{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;display:none;
  -webkit-mask:radial-gradient(farthest-side,transparent 63%,#000 64%);
          mask:radial-gradient(farthest-side,transparent 63%,#000 64%)}
#arrowWrap{position:absolute;left:0;top:0;width:0;height:0}
#arrow{position:absolute;left:-9px;top:-64px;width:18px;height:18px;
  clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%);background:var(--amber);
  filter:drop-shadow(0 0 5px rgba(255,180,84,.8))}
#arrowDist{position:absolute;left:0;top:-88px;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:.1em}
#o2wrap{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:min(560px,72vw)}
#o2head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
#o2label{font-size:12px;letter-spacing:.5em;color:var(--dim);font-weight:600}
#o2num{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--teal)}
#o2bar{height:14px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.06);
  padding:2px;box-shadow:0 0 18px rgba(0,0,0,.5)}
#o2fill{height:100%;width:100%;border-radius:5px;background:linear-gradient(90deg,#1d9d8a,var(--teal));
  box-shadow:0 0 10px rgba(57,230,196,.55);transition:width .12s linear}
#o2wrap.low #o2fill{background:linear-gradient(90deg,#a92c2c,var(--red));box-shadow:0 0 12px rgba(255,93,93,.7)}
#o2wrap.low #o2num{color:var(--red)}
#o2wrap.low #o2bar{animation:blink .8s infinite}
#prompt{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);
  font-size:15px;letter-spacing:.15em;color:var(--teal);text-shadow:0 0 12px rgba(57,230,196,.6);
  padding:6px 18px;background:rgba(3,16,22,.55);border:1px solid var(--line);border-radius:4px;display:none;white-space:nowrap}
#holdT.........完整代码请登录后点击上方下载按钮下载查看