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>幽冥古宅 · 镇魂符三章</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet">
<style>
:root{
  --red:#b8321f; --red2:#e04a2a; --amber:#d9a05b; --paper:#d9c9a3;
  --ink:#cfc4b2; --dim:#7d7468; --ghost:#bcd6ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#020308;
  font-family:"Noto Serif SC",serif;color:var(--ink);user-select:none}
canvas{display:block}
.hidden{display:none!important}
.disp{font-family:"Ma Shan Zheng","KaiTi",cursive}

/* ---------- 全屏氛围层 ---------- */
#grain,#vig,#fear,#flash{position:fixed;inset:0;pointer-events:none}
#grain{z-index:40;opacity:.08;animation:grain .5s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-14px,9px)}
 50%{transform:translate(9px,-13px)}75%{transform:translate(-6px,-7px)}100%{transform:translate(11px,12px)}}
#vig{z-index:41;background:radial-gradient(ellipse at center,transparent 46%,rgba(0,0,5,.55) 78%,rgba(0,0,8,.94) 100%)}
#fear{z-index:42;opacity:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(120,8,4,.75) 100%);
  transition:opacity .25s}
body.panic #fear{animation:panic 1.1s ease-in-out infinite}
@keyframes panic{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.5)}}
#flash{z-index:43;background:#fff;opacity:0}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:50;pointer-events:none}
#objBox{position:absolute;top:22px;left:24px;max-width:330px;padding:14px 18px 12px;
  background:linear-gradient(160deg,rgba(10,10,16,.82),rgba(16,12,10,.6));
  border:1px solid #3a2c22;border-left:3px solid var(--red);backdrop-filter:blur(3px)}
.objLabel{font-size:11px;letter-spacing:.5em;color:var(--dim)}
#objText{font-size:15px;line-height:1.55;color:#e8dcc6;margin-top:5px;font-weight:600}
#slots{display:flex;align-items:center;gap:9px;margin-top:11px}
.slot{width:34px;height:40px;display:grid;place-items:center;font-family:"Ma Shan Zheng",cursive;
  font-size:21px;color:#4c4238;border:1px solid #45352a;background:rgba(0,0,0,.35);
  transition:all .45s;clip-path:polygon(0 6%,50% 0,100% 6%,100% 94%,50% 100%,0 94%)}
.slot.on{color:#ffd9a8;border-color:var(--red2);background:rgba(120,26,10,.4);
  text-shadow:0 0 12px #ff6a3d;box-shadow:0 0 14px rgba(224,74,42,.35)}
#slotCount{font-size:12px;color:var(--dim);letter-spacing:.2em}
#bars{position:absolute;left:24px;bottom:26px;width:250px}
.barRow{display:flex;align-items:center;gap:10px;margin-top:8px}
.barName{font-size:12px;letter-spacing:.35em;color:var(--dim);width:34px}
.bar{flex:1;height:9px;background:rgba(0,0,0,.55);border:1px solid #3c2f26;overflow:hidden}
.bar.thin{height:5px}
.bar i{display:block;height:100%;width:100%;transition:width .18s;
  background:linear-gradient(90deg,#7c1608,#e04a2a 60%,#ff9d5c)}
.bar.thin i{background:linear-gradient(90deg,#274a35,#6fae7f)}
#topRight{position:absolute;top:22px;right:26px;text-align:right}
#timer{font-size:26px;font-weight:900;color:#e6d7ba;letter-spacing:.12em;
  text-shadow:0 0 18px rgba(217,160,91,.35)}
.hintKey{display:block;margin-top:6px;font-size:11px;color:var(--dim);letter-spacing:.18em}
#prompt{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);
  display:flex;gap:12px;align-items:center;padding:10px 20px;font-size:15px;color:#f0e4cd;
  background:rgba(8,7,10,.72);border:1px solid #4a382a;backdrop-filter:blur(2px)}
#prompt kbd{font-family:"Noto Serif SC";font-weight:900;color:#120a06;background:var(--amber);
  padding:2px 9px;border-radius:3px;box-shadow:0 0 12px rgba(217,160,91,.5)}
#toasts{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center;gap:8px;width:80%}
.toast{padding:9px 26px;font-size:15px;color:#f4e7cf;background:rgba(12,9,8,.82);
  border:1px solid #55402c;border-left:3px solid var(--red2);letter-spacing:.06em;
  animation:tIn .35s ease,tOut .6s ease 2.9s forwards;max-width:90%;text-align:center}
.toast.big{font-size:18px;font-weight:900;border-color:var(--red2);color:#ffd9a8;
  box-shadow:0 0 30px rgba(224,74,42,.25)}
@keyframes tIn{from{opacity:0;transform:translateY(14px)}to{opacity:1}}
@keyframes tOut{to{opacity:0;transform:translateY(-10px)}}
#xh{position:fixed;left:50%;top:50%;z-index:51;width:6px;height:6px;margin:-3px;
  border-radius:50%;background:rgba(240,228,205,.9);pointer-events:none;
  box-shadow:0 0 6px rgba(0,0,0,.9);transition:transform .15s,background .15s}
#xh.aim{transform:scale(2.1);background:var(--amber)}
#xh.banish{transform:scale(3);background:var(--red2);box-shadow:0 0 16px var(--red2)}

/* ---------- 残页 ---------- */
#noteOv{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(2,2,5,.66);backdrop-filter:blur(2px)}
#notePaper{width:min(500px,86vw);padding:38px 44px 26px;color:#d8c8a6;position:relative;
  background:linear-gradient(165deg,#191309,#100c08);border:1px solid #5a4632;
  box-shadow:0 0 0 6px rgba(20,15,9,.6),0 24px 70px rgba(0,0,0,.8),inset 0 0 60px rgba(0,0,0,.6);
  animation:paperIn .35s ease}
@keyframes paperIn{from{opacity:0;transform:translateY(20px) rotate(-.6deg)}to{opacity:1}}
#notePaper::before{content:"残";position:absolute;top:14px;right:16px;width:34px;height:34px;
  display:grid;place-items:center;font-family:"Ma Shan Zheng",cursive;fon.........完整代码请登录后点击上方下载按钮下载查看