逃离面包店

最新推荐文章于 2025-12-09 11:28:31 发布

原创最新推荐文章于 2025-12-09 11:28:31 发布 · 327 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逃离面包店的恐怖女孩</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
dark: '#121212',
blood: '#990000',
flour: '#F5F5DC',
dough: '#D2B48C',
shadow: '#333333',
fear: '#660066'
},
fontFamily: {
horror: ['"Creepster"', 'cursive'],
main: ['"Special Elite"', 'monospace']
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.text-shadow-lg {
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-fade-in {
animation: fadeIn 1s ease-in-out forwards;
}
.animate-fade-out {
animation: fadeOut 1s ease-in-out forwards;
}
.animate-shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
.animate-appear {
animation: appear 0.5s ease-in-out forwards;
}
.animate-disappear {
animation: disappear 0.5s ease-in-out forwards;
}
.animate-spin-slow {
animation: spin 8s linear infinite;
}
.backdrop-blur-sm {
backdrop-filter: blur(2px);
}
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}

@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(4px, 0, 0); }
}

@keyframes appear {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}

@keyframes disappear {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.8); }
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Creepster&family=Special+Elite&display=swap" rel="stylesheet">
</head>
<body class="bg-dark text-flour min-h-screen overflow-x-hidden font-main">

<audio id="backgroundMusic" loop>
<source src="https://assets.codepen.io/21542/howler-demo-soundtrack.mp3" type="audio/mpeg">
</audio>
<audio id="jumpScareSound">
<source src="https://assets.codepen.io/21542/howler-demo-scream.mp3" type="audio/mpeg">
</audio>
<audio id="keySound">
<source src="https://assets.codepen.io/21542/howler-demo-unlock.mp3" type="audio/mpeg">
</audio>
<audio id="paperSound">
<source src="https://assets.codepen.io/21542/howler-demo-paper.mp3" type="audio/mpeg">
</audio>
<audio id="ovenSound">
<source src="https://assets.codepen.io/21542/howler-demo-oven.mp3" type="audio/mpeg">
</audio>
<audio id="clockSound">
<source src="https://assets.codepen.io/21542/howler-demo-clock.mp3" type="audio/mpeg">
</audio>

<div id="introScreen" class="fixed inset-0 bg-black z-50 flex flex-col items-center justify-center">
<h1 class="text-[clamp(2rem,8vw,5rem)] font-horror text-blood text-center mb-8 animate-float">逃离面包店的恐怖女孩</h1>
<p class="text-[clamp(1rem,3vw,1.5rem)] max-w-2xl text-center px-4 mb-12">你被困在一家废弃的面包店里，这里弥漫着诡异的气息。你必须找到线索，解开谜题，在恐怖降临前逃离这里...</p>
<button id="startGame" class="px-8 py-3 bg-blood text-flour rounded-md hover:bg-opacity-80 transition-all transform hover:scale-105 focus:outline-none font-horror text-xl">
开始游戏 <i class="fa fa-arrow-right ml-2"></i>
</button>
</div>

<div id="gameContainer" class="hidden">

<div class="fixed top-0 left-0 right-0 bg-shadow/80 backdrop-blur-sm p-4 flex justify-between items-center z-40">
<div class="flex items-center">
<i class="fa fa-clock-o text-blood mr-2"></i>
<span id="timer" class="font-horror text-xl">10:00</span>
</div>
<div class="flex items-center">
<i class="fa fa-key text-blood mr-2"></i>
<span id="inventory" class="font-horror text-xl">钥匙: 0/3</span>
</div>
<button id="toggleMusic" class="text-flour hover:text-blood transition-colors">
<i class="fa fa-volume-up"></i>
</button>
</div>

<div id="bakeryScene" class="relative min-h-screen bg-shadow/50">

<div class="absolute inset-0 bg-cover bg-center opacity-40" style="background-image: url('https://picsum.photos/id/674/1920/1080');"></div>


<div class="relative pt-24 pb-16 px-4 max-w-7xl mx-auto">

<h2 class="text-[clamp(1.5rem,5vw,3rem)] font-horror text-blood text-center mb-8 text-shadow-lg">废弃面包店</h2>


<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

<div class="space-y-6">

<div id="displayCase" class="bg-dough/30 p-4 rounded-lg border-2 border-flour/20 hover:border-flour/60 transition-all cursor-pointer animate-float">
<h3 class="text-xl font-horror text-blood mb-2">展示柜</h3>
<p class="text-flour/80">里面摆满了发霉的面包和蛋糕，看起来已经很久没有人动过了...</p>
<div class="flex justify-between mt-2">
<div class="w-1/3 h-16 bg-flour/10 rounded"></div>
<div class="w-1/3 h-16 bg-flour/10 rounded"></div>
<div class="w-1/3 h-16 bg-flour/10 rounded"></div>
</div>
</div>


<div id="cashRegister" class="bg-dough/30 p-4 rounded-lg border-2 border-flour/20 hover:border-flour/60 transition-all cursor-pointer animate-float" style="animation-delay: 0.2s;">
<h3 class="text-xl font-horror text-blood mb-2">收银台</h3>
<p class="text-flour/80">老式的收银机看起来还能用，抽屉似乎卡住了...</p>
<div class="h-20 bg-flour/10 rounded flex items-center justify-center">
<i class="fa fa-money text-4xl text-flour/30"></i>
</div>
</div>


<div id="refrigerator" class="bg-dough/30 p-4 rounded-lg border-2 border-flour/20 hover:border-flour/60 transition-all cursor-pointer animate-float" style="animation-delay: 0.4s;">
<h3 class="text-xl font-horror text-blood mb-2">冰箱</h3>
<p class="text-flour/80">里面散发着一股腐坏的味道，也许有什么线索在里面...</p>
<div class="h-20 bg-flour/10 rounded flex items-center justify-center">
<i class="fa fa-snowflake-o text-4xl text-flour/30"></i>
</div>
</div>
</div>


<div class="space-y-6">

<div id="oven" class="bg-dough/30 p-4 rounded-lg border-2 border-flour/20 hover:border-flour/60 transition-all cursor-pointer animate-float">
<h3 class="text-xl font-horror text-blood mb-2">烤箱</h3>
<p class="text-flour/80">烤箱里似乎有什么东西在发光，门被锁住了...</p>
<div class="h-32 bg-flour/10 rounded flex items-center justify-center">
<div class="w-20 h-20 bg-blood/20 rounded-full animate-pulse-slow"></div>
</div>
</div>


<div id="workbench" class="bg-dough/30 p-4 rounded-lg border-2 border-flour/20 hover:border-flour/60 transition-all cursor-pointer animate-float" style="animation-delay: 0.2s;">
<h3 class="text-xl font-horror text-blood mb-2">工作台</h3>
<p class="text-flour/80">上面散落着一些面粉和工具，还有一本打开的笔记本...</p>
<div class="h-32 bg-flour/10 rounded p-3">
<div class="w-full h-full bg-flour/10 p-2 text-xs">
<p class="text-flour/50">...今天的面团特别奇怪，它好像有自己的意志...</p>
</div>
</div>
</div>
</div>


<div class="space-y-6">

<div id="backDoor" class="bg-dough/30 p-4 rounded-lg border-2 border-flour/20 hover:border-flour/60 transition-all cursor-pointer animate-float">
<h3 class="text-xl font-horror text-blood mb-2">后门</h3>
<p class="text-flour/80">这是逃离面包店的唯一途径，但门被三把锁锁住了...</p>
<div class="h-32 bg-flour/10 rounded flex items-center justify-center">
<div class="space-y-2">
<i class="fa fa-lock text-3xl text-flour/30"></i>
<i class="fa fa-lock text-3xl text-flour/30"></i>
<i class="fa fa-lock text-3xl text-flour/30"></i>
</div>
</div>
</div>


<div id="clock" class="bg-dough/30 p-4 rounded-lg border-2 border-flour/20 hover:border-flour/60 transition-all cursor-pointer animate-float" style="animation-delay: 0.2s;">
<h3 class="text-xl font-horror text-blood mb-2">挂钟</h3>
<p class="text-flour/80">钟摆还在摇晃，但时间似乎停止了，上面刻着一些数字...</p>
<div class="h-20 bg-flour/10 rounded flex items-center justify-center">
<div class="w-16 h-16 rounded-full border-2 border-flour/30 flex items-center justify-center">
<i class="fa fa-clock-o text-3xl text-flour/30 animate-spin-slow"></i>
</div>
</div>
</div>


<div id="storage" class="bg-dough/30 p-4 rounded-lg border-2 border-flour/20 hover:border-flour/60 transition-all cursor-pointer animate-float" style="animation-delay: 0.4s;">
<h3 class="text-xl font-horror text-blood mb-2">储物柜</h3>
<p class="text-flour/80">里面堆满了各种杂物，也许能找到有用的东西...</p>
<div class="h-20 bg-flour/10 rounded flex items-center justify-center">
<i class="fa fa-archive text-4xl text-flour/30"></i>
</div>
</div>
</div>
</div>
</div>
</div>


<div id="scaryGirl" class="fixed inset-0 bg-black/90 z-50 flex items-center justify-center hidden">
<img src="https://picsum.photos/id/64/800/600" alt="恐怖女孩" class="max-w-full max-h-full opacity-0 transition-opacity duration-500">
</div>


<div id="gameHint" class="fixed bottom-0 left-0 right-0 bg-shadow/80 backdrop-blur-sm p-4 z-40 transform translate-y-full transition-transform duration-500">
<p id="hintText" class="text-flour text-center"></p>
</div>


<div id="itemModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center hidden">
<div class="bg-dough/90 p-6 rounded-lg max-w-md w-full mx-4 transform scale-95 opacity-0 transition-all duration-300" id="modalContent">
<h3 id="modalTitle" class="text-2xl font-horror text-blood mb-4"></h3>
<div id="modalImage" class="h-48 bg-flour/10 rounded mb-4 flex items-center justify-center">
<i class="fa fa-search text-5xl text-flour/30"></i>
</div>
<p id="modalDescription" class="text-flour mb-6"></p>
<div class="flex justify-end">
<button id="closeModal" class="px-4 py-2 bg-blood text-flour rounded hover:bg-opacity-80 transition-colors">
关闭
</button>
</div>
</div>
</div>


<div id="endingScreen" class="fixed inset-0 bg-black z-50 flex flex-col items-center justify-center hidden">
<h2 id="endingTitle" class="text-[clamp(2rem,6vw,4rem)] font-horror text-blood text-center mb-8"></h2>
<p id="endingText" class="text-[clamp(1rem,3vw,1.5rem)] max-w-2xl text-center px-4 mb-12"></p>
<button id="restartGame" class="px-8 py-3 bg-blood text-flour rounded-md hover:bg-opacity-80 transition-all transform hover:scale-105 focus:outline-none font-horror text-xl">
再玩一次 <i class="fa fa-refresh ml-2"></i>
</button>
</div>
</div>

// DOM元素
const introScreen = document.getElementById('introScreen');
const gameContainer = document.getElementById('gameContainer');
const timerElement = document.getElementById('timer');
const inventoryElement = document.getElementById('inventory');
const bakeryScene = document.getElementById('bakeryScene');
const scaryGirl = document.getElementById('scaryGirl');
const scaryGirlImage = scaryGirl.querySelector('img');
const gameHint = document.getElementById('gameHint');
const hintText = document.getElementById('hintText');
const itemModal = document.getElementById('itemModal');
const modalContent = document.getElementById('modalContent');
const modalTitle = document.getElementById('modalTitle');
const modalImage = document.getElementById('modalImage');
const modalDescription = document.getElementById('modalDescription');
const closeModal = document.getElementById('closeModal');
const endingScreen = document.getElementById('endingScreen');
const endingTitle = document.getElementById('endingTitle');
const endingText = document.getElementById('endingText');
const startGameButton = document.getElementById('startGame');
const restartGameButton = document.getElementById('restartGame');
const toggleMusicButton = document.getElementById('toggleMusic');

// 音频元素
const backgroundMusic = document.getElementById('backgroundMusic');
const jumpScareSound = document.getElementById('jumpScareSound');
const keySound = document.getElementById('keySound');
const paperSound = document.getElementById('paperSound');
const ovenSound = document.getElementById('ovenSound');
const clockSound = document.getElementById('clockSound');

// 游戏物品和交互点
const interactables = {
displayCase: document.getElementById('displayCase'),
cashRegister: document.getElementById('cashRegister'),
refrigerator: document.getElementById('refrigerator'),
oven: document.getElementById('oven'),
workbench: document.getElementById('workbench'),
backDoor: document.getElementById('backDoor'),
clock: document.getElementById('clock'),
storage: document.getElementById('storage')
};

// 格式化时间显示
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}

// 更新计时器显示
function updateTimer() {
timerElement.textContent = formatTime(gameState.timeRemaining);

// 时间快用完时改变颜色
if (gameState.timeRemaining <= 120) {
timerElement.classList.add('text-blood');
timerElement.classList.remove('text-flour');

// 最后30秒添加闪烁效果
if (gameState.timeRemaining <= 30) {
timerElement.classList.add('animate-pulse');
}
}
}

// 更新库存显示
function updateInventory() {
inventoryElement.textContent = `钥匙: ${gameState.keysCollected}/3`;
}

// 显示提示信息
function showHint(message) {
hintText.textContent = message;
gameHint.classList.remove('translate-y-full');

// 3秒后隐藏提示
setTimeout(() => {
gameHint.classList.add('translate-y-full');
}, 3000);
}

// 显示物品详情模态框
function showItemModal(title, description, imageUrl = null) {
modalTitle.textContent = title;
modalDescription.textContent = description;

// 设置图片或默认图标
if (imageUrl) {
modalImage.innerHTML = `<img src="${imageUrl}" alt="${title}" class="max-w-full max-h-full">`;
} else {
modalImage.innerHTML = `<i class="fa fa-search text-5xl text-flour/30"></i>`;
}

// 显示模态框
itemModal.classList.remove('hidden');
setTimeout(() => {
modalContent.classList.remove('scale-95', 'opacity-0');
}, 10);
}

// 隐藏物品详情模态框
function hideItemModal() {
modalContent.classList.add('scale-95', 'opacity-0');
setTimeout(() => {
itemModal.classList.add('hidden');
}, 300);
}

// 显示恐怖女孩跳吓
function showScaryGirl() {
if (gameState.jumpscareCount >= 3 || gameState.gameOver) return;

gameState.jumpscareCount++;

// 随机选择跳吓图片
const images = [
'https://picsum.photos/id/64/800/600',
'https://picsum.photos/id/177/800/600',
'https://picsum.photos/id/237/800/600'
];
const randomImage = images[Math.floor(Math.random() * images.length)];
scaryGirlImage.src = randomImage;

// 显示跳吓
scaryGirl.classList.remove('hidden');
jumpScareSound.currentTime = 0;
jumpScareSound.play();

// 调整图片透明度
setTimeout(() => {
scaryGirlImage.style.opacity = '1';
}, 100);

// 2秒后隐藏
setTimeout(() => {
scaryGirlImage.style.opacity = '0';
setTimeout(() => {
scaryGirl.classList.add('hidden');
}, 500);
}, 2000);

// 减少剩余时间
gameState.timeRemaining -= 30;
if (gameState.timeRemaining < 0) gameState.timeRemaining = 0;
updateTimer();
}

// 随机触发恐怖事件
function triggerRandomScare() {
if (gameState.gameOver) return;

const scareChance = Math.random();
if (scareChance < 0.15) { // 15%的概率触发
setTimeout(showScaryGirl, 1000 + Math.random() * 3000);
}
}

// 处理烤箱交互
function handleOven() {
if (gameState.puzzlesSolved.oven) {
showHint("烤箱已经打开了，里面没有什么有用的东西了。");
return;
}

// 显示烤箱详情
showItemModal(
"神秘烤箱",
"烤箱门被一把密码锁锁住了，需要找到密码才能打开。你注意到烤箱上有一些刻痕，看起来像是数字4、9、1。",
"https://picsum.photos/id/102/400/300"
);

// 播放烤箱音效
ovenSound.currentTime = 0;
ovenSound.play();

// 关闭模态框后检查是否可以解决谜题
closeModal.onclick = function() {
hideItemModal();

// 如果已经找到线索，解决烤箱谜题
if (gameState.itemsFound.clue) {
gameState.puzzlesSolved.oven = true;
gameState.itemsFound.key1 = true;
gameState.keysCollected++;
updateInventory();

showHint("你输入了密码491，烤箱门打开了！里面有一把生锈的钥匙。");

// 更新烤箱UI
interactables.oven.innerHTML = `
<h3 class="text-xl font-horror text-blood mb-2">烤箱</h3>
<p class="text-flour/80">烤箱门已经打开了，里面有一把生锈的钥匙。</p>
<div class="h-32 bg-flour/10 rounded flex items-center justify-center">
<i class="fa fa-key text-4xl text-blood"></i>
</div>
`;

// 播放钥匙音效
keySound.currentTime = 0;
keySound.play();
} else {
showHint("你需要找到密码才能打开烤箱。");
}
};
}

// 处理收银台交互
function handleCashRegister() {
if (gameState.puzzlesSolved.cashRegister) {
showHint("收银机已经打开了，里面没有什么有用的东西了。");
return;
}

// 显示收银台详情
showItemModal(
"老式收银机",
"收银机的抽屉卡住了，需要找到方法打开它。你注意到收银机上有一个小孔，像是可以插入什么东西。",
"https://picsum.photos/id/116/400/300"
);

// 关闭模态框后检查是否可以解决谜题
closeModal.onclick = function() {
hideItemModal();

// 如果已经找到线索，解决收银台谜题
if (gameState.itemsFound.note1) {
gameState.puzzlesSolved.cashRegister = true;
gameState.itemsFound.key2 = true;
gameState.keysCollected++;
updateInventory();

showHint("你用铅笔芯插入小孔，成功打开了收银机！里面有一把钥匙。");

// 更新收银台UI
interactables.cashRegister.innerHTML = `
<h3 class="text-xl font-horror text-blood mb-2">收银台</h3>
<p class="text-flour/80">收银机的抽屉已经打开了，里面有一把钥匙。</p>
<div class="h-20 bg-flour/10 rounded flex items-center justify-center">
<i class="fa fa-key text-4xl text-blood"></i>
</div>
`;

// 播放钥匙音效
keySound.currentTime = 0;
keySound.play();
} else {
showHint("你需要找到一个细的东西来打开收银机。");
}
};
}

// 处理冰箱交互
function handleRefrigerator() {
if (gameState.puzzlesSolved.refrigerator) {
showHint("冰箱已经打开了，里面没有什么有用的东西了。");
return;
}

// 显示冰箱详情
showItemModal(
"冷藏柜",
"冰箱门被冻住了，需要找到方法解冻它。你闻到一股刺鼻的气味，似乎来自冰箱内部。",
"https://picsum.photos/id/106/400/300"
);

// 关闭模态框后检查是否可以解决谜题
closeModal.onclick = function() {
hideItemModal();

// 如果已经找到线索，解决冰箱谜题
if (gameState.itemsFound.note2) {
gameState.puzzlesSolved.refrigerator = true;
gameState.itemsFound.key3 = true;
gameState.keysCollected++;
updateInventory();

showHint("你用火柴加热了冰箱锁，成功打开了！里面有一把钥匙，但里面的东西让你毛骨悚然...");

// 更新冰箱UI
interactables.refrigerator.innerHTML = `
<h3 class="text-xl font-horror text-blood mb-2">冰箱</h3>
<p class="text-flour/80">冰箱门已经打开了，里面有一把钥匙。</p>
<div class="h-20 bg-flour/10 rounded flex items-center justify-center">
<i class="fa fa-key text-4xl text-blood"></i>
</div>
`;

// 播放钥匙音效
keySound.currentTime = 0;
keySound.play();

// 触发一次跳吓
setTimeout(showScaryGirl, 1000);
} else {
showHint("你需要找到一种方法来解冻冰箱门。");
}
};
}

// 处理后门交互
function handleBackDoor() {
if (gameState.keysCollected === 3) {
// 成功逃离
gameState.gameOver = true;

endingTitle.textContent = "成功逃脱";
endingText.textContent = "你成功地用三把钥匙打开了后门，逃离了这个恐怖的面包店。当你踏出店门的那一刻，你听到身后传来面包发酵的声音，但你没有回头...你自由了。";

endingScreen.classList.remove('hidden');
endingScreen.classList.add('animate-fade-in');
} else {
showHint(`你需要找到所有三把钥匙才能打开这扇门。目前你有 ${gameState.keysCollected}/3 把钥匙。`);
}
}

// 处理时钟交互
function handleClock() {
// 显示时钟详情
showItemModal(
"古老挂钟",
"钟摆还在摇晃，但时间似乎停止了。钟面上刻着数字4、9、1，和烤箱上的刻痕一样。钟的背面似乎有一张纸条。",
"https://picsum.photos/id/175/400/300"
);

// 播放时钟音效
clockSound.currentTime = 0;
clockSound.play();

// 关闭模态框后获得线索
closeModal.onclick = function() {
hideItemModal();

if (!gameState.itemsFound.clue) {
gameState.itemsFound.clue = true;
showHint("你从钟的背面拿到了一张纸条，上面写着：'烤箱的密码是我停止的时间'。");

// 播放纸张音效
paperSound.currentTime = 0;
paperSound.play();
}
};
}

// 处理工作台交互
function handleWorkbench() {
// 显示工作台详情
showItemModal(
"面包师工作台",
"工作台上散落着一些面粉和工具，还有一本打开的笔记本。看起来面包师在这里记录了一些日常事务。",
"https://picsum.photos/id/136/400/300"
);

// 关闭模态框后获得笔记
closeModal.onclick = function() {
hideItemModal();

if (!gameState.itemsFound.note1) {
gameState.itemsFound.note1 = true;
showHint("你从工作台上拿到了一本笔记，上面写着：'收银机卡住了，也许可以用铅笔芯来打开它'。");

// 播放纸张音效
paperSound.currentTime = 0;
paperSound.play();
}
};
}

// 处理储物柜交互
function handleStorage() {
// 显示储物柜详情
showItemModal(
"储物柜",
"储物柜里堆满了各种杂物，包括一些旧工具、清洁用品和食材。你发现了一盒火柴和一张破旧的纸条。",
"https://picsum.photos/id/180/400/300"
);

// 关闭模态框后获得笔记
closeModal.onclick = function() {
hideItemModal();

if (!gameState.itemsFound.note2) {
gameState.itemsFound.note2 = true;
showHint("你从储物柜里拿到了一张纸条，上面写着：'冰箱冻住了，也许可以用火柴加热锁来打开它'。");

// 播放纸张音效
paperSound.currentTime = 0;
paperSound.play();
}
};
}

// 处理展示柜交互
function handleDisplayCase() {
// 显示展示柜详情
showItemModal(
"发霉的面包",
"展示柜里的面包和蛋糕都发霉了，看起来非常恶心。其中一个面包似乎有什么东西藏在下面。",
"https://picsum.photos/id/1080/400/300"
);

// 关闭模态框后触发随机事件
closeModal.onclick = function() {
hideItemModal();

// 20%的概率触发跳吓
if (Math.random() < 0.2) {
setTimeout(showScaryGirl, 1000);
} else {
showHint("这些面包看起来很奇怪，你最好离它们远点...");
}
};
}

// 初始化游戏
function initGame() {
// 重置游戏状态
gameState.timeRemaining = 600;
gameState.keysCollected = 0;
gameState.itemsFound = {
key1: false,
key2: false,
key3: false,
note1: false,
note2: false,
clue: false
};
gameState.puzzlesSolved = {
oven: false,
cashRegister: false,
refrigerator: false
};
gameState.jumpscareCount = 0;
gameState.gameOver = false;

// 更新UI
updateTimer();
updateInventory();

// 隐藏结束画面
endingScreen.classList.add('hidden');

// 随机事件计时器
setInterval(triggerRandomScare, 15000); // 每15秒尝试触发一次恐怖事件

// 游戏主循环计时器
const gameTimer = setInterval(() => {
if (gameState.gameOver) {
clearInterval(gameTimer);
return;
}

gameState.timeRemaining--;
updateTimer();

if (gameState.timeRemaining <= 0) {
// 时间用完，游戏失败
gameState.gameOver = true;

endingTitle.textContent = "游戏结束";
endingText.textContent = "时间到了！你没能及时逃离这个恐怖的面包店。当最后一秒过去时，你听到了面包发酵的声音越来越近...";

endingScreen.classList.remove('hidden');
endingScreen.classList.add('animate-fade-in');

clearInterval(gameTimer);
}
}, 1000);
}

// 开始游戏
function startGame() {
introScreen.classList.add('animate-fade-out');
setTimeout(() => {
introScreen.classList.add('hidden');
gameContainer.classList.remove('hidden');

// 初始化游戏
initGame();

// 播放背景音乐
backgroundMusic.currentTime = 0;
backgroundMusic.play();
gameState.musicPlaying = true;
}, 1000);
}

// 重新开始游戏
function restartGame() {
endingScreen.classList.add('animate-fade-out');
setTimeout(() => {
endingScreen.classList.add('hidden');
startGame();
}, 1000);
}

// 切换音乐
function toggleMusic() {
if (gameState.musicPlaying) {
backgroundMusic.pause();
toggleMusicButton.innerHTML = '<i class="fa fa-volume-off"></i>';
} else {
backgroundMusic.play();
toggleMusicButton.innerHTML = '<i class="fa fa-volume-up"></i>';
}
gameState.musicPlaying = !gameState.musicPlaying;
}

// 绑定事件处理函数
startGameButton.addEventListener('click', startGame);
restartGameButton.addEventListener('click', restartGame);
toggleMusicButton.addEventListener('click', toggleMusic);
closeModal.addEventListener('click', hideItemModal);

// 绑定交互元素事件
interactables.oven.addEventListener('click', handleOven);
interactables.cashRegister.addEventListener('click', handleCashRegister);
interactables.refrigerator.addEventListener('click', handleRefrigerator);
interactables.backDoor.addEventListener('click', handleBackDoor);
interactables.clock.addEventListener('click', handleClock);
interactables.workbench.addEventListener('click', handleWorkbench);
interactables.storage.addEventListener('click', handleStorage);
interactables.displayCase.addEventListener('click', handleDisplayCase);
</script>
</body>
</html>