🎴 探索验证卡牌系统 - 虚拟抽卡程序

一个基于"探索验证卡牌系统"的虚拟抽卡程序，让用户体验"随机获得探索任务"的乐趣，增强产品互动性和趣味性。

✨ 功能特性

🎲 核心功能

• 抽卡系统：点击抽卡按钮，随机获得探索卡、验证卡或复盘卡
• 权重抽卡：探索卡50%、验证卡30%、复盘卡20%的抽卡概率
• 动画效果：卡牌从底部飞入、翻转展示、星级点亮动画
• 历史记录：自动保存抽卡历史，可随时查看
• 收藏功能：收藏喜欢的卡牌，建立个人收藏册
• 分享功能：一键分享抽卡结果到社交媒体

🏆 成就系统

• 首次抽卡：完成第一次抽卡
• 探索新手：连续抽卡7天
• 探索达人：累计抽卡30次
• 好奇收集者：收藏10张不同卡牌
• 全类型收集：收藏所有三种类型的卡牌
• 坚持不懈：连续7天每天抽卡

📊 卡牌类型

🟢 探索卡（10张）

• 30小时体验新领域
• 深度访谈一位专家
• 完成一个最小可行产品
• 阅读3本相关书籍
• 参加一个行业会议
• 完成一次实地调研
• 学习一项新技能
• 分析一个成功案例
• 进行一次用户画像研究
• 完成一次竞品分析

🔵 验证卡（10张）

• 投入产出比计算器
• 能量消耗记录表
• 30天习惯验证
• A/B测试验证法
• 关键指标追踪
• 小规模试点验证
• 用户反馈验证
• 成本效益分析
• 里程碑检查点
• 结果对比验证

🟣 复盘卡（10张）

• L1/L2/L3责任分级器
• 能量管理复盘
• 决策复盘模型
• 项目复盘四象限
• 时间投资复盘
• 学习复盘法
• 关系复盘模型
• 目标达成复盘
• 错误复盘法
• 成功复盘模型

🚀 快速开始

安装

无需安装，直接打开 index.html 文件即可使用。

使用方法

1. 打开 index.html 文件（在浏览器中打开）
2. 点击"🎲 抽卡"按钮开始抽卡
3. 等待卡牌飞入和翻转动画
4. 查看卡牌内容，可以：
   • ⭐ 收藏卡牌
   • 📤 分享卡牌
   • 📜 查看历史记录
   • 📚 查看收藏
   • 🏆 查看成就

本地存储

所有数据（抽卡历史、收藏、成就等）都保存在浏览器的 localStorage 中，不会上传到服务器。

📁 项目结构

卡牌/
├── index.html      # 主页面
├── styles.css      # 样式文件
├── cardData.js     # 卡牌数据
├── app.js          # 核心逻辑
└── README.md       # 项目文档

🎨 技术栈

• 前端：HTML5 + CSS3 + JavaScript（原生）
• 动画：CSS3 动画 + JavaScript 动画
• 存储：localStorage
• 响应式：移动端优先设计，适配 375px 以上屏幕

🌐 部署

GitHub Pages

1. 将代码推送到 GitHub 仓库
2. 在仓库 Settings 中启用 GitHub Pages
3. 选择 main 分支作为源
4. 访问生成的 URL

Netlify/Vercel

1. 连接 GitHub 仓库
2. 自动构建部署
3. 支持自定义域名

本地服务器

使用任何本地服务器工具：

# Python 3
python -m http.server 8000

# Node.js (http-server)
npx http-server

# PHP
php -S localhost:8000

然后在浏览器访问 http://localhost:8000

🎯 核心功能实现

抽卡逻辑

// 根据权重随机选择卡牌类型
const type = getRandomTypeByWeight();
// 从对应卡组随机选择一张卡
const card = getRandomCard(type);
// 记录到历史
saveToHistory(card);
// 显示卡牌
displayCard(card);

动画效果

• 卡牌飞入：从底部 translateY(100vh) 飞入到 translateY(0)
• 翻转动画：使用 rotateY(180deg) 实现 3D 翻转效果
• 星级点亮：逐个点亮星星，带缩放动画

数据持久化

使用 localStorage 存储：

• drawHistory: 抽卡历史
• collections: 收藏列表
• achievements: 成就列表
• totalDraws: 总抽卡次数
• dailyDraws: 每日抽卡数据

🔧 自定义配置

修改抽卡权重

在 cardData.js 中修改 cardWeights 对象：

const cardWeights = {
    explore: 50,    // 探索卡概率
    verify: 30,     // 验证卡概率
    review: 20      // 复盘卡概率
};

添加新卡牌

在 cardData.js 中的对应数组中添加新卡牌对象：

{
    id: "EX011",              // 唯一ID
    type: "探索卡",            // 卡牌类型
    title: "卡牌标题",         // 卡牌标题
    difficulty: 3,            // 难度星级（1-5）
    color: "#4CAF50",         // 卡牌颜色
    content: {
        // 卡牌内容
    },
    suggestedTime: "建议时间"  // 建议完成时间
}

🎨 样式自定义

在 styles.css 中修改 CSS 变量：

:root {
    --primary-color: #1A237E;    /* 主色 */
    --explore-color: #4CAF50;    /* 探索卡颜色 */
    --verify-color: #2196F3;     /* 验证卡颜色 */
    --review-color: #9C27B0;     /* 复盘卡颜色 */
    --bg-gradient-start: #0a0e27; /* 背景渐变起始 */
    --bg-gradient-end: #1a1f3a;   /* 背景渐变结束 */
}

📱 响应式设计

• 移动端优先：适配 375px 及以上屏幕
• 平板适配：768px 及以上优化显示
• 触摸优化：按钮和交互元素适合触摸操作

🐛 已知问题

暂无已知问题。如有发现，欢迎提交 Issue。

🔮 未来计划

• 添加更多卡牌（扩展卡牌库）
• 实现卡牌交换系统
• 添加社交功能（查看好友抽卡）
• 增加每日任务系统
• 优化动画效果
• 添加音效
• 支持多语言
• 小程序版本

📄 许可证

MIT License

👤 作者

探索验证卡牌系统开发团队

🙏 致谢

感谢所有为这个项目提供灵感和支持的人们！

---

享受抽卡的乐趣，开启探索之旅！ 🎉