1. Demo 简介
是什么：「梦境侦探社 · 案件档案」是一款关卡制梦境推理互动游戏。玩家扮演梦境侦探，通过阅读梦境描述、向 AI 助手提问收集线索、最终推理出隐藏在梦境背后的真相。
面向谁：对心理学和解谜游戏感兴趣的年轻人、喜欢互动叙事体验的玩家、对"梦境解析"有好奇心的大众用户。
主要功能：
-
案件大厅：3 个难度递增的梦境案件，通关解锁下一关
-
侦探室：阅读梦境描述 + AI 对话提问 + 线索收集面板 + 推理提交
-
结案报告：真相揭晓 + 梦境心理解析 + 侦探积分奖励
-
档案室：已侦破案件的完整档案回顾
2. Demo 创作思路
灵感来源：我一直对梦境心理学很感兴趣。弗洛伊德说"梦是通往潜意识的皇家大道"，但市面上几乎没有把"解梦"做成互动推理游戏的产品。大多数解梦 App 只是输入关键词输出解释，缺少探索感和沉浸感。我想做一个让玩家像侦探一样"侦破梦境"的游戏。
想解决的问题：
-
传统解梦工具太枯燥，用户看完就忘，缺少参与感
-
推理游戏大多聚焦犯罪侦探，"梦境侦探"题材完全空白
-
年轻人对心理学感兴趣，但缺乏低门槛的趣味入门方式
为什么做这个方向：
-
生活娱乐赛道已有 17 个作品，但无人做"梦境推理"——差异化明确
-
"梦境"话题在社交媒体上天然有传播性（“测测你的梦境真相”）
-
互动推理的玩法让心理学知识变得有趣、可体验
3. Demo 体验地址
交互式可体验的 HTML 文件
index.html (62.8 KB)
4. TRAE 实践过程
开发工具：TRAE Work（AI 辅助生成代码 + 人工调整优化）
开发流程：
Session 1 — 产品设计与架构规划
-
用 TRAE Work 描述产品需求：“我想做一个梦境推理游戏，玩家扮演侦探，通过提问来侦破梦境案件”
-
AI 帮我规划了 5 个页面结构（首页、案件大厅、侦探室、结案报告、档案室）
-
确定了 3 个梦境案件的主题和难度梯度
-
Session ID：379764131782384:80b31218219348d87ac25dea88216881_6a3201a78e23ac7dcac2e88f.6a322ede8e23ac7dcac2f08c.6a322ede8e23ac7dcac2f08a:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/17 13:21:34)
Session 2 — 核心功能开发
-
用 TRAE Work 生成完整的 HTML/CSS/JS 单文件应用
-
实现了案件数据系统、AI 对话问答引擎、线索收集机制、推理提交与判定
-
设计了 3 个梦境案件的完整剧情：电梯里的陌生人（1星）、会飞的鱼（2星）、倒着走的钟（3星）
-
构建了 60+ 条预设 AI 回复，覆盖每个案件的关键词和心理学解读
-
Session ID：379764131782384:6242c29f661b6f75d7d7dcb77b6af87b_6a3201a78e23ac7dcac2e88f.6a3236e78e23ac7dcac2f097.6a3236e78e23ac7dcac2f095:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/17 13:55:51)
Session 3 — UI 美化与交互优化
-
调整配色方案为深色悬疑主题（深蓝黑底 + 金色点缀 + 紫色辅助）
-
添加粒子背景动画、消息打字机效果、页面切换过渡动画
-
优化移动端响应式布局，确保手机端也能流畅体验
-
添加进度条、线索板、侦探等级等游戏化元素
-
Session ID：379764131782384:5fb2facc98176d59e31e615b2d6d9713_6a3201a78e23ac7dcac2e88f.6a3241048e23ac7dcac2f2a3.6a3241048e23ac7dcac2f2a1:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/17 14:39:00)
开发关键步骤截图：
踩坑经历：
-
最初把所有案件数据写在前端 JS 里，导致文件过大。后来优化为精简的数据结构，每个案件只保留核心字段
-
AI 回复最初只有 8 条关键词匹配，测试时发现用户提问角度多样，命中率很低。后来扩充到 60+ 条，并增加了 8 条智能默认回复，体验大幅提升
-
推理提交的选项设计花了很长时间，需要让错误选项看起来也有道理，但又不能和正确答案太接近