克苏鲁之门 · 命运抉择

by PlasmaWave91
218 lines6.8 KB
<!DOCTYPE html>
<html lang="zh-CN">
<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;
            font-family: "微软雅黑", serif;
        }

        body {
            /* 你提供的克苏鲁背景图 */
            background: #0a0a0a url("https://picsum.photos/id/196/1920/1080") no-repeat center center;
            background-size: cover;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #c9c9c9;
            overflow: hidden;
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.75);
            z-index: -1;
        }

        .game-title {
            font-size: 42px;
            color: #992222;
            text-shadow: 0 0 15px #661111;
            margin-bottom: 20px;
            letter-spacing: 4px;
        }

        .game-tips {
            font-size: 18px;
            margin-bottom: 40px;
            text-align: center;
            line-height: 1.8;
        }

        .door-box {
            display: flex;
            gap: 50px;
            margin: 30px 0;
        }

        /* 西欧恶魔风格门 */
        .door {
            width: 180px;
            height: 320px;
            background: #1a0a0a url("https://picsum.photos/id/237/300/500") no-repeat center;
            background-size: cover;
            border: 4px solid #662222;
            border-radius: 8px 8px 0 0;
            box-shadow: 0 0 25px #441111, inset 0 0 40px rgba(0,0,0,0.9);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .door:hover {
            transform: scale(1.05);
            box-shadow: 0 0 35px #aa3333;
        }

        .door::after {
            content: "?";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 60px;
            color: #ddd;
            text-shadow: 0 0 10px #000;
        }

        .status {
            font-size: 20px;
            margin-top: 20px;
            color: #dd4444;
            text-shadow: 0 0 8px #220000;
        }

        .win-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 999;
        }

        .win-text {
            font-size: 36px;
            color: #ffaa22;
            text-shadow: 0 0 20px #ff6600;
            text-align: center;
            padding: 40px;
            border: 2px solid #ff8800;
            border-radius: 12px;
            background: rgba(20,10,0,0.8);
        }
    </style>
</head>
<body>
    <!-- BGM：Immortal 纯音乐 -->
    <audio id="bgm" src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3" loop>
    <!-- 点击音效 -->
    <audio id="clickSound" src="https://www.soundjay.com/mechanical/door-open-1.mp3">

    <div class="mask"></div>
    <h1 class="game-title">克苏鲁之门</h1>
    <div class="game-tips">
        规则：三扇门中仅有一扇藏有宝藏<br>
        总计选择机会：<span id="totalCount">100</span> 次 &nbsp;&nbsp; 已成功通关：<span id="successCount">0</span>/3
    </div>

    <div class="door-box">
        <div class="door" data-index="0"></div>
        <div class="door" data-index="1"></div>
        <div class="door" data-index="2"></div>
    </div>

    <div class="status" id="tipText">请选择一扇门开启命运</div>

    <div class="win-modal" id="winModal">
        <div class="win-text">恭喜你，命定之人，你通过了幸运之神的考验！</div>
    </div>

    <script>
        let remainTimes = 100;
        let successNum = 0;
        let treasureIndex = 0;

        const doors = document.querySelectorAll('.door');
        const totalDom = document.getElementById('totalCount');
        const successDom = document.getElementById('successCount');
        const tipDom = document.getElementById('tipText');
        const winModal = document.getElementById('winModal');
        const bgm = document.getElementById('bgm');
        const clickSound = document.getElementById('clickSound');

        // 1. 把背景换成你提供的克苏鲁图片
        document.body.style.backgroundImage = `url('https://picsum.photos/id/196/1920/1080')`;

        // 2. 门换成西欧恶魔形象
        const demonDoorImg = "https://picsum.photos/id/237/300/500";
        doors.forEach(d => d.style.backgroundImage = `url(${demonDoorImg})`);

        function resetTreasure() {
            treasureIndex = Math.floor(Math.random() * 3);
        }

        resetTreasure();

        // 首次点击后自动播放BGM（浏览器限制）
        document.addEventListener('click', () => {
            if (bgm.paused) {
                bgm.volume = 0.25;
                bgm.play();
            }
        }, { once: true });

        doors.forEach(door => {
            door.addEventListener('click', function() {
                if (remainTimes <= 0 || successNum >= 3) return;

                // 播放点击音效
                clickSound.currentTime = 0;
                clickSound.play();

                let clickIndex = parseInt(this.dataset.index);
                remainTimes--;
                totalDom.innerText = remainTimes;

                if (clickIndex === treasureIndex) {
                    successNum++;
                    successDom.innerText = successNum;
                    tipDom.innerText = `🎉 选中宝藏！已成功 ${successNum} 次`;

                    if (successNum >= 3) {
                        setTimeout(() => {
                            winModal.style.display = 'flex';
                            bgm.pause();
                        }, 600);
                        return;
                    }
                } else {
                    tipDom.innerText = `❌ 一无所获，门的位置已打乱`;
                }

                resetTreasure();

                if (remainTimes <= 0) {
                    tipDom.innerText = "机会已用尽，游戏结束！";
                    bgm.pause();
                }
            })
        })
    </script>
</body>
</html>
Game Source: 克苏鲁之门 · 命运抉择

Creator: PlasmaWave91
Libraries: none
Complexity: complex (218 lines, 6.8 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: -plasmawave91" to link back to the original. Then publish at arcadelab.ai/publish.