双人答题密室游戏
by FlashLion45315 lines13.3 KB
<!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-box;font-family:system-ui,微软雅黑}
body{background:#151929;color:#fff;padding:24px;min-height:100vh}
/* 开场开场白样式 */
.story-box{
width:90%;
margin:0 auto 20px;
background:#2a3352;
padding:16px;
border-radius:12px;
border:1px solid #6288dd;
text-align:center;
line-height:1.7;
color:#e0ecff;
}
.story-title{
font-size:18px;
color:#ffdd77;
margin-bottom:8px;
}
/* 左上角模式切换 */
.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:20px auto;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;}
.player-box{flex:1;background:#20273f;border-radius:18px;padding:24px;min-height:440px;display:flex;flex-direction:column;align-items:center}
.player-name{font-size:22px;margin-bottom:10px}
.score-text{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-box{margin-top:auto;width:88%;display:flex;flex-direction:column;gap:14px}
.operate-box 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}
</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="story-box">
<div class="story-title">密室谜题·开局故事</div>
<div>你被困在一间神秘谜题密室，想要逃离这里，需要和同伴轮流出题猜谜。<br>答对谜题可以获得智豆，使用智豆购买食物、饮用水维持状态，也能购买道具干扰对手！<br>集齐足够智豆即可通关，祝你顺利逃出密室！</div>
</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">
<div class="player-box" id="pA">
<div class="player-name">玩家A</div>
<div class="score-text">智豆：<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-box">
<button onclick="sendInput()">发送</button>
</div>
</div>
<div class="player-box" id="pB">
<div class="player-name">玩家B</div>
<div class="score-text">智豆：<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-box">
<button onclick="sendInput()">发送</button>
</div>
</div>
</div>
<div class="ai-view" id="singlePanel">
<div class="player-name">你 VS AI闯关</div>
<div class="score-text">你的智豆：<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-bg"><div class="bar-thirst" id="barSingleThirst" style="width:100%"></div></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-box" 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>
<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 playerA = {score:0, hunger:10, thirst:10};
let playerB = {score:0, hunger:10, thirst:10};
let playerSingle = {score:0, hunger:10, thirst:10};
const aiQuestionLib = {
easy: ["两字，高大常绿树木","两字，天上白色云朵","两字，夏天解渴水果"],
mid: ["两字，夜晚发光群星","两字，山间流动淡水","两字，冬天白色冰晶"],
hard: ["两字，火山喷出岩浆","两字，地下开采矿石","两字，巨型气态行星"],
nightmare: ["两字，常年寒冷冻土","两字，云层间闪电","两字，远古巨型生物"]
};
// 切换双人/单人
function switchGameMode(mode){
gameMode = mode;
const doubleDom = document.getElementById("doublePanel");
const singleDom = document.getElementById("singlePanel");
const diffDom = document.getElementById("diffPanel");
doubleDom.style.display = mode === "double" ? "flex" : "none";
singleDom.style.display = mode === "single" ? "flex" : "none";
diffDom.style.display = mode === "single" ? "flex" : "none";
resetAllData();
if(mode === "double") randomTurn();
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已就绪，输入题目开始闯关";
}
// 随机出题人
function randomTurn(){
turnUser = Math.random() > 0.5 ? "A_ask" : "B_ask";
refreshTurnText();
updateTip();
}
// 刷新回合箭头
function refreshTurnText(){
document.getElementById("arrowA").innerText = turnUser === "A_ask" ? "⬅ 你出题" : "";
document.getElementById("arrowB").innerText = turnUser === "B_ask" ? "➡ 你出题" : "";
}
// 底部提示
function updateTip(){
const tipDom = document.getElementById("gameTip");
tipDom.innerText = turnUser === "A_ask" ? "玩家A出题，输入谜题点发送" : "玩家B出题，输入谜题点发送";
}
// 商店购买
function buyItem(who, type){
let target;
if(who === "A") target = playerA;
else if(who === "B") target = playerB;
else target = playerSingle;
if(target.score < COST_ITEM){
alert("智豆不足，购买需要0.5颗智豆！");
return;
}
target.score -= COST_ITEM;
if(type === "food"){
target.hunger = Math.min(target.hunger + ADD_STATUS, MAX_STATUS);
alert("购买食物成功，饥饿值+3");
}else if(type === "water"){
target.thirst = Math.min(target.thirst + ADD_STATUS, MAX_STATUS);
alert("购买饮用水成功，口渴值+3");
}else if(type === "prank" && gameMode === "double"){
alert("恶搞道具已获取，下一轮自动干扰对手答题");
}
refreshAllStatus();
}
// 刷新所有数值
function refreshAllStatus(){
document.getElementById("scoreA").innerText = playerA.score.toFixed(1);
document.getElementById("valAHunger").innerText = playerA.hunger;
document.getElementById("barAHunger").style.width = playerA.hunger*10 + "%";
document.getElementById("valAThirst").innerText = playerA.thirst;
document.getElementById("barAThirst").style.width = playerA.thirst*10 + "%";
document.getElementById("scoreB").innerText = playerB.score.toFixed(1);
document.getElementById("valBHunger").innerText = playerB.hunger;
document.getElementById("barBHunger").style.width = playerB.hunger*10 + "%";
document.getElementById("valBThirst").innerText = playerB.thirst;
document.getElementById("barBThirst").style.width = playerB.thirst*10 + "%";
document.getElementById("scoreSingle").innerText = playerSingle.score.toFixed(1);
document.getElementById("valSingleHunger").innerText = playerSingle.hunger;
document.getElementById("barSingleHunger").style.width = playerSingle.hunger*10 + "%";
document.getElementById("valSingleThirst").innerText = playerSingle.thirst;
document.getElementById("barSingleThirst").style.width = playerSingle.thirst*10 + "%";
}
// 发送题目/答案
function sendInput(){
const inputDom = document.getElementById("mainInput");
const text = inputDom.value.trim();
if(!text){
alert("请输入题目或答案！");
return;
}
document.getElementById("screenText").innerText = "当前谜题：" + text;
inputDom.value = "";
randomTurn();
}
// 重置全部数据
function resetAllData(){
playerA = {score:0, hunger:10, thirst:10};
playerB = {score:0, hunger:10, thirst:10};
playerSingle = {score:0, hunger:10, thirst:10};
document.getElementById("screenText").innerText = "暂无题目，等待玩家出题";
refreshTurnText();
refreshAllStatus();
}
// 页面加载完成自动初始化，所有按钮开局可用
window.addEventListener('DOMContentLoaded', ()=>{
refreshAllStatus();
randomTurn();
})
</script>
</body>
</html>
Game Source: 双人答题密室游戏
Creator: FlashLion45
Libraries: none
Complexity: complex (315 lines, 13.3 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" to link back to the original. Then publish at arcadelab.ai/publish.