# en-card **Repository Path**: alexfengfeng/en-card ## Basic Information - **Project Name**: en-card - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-01-08 - **Last Updated**: 2026-01-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 🎮 英语单词卡片游戏 专为小学生设计的英语单词学习游戏 - 外研版三年级适用 > 🎨 采用护眼绿色调设计,保护视力,舒适自然 ## ✨ 功能特点 ### 🎮 游戏广场 - 三种游戏模式 1. **翻转记忆** 🃏 - 经典翻卡片配对游戏 2. **单词拼写** ✏️ - 看中文拼写英文单词 3. **问答挑战** ❓ - 快速问答测试 ### 📋 详细功能 - **多种玩法**: 3种不同的游戏模式,全方位学习 - **语音发音**: 点击英文单词自动朗读(浏览器原生语音合成) - **三个难度级别**: - 🌟 简单: 5个单词/题 - ⭐ 中等: 8个单词/题 - 💫 困难: 10个单词/题 - **计分系统**: 正确+10分,错误-2/5分 - **排行榜系统**: 查看历史最佳成绩和游戏统计 - **进度保存**: 自动保存游戏记录和最高分到本地 - **可爱图标**: 使用Emoji图标,生动有趣 - **完美移动端适配**: 专为手机浏览器优化,支持触摸操作 - **响应式设计**: 支持电脑、平板、手机(360px-1920px) - **护眼配色**: 采用柔和绿色调,保护视力健康 ## 🚀 快速开始 ### 安装依赖 ```bash npm install ``` ### 启动开发服务器 ```bash npm run dev ``` 浏览器会自动打开 `http://localhost:3000` ### 构建生产版本 ```bash npm run build ``` 构建产物在 `dist` 目录,可以部署到任何静态网站服务器 ## 📂 项目结构 ``` en-card/ ├── src/ │ ├── components/ # Vue组件 │ │ ├── GameCard.vue # 单个卡片组件 │ │ ├── GameBoard.vue # 游戏棋盘 │ │ ├── ScoreBoard.vue # 计分板 │ │ ├── DifficultySelector.vue # 难度选择 │ │ └── GameComplete.vue # 完成弹窗 │ ├── composables/ # 组合式函数 │ │ ├── useGameLogic.js # 游戏逻辑 │ │ ├── useSpeech.js # 语音合成 │ │ └── useStorage.js # 本地存储 │ ├── data/ │ │ └── words.js # 单词数据库 │ ├── assets/ │ │ └── main.css # 全局样式 │ ├── App.vue # 主应用组件 │ └── main.js # 入口文件 ├── index.html # HTML模板 ├── vite.config.js # Vite配置 └── package.json # 项目配置 ``` ## 📝 自定义单词 编辑 `src/data/words.js` 文件,按照以下格式添加单词: ```javascript { id: 51, en: 'apple', cn: '苹果', icon: '🍎', category: 'food' } ``` 字段说明: - `id`: 唯一编号(不能重复) - `en`: 英文单词 - `cn`: 中文翻译 - `icon`: Emoji图标 - `category`: 分类(可选) ## 🎯 游戏规则 1. **选择难度**: 从简单、中等、困难三个级别中选择 2. **翻卡片**: 点击卡片查看内容 3. **配对**: 找出英文单词和对应的中文翻译 4. **计分**: - 配对成功: +10分 - 配对失败: -2分 5. **胜利**: 完成所有配对即获胜 6. **发音**: 点击英文卡片会朗读单词 7. **排行榜**: 点击右上角"🏆 排行榜"查看历史成绩 ## 💾 数据存储 游戏使用浏览器 LocalStorage 保存: - 各难度的最高分 - 最近10条游戏记录(每个难度) - 排行榜数据(按分数降序,前10名) - 游戏统计数据(总次数、平均分数等) 清除浏览器数据会重置所有记录。 ## 🏆 排行榜功能 - **多难度排行**: 分别查看简单、中等、困难的排行榜 - **智能排序**: - 优先按分数降序 - 分数相同按移动次数升序 - 移动次数相同按用时升序 - **详细统计**: 显示总游戏次数、最高分、平均分数 - **时间显示**: 智能显示相对时间(刚刚、今天、昨天等) - **最新标记**: 标记最新完成的游戏记录 ## 🛠️ 技术栈 - **Vue 3**: 渐进式JavaScript框架 - **Vite**: 新一代前端构建工具 - **Web Speech API**: 浏览器原生语音合成 - **LocalStorage**: 本地数据持久化 ## 📱 浏览器支持 ### 桌面端 - Chrome/Edge (推荐) - Firefox - Safari - 需要支持 Web Speech API 的现代浏览器 ### 移动端 ✨ 完美支持 - iOS Safari (iPhone/iPad) - Android Chrome - 微信内置浏览器 - QQ浏览器 - UC浏览器 - 百度浏览器 - 需要支持 ES6+ 的现代移动浏览器 ### 移动端优化特性 - ✅ 适配刘海屏/安全区域 - ✅ 防止双击缩放 - ✅ 触摸反馈优化 - ✅ 流畅的滚动体验 - ✅ 防止文本选择/长按菜单 - ✅ PWA支持(可安装到桌面) ## 🎨 自定义样式 主要样式在以下文件: - 全局样式: `src/assets/main.css` - 组件样式: 各组件的 `