马年许愿树
种下心愿，静待花开
一款融合马年元素与许愿文化的互动式愿望管理系统。通过游戏化设计，让目标管理变得有趣且富有仪式感。
核心功能
许愿系统
- 创建、查看、编辑、完成愿望
- 7种愿望分类（事业、学业、健康、爱情、财富、家庭、其他）
- 自定义愿望颜色和期望实现日期
- 愿望状态追踪（进行中、已实现、已过期）
许愿树成长
- 基于愿望数量和完成情况的升级系统
- 树龄等级：小树苗 → 许愿树 → 参天大树
- 经验值系统：许愿 +20、完成愿望 +50
抽签占卜
- 马年灵签系统（上上签、上签、中签、下签）
- 基于幸运值的概率算法
- 签文解读和建议
许愿瓶
- 投放许愿瓶到虚拟海洋
- 随机捡取他人的许愿瓶
- 愿望漂流互动机制
祈福系统
- 10条精选马年祝福语
- 随机生成祝福内容
- 提升幸运值
数据统计
- 愿望总数、完成数、实现率
- 愿望值、幸运值追踪
- 连续许愿天数统计
- 分类分布可视化图表
技术特性
视觉设计
- Glassmorphism：毛玻璃拟态风格
- 3D Transform：立体卡片效果
- Particle System：粒子飘落动画
- Gradient Animation：渐变色流动效果
- Responsive Design：完美适配移动端
技术栈
前端：HTML5 + CSS3 + JavaScript ES6+
存储：LocalStorage API
图表：Canvas 2D API
动画：CSS Animation + Keyframes
代码质量
- 遵循 KISS、DRY、YAGNI、SOLID 原则
- 模块化函数设计
- 完善的错误处理
- 数据持久化保障
快速开始
# 克隆或下载项目
cd horse-wish-tree
# 直接在浏览器打开
open index.html
无需安装依赖，开箱即用。
使用指南
1. 许愿
点击"许愿"按钮 → 填写愿望内容 → 选择分类和颜色 → 确认许愿
2. 完成愿望
在愿望卡片上点击 
按钮 → 愿望标记为已实现 → 获得经验值和愿望值
3. 抽签
点击"抽签"按钮 → 点击"抽签"获取运势 → 查看签文和建议
4. 许愿瓶
- 投放：写下心愿 → 点击"投放"
- 捡取：点击"捡一个" → 查看随机许愿瓶
5. 祈福
点击"祈福"按钮 → 点击"祈福"获得祝福 → 提升幸运值
数据说明
愿望值系统
- 许愿：+10 愿望值
- 完成愿望：+50 愿望值
- 愿望值反映你的许愿活跃度
幸运值系统
- 初始值：50
- 许愿：+2 幸运值
- 完成愿望：+5 幸运值
- 祈福：+3 幸运值
- 影响抽签结果概率
经验值系统
- 许愿：+20 经验
- 完成愿望：+50 经验
- 抽签：+10 经验
- 许愿瓶：+5 经验
- 祈福：+10 经验
设计理念
游戏化
通过等级、经验值、成就等游戏元素，增强用户参与感和成就感。
仪式感
许愿、抽签、祈福等功能营造庄重的仪式氛围，让目标管理更有意义。
视觉美学
采用现代化的 Glassmorphism 设计语言，配合流畅动画，提供愉悦的视觉体验。
文化融合
融入马年元素和中国传统许愿文化，增强节日氛围和文化认同。
项目结构
horse-wish-tree/
├── index.html # 主页面结构
├── style.css # 样式和动画
├── app.js # 核心逻辑
└── README.md # 项目文档
配置说明
愿望分类
可在 app.js 中的 WISH_CATEGORIES 对象自定义分类：
const WISH_CATEGORIES = {
career: { name: '事业', icon: '🎯', color: '#ff6b6b' },
// 添加更多分类...
};
签文内容
可在 FORTUNE_TEXTS 对象中自定义签文：
const FORTUNE_TEXTS = {
excellent: [
{ text: '签文内容', advice: '建议内容' }
]
};
祝福语
可在 BLESSINGS 数组中添加祝福语：
const BLESSINGS = [
'你的祝福语...'
];
特色亮点
- 沉浸式体验：粒子效果、星空背景、流畅动画营造梦幻氛围
- 完整的成长系统：许愿树从小树苗成长为参天大树
- 多维度激励：愿望值、幸运值、经验值三重激励机制
- 社交互动：许愿瓶系统实现虚拟社交互动
- 数据可视化：Canvas 图表直观展示愿望分布
v1.0.0 (2026-02-06)
初始版本发布
许愿系统- 许愿树成长系统
抽签占卜功能
许愿瓶互动
祈福系统- 数据统计和可视化
- Glassmorphism 视觉设计
- 粒子动画效果
