忘川风华录抽卡模拟器产品系统

立项原因

本项目源于对《忘川风华录》手游抽卡玩法的深度还原与扩展需求。玩家希望有一个独立的、可自由定制卡池规则的抽卡模拟工具，用于测试抽卡概率、模拟保底机制、验证成就触发条件等场景。

旨在解决的产品问题

1. 游戏内抽卡不可逆、不可重复测试：正式游戏中抽卡消耗真实资源，玩家无法反复测试不同卡池的出货规律。本模拟器提供零成本、无限次的抽卡体验。
2. 卡池规则不透明：游戏内玩家只能被动接受官方设定的卡池，无法自定义UP角色、调整保底参数。本模拟器支持天品自选、地品自选、引灵等多个卡池，玩家可自由设定UP名士，验证不同抽卡策略的收益。
3. 成就与保底追踪不便：游戏中缺乏直观的成就进度和保底计数展示。本模拟器提供实时保底倒计时、抽数统计、成就解锁通知等功能。
4. 国内访问稳定性：部分玩家无法稳定访问境外托管平台（如GitHub Pages），需要通过国内托管方案（Gitee Pages）提供服务。

行业场景

· 手游行业：抽卡机制是手游核心玩法之一，玩家社区对抽卡模拟工具有持续需求。
· 粉丝社区与攻略组：游戏攻略作者、UP主可使用模拟器制作抽卡概率分析、保底策略指南等内容。
· 独立开发者参考：作为前端抽卡系统实现范例，展示保底逻辑、概率递增、成就触发等复杂状态管理的实现方式。

业务场景

1. 玩家日常模拟抽卡：在正式游戏消耗资源前，先用模拟器体验抽卡手感，评估是否值得投入。
2. 抽卡策略研究：玩家可切换不同卡池、设定不同UP角色，对比分析最优抽卡策略。
3. 成就收集与分享：玩家通过模拟抽卡解锁成就，将结果分享至社区。
4. 多端访问：支持PC和移动端浏览器访问，未来可扩展为PWA，提供类原生应用体验。

一、卡池系统（5个独立卡池）
1. 天品自选：可自选天卡和地卡UP角色，卡池名称随所选角色变化。天卡概率2%起，51抽后递增至80抽100%保底，每3张天卡必出UP角色。
2. 地品自选：可自选地卡UP角色，30抽必得UP角色，抽到后重置。
3. 高级卡池：无UP随机卡池，概率规则与自选卡池相同。
4. 普通卡池：支持自定义1-10抽数量，10抽必得玄卡以上。
5. 引灵卡池：抽取九世灵，40抽保底绝品。需选专属名士，九世灵UP可选。

二、核心机制
· 各卡池保底独立计算，切换不丢失进度
· 实时显示保底倒计时和抽数统计
· 天卡/地卡以"???"隐藏，点击揭晓
· 抽卡后弹出猫咪动画，注魂后展示结果

三、成就系统
· 十连触发成就（如"寻英识士·两仪""小白猫赏脸"等）
· 连续60抽无天卡触发"小黑猫捣鬼"及累计成就
· 选择花木兰作为UP解锁隐藏成就

四、交互体验
· 支持PC端和移动端
· 点击音效和背景音乐
· 再次抽取功能，无需退出
· 搜索式下拉选择UP角色
· 抽卡记录（近80次）

五、技术特点
· 静态单文件，无需服务器
· 支持GitHub/Gitee双平台部署
· 访问计数器

个人职责
· 独立完成需求分析、规则梳理、系统设计、前端开发、测试及部署上线全流程
· 设计并实现5个独立卡池的抽卡逻辑，包含概率递增、多重保底、UP权重分配等复杂规则
· 采用集中式状态管理架构，实现多卡池保底计数隔离、成就追踪、抽卡记录等功能
· 使用Web Crypto API实现真随机数生成，Web Audio API合成点击音效
· 完成响应式布局，适配PC端与移动端
· 完成双平台部署，解决国内用户访问稳定性问题
技术栈
HTML5、CSS3、JavaScript（ES6+）、Web Crypto API、Web Audio API、GitHub Pages / Gitee Pages
系统架构
静态单页应用，采用集中式状态管理。整体分为三层：首页层（入口）、主界面层（卡池切换、UP设定、保底提示、结果展示）、弹窗层（猫咪动画、记录、成就、确认弹窗）。五个卡池的保底计数、成就进度、抽卡记录等状态全部集中在一个state对象中管理，各卡池独立计数，切换时不丢失进度。
实现亮点
· 单文件零依赖：HTML/CSS/JS全部内嵌，方便部署和分享
· 真随机数生成：使用crypto.getRandomValues替代Math.random，基于硬件熵源，比伪随机更接近真实抽卡
· 无外部音频合成音效：用OscillatorNode+GainNode实时合成点击音效，延迟极低，无需加载音频文件
· 五卡池状态隔离：天品自选、地品自选、高级、普通、引灵各卡池的保底计数器完全独立
· 猫咪动画交互链：抽卡→猫咪弹窗→注魂揭晓→再次抽取（跳过注魂），状态在多次操作间正确传递
技术难点
十连保底计数修复、自选搜索彩蛋设置、成就互斥判定、移动端响应适配