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, maximum-scale=1, user-scalable=no">
<meta name="theme-color" content="#062e3b">
<title>碧波救援队 · 3D 游泳救人</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
  :root{
    --deep:#062e3b; --sea:#0f6f8c; --foam:#eefaff;
    --red:#ff4b3a; --red-d:#d8352a; --sun:#ffd23f; --green:#3ddc74;
    --display:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;
    --body:'Noto Sans SC',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%;overflow:hidden;background:var(--deep);font-family:var(--body);color:var(--foam)}
  canvas#c{position:fixed;inset:0;display:block}

  .hidden{display:none!important}
  .display{font-family:var(--display);font-weight:400}
  .btn{
    font-family:var(--display);font-size:26px;letter-spacing:2px;cursor:pointer;
    background:var(--red);color:#fff;border:4px solid var(--sun);border-radius:14px;
    padding:12px 38px;box-shadow:0 7px 0 rgba(3,25,34,.55);transition:transform .12s,box-shadow .12s;
  }
  .btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 rgba(3,25,34,.55)}
  .btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(3,25,34,.55)}
  .btn.ghost{background:transparent;border-color:rgba(255,255,255,.4);font-size:20px;padding:10px 26px}
  .keycap{display:inline-block;background:#123a4c;color:var(--foam);border-radius:7px;
    padding:2px 11px;font-weight:900;font-size:13px;border-bottom:3px solid rgba(0,0,0,.4);margin:0 2px}

  /* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .6s}
  #hud.on{opacity:1}
  .panel{background:rgba(4,34,45,.82);border:3px solid rgba(255,255,255,.16);border-radius:14px;
    box-shadow:0 6px 0 rgba(0,0,0,.28);padding:8px 16px}
  #topLeft{position:fixed;top:16px;left:16px;display:flex;flex-direction:column;gap:10px}
  #topLeft .lbl{font-size:11px;letter-spacing:4px;color:#9fd3e0;font-weight:700}
  #savedVal{font-family:var(--display);font-size:44px;line-height:1;color:var(--sun)}
  #savedVal small{font-size:16px;color:var(--foam);margin-left:4px}
  #livesBox{display:flex;gap:8px;margin-top:6px}
  .buoy{width:22px;height:22px;border-radius:50%;border:5px solid var(--red);
    background:radial-gradient(circle,transparent 30%,#fff 32%);transition:.3s}
  .buoy.lost{opacity:.15;filter:grayscale(1);transform:scale(.8)}

  #timerWrap{position:fixed;top:14px;left:50%;transform:translateX(-50%) rotate(-1.4deg)}
  #timerVal{font-family:var(--display);font-size:48px;line-height:1.05;color:var(--red-d);
    background:var(--sun);border:4px solid var(--red-d);border-radius:12px;padding:2px 26px;
    box-shadow:0 7px 0 rgba(3,25,34,.5);min-width:170px;text-align:center}
  #timerVal.danger{animation:tpulse .5s infinite alternate;background:var(--red);color:#fff;border-color:#fff}
  @keyframes tpulse{from{transform:scale(1)}to{transform:scale(1.07)}}
  #timerLbl{text-align:center;font-size:11px;letter-spacing:5px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6);margin-top:5px;font-weight:700}

  #mapBox{position:fixed;top:16px;right:16px;text-align:center}
  #minimap{width:150px;height:150px;border-radius:50%;border:4px solid rgba(255,255,255,.25);
    background:rgba(4,30,42,.7);box-shadow:0 6px 0 rgba(0,0,0,.3)}
  #mapBox .lbl{font-size:10px;letter-spacing:4px;color:#9fd3e0;margin-top:5px;font-weight:700}

  #stamWrap{position:fixed;left:16px;bottom:20px;width:230px}
  #stamWrap .lbl{font-size:11px;letter-spacing:4px;color:#cfeef7;font-weight:700;margin-bottom:4px}
  #stamBar{height:16px;border-radius:9px;background:rgba(4,30,42,.85);border:2px solid rgba(255,255,255,.25);overflow:hidden}
  #stamFill{height:100%;width:100%;border-radius:7px;background:linear-gradient(90deg,var(--sun),#ff9d2e);transition:width .12s}
  #stamFill.low{background:linear-gradient(90deg,var(--red),#ff8f2e);animation:tpulse .35s infinite alternate}

  #compass{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);text-align:center;transition:opacity .3s}
  #compassRing{width:80px;height:80px;border-radius:50%;border:3px solid var(--sun);
    background:rgba(4,30,42,.85);display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 0 rgba(0,0,0,.3);margin:0 auto}
  #compassDist{font-family:var(--display);font-size:20px;color:var(--sun);margin-top:5px}
  #compassLbl{font-size:10px;letter-spacing:4px;color:#cfeef7;font-weight:700;margin-bottom:4px}

  #carryBanner{position:fixed;bottom:130px;left:50%;transform:translateX(-50%);
    font-family:var(--display);font-size:22px;background:var(--sun);color:#123;
    padding:8px 24px;border-radius:10px;border:3px solid #123;box-shadow:0 6px 0 rgba(0,0,0,.35);
    animation:bpulse 1s infinite alternate;white-space:nowrap}
  @keyframes bpulse{from{transform.........完整代码请登录后点击上方下载按钮下载查看