单页面即玩
html
<!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: 'Georgia', 'Times New Roman', serif;
}
body {
background-color: #1a1a1a;
color: #e0d0b0;
line-height: 1.6;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><rect width="100" height="100" fill="none" stroke="%23e0d0b0" stroke-width="2"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23e0d0b0" stroke-width="1"/></svg>');
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
text-align: center;
padding: 15px 0;
border-bottom: 2px solid #8b7355;
margin-bottom: 15px;
}
h1 {
font-size: 2.8rem;
color: #d4af37;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
letter-spacing: 2px;
margin-bottom: 10px;
}
.subtitle {
font-style: italic;
color: #b0a090;
font-size: 1.2rem;
}
.level-indicator {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2a2a2a;
border: 1px solid #8b7355;
border-radius: 5px;
padding: 10px 20px;
margin-bottom: 15px;
}
.level-info {
font-size: 1.2rem;
}
.level-title {
color: #d4af37;
font-weight: bold;
}
.progress-bar {
flex-grow: 1;
height: 10px;
background-color: #3a3a3a;
border-radius: 5px;
margin: 0 20px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: #d4af37;
width: 10%;
transition: width 0.5s ease;
}
.game-container {
display: flex;
flex: 1;
gap: 20px;
margin-bottom: 15px;
}
.case-container {
flex: 3;
background-color: #2a2a2a;
border: 1px solid #8b7355;
border-radius: 5px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.case-title {
font-size: 1.8rem;
color: #d4af37;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #8b7355;
}
.case-description {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 15px;
min-height: 80px;
}
.clues-container {
margin-bottom: 15px;
}
.clue-item {
background-color: #3a3a3a;
border: 1px solid #8b7355;
border-radius: 5px;
padding: 10px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.3s;
}
.clue-item:hover {
background-color: #4a4a4a;
}
.clue-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.clue-item h3 {
color: #d4af37;
margin: 0;
font-size: 1.1rem;
}
.clue-hint {
color: #b0a090;
font-size: 0.9rem;
font-style: italic;
}
.clue-content {
display: none;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #5a5a5a;
font-size: 0.95rem;
line-height: 1.5;
}
.fill-blanks {
background-color: #3a3a3a;
border: 1px solid #8b7355;
border-radius: 5px;
padding: 15px;
margin-top: 15px;
}
.fill-blanks h3 {
color: #d4af37;
margin-bottom: 10px;
}
.blank-item {
margin-bottom: 12px;
}
.blank-question {
margin-bottom: 5px;
font-size: 1rem;
}
.blank-input {
width: 100%;
padding: 8px;
background-color: #2a2a2a;
border: 1px solid #8b7355;
border-radius: 3px;
color: #e0d0b0;
font-size: 1rem;
}
.actions {
display: flex;
gap: 10px;
margin-top: 15px;
}
button {
background-color: #5d4a2a;
color: #e0d0b0;
border: 1px solid #8b7355;
border-radius: 3px;
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.3s;
font-size: 1rem;
}
button:hover {
background-color: #6d5a3a;
}
button:disabled {
background-color: #3a3a3a;
color: #7a7a7a;
cursor: not-allowed;
}
.info-panel {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
}
.panel {
background-color: #2a2a2a;
border: 1px solid #8b7355;
border-radius: 5px;
padding: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.panel h2 {
color: #d4af37;
font-size: 1.3rem;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid #8b7355;
}
.notes-list {
list-style-type: none;
max-height: 180px;
overflow-y: auto;
}
.notes-list li {
padding: 6px 0;
border-bottom: 1px solid #3a3a3a;
font-size: 0.9rem;
}
.deduction-area {
min-height: 130px;
}
#deduction-text {
width: 100%;
height: 100px;
background-color: #3a3a3a;
border: 1px solid #8b7355;
border-radius: 3px;
color: #e0d0b0;
padding: 10px;
resize: vertical;
font-size: 1rem;
}
footer {
text-align: center;
padding: 12px 0;
border-top: 1px solid #8b7355;
margin-top: auto;
color: #b0a090;
font-size: 0.9rem;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 100;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #2a2a2a;
border: 2px solid #8b7355;
border-radius: 5px;
padding: 20px;
max-width: 600px;
width: 90%;
max-height: 80%;
overflow-y: auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
border-bottom: 1px solid #8b7355;
padding-bottom: 10px;
}
.modal-title {
color: #d4af37;
font-size: 1.5rem;
}
.close-modal {
background: none;
border: none;
color: #e0d0b0;
font-size: 1.5rem;
cursor: pointer;
}
.modal-body {
line-height: 1.6;
}
.correct {
color: #7cfc00;
}
.incorrect {
color: #ff6b6b;
}
.hint {
margin-top: 10px;
font-style: italic;
color: #b0a090;
font-size: 0.9rem;
}
/* 控制面板样式 */
.control-panel {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
display: none;
}
.beg-button {
background: linear-gradient(135deg, #d4af37, #8b7355);
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
color: #1a1a1a;
font-weight: bold;
font-size: 12px;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
cursor: pointer;
transition: all 0.3s;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.beg-button:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}
.give-up-button {
background: #8b0000;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
font-weight: bold;
margin-top: 10px;
width: 100%;
transition: background 0.3s;
}
.give-up-button:hover {
background: #a52a2a;
}
/* 手机端优化 */
@media (max-width: 768px) {
.container {
padding: 10px;
}
h1 {
font-size: 2rem;
}
.case-title {
font-size: 1.4rem;
}
.clue-item {
padding: 8px;
}
.clue-item h3 {
font-size: 1rem;
}
.clue-hint {
font-size: 0.8rem;
}
.blank-item {
margin-bottom: 10px;
}
.panel {
padding: 10px;
}
.modal-content {
width: 95%;
padding: 15px;
}
.game-container {
flex-direction: column;
gap: 10px;
}
.case-container {
padding: 12px;
}
.actions {
flex-wrap: wrap;
}
button {
font-size: 0.9rem;
padding: 8px 12px;
}
.level-info {
font-size: 1rem;
}
.case-description {
font-size: 1rem;
}
.control-panel {
bottom: 10px;
right: 10px;
}
.beg-button {
width: 50px;
height: 50px;
font-size: 10px;
}
header {
padding: 10px 0;
margin-bottom: 10px;
}
.level-indicator {
padding: 8px 15px;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>福尔摩斯十大谜案</h1>
<p class="subtitle">只有最敏锐的侦探才能解开这些烧脑谜题</p>
</header>
<div class="level-indicator">
<div class="level-info">第 <span id="current-level">1</span>关/ 总共10 关</div>
<div class="progress-bar">
<div class="progress-fill" id="progress-fill"></div>
</div>
<div class="level-info"><span class="level-title" id="level-title">贝克街谜案</span></div>
</div>
<div class="game-container">
<div class="case-container">
<h2 class="case-title" id="case-title">贝克街谜案</h2>
<div class="case-description" id="case-description">
著名的古董商亨利·沃辛顿先生在他的书房中被发现死亡。
死亡时间估计在昨晚10 点至午夜之间。
现场没有强行闯入的痕迹，但书房的保险柜被打开，里面空空如也。
奇怪的是，房间里其他贵重物品却完好无损。
警方已经排除了自杀的可能性。
作为侦探，你需要找出真相。
</div>
<div class="clues-container" id="clues-container">
<div class="clue-item">
<div class="clue-header">
<h3>现场勘查报告</h3>
<span class="clue-hint">点击查看详细内容</span>
</div>
<div class="clue-content">
<p>受害者胸前插着一把古董匕首，柄上刻有"十字钥匙"的标志。
书房的书桌抽屉被撬开，但手法专业，没有留下明显痕迹。
后窗的锁有轻微损坏，窗台上有少量泥土。</p>
</div>
</div>
<div class="clue-item">
<div class="clue-header">
<h3>证人证词- 管家詹金斯</h3>
<span class="clue-hint">点击查看详细内容</span>
</div>
<div class="clue-content">
<p>"我昨晚9 点给沃辛顿先生送茶后，就再也没见过他。
我10 点回到自己的房间听收音机，直到11 点半才睡觉。
我什么都没听到。"</p>
<p class="hint">注意：在管家的房间里发现了一件沾有泥土的外套。</p>
</div>
</div>
<div class="clue-item">
<div class="clue-header">
<h3>证人证词- 侄子爱德华</h3>
<span class="clue-hint">点击查看详细内容</span>
</div>
<div class="clue-content">
<p>"我昨晚在绅士俱乐部打牌，从8 点一直到凌晨1 点。
很多人都可以作证。
我叔叔和我关系很好，我没有任何理由伤害他。"</p>
<p class="hint">注意：爱德华在陈述时显得非常紧张，不断擦拭额头上的汗水。</p>
</div>
</div>
<div class="clue-item">
<div class="clue-header">
<h3>证人证词- 商业伙伴莫里森</h3>
<span class="clue-hint">点击查看详细内容</span>
</div>
<div class="clue-content">
<p>"我昨晚确实见过沃辛顿，我们因为生意上的事情发生了争执。
但我9 点半就离开了，之后直接回家了。
我的妻子可以作证。"</p>
<p class="hint">注意：莫里森的公司最近财务紧张，而沃辛顿刚刚拒绝了一笔重要的贷款。</p>
</div>
</div>
<div class="clue-item">
<div class="clue-header">
<h3>邻居证词- 史密斯太太</h3>
<span class="clue-hint">点击查看详细内容</span>
</div>
<div class="clue-content">
<p>"我昨晚11 点左右听到了一声尖叫，然后从窗户看到一个人影从沃辛顿先生家的后窗跑走了。
那人个子不高，跑得很快。"</p>
<p class="hint">注意：史密斯太太的视力不太好，但她肯定听到的声音来自沃辛顿家。</p>
</div>
</div>
<div class="clue-item">
<div class="clue-header">
<h3>法医报告</h3>
<span class="clue-hint">点击查看详细内容</span>
</div>
<div class="clue-content">
<p>死亡原因是匕首刺中心脏，一击致命。
死亡时间在晚上10 点到11 点之间。
受害者没有挣扎痕迹，表明他可能认识凶手。
匕首上的指纹被擦掉了。</p>
</div>
</div>
<div class="clue-item">
<div class="clue-header">
<h3>物证- 匿名信</h3>
<span class="clue-hint">点击查看详细内容</span>
</div>
<div class="clue-content">
<p>在书桌抽屉里发现了一封匿名信，警告沃辛顿先生有人要对他不利。
信中提到了一个"十字钥匙"的标志，与凶器上的标志相同。</p>
</div>
</div>
<div class="clue-item">
<div class="clue-header">
<h3>物证- 沃辛顿的日记</h3>
<span class="clue-hint">点击查看详细内容</span>
</div>
<div class="clue-content">
<p>日记最后一页写着："如果我有不测，找我的侄子爱德华。
他知道真相。
莫里森今天又来威胁我了，但我不会屈服。"</p>
</div>
</div>
</div>
<div class="fill-blanks">
<h3>推理填空</h3>
<p>基于以上线索，填写你的推理结论：</p>
<div class="blank-item">
<div class="blank-question">1. 凶手是：</div>
<input type="text" class="blank-input" id="answer-1" placeholder="填写凶手的身份">
</div>
<div class="blank-item">
<div class="blank-question">2. 凶手的动机是：</div>
<input type="text" class="blank-input" id="answer-2" placeholder="填写动机">
</div>
<div class="blank-item">
<div class="blank-question">3. 关键证据是：</div>
<input type="text" class="blank-input" id="answer-3" placeholder="填写最关键的证据">
</div>
<div class="blank-item">
<div class="blank-question">4. 凶手使用的手法：</div>
<input type="text" class="blank-input" id="answer-4" placeholder="填写犯罪手法">
</div>
</div>
<div class="actions">
<button id="check-answers">检查答案</button>
<button id="next-level" disabled>下一关</button>
<button id="show-hint">显示提示</button>
</div>
</div>
<div class="info-panel">
<div class="panel">
<h2>调查笔记</h2>
<ul class="notes-list" id="notes-list">
<li>案件发生在昨晚10 点至午夜之间</li>
<li>受害者是知名古董商亨利·沃辛顿</li>
<li>现场没有强行闯入痕迹</li>
<li>保险柜被打开，但其他贵重物品完好</li>
</ul>
</div>
<div class="panel deduction-area">
<h2>推理记录</h2>
<textarea id="deduction-text" placeholder="记录你的推理过程..."></textarea>
<button id="save-deduction" style="margin-top: 10px;">保存推理</button>
</div>
<div class="panel">
<h2>已解谜题</h2>
<ul class="notes-list" id="solved-cases">
<!-- 已解决的案件将动态添加到这里-->
</ul>
</div>
</div>
</div>
<footer>
<p>福尔摩斯十大谜案- 只有最敏锐的侦探才能解开所有谜题</p>
</footer>
</div>
<!-- 控制面板 -->
<div class="control-panel" id="control-panel">
<button class="beg-button" id="beg-button">求求我</button>
</div>
<!-- 提示模态框-->
<div class="modal" id="hint-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">推理提示</h3>
<button class="close-modal">×</button>
</div>
<div class="modal-body" id="hint-body">
<!-- 提示内容将动态添加到这里-->
</div>
</div>
</div>
<!-- 结果模态框-->
<div class="modal" id="result-modal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">答案检查结果</h3>
<button class="close-modal">×</button>
</div>
<div class="modal-body" id="result-body">
<!-- 结果内容将动态添加到这里-->
</div>
<div id="give-up-container" style="display:none; margin-top:15px;">
<button class="give-up-button" id="give-up-btn">我不行了，我放弃了</button>
</div>
</div>
</div>
<script>
// 游戏状态和数据
const gameState = {
currentLevel: 1,
totalLevels: 10,
answers: [],
notes: [
"案件发生在昨晚10 点至午夜之间",
"受害者是知名古董商亨利·沃辛顿",
"现场没有强行闯入痕迹",
"保险柜被打开，但其他贵重物品完好"
],
solvedCases: [],
firstLevelPassed: false
};
// 关卡数据
const levels = {
1: {
title: "贝克街谜案",
description: "著名的古董商亨利·沃辛顿先生在他的书房中被发现死亡。死亡时间估计在昨晚10 点至午夜之间。现场没有强行闯入的痕迹，但书房的保险柜被打开，里面空空如也。奇怪的是，房间里其他贵重物品却完好无损。警方已经排除了自杀的可能性。作为侦探，你需要找出真相。",
questions: [
"凶手是：",
"凶手的动机是：",
"关键证据是：",
"凶手使用的手法："
],
correctAnswers: ["商业伙伴莫里森", "财务纠纷和威胁曝光", "沃辛顿的日记和匿名信", "假装离开后从后窗潜入"],
hints: [
"注意沃辛顿日记中的内容",
"考虑谁的财务压力最大",
"查看所有物证，特别是文字证据",
"思考为什么只有保险柜被打开"
]
},
2: {
title: "红发会谜案",
description: "一名红发男子被发现死在自己的公寓中，现场有一张奇怪的字条，上面写着神秘代码。",
questions: [
"凶手是：",
"凶手的动机是：",
"关键证据是：",
"密码的含义是："
],
correctAnswers: ["待解锁", "待解锁", "待解锁", "待解锁"],
hints: [
"提示2-1",
"提示2-2",
"提示2-3",
"提示2-4"
]
}
// 可以继续添加更多关卡...
};
// DOM 元素
const currentLevelElement = document.getElementById('current-level');
const progressFillElement = document.getElementById('progress-fill');
const levelTitleElement = document.getElementById('level-title');
const caseTitleElement = document.getElementById('case-title');
const caseDescriptionElement = document.getElementById('case-description');
const cluesContainerElement = document.getElementById('clues-container');
const notesListElement = document.getElementById('notes-list');
const solvedCasesElement = document.getElementById('solved-cases');
const hintModal = document.getElementById('hint-modal');
const hintBodyElement = document.getElementById('hint-body');
const resultModal = document.getElementById('result-modal');
const resultBodyElement = document.getElementById('result-body');
const nextLevelButton = document.getElementById('next-level');
const checkAnswersButton = document.getElementById('check-answers');
const showHintButton = document.getElementById('show-hint');
const controlPanel = document.getElementById('control-panel');
const begButton = document.getElementById('beg-button');
const giveUpBtn = document.getElementById('give-up-btn');
const giveUpContainer = document.getElementById('give-up-container');
// 初始化游戏
function initGame() {
updateLevel();
setupClueInteractions();
setupEventListeners();
updateProgressBar();
}
// 更新当前关卡
function updateLevel() {
const level = levels[gameState.currentLevel];
currentLevelElement.textContent = gameState.currentLevel;
levelTitleElement.textContent = level.title;
caseTitleElement.textContent = level.title;
caseDescriptionElement.textContent = level.description;
// 更新问题
const questions = document.querySelectorAll('.blank-question');
questions.forEach((question, index) => {
question.textContent = level.questions[index];
});
// 清空答案输入框
document.querySelectorAll('.blank-input').forEach(input => {
input.value = '';
});
// 更新进度条
updateProgressBar();
// 控制面板只在第一关显示
if (gameState.currentLevel === 1) {
controlPanel.style.display = 'block';
} else {
controlPanel.style.display = 'none';
}
}
// 设置线索交互
function setupClueInteractions() {
const clueItems = document.querySelectorAll('.clue-item');
clueItems.forEach(item => {
item.addEventListener('click', function() {
const content = this.querySelector('.clue-content');
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
});
}
// 设置事件监听器
function setupEventListeners() {
// 检查答案按钮
checkAnswersButton.addEventListener('click', checkAnswers);
// 下一关按钮
nextLevelButton.addEventListener('click', goToNextLevel);
// 显示提示按钮
showHintButton.addEventListener('click', showHint);
// 求求我按钮
begButton.addEventListener('click', function() {
resultModal.style.display = 'flex';
resultBodyElement.innerHTML = `
<p style="font-size:1.1rem; margin-bottom:15px;">
需要帮助吗，侦探先生？<br>
点击下方按钮可以自动完成第一关！
</p>
`;
giveUpContainer.style.display = 'block';
});
// 放弃按钮
giveUpBtn.addEventListener('click', function() {
if (gameState.currentLevel === 1) {
// 填入正确答案
const correctAnswers = levels[1].correctAnswers;
for (let i = 0; i < correctAnswers.length; i++) {
document.getElementById(`answer-${i+1}`).value = correctAnswers[i];
}
// 自动通关
gameState.firstLevelPassed = true;
nextLevelButton.disabled = false;
// 更新结果提示
resultBodyElement.innerHTML = `
<p class="correct" style="font-size:1.2rem;">
答案已自动填入！<br>
第一关已通过，可以进入下一关
</p>
`;
giveUpContainer.style.display = 'none';
// 更新已解谜题
if (!gameState.solvedCases.includes(levels[1].title)) {
gameState.solvedCases.push(levels[1].title);
updateSolvedCasesList();
}
}
});
// 保存推理按钮
document.getElementById('save-deduction').addEventListener('click', function() {
const deduction = document.getElementById('deduction-text').value.trim();
if (deduction) {
gameState.notes.push(`推理记录: ${deduction}`);
updateNotesList();
document.getElementById('deduction-text').value = '';
alert('推理已保存到笔记中！');
}
});
// 关闭模态框
document.querySelectorAll('.close-modal').forEach(button => {
button.addEventListener('click', function() {
hintModal.style.display = 'none';
resultModal.style.display = 'none';
giveUpContainer.style.display = 'none';
});
});
// 点击模态框外部关闭
window.addEventListener('click', function(event) {
if (event.target === hintModal) {
hintModal.style.display = 'none';
}
if (event.target === resultModal) {
resultModal.style.display = 'none';
giveUpContainer.style.display = 'none';
}
});
}
// 检查答案
function checkAnswers() {
const level = levels[gameState.currentLevel];
let allCorrect = true;
let resultsHTML = '';
for (let i = 1; i <= 4; i++) {
const userAnswer = document.getElementById(`answer-${i}`).value.trim().toLowerCase();
const correctAnswer = level.correctAnswers[i-1].toLowerCase();
if (userAnswer === correctAnswer) {
resultsHTML += `<p class="correct">问题 ${i}: 正确！</p>`;
} else {
resultsHTML += `<p class="incorrect">问题${i}: 不正确。正确答案应该是: ${level.correctAnswers[i-1]}</p>`;
allCorrect = false;
}
}
if (allCorrect) {
resultsHTML += '<p class="correct" style="margin-top: 15px; font-weight: bold;">恭喜！你成功解开了这个谜案！</p>';
nextLevelButton.disabled = false;
// 添加到已解谜题列表
if (!gameState.solvedCases.includes(level.title)) {
gameState.solvedCases.push(level.title);
updateSolvedCasesList();
}
} else {
resultsHTML += '<p class="incorrect" style="margin-top: 15px;">请继续调查，收集更多线索。</p>';
// 第一关且答案错误时显示放弃按钮
if (gameState.currentLevel === 1) {
giveUpContainer.style.display = 'block';
}
}
resultBodyElement.innerHTML = resultsHTML;
resultModal.style.display = 'flex';
}
// 前往下一关
function goToNextLevel() {
if (gameState.currentLevel < gameState.totalLevels) {
gameState.currentLevel++;
updateLevel();
nextLevelButton.disabled = true;
} else {
alert('恭喜！你已经完成了所有谜案！');
}
}
// 显示提示
function showHint() {
const level = levels[gameState.currentLevel];
let hintsHTML = '<p>当前关卡的提示：</p><ul>';
level.hints.forEach((hint, index) => {
hintsHTML += `<li>问题${index+1}: ${hint}</li>`;
});
hintsHTML += '</ul><p class="hint">提示：仔细分析所有线索，注意细节之间的关联。</p>';
hintBodyElement.innerHTML = hintsHTML;
hintModal.style.display = 'flex';
}
// 更新进度条
function updateProgressBar() {
const progress = (gameState.currentLevel / gameState.totalLevels) * 100;
progressFillElement.style.width = `${progress}%`;
}
// 更新笔记列表
function updateNotesList() {
notesListElement.innerHTML = '';
gameState.notes.forEach(note => {
const noteItem = document.createElement('li');
noteItem.textContent = note;
notesListElement.appendChild(noteItem);
});
}
// 更新已解谜题列表
function updateSolvedCasesList() {
solvedCasesElement.innerHTML = '';
gameState.solvedCases.forEach(caseTitle => {
const caseItem = document.createElement('li');
caseItem.textContent = caseTitle;
solvedCasesElement.appendChild(caseItem);
});
}
// 初始化游戏
window.addEventListener('DOMContentLoaded', initGame);
</script>
</body>
</html>