three实现三维夜晚密室逃脱游戏代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维夜晚密室逃脱游戏代码，f键打开关闭手电筒，e键互动拾取东西，如果把小鬼放出来了，就要关灯，否则就会被吃掉，找到献祭台房间点燃三个蜡烛逃离

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>暗影密室 - 恐怖逃脱</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{overflow:hidden;background:#000;font-family:'Microsoft YaHei',sans-serif}
        #blocker{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:100;cursor:pointer}
        #menu{text-align:center;max-width:550px;padding:40px}
        #menu h1{font-size:48px;color:#cc0000;margin-bottom:10px;text-shadow:0 0 30px rgba(255,0,0,0.6);letter-spacing:6px}
        #menu .sub{color:#666;font-size:13px;margin-bottom:25px;letter-spacing:3px}
        #menu p{color:#aaa;font-size:14px;line-height:2.2}
        .key{color:#ff6;font-weight:bold}
        .warn{color:#f33;font-size:17px;margin-top:20px;font-weight:bold}
        .start{color:#555;font-size:13px;margin-top:30px;animation:pulse 2s infinite}
        @keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
        #crosshair{position:fixed;top:50%;left:50%;width:4px;height:4px;background:rgba(255,255,255,0.8);border-radius:50%;transform:translate(-50%,-50%);z-index:50;pointer-events:none;box-shadow:0 0 4px rgba(255,255,255,0.3);display:none}
        #hud{position:fixed;top:0;left:0;width:100%;padding:15px 25px;z-index:50;pointer-events:none;display:none}
        #hud-top{display:flex;justify-content:space-between;align-items:flex-start}
        #flash-status{color:#0f0;font-size:14px;text-shadow:0 0 8px currentColor}
        #inventory{display:flex;gap:6px}
        .inv-slot{width:46px;height:46px;border:1px solid #333;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:4px;position:relative}
        .inv-slot.has-item{border-color:#f80;box-shadow:0 0 8px rgba(255,136,0,0.3)}
        .inv-slot.active-slot{border-color:#fff}
        .inv-label{position:absolute;bottom:1px;font-size:8px;color:#888}
        #interact-hint{position:fixed;bottom:22%;left:50%;transform:translateX(-50%);color:#ff0;font-size:16px;font-weight:bold;z-index:50;display:none;pointer-events:none;text-shadow:0 0 10px rgba(255,255,0,0.8);text-align:center;background:rgba(0,0,0,0.6);padding:10px 20px;border-radius:6px;letter-spacing:1px}
        #msg-box{position:fixed;top:18%;left:50%;transform:translateX(-50%);color:#fff;font-size:18px;z-index:55;display:none;pointer-events:none;text-shadow:0 0 10px rgba(255,255,255,0.4);text-align:center;padding:15px 25px;background:rgba(0,0,0,0.8);border-radius:8px;max-width:500px;white-space:pre-line;line-height:1.8}
        #scare-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:80;display:none;pointer-events:none}
        #end-screen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:200;display:none;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}
        #end-screen h1{font-size:55px;letter-spacing:8px;margin-bottom:15px}
        #end-screen p{font-size:15px;margin-top:8px}
        #end-screen .restart{color:#555;font-size:12px;margin-top:30px}
    </style>
    <script type="importmap">
    {"imports":{"three":"https://unpkg.com/three@0.160.0/build/three.module.js","three/addons/":"https://unpkg.com/three@0.160.0/examples/jsm/"}}
    </script>
</head>
<body>
<div id="crosshair"></div>
<div id="blocker">
    <div id="menu">
        <h1>暗影密室</h1>
        <div class="sub">SHADOW CHAMBER</div>
        <p><span class="key">[WASD]</span> 移动 · <span class="key">[鼠标]</span> 观察</p>
        <p><span class="key">[F]</span> 手电筒 · <span class="key">[E]</span> 互动拾取</p>
        <p class="warn">⚠ 它在暗处注视着你 — 关灯才能活命 ⚠</p>
        <p class="start">[ 点击开始 ]</p>
    </div>
</div>
<div id="hud">
    <div id="hud-top">
        <div id="flash-status">🔦 开启</div>
        &.........完整代码请登录后点击上方下载按钮下载查看