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">
<title>深渊猎手 ABYSS HUNTER · 三维潜艇歼灭战</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=Chakra+Petch:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#031a24; --panel:rgba(4,29,39,.8); --line:#155a6b; --line2:#0d3d4c;
  --sonar:#46ffb1; --cyan:#6fd7ff; --amber:#ffb454; --red:#ff5d5d;
  --ink:#d6f1f4; --dim:#7fb3c0;
  --disp:'Chakra Petch',monospace; --body:'Noto Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--body)}
#scene{position:fixed;inset:0}#scene canvas{display:block}
.hidden{display:none!important}
button{font-family:inherit}

/* ---------- 全屏氛围层 ---------- */
#scanlines{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
#scanband{position:fixed;left:0;right:0;height:140px;pointer-events:none;z-index:40;
  background:linear-gradient(180deg,transparent,rgba(111,215,255,.05),transparent);
  animation:scan 8s linear infinite}
@keyframes scan{from{top:-160px}to{top:110%}}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:40;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(1,10,15,.6) 100%)}
#dmgflash{position:fixed;inset:0;pointer-events:none;z-index:45;opacity:0;
  background:radial-gradient(ellipse at center,rgba(255,90,60,.12),rgba(255,40,40,.55))}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20}
.panel{position:relative;background:var(--panel);border:1px solid var(--line2)}
.panel::before,.panel::after{content:'';position:absolute;width:10px;height:10px;border:2px solid var(--sonar)}
.panel::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.panel::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.p-title{font:600 10px/1 var(--disp);letter-spacing:.24em;color:var(--dim);
  padding-bottom:8px;border-bottom:1px solid var(--line2);margin-bottom:9px}
.p-title span{color:#3f7482}
#hud .panel{position:absolute;padding:12px 14px}
#p-status{top:16px;left:16px;min-width:196px}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0}
.stat-row .lbl{font:600 9px var(--disp);letter-spacing:.2em;color:var(--dim)}
.stat-row b{font:700 17px var(--disp);color:var(--cyan)}
.stat-row.score b{font-size:25px;color:var(--amber);text-shadow:0 0 14px rgba(255,180,84,.4)}
#compassWrap{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--line2);padding:5px 12px 3px;text-align:center}
#hdg{font:700 12px var(--disp);letter-spacing:.3em;color:var(--amber);margin-top:-2px}
#p-sonar{top:62px;right:16px;padding:10px 10px 8px}
#p-sonar .p-title{text-align:center;margin-bottom:6px;border-bottom:none;padding-bottom:0}
#p-dive{bottom:16px;left:16px}
.dive-body{display:flex;gap:14px}
#depthTrack{width:10px;height:118px;background:
  repeating-linear-gradient(180deg,#0a2e3c 0 11px,#134050 11px 12px);
  border:1px solid var(--line2);position:relative}
#depthMark{position:absolute;left:-4px;right:-4px;height:3px;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);top:40%;transition:top .15s}
.d-row{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
.d-row .lbl{font:600 9px var(--disp);letter-spacing:.2em;color:var(--dim);width:34px}
.d-row b{font:700 30px/1 var(--disp);color:var(--cyan)}
.d-row b.amb{color:var(--amber);font-size:22px}
.d-row small{font:600 10px var(--disp);color:var(--dim)}
.chip{display:inline-block;margin-top:9px;padding:3px 10px;font:600 10px var(--disp);
  letter-spacing:.2em;border:1px solid var(--sonar);color:var(--sonar);transition:.2s}
.chip.hot{border-color:var(--amber);color:var(--amber)}
.chip.bad{border-color:var(--red);color:var(--red);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.3}}
#p-weapon{bottom:16px;right:16px;min-width:238px}
.lbl{font:600 9px var(--disp);letter-spacing:.2em;color:var(--dim)}
#torps{display:flex;gap:5px;margin:7px 0 6px}
#torps i{width:21px;height:9px;background:#0a2e3c;border:1px solid var(--line2);
  transform:skewX(-18deg);transition:.15s}
#torps i.on{background:var(--sonar);border-color:var(--sonar);box-shadow:0 0 8px rgba(70,255,177,.55)}
#reloadWrap{height:4px;background:#0a2e3c;margin-bottom:12px}
#reloadBar{height:100%;width:100%;
  background:repeating-linear-gradient(45deg,var(--sonar) 0 6px,#1d8f68 6px 12px)}
#hullWrap{position:relative;height:15px;background:#0a2e3c;border:1px solid var(--line2);margin-top:7px}
#hullBar{height:100%;width:100%;background:linear-gradient(90deg,#2fd08a,var(--sonar));transition:width .25s}
#hullTxt{position:absolute;right:6px;top:0;font:700 11px/15px var(--disp);color:#04222e;mix-blend-mode:screen;color:#eafff4}
#feed{position:absolute;left:50%;bottom:128px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px}
.toast{background:rgba(4,29,39,.88);border:1px solid var(--line2);border-left:3px solid var(--cyan);
  padding:6px 18px;font:500 13px var(--body);letter-spacing:.06em;animation:tIn .25s ease}
.toast.good{border-left-color:var(--sonar)}.toast.bad{border-left-color:var(--red)}
.toast.warn{border-left-color:var(--amber)}
.toast.out{opacity:0;transform:translateY(-8px);transition:.3s}
@keyframes tIn{from{opacity:0;transform:translateY(10px)}}
#banner{position:absolute;left:50%;top:27%;transform:translate(-50%,-50%);
  text-align:center;opacity:0;white-space:nowrap}
#banner.show{animation:ban 2.6s ease forwards}
#banner b{display:block;font:900 46px/1.15 var(--body);letter-spacing:.12em;color:#fff;
  text-shadow:0 0 26px rgba(111,215,255,.65)}
#banner span{display:inline-block;margin-top:6px;padding:4px 22px;border-top:1px solid var(--amber);
  border-bottom:1px solid var(--amber);font:700 13px var(--disp);letter-spacing:.5em;color:var(--amber)}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1)}78%{opacity:1}
  100%{opacity:0;tra.........完整代码请登录后点击上方下载按钮下载查看