马年自律计划 - 豪华版
养成你的飞马，成就更好的自己！
一款融合游戏化、马年元素和自律管理的创新型习惯追踪系统。通过养马、签到、喂养、专注等趣味玩法，让自律变得有趣又有成就感！
项目特色
游戏化设计
- 马匹养成系统：从小马驹成长为飞马
- 经验值升级：完成任务获得经验，马匹不断成长
- 成就系统：15+个成就徽章等你解锁
- 奖励机制：胡萝卜
、红包
、经验值多重奖励
马厩系统（核心玩法）
- 可养育最多5匹不同品种的马
- 每匹马独立的等级、经验和心情
- 随机获得：小马驹、骏马
、斑马
、独角兽、旋转木马
- 自由切换当前使用的马匹
- 花费50个胡萝卜购买新马
马匹心情系统
- 三种心情状态：
- 开心：任务完成率高，经常喂养
一般：正常状态
难过：长时间未完成任务或喂养
- 心情影响马匹表现和成长速度
- 通过喂养胡萝卜提升心情
喂养系统
- 使用胡萝卜喂养马匹
- 喂养后马匹心情变好，获得经验值+5
- 胡萝卜获取途径：
- 每日签到：5个（连续7天10个）
- 完成任务：1个
- 完成番茄钟：3个
每日签到
- 每天签到获得5个胡萝卜
- 连续签到7天奖励翻倍（10个）
- 自动追踪连续签到天数
- 解锁签到相关成就
番茄钟专注模式
- 25分钟专注倒计时
- 实时显示剩余时间
- 完成后奖励：
- 经验值 +20
- 胡萝卜 +3
- 30%概率获得红包
- 培养专注习惯，提升效率
红包奖励系统
- 完成任务：20%概率获得红包
- 完成番茄钟：30%概率获得红包
- 红包数量统计展示
- 解锁红包收集成就
数据可视化
- Canvas绘制的精美柱状图
- 展示最近7天完成趋势
- 自动记录每日数据
- 一目了然的进度追踪
马年祝福生成器
- 10条精选马年祝福语
- 8个马年成语及详细释义
- 随机生成，每次都有新惊喜
- 增强节日氛围
任务管理
- 今日任务清单
- 任务完成进度统计
- 完成任务获得经验值+10、胡萝卜+1
- 20%概率获得红包奖励
习惯追踪
- 自定义习惯目标
- 每日打卡记录
- 进度可视化展示
- 完成习惯获得经验值+15
成就系统
15个精心设计的成就：
初出茅庐：完成第一个任务
三日之约：连续打卡3天
一周坚持：连续打卡7天
习惯养成：连续打卡21天- 小有所成：累计完成10个任务
勤奋之星：累计完成50个任务- 百炼成钢：累计完成100个任务
- 小马成长：达到5级
- 骏马奔腾：达到10级
习惯大师：完成一个习惯21天
签到新手：完成第一次签到- 胡萝卜收集家：收集100个胡萝卜
- 番茄钟大师：完成10个番茄钟
- 红包运气王：获得20个红包
- 马厩主人：拥有3匹马
视觉设计
Glassmorphism（毛玻璃拟态）
- 30px高斯模糊效果
- 180%饱和度增强
- 半透明背景
- 精致的边框和阴影
3D卡片效果
- perspective 3D变换
- 悬停时立体旋转
- 深度阴影增强
- 流畅的过渡动画
粒子动画系统
- 马蹄印粒子飘落
- 背景星星闪烁
图标弹跳动画
番茄钟脉冲效果
春节装饰元素
灯笼摆动动画
鞭炮闪烁效果
春联装饰
十二生肖旋转
配色方案
- 金色主题（胡萝卜、红包）
- 渐变色按钮
- 彩虹色进度条
- 节日红色点缀
- 紫色渐变背景
使用流程
每日签到
- 打开应用后，点击"每日签到"按钮
- 获得5个胡萝卜（连续7天10个）
- 查看连续签到天数
添加任务
- 在"今日任务"区域输入任务内容
- 点击"
添加"按钮 - 完成任务后勾选复选框
喂养马匹
- 点击"喂养马匹"按钮
- 消耗1个胡萝卜
- 马匹心情变好，获得经验值+5
开启番茄钟
- 点击"番茄钟"按钮
- 专注25分钟
- 完成后获得经验值+20、胡萝卜+3
查看祝福
- 点击"马年祝福"按钮
- 随机生成马年祝福语和成语
- 分享给朋友增添节日气氛
购买新马
- 收集50个胡萝卜
- 在马厩区域点击"购买新马"
- 随机获得不同品种的马
- 点击马匹卡片切换当前使用的马
查看数据
- 滚动到页面底部
- 查看最近7天完成趋势图
- 了解自己的进步情况
数据统计
系统自动追踪以下数据：
使用天数
累计完成任务数- 连续打卡天数
- 最长连续记录
- 获得奖励次数
完成率- 胡萝卜数量
- 红包数量
- 番茄钟完成次数
- 拥有的马匹数量
数据持久化
- 所有数据自动保存到浏览器 LocalStorage
- 刷新页面不会丢失进度
- 支持数据导出功能
- 可以重置数据重新开始
使用技巧
高效自律建议
- 每天早上签到：养成第一件事就签到的习惯
- 合理规划任务：每天3-5个任务最合适
- 善用番茄钟：专注工作/学习时开启
- 及时喂养：保持马匹好心情
- 追踪数据：定期查看图表了解进步
胡萝卜管理
- 优先用于喂养马匹（提升心情和经验）
- 积累50个购买新马
- 保持一定库存应对日常需求
马厩策略
- 先养1-2匹马专注培养
- 等级高的马可以获得更多成就感
- 收集不同品种的马增加趣味性
技术栈
- 前端框架：原生 JavaScript ES6+
- 样式设计：CSS3（Glassmorphism、3D Transform）
- 数据存储：LocalStorage API
- 图表绘制：Canvas 2D API
- 动画系统：CSS Animation + Keyframes
特色亮点
1. 创新的马厩系统
- 业界首创的多马养成机制
- 每匹马独立成长系统
- 丰富的马匹品种收集
2. 完善的奖励机制
- 多维度奖励体系
- 即时反馈机制
- 成就感满满
3. 精美的视觉设计
- 现代化的Glassmorphism风格
- 流畅的3D动画效果
- 丰富的粒子特效
4. 浓厚的马年氛围
- 马年成语和祝福
- 春节装饰元素
- 马相关的emoji和动画
5. 科学的专注训练
- 番茄钟工作法
- 专注时间统计
- 效率提升工具
未来规划
- 云端数据同步
- 多设备数据共享
- 社交分享功能
- 更多马匹品种
- 马匹装备系统
- 好友排行榜
- 每周/每月挑战
- 音效系统
- 主题切换功能
- 移动端APP
预览地址： https://horse-7jp.pages.dev/
愿你在马年：
- 马到成功
- 一马当先
- 龙马精神
- 万马奔腾
