🎮ArcadeLab

顶级智斗 - 密室逃脱

by FlashLion45
294 lines13.0 KB
▶ Play
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>顶级智斗 - 密室逃脱</title>
<style>
*{margin:0;padding:0;box-sizing:border;font-family:system-ui,微软雅黑}
body{background:#151929;color:#fff;padding:24px;min-height:100vh}
/* 左上角模式切换 */
.top-left-switch{position:absolute;top:20px;left:24px;display:flex;gap:12px;z-index:99}
.mode-btn{padding:10px 16px;border:none;border-radius:9px;background:#3058a0;color:#fff;font-size:15px}
.mode-btn.active{background:#5294ff}
/* 单人难度侧边栏 */
.diff-sidebar{position:absolute;top:85px;right:20px;display:none;flex-direction:column;gap:10px;background:#20273f;padding:16px;border-radius:12px}
.diff-title{text-align:center;margin-bottom:8px;font-size:15px;color:#ffdd77}
.diff-btn{padding:9px 14px;border:none;border-radius:7px;background:#2c3855;color:#fff}
.diff-btn.active{background:#487acc}
/* 中央大屏题目区 */
.center-screen{width:85%;margin:80px auto 20px;background:#222b45;padding:16px;border-radius:14px;text-align:center}
.empty-tip{font-size:14px;color:#cccccc;line-height:1.6}
/* 双人分屏 */
.two-player{display:flex;gap:20px;width:85%;margin:0 auto;display:none}
.player-box{flex:1;background:#20273f;border-radius:18px;padding:24px;min-height:440px;display:flex;flex-direction:column;align-items:center}
.p-name{font-size:22px;margin-bottom:10px}
.score-num{font-size:28px;color:#ffdd77;margin-bottom:12px}
.turn-arrow{font-size:50px;color:#ff5577;height:60px;margin:6px 0}
/* 饥饿口渴状态栏 */
.status-wrap{width:90%;margin:10px 0}
.status-item{display:flex;justify-content:space-between;margin:6px 0;font-size:14px}
.bar-bg{width:70%;height:10px;background:#111;border-radius:5px;overflow:hidden}
.bar-hunger{height:100%;background:#ff9944}
.bar-thirst{height:100%;background:#44bbff}
/* 商店 */
.shop-box{width:90%;background:#27304e;padding:12px;border-radius:10px;margin:12px 0}
.shop-title{font-size:16px;text-align:center;margin-bottom:10px;color:#ffdd77}
.shop-btn{width:100%;padding:10px;margin:5px 0;border:none;border-radius:8px;background:#3862b5;color:#fff}
/* 操作按钮 */
.operate-btns{margin-top:auto;width:88%;display:flex;flex-direction:column;gap:14px}
.operate-btns button{padding:14px 0;border:none;border-radius:10px;background:#3862b5;color:#fff;font-size:17px}
/* 单人AI界面 */
.ai-view{width:85%;margin:0 auto;background:#20273f;border-radius:18px;padding:28px;min-height:460px;display:none;flex-direction:column;align-items:center}
/* 底部输入框 */
.input-area{width:80%;margin:30px auto 0}
#mainInput{width:100%;padding:14px;font-size:16px;border-radius:10px;background:#29324e;border:1px solid #445278;color:#fff}
.bottom-tip{text-align:center;margin-top:10px;font-size:13px;color:#aaa}
/* 开场弹窗 */
.start-dialog{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;z-index:999}
.dialog-content{background:#222b45;padding:32px;border-radius:16px;width:82%;max-width:620px}
.dialog-text{line-height:1.9;font-size:16px;margin-bottom:24px}
.confirm-btn{width:100%;padding:13px;border:none;border-radius:10px;background:#5294ff;color:#fff;font-size:16px}
</style>
</head>
<body>
<!-- 左上角模式切换 -->
<div class="top-left-switch">
    <button class="mode-btn active" onclick="switchGameMode('double')">双人同屏</button>
    <button class="mode-btn" onclick="switchGameMode('single')">单人对战AI</button>
</div>

<!-- 单人难度侧边栏 -->
<div class="diff-sidebar" id="diffPanel">
    <div class="diff-title">AI闯关难度</div>
    <button class="diff-btn" onclick="setDifficulty('easy')">简单</button>
    <button class="diff-btn" onclick="setDifficulty('mid')">中等</button>
    <button class="diff-btn" onclick="setDifficulty('hard')">困难</button>
    <button class="diff-btn" onclick="setDifficulty('nightmare')">噩梦</button>
</div>

<!-- 全局中央大屏 仅此处显示谜题 -->
<div class="center-screen">
    <div class="empty-tip" id="screenText">暂无谜题，等待玩家出题</div>
</div>

<!-- 双人游戏界面 -->
<div class="two-player" id="doublePanel">
    <!-- 玩家A -->
    <div class="player-box" id="pA">
        <div class="p-name">玩家A</div>
        <div class="score-num">智豆：<span id="scoreA">0</span></div>
        <div class="turn-arrow" id="arrowA"></div>
        <div class="status-wrap">
            <div class="status-item">
                <span>饥饿值</span>
                <div class="bar-bg"><div class="bar-hunger" id="barAHunger" style="width:100%"></div></div>
                <span id="valAHunger">10</span>
            </div>
            <div class="status-item">
                <span>口渴值</span>
                <div class="bar-bg"><div class="bar-thirst" id="barAThirst" style="width:100%"></div></div>
                <span id="valAThirst">10</span>
            </div>
        </div>
        <div class="shop-box">
            <div class="shop-title">道具商店（全部0.5智豆）</div>
            <button class="shop-btn" onclick="buyItem('A','food')">购买食物 +3饥饿值</button>
            <button class="shop-btn" onclick="buyItem('A','water')">购买饮用水 +3口渴值</button>
            <button class="shop-btn" onclick="buyItem('A','prank')">恶搞道具（干扰对手）</button>
        </div>
        <div class="operate-btns">
            <button onclick="sendInput()">发送</button>
        </div>
    </div>
    <!-- 玩家B -->
    <div class="player-box" id="pB">
        <div class="p-name">玩家B</div>
        <div class="score-num">智豆：<span id="scoreB">0</span></div>
        <div class="turn-arrow" id="arrowB"></div>
        <div class="status-wrap">
            <div class="status-item">
                <span>饥饿值</span>
                <div class="bar-bg"><div class="bar-hunger" id="barBHunger" style="width:100%"></div></div>
                <span id="valBHunger">10</span>
            </div>
            <div class="status-item">
                <span>口渴值</span>
                <div class="bar-bg"><div class="bar-thirst" id="barBThirst" style="width:100%"></div></div>
                <span id="valBThirst">10</span>
            </div>
        </div>
        <div class="shop-box">
            <div class="shop-title">道具商店（全部0.5智豆）</div>
            <button class="shop-btn" onclick="buyItem('B','food')">购买食物 +3饥饿值</button>
            <button class="shop-btn" onclick="buyItem('B','water')">购买饮用水 +3口渴值</button>
            <button class="shop-btn" onclick="buyItem('B','prank')">恶搞道具（干扰对手）</button>
        </div>
        <div class="operate-btns">
            <button onclick="sendInput()">发送</button>
        </div>
    </div>
</div>

<!-- 单人AI闯关界面 -->
<div class="ai-view" id="singlePanel">
    <div class="p-name">你 VS AI闯关</div>
    <div class="score-num">你的智豆：<span id="scoreSingle">0</span></div>
    <div class="status-wrap" style="width:90%">
        <div class="status-item">
            <span>饥饿值</span>
            <div class="bar-bg"><div class="bar-hunger" id="barSingleHunger" style="width:100%"></div></div>
            <span id="valSingleHunger">10</span>
        </div>
        <div class="status-item">
            <span>口渴值</span>
            <div class="bar-thirst" id="barSingleThirst" style="width:100%"></div>
            <span id="valSingleThirst">10</span>
        </div>
    </div>
    <div class="shop-box" style="width:90%">
        <div class="shop-title">道具商店（0.5智豆）</div>
        <button class="shop-btn" onclick="buyItem('single','food')">购买食物 +3饥饿值</button>
        <button class="shop-btn" onclick="buyItem('single','water')">购买饮用水 +3口渴值</button>
    </div>
    <div class="operate-btns" style="width:88%">
        <button onclick="sendInput()">提交答案</button>
    </div>
</div>

<!-- 底部输入框 -->
<div class="input-area">
    <input id="mainInput" placeholder="出题/输入你的答案">
    <div class="bottom-tip" id="gameTip">游戏加载完成</div>
</div>

<!-- 开场剧情弹窗 -->
<div class="start-dialog" id="startPopup">
    <div class="dialog-content">
        <div class="dialog-text">
            你们两人被困在了一间密室之中！<br>
            规则1：对战答题收集10颗智豆即可成功逃出密室。<br>
            规则2：成功逃出密室的人，必须进入单人模式依次挑战：简单、中等、困难、噩梦四档AI。<br>
            规则3：如果全部AI挑战失败，你会被逃出密室的对手嘲讽，判定彻底输掉本局游戏。<br>
            规则4：答题会消耗饥饿值与口渴值，两项数值全部清零直接失败；商店物资统一0.5智豆。
        </div>
        <button class="confirm-btn" onclick="closeStartDialog()">我明白了，开始游戏</button>
    </div>
</div>

<script>
// ===================== 游戏全局常量 =====================
const COST_ITEM = 0.5;
const ADD_STATUS = 3;
const MAX_STATUS = 10;
const ESCAPE_SCORE = 10;

// 游戏基础数据
let gameMode = "double";
let aiDiff = "easy";
let currentQuestion = "";
let turnUser = "";
let aiChallengeStage = 0;

// 双人玩家数据
let playerA = {score:0, hunger:10, thirst:10};
let playerB = {score:0, hunger:10, thirst:10};
// 单人玩家数据
let playerSingle = {score:0, hunger:10, thirst:10};

// AI谜题库
const aiQuestionLib = {
    easy: ["两字，高大常绿树木", "两字，天上白色云团", "两字，夏日解渴鲜果"],
    mid: ["两字，夜晚成群发光星体", "两字，山间流动淡水", "两字，冬天白色冰晶"],
    hard: ["两字，火山喷出高温岩浆", "两字，地下开采金属矿石", "两字，巨型气态行星"],
    nightmare: ["两字，常年极寒冻土区域", "两字，云层放电强光", "两字，远古巨型灭绝爬行动物"]
}

// 关闭开场弹窗
function closeStartDialog(){
    document.getElementById("startPopup").style.display = "none";
}

// 切换双人/单人模式
function switchGameMode(mode){
    gameMode = mode;
    document.getElementById("doublePanel").style.display = mode === "double" ? "flex" : "none";
    document.getElementById("singlePanel").style.display = mode === "single" ? "flex" : "none";
    document.getElementById("diffPanel").style.display = mode === "single" ? "flex" : "none";
    resetAllData();
    aiChallengeStage = 0;
    if(mode === "double"){
        randomFirstTurn();
    }else{
        document.getElementById("gameTip").innerText = "请先选择AI闯关难度";
    }
}

// 设置AI难度
function setDifficulty(diff){
    aiDiff = diff;
    document.querySelectorAll(".diff-btn").forEach(btn=>btn.classList.remove("active"));
    event.target.classList.add("active");
    document.getElementById("gameTip").innerText = "AI就绪，AI会主动出题，你来回答闯关";
}

// 双人随机首位出题人
function randomFirstTurn(){
    turnUser = Math.random() > 0.5 ? "A_ask" : "B_ask";
    refreshTurnArrow();
    updateBottomTip();
}

// 刷新回合箭头标识
function refreshTurnArrow(){
    document.getElementById("arrowA").innerText = "";
    document.getElementById("arrowB").innerText = "";
    if(turnUser === "A_ask") document.getElementById("arrowA").innerText = "⬅ 你出题";
    if(turnUser === "B_ans") document.getElementById("arrowB").innerText = "➡ 你答题";
    if(turnUser === "B_ask") document.getElementById("arrowB").innerText = "➡ 你出题";
    if(turnUser === "A_ans") document.getElementById("arrowA").innerText = "⬅ 你答题";
}

// 更新底部提示文字
function updateBottomTip(){
    const tipDom = document.getElementById("gameTip");
    if(turnUser === "A_ask") tipDom.innerText = "玩家A出题，输入谜题点发送";
    if(turnUser === "B_ans") tipDom.innerText = "玩家B答题，输入答案点发送";
    if(turnUser === "B_ask") tipDom.innerText = "玩家B出题，输入谜题点发送";
    if(turnUser === "A_ans") tipDom.innerText = "玩家A答题，输入答案点发送";
}

// 商店购买道具
function buyItem(who, type){
    let target;
    if(who === "A") target = playerA;
    if(who === "B") target = playerB;
    if(who === "single") target = playerSingle;

    if(target.score < COST_ITEM){
        alert(`智豆不足！购买需要${COST_ITEM}颗智豆`);
        return;
    }
    target.score -= COST_ITEM;

    if(type === "food"){
        target.hunger = Math.min(target.hunger + ADD_STATUS, MAX_STATUS);
        alert("购买食物成功，饥饿值+3");
    }
    if(type === "water"){
        target.thirst = Math.min(target.thirst + ADD_STATUS, MAX_STATUS);
        alert("购买饮用水成功，口渴值+3");
    }
    if(type === "prank" && gameMode === "double"){
        alert("恶搞道具已获得，下一轮自动干扰对手答题");
    }
    refreshAllStatus();
}

// 刷新所有数值与进度条
function refreshAllStatus(){
    // 玩家A
    document.getElementById("scoreA").innerText = playerA.score;
    document.getElementById("valAHunger").innerText = playerA.hunger;
    document.getElementById("barAHunger

Game Source: 顶级智斗 - 密室逃脱

Creator: FlashLion45

Libraries: none

Complexity: complex (294 lines, 13.0 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: game-flashlion45-msl3hr08" to link back to the original. Then publish at arcadelab.ai/publish.