three实现三维鬼屋探险游戏-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维鬼屋探险游戏，目标：在凶宅迷宫中收集 6 团亡者烛火 → 大门封印解除 → 抵达大门逃脱操作：鼠标环视 / WASD 移动 / Shift 疾跑（耗体力、会出声引来怨灵）/ F 手电 / M 小地图 / Esc 暂停机制：被怨灵触及或熄灯会掉理智，靠近未拾取的烛火可回复；理智归零即死。每收集一团烛火，怨灵就更凶一分内容：程序生成迷宫 + 五个主题厅室（墓室棺木、书房书架、祠堂烛台等）、画像、月光光柱、随机低语/叩击/幻觉事件、全程 WebAudio 合成音效（心跳、脚步、尖啸）

代码标签： 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=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#04050b; --paper:#e7d9b9; --gold:#d9a441; --gold-dim:#8a6a2e;
  --blood:#8e2233; --bone:#cfc8bb; --cold:#9db8d9;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--ink);overscroll-behavior:none}
body{font-family:'Noto Serif SC','Songti SC',serif;color:var(--bone);user-select:none}
.brush{font-family:'Ma Shan Zheng','Noto Serif SC',serif}
#game{position:fixed;inset:0;display:block}

/* ---------- 全屏氛围层 ---------- */
.fx{position:fixed;inset:0;pointer-events:none}
#vignette{background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.92) 100%);z-index:6}
#madness{background:radial-gradient(ellipse at center,rgba(60,10,40,0) 30%,rgba(70,8,30,.85) 100%);opacity:0;z-index:7;mix-blend-mode:screen}
#dmg{background:radial-gradient(ellipse at center,rgba(140,10,20,.25) 0%,rgba(120,5,15,.85) 100%);opacity:0;z-index:8}
#grain{z-index:9;opacity:.10;animation:grainShift .9s steps(6) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- 主菜单 ---------- */
#menu{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(3,4,9,.88),rgba(6,4,8,.96)),radial-gradient(ellipse at 50% 120%,#1a0f14 0%,transparent 60%);
  transition:opacity .8s;}
#menu.hide{opacity:0;pointer-events:none}
.fog{position:absolute;width:160vw;height:60vh;filter:blur(30px);opacity:.5;pointer-events:none}
.fog.f1{bottom:-12vh;left:-30vw;background:radial-gradient(ellipse,rgba(70,80,110,.16),transparent 70%);animation:fogA 26s ease-in-out infinite alternate}
.fog.f2{top:-8vh;right:-30vw;background:radial-gradient(ellipse,rgba(90,60,70,.13),transparent 70%);animation:fogB 33s ease-in-out infinite alternate}
@keyframes fogA{to{transform:translateX(14vw) translateY(-4vh)}}
@keyframes fogB{to{transform:translateX(-12vw) translateY(5vh)}}
.ember{position:absolute;bottom:-10px;border-radius:50%;background:radial-gradient(circle,#ffd9a0,#ff7b2d 60%,transparent);animation:rise linear infinite;pointer-events:none}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.9}100%{transform:translateY(-105vh) translateX(var(--dx));opacity:0}}
.couplet{position:absolute;top:10%;writing-mode:vertical-rl;font-family:'Ma Shan Zheng';font-size:clamp(1.3rem,2.4vw,2.1rem);
  color:#b98c3a;opacity:.5;letter-spacing:.4em;text-shadow:0 0 16px rgba(217,164,65,.35);pointer-events:none}
.couplet.r{right:4.5%}.couplet.l{left:4.5%}
.hengpi{position:absolute;top:4.5%;left:50%;transform:translateX(-50%);font-family:'Ma Shan Zheng';
  color:#c8b184;letter-spacing:1.2em;padding:2px 14px 2px 26px;border-top:1px solid rgba(217,164,65,.35);border-bottom:1px solid rgba(217,164,65,.35);opacity:.55;font-size:1.05rem}
.menu-inner{position:relative;text-align:center;max-width:680px;padding:0 24px}
.kicker{font-size:.72rem;letter-spacing:.55em;color:var(--gold-dim);margin-bottom:14px}
#menu h1{font-family:'Ma Shan Zheng';font-size:clamp(4rem,11vw,8.2rem);line-height:1.05;color:#e8d5a3;
  text-shadow:0 0 18px rgba(232,176,75,.45),0 0 60px rgba(180,60,40,.35),0 4px 0 #2a1608;
  animation:candle 4.2s ease-in-out infinite}
@keyframes candle{0%,100%{opacity:1}3%{opacity:.72}6%{opacity:1}42%{opacity:.9}45%{opacity:1}71%{opacity:.66}73%{opacity:1}}
.sub{margin-top:6px;font-size:.85rem;letter-spacing:.5em;color:#8d8474}
.story{margin:26px auto 0;max-width:520px;font-size:.92rem;line-height:2;color:#a99f8d;text-align:justify}
.rules{margin:22px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;max-width:560px;text-align:left;font-size:.82rem;color:#948a78;line-height:1.7}
.rules b{color:#d6c8a8;font-weight:700}
.chips{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{font-size:.72rem;color:#8d8474;border:1px solid rgba(217,164,65,.22);padding:4px 10px;background:rgba(20,16,10,.4)}
.chip b{color:#d9c193;font-weight:700;margin-right:6px}
.talisman{position:relative;display:block;margin:30px auto 0;width:118px;height:196px;cursor:pointer;border:none;
  background:linear-gradient(#e6d3a3,#d3bc82);border:2px solid #7e1d2b;box-shadow:0 0 0 4px rgba(126,29,43,.25),0 14px 30px rgba(0,0,0,.6);
  transform-origin:50% -20px;animation:sway 5s ease-in-out infinite;transition:filter .3s}
.talisman:hover{filter:brightness(1.12) drop-shadow(0 0 18px rgba(230,180,80,.45))}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.talisman .edge{position:absolute;inset:7px;border:1px solid rgba(126,29,43,.7)}
.talisman .chi{position:absolute;top:14px;left:50%;transform:translateX(-50%);writing-mode:vertical-rl;
  font-family:'Ma Shan Zheng';font-size:1rem;color:#7e1d2b;letter-spacing:.3em;opacity:.85}
.talisman .main{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;
  font-family:'Ma Shan Zheng';font-size:2.7rem;color:#a4243b;letter-spacing:.18em;text-shadow:0 1px 0 rgba(255,240,200,.5)}
.talisman .seal{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:26px;height:26px;background:#a4243b;color:#e6d3a3;
  font-size:.55rem;display:flex;align-items:center;justify-content:center;line-height:1.1;text-align:center;font-weight:700}
.menu-tip{margin.........完整代码请登录后点击上方下载按钮下载查看