# Stroop Game

**Repository Path**: hyz2xx/stroop-game

## Basic Information

- **Project Name**: Stroop Game
- **Description**: Stroop Game 脑力游戏训练

https://toolkitfree.org/projects/stroop/
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-03
- **Last Updated**: 2025-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: stroop, game

## README

# 色彩认知挑战 - Stroop游戏

一个基于Web的色彩认知训练游戏，帮助训练大脑处理视觉干扰的能力。

## 🎮 在线演示

[立即体验](https://toolkitfree.org/projects/stroop/)

## 📖 游戏介绍

Stroop游戏是一个经典的心理学实验，用于测试和训练大脑的认知灵活性。玩家需要判断显示的颜色词是否与其实际颜色相匹配，这种视觉干扰能够有效锻炼注意力和反应能力。

## ✨ 游戏特性

### 🎯 两种游戏模式
- **时间模式**：在限定时间内答题，挑战速度极限
- **生命模式**：有限生命值，考验准确率

### 📊 详细统计
- 实时显示总题数和正确率
- 游戏结束后展示完整统计信息：
  - 总题数
  - 正确题数 
  - 错误题数
  - 正确率百分比

### 🏆 排行榜系统
- 按题目数量和正确率排序
- 支持多用户成绩记录
- 本地存储，数据持久化

### 🎨 精美界面
- 现代化渐变背景设计
- 流畅的动画效果
- 响应式布局，支持移动设备
- 毛玻璃效果的UI组件

### ⚡ 智能进度提示
- 实时倒计时进度条
- 颜色渐变显示紧急程度
- 固定位置，避免布局跳动

## 🎮 游戏玩法

1. **设置用户名**：首次游戏需要设置用户名
2. **选择模式**：选择时间模式或生命模式
3. **判断颜色**：观察显示的颜色词，判断文字内容是否与显示颜色匹配
4. **快速反应**：在进度条结束前做出判断
5. **查看统计**：游戏结束后查看详细统计数据

## 🛠️ 技术栈

- **前端框架**：原生JavaScript ES6+
- **样式库**：Tailwind CSS
- **字体**：Noto Sans SC (支持中文)
- **存储**：LocalStorage
- **动画**：CSS3 动画和过渡效果

## 📁 项目结构

```
color-logic/
├── index.html          # 主页面文件
├── game.js             # 游戏逻辑核心
└── README.md           # 项目说明文档
```

## 🚀 快速开始

### 本地运行

1. 克隆项目到本地：
```bash
git clone [项目地址]
cd color-logic
```

2. 使用任意Web服务器运行项目：
```bash
# 使用Python (推荐)
python -m http.server 8000

# 或使用Node.js
npx serve .

# 或直接用浏览器打开
open index.html
```

3. 在浏览器中访问 `http://localhost:8000`

### 部署

项目为纯静态页面，可部署到任意静态网站托管服务：

- GitHub Pages
- Netlify  
- Vercel
- 或任意Web服务器

## 🎯 游戏规则详解

### 基本规则
- 屏幕显示一个颜色词（如"红色"）
- 该词可能以相同颜色显示（匹配），也可能以不同颜色显示（不匹配）
- 玩家需要判断词义与显示颜色是否一致

### 计分规则
- 每答对一题：正确题数+1
- 每答错一题：错误题数+1
- 超时视为答错
- 实时计算正确率 = 正确题数 ÷ 总题数 × 100%

### 模式说明
- **时间模式**：60秒倒计时，时间结束游戏结束
- **生命模式**：3条生命，答错扣除生命，生命耗尽游戏结束

## 🎨 色彩配置

游戏包含10种颜色：
- 红色 (#ef4444)
- 蓝色 (#3b82f6) 
- 绿色 (#22c55e)
- 黄色 (#eab308)
- 紫色 (#a855f7)
- 橙色 (#f97316)
- 粉色 (#ec4899)
- 棕色 (#a16207)
- 青色 (#06b6d4)
- 灰色 (#6b7280)

## 📱 兼容性

- ✅ Chrome 80+
- ✅ Firefox 75+
- ✅ Safari 13+
- ✅ Edge 80+
- ✅ 移动端浏览器

## 🤝 贡献指南

欢迎提交Issue和Pull Request来改进游戏！

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 🎯 未来计划

- [ ] 添加音效支持
- [ ] 增加难度等级选择
- [ ] 支持自定义颜色配置
- [ ] 添加成就系统
- [ ] 多语言支持
- [ ] 数据分析和可视化
- [ ] 社交分享功能

## 📞 联系方式

如有问题或建议，欢迎通过以下方式联系：

- 在线演示：https://toolkitfree.org/projects/stroop/
- 项目仓库：[GitHub地址]

---

**享受游戏，挑战大脑！** 🧠✨