成语填空游戏

一个有趣的成语学习游戏平台,支持多种游戏模式,帮助用户在娱乐中学习中国传统文化。

功能特性

• 🎮 多种游戏模式:
  • 经典模式 - 轻松练习,循序渐进
  • 竞速模式 - 限时挑战,提升反应
  • 闯关模式 - 难度递增,成就感满满
• 🌙 深色/浅色主题
• 🌐 中英文双语支持
• 🔐 用户账号系统
• 📊 排行榜系统
• 📱 响应式设计,支持移动端
• 🎵 游戏音效

技术栈

• Vue 3 + TypeScript
• Tailwind CSS 样式框架
• Vite 构建工具
• Pinia 状态管理
• Vue Router 路由管理
• Vue I18n 国际化
• Supabase 数据库
• Clerk 身份认证

开始使用

1. 克隆项目: bash git clone https://github.com/your-username/idiom-game.git cd idiom-game

2. 安装依赖: bash npm install

3. 配置环境变量:

• 复制 .env.example 到 .env
• 填入你的 Supabase 和 Clerk 配置信息

4. 启动开发服务器: bash npm run dev

环境变量配置

在项目根目录创建 .env 文件,填入以下配置:

env Supabase 配置 VITE_SUPABASE_URL=你的_supabase_项目地址 VITE_SUPABASE_ANON_KEY=你的_supabase_匿名密钥 Clerk 认证配置 VITE_CLERK_PUBLISHABLE_KEY=你的_clerk_公钥 VITE_CLERK_SECRET_KEY=你的_clerk_密钥

项目结构

src/ ├── components/ # Vue 组件 │ └── game/ # 游戏相关组件 ├── types/ # TypeScript 类型定义 ├── stores/ # Pinia 状态管理 ├── router/ # 路由配置 ├── i18n/ # 国际化文件 └── assets/ # 静态资源

可用脚本

• npm run dev - 启动开发服务器
• npm run build - 构建生产版本
• npm run preview - 预览生产构建
• npm run type-check - 运行类型检查

开发规范

命名规范

• 组件文件使用 PascalCase（如 ClassicMode.vue）
• 工具函数文件使用 camelCase（如 gameService.ts）
• 样式文件使用 kebab-case（如 game-base.css）

目录规范

• 按功能模块划分目录（如 game、user、auth）
• 公共组件放在 common 目录
• 类型定义统一放在 types 目录

样式规范

• 优先使用 Tailwind CSS 工具类
• 组件特定样式使用 scoped
• 全局样式集中管理

参与贡献

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的修改 (git commit -m '添加一些特性')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 发起 Pull Request

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0

许可证

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

致谢

• Vue.js 团队提供优秀的框架
• Supabase 团队提供可靠的后端服务
• Clerk 团队提供安全的认证服务
• 所有贡献者和用户的支持

联系方式

如有问题或建议,欢迎提 Issue 或 PR