星空英语单词学习系统 - 项目发布文档
项目概述
这是一个 沉浸式游戏化英语单词学习平台 ，采用星空主题UI设计，将枯燥的单词背诵转化为有趣的游戏体验。系统支持四六级单词学习，结合AI智能解释、视频学习、等级激励和多种趣味小游戏，让学习英语变得高效又有趣。
独特亮点
星空主题UI - 浪漫的星空背景配合月亮下落动画，营造沉浸式学习氛围
游戏化学习 - 等级系统、游戏币激励、多种小游戏（翻牌、骰子、抽奖、匹配等）
AI智能辅助 - 集成DeepSeek API提供单词音标、例句、知识点解释
多用户支持 - 每个用户独立的学习进度、等级和游戏币记录
视频学习 - 每个单词配套视频演示，加深记忆
系统架构
技术栈
前端：HTML5 + CSS3 + JavaScript (ES6
+)
后端：Node.js + Express.js
数据库：MongoDB + Mongoose
AI服务：DeepSeek API
架构图
┌────────────────────────────────────
─────────────────────┐
│ 前端页面
层 │
├──────────────┬──────────────┬──────
────────┬──────────────┤
│ 主页 │ 单词学习页 │ 挑战模
式 │ 金币商店 │
│ (index.html) │ (cet4/6.html)│
(challenge) │ (coin-shop) │
└──────────────┴──────────────┴──────
────────┴──────────────┘
↓
┌────────────────────────────────────
─────────────────────┐
│ RESTful API
层 │
│ (Express.
js) │
├────────────────────────────────────
─────────────────────┤
│ /api/words/* - 单词相关接
口 │
│ /api/encouragement - 鼓励语
录 │
│ /api/generate-joke - 生成笑
话 │
│ /api/translate - 翻译服
务 │
│ /api/generate-article - 生成浮夸文
章 │
└────────────────────────────────────
─────────────────────┘
↓
┌────────────────────────────────────
─────────────────────┐
│ 业务逻辑
层 │
├────────────────────────────────────
─────────────────────┤
│ • 单词管理 • 用户进度管
理 │
│ • AI解释生成 • 游戏币系
统 │
│ • 缓存机制 • 小游戏逻
辑 │
└────────────────────────────────────
─────────────────────┘
↓
┌────────────────────────────────────
─────────────────────┐
│ 数据
层 │
├────────────────────────────────────
─────────────────────┤
│ MongoDB +
Mongoose
│
│ ├─ Word Model - 单词数据模
型 │
│ └─ Order Model - 订单数据模
型 │
└────────────────────────────────────
─────────────────────┘
↓
┌────────────────────────────────────
─────────────────────┐
│ 外部服
务 │
├────────────────────────────────────
─────────────────────┤
│ • DeepSeek API - AI智能解释生
成 │
│ • 本地视频文件 - 单词视频资
源 │
└────────────────────────────────────
─────────────────────┘
项目结构
CET-4/
├── config/
│ └── database.js #
MongoDB连接配置
├── models/
│ ├── Word.js # 单
词数据模型
│ └── Order.js # 订
单数据模型
├── scripts/ # 数
据库脚本
│ ├── seedDatabase.js # 初
始化单词数据
│ ├── addMissingWords.js # 补
充缺失单词
│ └── ...
├── videos/ # 单
词视频文件夹
├── index.html # 主
页（星空动画入口）
├── cet4.html # 四
级单词学习页
├── cet6.html # 六
级单词学习页
├── challenge.html # 挑
战模式
├── coin-shop.html # 金
币商店
├── card-game.html # 翻
牌游戏
├── dice-game.html # 骰
子游戏
├── lottery-game.html # 抽
奖游戏
├── match-game.html # 单
词匹配游戏
├── matching-game.html # 另
一款匹配游戏
├── completion-game.html # 完
成游戏
├── 浮夸文章.html # 成
就展示页
├── server.js # 后
端服务器
├── package.json # 项
目依赖
├── .env # 环
境变量
└── README.md # 项
目说明
核心功能模块
1. 主页与用户系统
- 月亮下落动画 - 浪漫的开场动画
- 用户登录 - 支持自定义用户名
- 等级与游戏币显示 - 实时展示学习进度
2. 单词学习系统
- 四级/六级分类 - 独立的单词库
- 详细解释 - 词性、例句、翻译
- AI音标生成 - 英美音双音标
- 知识点解释 - 词源、用法、搭配
- 视频学习 - 配套演示视频
- 标记已背 - 学习进度追踪
- 筛选排序 - ABC顺序/难度/乱序/已背/未背
3. 等级与激励系统
- 升级机制 - 每学习20个单词升一级
- 游戏币奖励 - 升级获得10金币
- 成就展示 - 每背100个单词展示浮夸文章
- 等级查询 - 查看详细学习进度
4. 趣味小游戏
翻牌游戏 - 消耗金币翻卡牌获得奖励
骰子游戏 - 掷骰子赢取金币
抽奖游戏 - 好运抽奖得大奖
匹配游戏 - 单词-释义匹配练习- 挑战模式 - 限时挑战提升词汇量
5. AI智能功能
- 单词解释生成 - DeepSeek API提供详细解释
- 音标生成 - 自动生成国际音标
- 鼓励语录 - 学习受挫时的暖心鼓励
- 笑话生成 - 学习间隙的轻松一刻
- 文章翻译 - 中英文互译服务
数据模型
Word 单词模型
{
word: String, // 单词
phonetic: { uk: String, us:
String }, // 音标
level: String, // 等级
: cet4/cet6
difficulty: Number, // 难度
: 1-10
definitions: [{ // 详细
释义
partOfSpeech: String, // 词性
meaning: String, // 含义
examples: [{ sentence,
translation }], // 例句
synonyms: [String], // 同义
词
antonyms: [String] // 反义
词
}],
etymology: { origin,
history }, // 词源
memory: { tips,
associations }, // 记忆技巧
usage: { frequency, contexts,
collocations }, // 用法
video: { url, thumbnail,
duration }, // 视频
tags: [String], // 标签
createdAt, updatedAt // 时间
戳
}
用户数据（localStorage）
{
currentUsername: String, // 当前
用户名
user_{name}_level: Number, // 等级
user_{name}_coins: Number, // 游戏
币
user_{name}_progress: Number, //
升级进度
user_{name}_learnedWords:
[String], // 已背单词
user_{name}_learnedWordsMap: {
word: timestamp } // 背诵时间记录
}
安装与运行
环境要求
- Node.js 16+
- MongoDB 4.4+
安装步骤
# 1. 安装依赖
npm install
# 2. 配置环境变量（.env文件）
DEEPSEEK_API_KEY=your_api_key_here
MONGODB_URI=mongodb://
localhost:27017/cet4
# 3. 初始化数据库
npm run seed
# 4. 启动服务器
npm start
# 5. 访问应用
浏览器打开 http://localhost:3001
设计特色
视觉设计
- 星空背景 - 200颗闪烁星星，营造浪漫氛围
- 毛玻璃效果 - backdrop-filter打造现代感
- 渐变配色 - 深蓝到黑色的优雅渐变
- 流畅动画 - 月亮下落、星星闪烁、卡片悬停
用户体验
- 即时反馈 - 悬停效果、点击动画
- 进度可见 - 已背单词数、百分比展示
- 多模式切换 - 适应不同学习习惯
- 游戏化激励 - 升级、奖励、小游戏
核心技术实现
1. 缓存机制
// API响应缓存，避免重复调用
const explanationCache = new Map();
const phoneticCache = new Map();
const meaningCache = new Map();
2. 多用户隔离
// 每个用户独立的存储键
function getUserStorageKey(key) {
const username = getCurrentUsername
();
return `user_${username}_${key}`;
}
3. 动画系统
- CSS @keyframes 实现星星闪烁
- 月亮下落触发展示主内容
- 卡片悬停上浮效果
4. AI集成
- DeepSeek API 统一调用接口
- 结构化提示词确保输出格式一致
- 缓存机制提升响应速度
创新点
- 游戏化学习闭环 - 学习→升级→获得金币→玩游戏→激励学习
- 沉浸式UI设计 - 星空主题与学习场景完美融合
- AI赋能 - 不是简单的单词表，而是智能学习助手
- 多维度记忆 - 文字+视频+游戏+互动，全方位记忆
- 轻量级架构 - 前后端分离，易于扩展和部署
比赛亮点
这个项目非常适合参加比赛，因为它：
- 视觉冲击力强 - 星空主题UI让人眼前一亮
- 完整游戏化体验 - 不是简单的CRUD，而是真正的产品
- AI技术整合 - 紧跟技术趋势，有技术深度
实用价值 - 解决真实学习痛点，有用户价值- 完成度高 - 从主页到小游戏，功能完整，体验流畅
。泉哥语录