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

three实现三维夜晚密室逃脱游戏代码

代码语言：html

所属分类：其他

代码描述：three实现三维夜晚密室逃脱游戏代码，你被困在一个黑暗的密室中，必须找到出口逃离！密室深处有不明生物游荡…发现它们时立刻关灯并停下！WASD 移动鼠标视角 Shift 跑 F 开/关手电筒。

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>洞穴探险</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{overflow:hidden;background:#000;font-family:'Microsoft YaHei',sans-serif}
        canvas{display:block}
        #blocker{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.92);display:flex;justify-content:center;align-items:center;z-index:100}
        #instructions{text-align:center;color:#fff;max-width:600px;padding:40px}
        #instructions h1{font-size:46px;margin-bottom:20px;color:#ff6600;text-shadow:0 0 30px rgba(255,100,0,0.6)}
        #instructions p{font-size:15px;line-height:1.8;color:#ccc;margin-bottom:8px}
        .key{display:inline-block;background:#333;border:1px solid #666;border-radius:4px;padding:2px 8px;margin:0 2px;color:#fff;font-weight:bold}
        #instructions button{margin-top:25px;padding:15px 50px;font-size:20px;background:#ff6600;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:0.3s}
        #instructions button:hover{background:#ff8833;transform:scale(1.05)}
        #hud{position:absolute;top:20px;left:20px;color:#fff;font-size:14px;z-index:50;pointer-events:none;text-shadow:0 1px 3px #000}
        #warning{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#ff0000;font-size:26px;font-weight:bold;z-index:50;pointer-events:none;opacity:0;text-shadow:0 0 20px rgba(255,0,0,0.8)}
        #minimap{position:absolute;top:20px;right:20px;width:150px;height:150px;border:2px solid rgba(255,255,255,0.25);border-radius:50%;z-index:50;pointer-events:none;background:rgba(0,0,0,0.5);overflow:hidden}
        #flashlightIcon{position:absolute;bottom:30px;right:30px;font-size:34px;z-index:50;pointer-events:none}
        #staminaBar{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:180px;height:4px;background:rgba(255,255,255,0.12);border-radius:2px;z-index:50;pointer-events:none}
        #staminaFill{width:100%;height:100%;background:#00aaff;border-radius:2px;transition:width 0.1s}
        .overlay{position:absolute;width:100%;height:100%;display:none;justify-content:center;align-items:center;z-index:200;flex-direction:column}
        #gameOver{background:rgba(80,0,0,0.93)}
        #gameOver h1{font-size:58px;color:#ff0000;text-shadow:0 0 30px rgba(255,0,0,0.8);margin-bottom:20px}
        #gameWin{background:rgba(0,40,0,0.93)}
        #gameWin h1{font-size:58px;color:#00ff00;text-shadow:0 0 30px rgba(0,255,0,0.8);margin-bottom:20px}
        .overlay p{color:#ccc;font-size:18px;margin-bottom:25px}
        .overlay button{padding:12px 45px;font-size:18px;color:#fff;border:none;border-radius:8px;cursor:pointer}
        #gameOver button{background:#cc0000}
        #gameWin button{background:#00aa00}
    </style>
</head>
<body>
<div id="blocker">
    <div id="instructions">
        <h1>🦇 洞穴探险</h1>
        <p>你被困在一个黑暗的天然溶洞中，必须找到出口逃离！</p>
        <p>洞穴深处有不明生物游荡…发现它们时<strong style="color:#ff4444">立刻关灯并停下</strong>！</p>
        <p><span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span> 移动 &nbsp; <span class="key">鼠标</span> 视角 &nbsp; <span class="key">Shift</span> 跑</p>
        <p.........完整代码请登录后点击上方下载按钮下载查看