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{
    --disp:'ZCOOL QingKe HuangYou',sans-serif;
    --body:'Noto Sans SC',sans-serif;
    --cyan:#59d2e6; --coral:#ff7a59; --gold:#ffc857; --deep:#031f2e;
  }
  *{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}
  html,body{width:100%;height:100%;overflow:hidden;background:#04222f;font-family:var(--body);color:#dff3fa}
  canvas{position:fixed;inset:0;z-index:0;display:block;touch-action:none}

  /* ---------- HUD ---------- */
  #hud{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px;pointer-events:none}
  .hud-left{display:flex;gap:12px;align-items:center;background:rgba(4,28,42,.62);border:1px solid rgba(120,220,255,.28);border-radius:12px;padding:10px 16px;box-shadow:0 6px 24px rgba(0,10,20,.4)}
  .badge{font-size:38px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
  .tier-info{min-width:230px}
  .tier-name{font-family:var(--disp);font-size:20px;letter-spacing:1px;margin-bottom:6px;color:#fff}
  .tier-name span{color:var(--gold);margin-right:8px;font-size:15px;vertical-align:2px}
  .bar{height:12px;border-radius:8px;background:rgba(255,255,255,.12);overflow:hidden;border:1px solid rgba(255,255,255,.15)}
  .bar-fill{height:100%;width:0%;border-radius:8px;background:linear-gradient(90deg,#59d2e6,#ffc857 60%,#ff7a59);transition:width .35s cubic-bezier(.2,.9,.3,1.2)}
  .bar-text{font-size:12px;margin-top:4px;color:#9fd8ea;letter-spacing:1px}
  .hud-right{display:flex;gap:12px;align-items:center;pointer-events:auto}
  .pill{background:rgba(4,28,42,.62);border:1px solid rgba(120,220,255,.28);border-radius:12px;padding:10px 16px;box-shadow:0 6px 24px rgba(0,10,20,.4)}
  .hearts span{font-size:22px;color:#ff5d5d;text-shadow:0 0 8px rgba(255,80,80,.7);margin-left:3px;transition:.3s}
  .hearts span.lost{color:rgba(255,255,255,.15);text-shadow:none}
  #timeText{font-family:var(--disp);font-size:20px;letter-spacing:2px;color:#bfeaf5}
  #btnMute{cursor:pointer;background:rgba(4,28,42,.62);border:1px solid rgba(120,220,255,.28);border-radius:12px;font-size:18px;padding:8px 12px;color:#fff;transition:.2s}
  #btnMute:hover{transform:translateY(-2px);border-color:var(--cyan)}
  #depth{position:fixed;left:20px;bottom:16px;z-index:5;font-size:13px;color:#7fc4d8;letter-spacing:2px;background:rgba(4,28,42,.5);padding:6px 12px;border-radius:8px;border:1px solid rgba(120,220,255,.18)}
  #depth b{color:#ffe9b8;font-family:var(--disp);font-size:16px}
  #hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:5;font-size:13px;color:#8fd0e2;letter-spacing:3px;opacity:.9;transition:opacity 1s}

  /* ---------- 特效层 ---------- */
  #vignette{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(ellipse at center,transparent 52%,rgba(190,25,25,.6) 100%)}
  #hitflash{position:fixed;inset:0;z-index:8;pointer-events:none;background:rgba(255,40,30,.35);opacity:0}
  #hitflash.on{animation:flash .4s ease-out}
  @keyframes flash{0%{opacity:1}100%{opacity:0}}
  #floats{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
  .float-txt{position:absolute;font-family:var(--disp);font-size:26px;color:#ffd166;text-shadow:0 2px 0 #7a3b1e,0 4px 12px rgba(0,0,0,.6);transform:translate(-50%,-50%);animation:floatUp .9s ease-out forwards}
  @keyframes floatUp{0%{opacity:0;margin-top:6px;scale:.6}20%{opacity:1;scale:1.15}100%{opacity:0;margin-top:-56px;scale:1}}
  #toast{position:fixed;top:16%;left:50%;transform:translateX(-50%);z-index:7;text-align:center;pointer-events:none;opacity:0}
  #toast.show{animation:toastIn 2.4s cubic-bezier(.2,.9,.3,1) forwards}
  @keyframes toastIn{0%{opacity:0;transform:translateX(-50%) scale(.5)}12%{opacity:1;transform:translateX(-50%) scale(1.08)}20%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-24px)}}
  .t-main{font-family:var(--disp);font-size:56px;color:#ffe9b8;letter-spacing:6px;text-shadow:0 4px 0 rgba(170,60,35,.9),0 10px 34px rgba(0,0,0,.65)}
  .t-sub{font-family:var(--disp);font-size:22px;margin-to.........完整代码请登录后点击上方下载按钮下载查看