链接：
项目简介
春节侦探推理是一个互动故事类推理游戏，让用户扮演侦探，在春节期间破获案件。项目采用悬疑风格设计，提供多个案件、证据收集、线索分析、推理破案等功能，让用户在推理中体验春节的别样乐趣。
核心特点：
- 多个案件：5个不同类型的春节案件
- 证据收集：在案发现场收集证据
- 线索分析：分析线索，找出真相
- 推理破案：根据线索推理出凶手
- 结局判定：推理正确或错误的结局
iFlow CLI使用功能
本项目开发过程中使用了以下iFlow CLI功能：
- write_file - 创建HTML文件
- 文件路径管理 - 使用绝对路径确保文件创建位置正确
- 文档系统化创建 - 标准化的项目文档
实现过程
1. 页面结构设计
- 采用2列布局，左侧为案件信息，右侧为推理面板
- 头部：侦探推理标题，带侦探emoji（
） - 主内容区：案件描述、证据列表、线索分析
- 侧边栏：案件选择、推理面板、操作按钮
2. 视觉风格
- 色彩方案：深色背景（#2c3e50、#34495e）+ 红色线索（#e74c3c）
- 字体选择：Microsoft YaHei微软雅黑，现代简洁
- 布局特点：悬疑风格、证据卡片、线索面板
- 视觉元素：侦探emoji（）、证据图标、线索高亮
3. 功能实现
3.1 案件数据结构
const CASES = [
{
id: 1,
title: '红包失窃案',
description: '春节期间，一个红包在宴会上神秘失窃...',
suspects: ['张三', '李四', '王五'],
clues: ['现场发现脚印', '红包上有指纹', '窗户有打开痕迹']
},
{
id: 2,
title: '烟花爆炸案',
description: '春节烟花汇演上，烟花突然爆炸，有人受伤...',
suspects: ['烟花师', '观众甲', '观众乙'],
clues: ['发现可疑装置', '目击者证词', '残留物分析']
}
];
3.2 游戏状态管理
let gameState = {
currentCase: null, // 当前案件
collectedClues: [], // 收集的线索
suspect: null, // 嫌疑人
solvedCases: [], // 已破获的案件
failedAttempts: 0 // 失败次数
};
3.3 核心功能（7个）
- 案件选择 - 选择要侦破的案件
- 案件浏览 - 浏览案件信息和描述
- 证据收集 - 在案发现场收集证据
- 线索分析 - 分析线索，找出关键信息
- 推理破案 - 根据线索推理出凶手
- 结局判定 - 推理正确或错误的结局
- 案件记录 - 记录破获的案件和推理过程
3.4 推理逻辑
// 推理凶手
function deduceSuspect(clues, suspects) {
let scores = {};
suspects.forEach(suspect => scores[suspect] = 0);
clues.forEach(clue => {
if (clue.type === 'fingerprint') {
scores[clue.suspect] += 3;
} else if (clue.type === 'footprint') {
scores[clue.suspect] += 2;
} else if (clue.type === 'testimony') {
scores[clue.suspect] += 1;
}
});
// 返回得分最高的嫌疑人
return Object.keys(scores).reduce((a, b) => scores[a] > scores[b] ? a : b);
}
4. 交互设计
- 点击案件卡片选择案件
- 点击证据卡片收集证据
- 点击线索分析线索
- 选择嫌疑人进行推理
- 查看推理结果
5. 响应式设计
- 2列布局在小屏幕（<900px）变为单列
- 证据卡片在小屏幕自适应
- 按钮在小屏幕自适应
截图
项目包含以下截图位置：
- 案件选择界面
- 案件详情界面
- 证据收集界面
- 推理结果界面
体验链接
网页体验路径：
47_春节侦探推理.html
在线部署后可分享链接。
技术亮点
- 推理系统 - 根据线索推理出凶手
- 证据收集 - 在案发现场收集证据
- 线索分析 - 分析线索，找出关键信息
- 多案件 - 5个不同类型的春节案件
- 结局判定 - 推理正确或错误的结局
文化意义
本项目通过侦探推理，让用户：
- 锻炼推理能力和逻辑思维
- 了解春节的法律和秩序
- 增强观察力和分析能力
- 在游戏中体验春节的别样乐趣