微醺实验室 Lucky Wheel

一个部署在 GitHub Pages 的静态网页小游戏： 左侧展示酒单滚动列表，中间是拉杆老虎机，右侧是用户排行榜。

功能概览

• 像素风老虎机与拉杆交互
• 左侧酒单滚动（酒名 + 图片），支持点击查看详情
• 右侧用户排行榜滚动（头像 + 名称 + 拉杆次数）
• 每次拉杆前录入用户姓名；新用户需拍照，老用户可直接确认
• 点击用户可查看历史记录（酒名 + 时间）
• 抽奖结果弹窗展示对应酒名、图片和配方
• 隐藏奖品独立概率与独立音效
• 排行榜支持一键导出（HTML 报告，图片可直接查看）

隐藏奖品规则

当前实现：

• 隐藏奖品概率：30%
• 同一用户最多抽中一次隐藏奖品

可快速调整位置：script.js

• HIDDEN_PRIZE_WEIGHT：控制隐藏奖品权重（当前按 30% 配置）
• getDrinkWeight：普通奖品与隐藏奖品权重规则

说明：中奖限制基于该用户本地历史记录判断（localStorage）。

目录结构

• index.html：页面结构与弹窗骨架
• style.css：像素风与霓虹主题样式
• script.js：抽奖逻辑、用户/排行榜逻辑、导出逻辑、音效
• config.js：酒单数据源（名称、图片、配方）
• assets/drinks/：优化后的酒图资源（用于线上加载提速）
• 酒图/：原始高分辨率图片素材

本地运行

建议使用静态服务器：

python3 -m http.server 8000

访问：http://localhost:8000

配置酒单

编辑 config.js 中的 DRINKS：

• id：唯一标识
• name：酒名
• image：图片路径（建议使用 assets/drinks/*.jpg）
• recipe：弹窗中展示的配方（支持 <br>）

数据存储与导出

• 用户数据保存在浏览器本地 localStorage（键：lucky-wheel.leaderboard.v1）
• 数据包含：用户名、头像、拉杆次数、历史记录
• 点击“导出记录”会下载 HTML 报告（含排行榜与每个用户历史）

性能建议（GitHub Pages）

本项目已将在线图片改为压缩资源（assets/drinks/）。 若仍需进一步提速：

• 继续降低图片分辨率/质量
• 使用 CDN 托管图片资源
• 控制首屏加载资源数量

部署

推送到 main 分支后，通过 GitHub Pages 发布。

注意事项

• 本项目为纯前端静态站点，不含后端数据库
• 不同设备/浏览器之间的用户记录不互通
• 摄像头权限由浏览器控制，需用户手动授权