js实现水漫地下通道逃生游戏代码-html代码-BFW代码库

js实现水漫地下通道逃生游戏代码

代码语言：html

所属分类：游戏

代码描述：js实现水漫地下通道逃生游戏代码暴雨导致地下通道即将被洪水淹没！在水漫上来之前找到出口逃离 5 层通道！

下面为部分代码预览，完整代码请点击下载或在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 {
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            font-family: 'Courier New', monospace;
        }
        #game { display: block; }
        #ui {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 15px;
            text-align: center;
            pointer-events: none;
            text-shadow: 0 0 8px rgba(0,150,255,0.8);
            background: rgba(0,0,0,0.6);
            padding: 6px 18px;
            border-radius: 6px;
            z-index: 20;
        }
        #overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(0,0,0,0.88);
            color: #fff;
            z-index: 30;
        }
        #overlay.hidden { display: none; }
        #overlay h1 { font-size: 44px; margin-bottom: 16px; }
        #overlay p { font-size: 17px; margin: 6px 0; color: #bbb; }
        #overlay .accent { color: #fff; }
        .btn {
            margin-top: 24px;
            padding: 14px 44px;
            font-size: 20px;
            background: #0af;
            color: #000;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-weight: bold;
            border-radius: 4px;
            transition: 0.2s;
        }
        .btn:hover { background: #5df; box-shadow: 0 0 20px #0af; }
        .title-start h1 { color: #0af; text-shadow: 0 0 30px #0af; }
        .title-dead h1 { color: #f44; text-shadow: 0 0 30px #f44; }
        .title-win h1 { color: #4f4; text-shadow: 0 0 30px #4f4; }
        #waterBar {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 70%;
            border: 2px solid #0af;
            background: rgba(0,0,20,0.6);
            z-index: 20;
            border-radius: 4px;
            overflow: hidden;
        }
        #waterFill {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 0%;
            background: linear-gradient(to top, #002244, #0077dd, #00ccff);
            transition: height 0.4s;
        }
        #waterLabel {
            position: absolute;
            right: 8px;
            top: calc(15% - 18px);
            color: #0af;
            font-size: 11px;
            z-index: 20;
        }
        #breathBar {
            position: absolute;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            width: 160px;
            height: 18px;
            border: 2px solid #08f;
            background: rgba(0,0,0,0.7);
            z-index: 20;
            border-radius: 10px;
            overflow: hidden;
            display: none;
        }
        #breathFill {
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, #f44, #fa0, #0af);
            transition: width 0.2s;
        }
        #breathLabel {
            position: absolute;
            width: 100%;
            text-align: c.........完整代码请登录后点击上方下载按钮下载查看