💣 拆弹三人组 - 10关挑战
by FlashPhoenix67336 lines17.7 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>💣 拆弹三人组 - 10关挑战</title>
<style>
*{margin:0; padding:0; box-sizing:border-box; font-family:'Microsoft YaHei',sans-serif;}
body{background:#1a1a2e; color:#fff; min-height:100vh; padding:15px;}
.container{max-width:900px; margin:0 auto;}
h1{text-align:center; color:#ff6b6b; margin-bottom:5px; font-size:1.8rem;}
.level-info{text-align:center; color:#ffd60a; font-size:1.2rem; margin-bottom:20px;}
.progress-bar{height:8px; background:#333; border-radius:4px; margin-bottom:20px; overflow:hidden;}
.progress-fill{height:100%; background:linear-gradient(90deg,#4cc9f0,#4361ee); width:0%; transition:0.5s;}
.bomb{width:180px; height:180px; margin:0 auto 25px; background:linear-gradient(145deg,#e63946,#d62828); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:bold; box-shadow:0 0 40px #ff000080, inset 0 -10px 20px #00000040; position:relative; transition:all 0.3s;}
.bomb.warning{background:linear-gradient(145deg,#f77f00,#e85d04); box-shadow:0 0 40px #ff950080; animation:pulse 0.5s infinite;}
.bomb.danger{background:linear-gradient(145deg,#ff0000,#aa0000); box-shadow:0 0 60px #ff0000; animation:shake 0.2s infinite;}
.bomb.defused{background:linear-gradient(145deg,#2a9d8f,#264653); box-shadow:0 0 40px #00ff8880;}
@keyframes pulse{0%{transform:scale(1);} 50%{transform:scale(1.05);} 100%{transform:scale(1);}}
@keyframes shake{0%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} 100%{transform:translateX(0);}}
.timer{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.roles{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:15px; margin-bottom:20px;}
.role-card{background:#16213e; border-radius:12px; padding:15px; border:2px solid transparent; transition:0.3s;}
.role-card h3{font-size:1.1rem; margin-bottom:8px; display:flex; align-items:center; gap:6px;}
.desc{color:#aaa; font-size:0.85rem; margin-bottom:12px; line-height:1.5;}
.hint-box{background:#0f3460; border-radius:6px; padding:10px; font-family:monospace; font-size:0.95rem; line-height:1.6; white-space:pre-wrap;}
#blind-hint{color:#ffd60a;}
#deaf-hint{color:#4cc9f0;}
.btn{width:100%; padding:10px; border:none; border-radius:8px; font-size:1rem; font-weight:bold; cursor:pointer; transition:0.3s;}
.btn-primary{background:#4cc9f0; color:#000;}
.btn-primary:hover{background:#00b4d8;}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.wire-area{background:#0f3460; border-radius:10px; padding:20px; margin-bottom:20px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; min-height:80px;}
.wire{width:70px; height:45px; border-radius:6px; border:none; font-weight:bold; cursor:pointer; transition:0.2s; font-size:1.1rem;}
.wire:hover{transform:scale(1.05);}
.wire.selected{outline:3px solid white; box-shadow:0 0 10px #fff;}
.log-box{background:#0f3460; border-radius:10px; padding:12px; height:120px; overflow-y:auto; font-size:0.85rem; line-height:1.6; color:#ccc; margin-bottom:20px;}
.log-box p{margin:4px 0;}
.win{color:#00ff88;}
.lose{color:#ff4444;}
.info{color:#88ccff;}
.start-btn, .next-btn{display:block; width:250px; margin:15px auto; padding:15px; font-size:1.1rem; background:linear-gradient(90deg,#4361ee,#7209b7); color:#fff; border:none; border-radius:12px; cursor:pointer; font-weight:bold; transition:0.3s;}
.start-btn:hover, .next-btn:hover{transform:scale(1.05);}
.next-btn{background:linear-gradient(90deg,#2a9d8f,#264653); display:none;}
.hidden{display:none !important;}
.rule-box{background:#16213e; border-radius:12px; padding:20px; margin-bottom:20px; line-height:1.8;}
.rule-box h3{color:#ffd60a; margin-bottom:12px;}
.btn-group{display:flex; gap:10px; justify-content:center; margin-top:10px;}
.btn-secondary{background:#333; color:#fff; width:auto; padding:10px 20px;}
</style>
</head>
<body>
<div class="container">
<h1>💣 绝境拆弹 · 三人协作</h1>
<!-- 开始界面 -->
<div id="start-screen">
<div class="rule-box">
<h3>📜 游戏规则</h3>
<p><strong>👁️🗨️ 瞎子：</strong>能看到数字/密码/颜色线索 → 只能口头描述，<strong>看不到电线和按钮</strong></p>
<p><strong>👂 耳聋：</strong>能看到电线颜色和顺序 → 指挥剪线序号，<strong>看不到文字提示</strong></p>
<p><strong>🗣️ 哑巴：</strong>能看到全部、负责点击+确认 → <strong>全程不能说话/打字</strong>，只用表情/手势回应</p>
<p style="margin-top:15px; color:#ff6b6b;">⚠️ 三人必须严格遵守角色限制！靠沟通协作完成拆弹！</p>
<p style="margin-top:10px; color:#4cc9f0;">🎯 共10关，难度逐步提升，成功解锁下一关！</p>
</div>
<button class="start-btn" onclick="startGame()">🚀 开始第1关</button>
</div>
<!-- 游戏界面 -->
<div id="game-screen" class="hidden">
<div class="level-info">
<span id="level-text">第 1 关 / 10</span>
<span style="margin-left:20px;" id="level-diff">难度：简单</span>
</div>
<div class="progress-bar"><div class="progress-fill" id="progress-bar"></div></div>
<div class="bomb" id="bomb"><div class="timer" id="timer">60</div></div>
<div class="wire-area" id="wire-area"></div>
<div class="roles">
<div class="role-card">
<h3>👁️🗨️ 瞎子</h3>
<p class="desc">看得到提示，看不到电线</p>
<div class="hint-box" id="blind-hint">— —</div>
</div>
<div class="role-card">
<h3>👂 耳聋</h3>
<p class="desc">看得到电线，看不到提示</p>
<div class="hint-box" id="deaf-hint">— —</div>
</div>
<div class="role-card">
<h3>🗣️ 哑巴</h3>
<p class="desc">能操作，不能说话打字</p>
<button class="btn btn-primary" id="mute-confirm" onclick="muteAction()" disabled>✓ 确认剪线</button>
</div>
</div>
<div class="log-box" id="log-box"></div>
<div class="btn-group">
<button class="btn btn-secondary" onclick="restartLevel()">🔄 重试本关</button>
<button class="btn btn-secondary" onclick="backToMenu()">🏠 返回菜单</button>
</div>
<button class="next-btn" id="next-btn" onclick="nextLevel()">➡️ 进入下一关</button>
</div>
<!-- 通关界面 -->
<div id="win-screen" class="hidden">
<div class="rule-box" style="text-align:center; padding:40px;">
<h2 style="color:#00ff88; font-size:2rem; margin-bottom:20px;">🎉 恭喜全部通关！</h2>
<p style="font-size:1.2rem; margin-bottom:20px;">你们的配合完美无间！炸弹危机全部解除！</p>
<p style="color:#888;">瞎子、哑巴、耳聋 — 没有你们的协作，不可能成功！</p>
</div>
<button class="start-btn" onclick="backToMenu()">🔁 重新挑战</button>
</div>
</div>
<script>
const COLORS = {
red: '#ff4444', blue: '#0099ff', yellow: '#ffcc00',
green: '#00cc66', purple: '#9933ff', orange: '#ff8800'
};
const COLOR_NAMES = {
red: '红色', blue: '蓝色', yellow: '黄色',
green: '绿色', purple: '紫色', orange: '橙色'
};
// 关卡配置
const LEVELS = [
{ wires: 4, time: 60, difficulty: '简单' },
{ wires: 4, time: 55, difficulty: '简单' },
{ wires: 4, time: 50, difficulty: '简单' },
{ wires: 5, time: 50, difficulty: '普通' },
{ wires: 5, time: 45, difficulty: '普通' },
{ wires: 5, time: 40, difficulty: '普通' },
{ wires: 6, time: 40, difficulty: '困难' },
{ wires: 6, time: 35, difficulty: '困难' },
{ wires: 6, time: 30, difficulty: '困难' },
{ wires: 6, time: 30, difficulty: '地狱' }
];
let gameState = {
level: 1,
timeLeft: 60,
timerInterval: null,
correctWire: null,
wires: [],
isRunning: false,
selectedWire: null
};
function startGame() {
document.getElementById('start-screen').classList.add('hidden');
document.getElementById('game-screen').classList.remove('hidden');
document.getElementById('win-screen').classList.add('hidden');
gameState.level = 1;
loadLevel();
}
function loadLevel() {
const cfg = LEVELS[gameState.level - 1];
if (gameState.timerInterval) clearInterval(gameState.timerInterval);
gameState.timeLeft = cfg.time;
gameState.isRunning = true;
gameState.selectedWire = null;
// 更新UI
document.getElementById('level-text').textContent = `第 ${gameState.level} 关 / 10`;
document.getElementById('level-diff').textContent = `难度：${cfg.difficulty}`;
document.getElementById('progress-bar').style.width = `${(gameState.level / 10) * 100}%`;
// 重置炸弹
const bomb = document.getElementById('bomb');
bomb.classList.remove('warning', 'danger', 'defused');
document.getElementById('timer').textContent = gameState.timeLeft;
// 生成电线
generateWires(cfg.wires);
// 生成提示
generateHints();
// 重置按钮
document.getElementById('mute-confirm').disabled = true;
document.getElementById('next-btn').style.display = 'none';
// 日志
document.getElementById('log-box').innerHTML = `<p class="info">🎮 第${gameState.level}关开始！难度：${cfg.difficulty}</p>`;
// 开始计时
startTimer();
}
function generateWires(count) {
const wireArea = document.getElementById('wire-area');
wireArea.innerHTML = '';
const colorKeys = Object.keys(COLORS);
gameState.wires = [];
// 随机选颜色并打乱
const selectedColors = [...colorKeys].sort(() => Math.random() - 0.5).slice(0, count);
gameState.correctWire = Math.floor(Math.random() * count);
selectedColors.forEach((color, idx) => {
gameState.wires.push({ color, idx, isCorrect: idx === gameState.correctWire });
const btn = document.createElement('button');
btn.className = 'wire';
btn.style.backgroundColor = COLORS[color];
btn.textContent = idx + 1;
btn.onclick = () => selectWire(idx);
wireArea.appendChild(btn);
});
}
function generateHints() {
const idx = gameState.correctWire;
const total = gameState.wires.length;
const targetColor = COLOR_NAMES[gameState.wires[idx].color];
let blindHint = '', deafHint = '';
// 根据关卡生成不同复杂度提示
if (gameState.level <= 3) {
// 简单：直接提示序号或颜色
const tips = [
`📍 正确序号：第 ${idx + 1} 根\n🔢 数字提示：${idx + 1}`,
`🎨 正确颜色：${targetColor}\n排除：不是第 ${(idx + 1) % total + 1}、${(idx + 2) % total + 1} 根`,
`🔢 密码最后一位 = ${idx + 1}\n答案就是它！`
];
blindHint = tips[Math.floor(Math.random() * tips.length)];
} else if (gameState.level <= 6) {
// 中等：需简单计算
const n1 = Math.floor(Math.random() * 5) + 1;
const n2 = idx + 1;
const exclude = gameState.wires.filter((_, i) => i !== idx).slice(0,2).map(w => COLOR_NAMES[w.color]).join('、');
blindHint = `🧮 计算：${n1} × ${n2} ÷ ${n1} = ?\n结果就是序号！\n⚠️ 排除：${exclude}`;
} else if (gameState.level <= 9) {
// 困难：双重条件+干扰
const parity = (idx + 1) % 2 === 0 ? '偶数' : '奇数';
const sum = idx + 5;
blindHint = `🔐 条件1：序号是 ${parity}\n🔐 条件2：序号 + 5 = ${sum}\n🎨 颜色：${targetColor}`;
} else {
// 地狱：三重线索+干扰
const parity = (idx + 1) % 2 === 0 ? '偶数' : '奇数';
const calc = (idx + 1) * 2 - 3;
const exclude = gameState.wires.filter((_, i) => i !== idx).map(w => COLOR_NAMES[w.color]).join('、');
blindHint = `☠️ 三重线索：\n1️⃣ 序号是 ${parity}\n2️⃣ (x+3)×2−7 = ${calc} → x=?\n3️⃣ 不是：${exclude}`;
}
// 耳聋：仅显示电线顺序，无文字线索
deafHint = gameState.wires.map((w, i) => `${i+1}.${COLOR_NAMES[w.color]}`).join('\n');
document.getElementById('blind-hint').textContent = blindHint;
document.getElementById('deaf-hint').textContent = deafHint;
}
function selectWire(idx) {
if (!gameState.isRunning) return;
gameState.selectedWire = idx;
document.querySelectorAll('.wire').forEach((b, i) => {
b.classList.toggle('selected', i === idx);
});
document.getElementById('mute-confirm').disabled = false;
addLog(`📍 选中第 ${idx + 1} 号电线，等待确认...`, 'info');
}
function muteAction() {
if (!gameState.isRunning || gameState.selectedWire === null) return;
gameState.isRunning = false;
document.getElementById('mute-confirm').disabled = true;
if (gameState.selectedWire === gameState.correctWire) {
document.getElementById('bomb').classList.add('defused');
addLog(`✅ 第${gameState.level}关通过！炸弹成功拆除！🎉`, 'win');
clearInterval(gameState.timerInterval);
if (gameState.level < 10) {
document.getElementById('next-btn').style.display = 'block';
} else {
setTimeout(() => {
document.getElementById('game-screen').classList.add('hidden');
document.getElementById('win-screen').classList.remove('hidden');
}, 1500);
}
} else {
document.getElementById('bomb').classList.add('danger');
addLog('💥 剪错了！炸弹爆炸！任务失败！', 'lose');
clearInterval(gameState.timerInterval);
}
}
function startTimer() {
gameState.timerInterval = setInterval(() => {
gameState.timeLeft--;
document.getElementById('timer').textContent = gameState.timeLeft;
if (gameState.timeLeft <= 20) document.getElementById('bomb').classList.add('warning');
if (gameState.timeLeft <= 10) document.getElementById('bomb').classList.add('danger');
if (gameState.timeLeft <= 0) {
gameState.isRunning = false;
clearInterval(gameState.timerInterval);
addLog('⏰ 时间到！炸弹爆炸，任务失败！', 'lose');
document.getElementById('bomb').classList.add('danger');
}
}, 1000);
}
function addLog(text, type='info') {
const box = document.getElementById('log-box');
const p = document.createElement('p');
p.className = type;
p.textContent = text;
box.appendChild(p);
box.scrollTop = box.scrollHeight;
}
function nextLevel() {
gameState.level++;
loadLevel();
}
function restartLevel() {
if (gameState.timerInterval) clearInterval(gameState.timerInterval);
loadLevel();
}
function backToMenu() {
if (gameState.timerInterval) clearInterval(gameState.timerInterval);
document.getElementById('start-screen').classList.remove('hidden');
document.getElementById('game-screen').classList.add('hidden');
document.getElementById('win-screen').classList.add('hidden');
}
</script>
</body>
</html>Game Source: 💣 拆弹三人组 - 10关挑战
Creator: FlashPhoenix67
Libraries: none
Complexity: complex (336 lines, 17.7 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: 10-flashphoenix67" to link back to the original. Then publish at arcadelab.ai/publish.