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>伪装者 · MIMIC 三维伪装生存</title>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0c1720; --panel:#101d26; --line:#2b4653; --amber:#ffb02e; --mint:#7df0a8;
  --danger:#ff4d42; --cyan:#6ef2ff; --txt:#dfeef2;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);font-family:'Noto Sans SC',sans-serif;color:var(--txt);user-select:none}
canvas#game{display:block;position:fixed;inset:0}
.disp{font-family:'ZCOOL KuaiLe','Noto Sans SC',sans-serif}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#tl{position:absolute;top:16px;left:18px;display:flex;flex-direction:column;gap:6px}
#brand{font-family:'ZCOOL KuaiLe';font-size:30px;line-height:1;color:var(--amber);text-shadow:0 2px 0 #3a2604,0 5px 18px rgba(0,0,0,.6);letter-spacing:2px}
#brand small{display:block;font-family:'Noto Sans SC';font-size:10px;letter-spacing:6px;color:#8fb4c0;margin-top:2px}
#waveBadge{align-self:flex-start;background:#132530;border:1px solid var(--line);padding:3px 12px;font-size:13px;font-weight:700;color:var(--cyan);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}

#banner{position:absolute;top:16px;left:50%;transform:translateX(-50%);text-align:center;min-width:330px;
  padding:10px 26px 12px;background:rgba(12,23,32,.85);border:1px solid var(--line);border-top:3px solid var(--mint);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 12px),calc(100% - 16px) 100%,0 100%,0 12px);
  transition:border-color .3s}
#bMain{font-family:'ZCOOL KuaiLe';font-size:26px;letter-spacing:3px}
#bSub{font-size:12px;color:#9fc3cf;margin-top:2px;letter-spacing:1px}
#banner.calm{border-top-color:var(--mint)} #banner.calm #bMain{color:var(--mint)}
#banner.warn{border-top-color:var(--danger);animation:blink .5s steps(2) infinite} #banner.warn #bMain{color:var(--danger)}
#banner.scan{border-top-color:var(--amber)} #banner.scan #bMain{color:var(--amber)}
#banner.hit{border-top-color:#fff} #banner.hit #bMain{color:#fff}
@keyframes blink{50%{background:rgba(120,20,15,.9)}}

#tr{position:absolute;top:16px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#scoreBox{font-size:14px;background:#132530;border:1px solid var(--line);padding:6px 14px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#scoreBox b{font-family:'ZCOOL KuaiLe';font-size:22px;color:var(--amber);margin-left:6px}
#hearts{font-size:20px;letter-spacing:3px;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.heart{color:#ff5a52;transition:all .3s;display:inline-block}
.heart.off{color:#3a4750;transform:scale(.8)}
.heart.pop{animation:hp .4s}
@keyframes hp{40%{transform:scale(1.6)}}
#mmWrap{position:relative;margin-top:4px}
#mm{display:block;background:rgba(8,18,24,.85);border:1px solid var(--line);border-radius:6px}
#mmWrap span{position:absolute;bottom:-16px;right:2px;font-size:10px;color:#6f93a0;letter-spacing:3px}

/* bottom */
#bc{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
#meter{display:flex;align-items:center;gap:10px;background:rgba(12,23,32,.8);border:1px solid var(--line);padding:7px 14px}
#meter .ml{font-size:12px;color:#9fc3cf;letter-spacing:2px}
#mbar{width:300px;height:14px;background:#0a141b;border:1px solid #1d3540;overflow:hidden}
#mfill{height:100%;width:0%;background:linear-gradient(90deg,#59d98c,#ffd23f 55%,#ff4d42);transition:width .12s}
#mtext{font-family:'ZCOOL KuaiLe';font-size:16px;width:48px;text-align:right;color:#9fc3cf}
#meter.hot{animation:shake .12s infinite;border-color:var(--danger)}
@keyframes shake{25%{transform:translate(1.5px,-1px)}75%{transform:translate(-1.5px,1px)}}
#dashWrap{width:150px;height:5px;background:#0a141b;border:1px solid #1d3540}
#dashFill{height:100%;width:100%;background:var(--cyan)}

#hotbar{display:flex;gap:8px}
.slot{width:62px;padding:5px 0 4px;background:rgba(14,28,38,.9);border:2px solid var(--line);text-align:center;position:relative;transition:all .15s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.slot .k{position:absolute;top:2px;left:5px;font-size:10px;font-weight:700;color:#6f93a0}
.slot b{font-size:22px;display:block;line-height:1.2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.slot i{font-style:norm.........完整代码请登录后点击上方下载按钮下载查看