## 项目简介
春节猜灯谜是一个民俗游戏主题的互动游戏项目，还原了春节期间挂灯笼猜灯谜的传统习俗。项目采用喜庆的红色主题和灯笼风格设计，提供10道精心挑选的灯谜，涵盖水果、蔬菜、动物、玩具、用品、自然等多个分类，让用户在游戏中体验传统民俗文化的魅力。
**核心特点：**
- 灯谜丰富：10道不同类型的灯谜，涵盖6个分类
- 交互友好：答案提交、提示显示、答案揭晓等功能
- 统计系统：实时显示答题统计和正确率
- 分享功能：支持成绩分享到社交平台
- 响应式设计：适配各种屏幕尺寸
## iFlow CLI使用功能
本项目开发过程中使用了以下iFlow CLI功能：
1. **write_file** - 创建HTML文件
2. **文件路径管理** - 使用绝对路径确保文件创建位置正确
3. **文档系统化创建** - 标准化的项目文档
## 实现过程
### 1. 页面结构设计
- 采用2列网格布局，左侧为灯谜答题区，右侧为灯谜列表和统计区
- 头部：灯笼风格的标题区域，带有动态灯笼动画
- 主内容区：灯谜展示、答案输入、提示显示、操作按钮
- 侧边栏：灯谜列表、统计面板、操作按钮
### 2. 视觉风格
- **色彩方案**：红色（#ff6b6b、#e74c3c）+ 金色（#f1c40f）+ 橙色（#f39c12）
- **字体选择**：Microsoft YaHei微软雅黑，现代简洁
- **布局特点**：灯笼装饰、金色边框、渐变背景
- **视觉元素**：灯笼emoji（
）、红包emoji（
）、动态摇摆动画
### 3. 功能实现
#### 3.1 游戏状态管理
```javascript
let gameState = {
currentIndex: 0, // 当前灯谜索引
solved: new Set(), // 已解决的灯谜集合
attempted: 0, // 尝试次数
showAnswer: false // 是否显示答案
};
```
#### 3.2 核心功能（8个）
1. **灯谜展示** - 显示当前灯谜的内容、分类、题号
2. **答案提交** - 输入答案并验证正确性
3. **提示显示** - 显示灯谜提示帮助用户思考
4. **答案揭晓** - 直接显示正确答案
5. **下一题** - 切换到下一道灯谜
6. **灯谜列表** - 显示所有灯谜，可点击切换
7. **统计系统** - 显示灯谜总数、已猜中数量、正确率
8. **分享功能** - 分享答题成绩到社交平台
#### 3.3 灯谜数据结构
```javascript
const riddles = [
{
id: 1,
content: '红红圆圆像个球，吃到嘴里甜又甜。',
category: '水果',
answer: '苹果',
hint: '它是红色的，圆形的'
},
// ... 共10道灯谜
];
```
### 4. 交互设计
- 点击灯谜列表项可切换到对应灯谜
- 输入答案后按回车或点击提交按钮验证
- 提示功能帮助用户思考，但会影响成就感
- 已解决的灯谜在列表中显示绿色标记
- 分享功能支持Web Share API或复制文本
### 5. 响应式设计
- 2列布局在小屏幕（<900px）变为单列
- 统计网格在小屏幕（<768px）变为单列
- 字体大小在小屏幕自动缩小
- 按钮和输入框在小屏幕自适应
## 截图
项目包含以下截图位置：
- 灯谜答题界面
- 灯谜列表展示
- 统计数据面板
- 答题成功提示
## 体验链接
网页体验路径：
```
36_春节猜灯谜.html
```
在线部署后可分享链接。
## 技术亮点
1. **民俗游戏体验** - 还原传统猜灯谜习俗
2. **多样化灯谜** - 10道灯谜涵盖6个分类
3. **智能提示系统** - 提供提示但不影响挑战性
4. **实时统计反馈** - 答题进度和正确率实时显示
5. **社交分享** - 支持成绩分享，增强互动性
## 文化意义
本项目通过猜灯谜游戏，让用户：
- 体验传统春节民俗文化
- 了解灯谜这一非遗文化形式
- 增强对传统文化的认同感
- 在游戏中学习传统文化知识
## 未来改进方向
1. 添加更多灯谜题目
2. 实现灯谜分类筛选功能
3. 添加难度等级系统
4. 实现排行榜功能
5. 添加音效和背景音乐
6. 开发多人竞猜模式
