一个专为手机设计的通用麻将计分器,适合放在麻将桌上供四人同时查看。支持多玩家轮换、分数结算、历史记录等功能。
- 多玩家支持:支持4个以上玩家,可以轮换参与同一局
- 分数管理:每个玩家分数独立记录和管理,支持设置起始分数(原点)
- 玩家轮换:点击座位上的玩家名字可更换该座位的玩家
- 庄家管理:
- 庄家座位带有皇冠标记,带有脉冲动画效果
- 显示连庄次数(第一次当庄显示皇冠,连庄显示次数)
- 支持拖拽"下一局"按钮指定庄家和换庄/连庄
- 中间转盘始终逆时针旋转到正确的庄家位置
- 方向标记:自动显示東、南、西、北方向,正对当前庄家,当前东风方向以红色高亮显示
- 拖拽结算:直接拖动玩家卡片到另一玩家进行快速结算
- 拖拽指定庄家:拖动"下一局"按钮到玩家身上指定庄家
- 撤销功能:支持撤销最近一次结算操作,防止误操作
- 防息屏:游戏过程中保持屏幕常亮,避免频繁解锁
- 统计图表:可视化显示玩家分数走势,谁是"后半场发力"一目了然
- 暗黑模式:支持深色主题,夜间打牌更护眼
- 交互优化:数字滚动动画、拖拽动画效果,毛玻璃卡片设计,空座位虚线边框提示,提升使用体验
- 打骰子:3D 骰子功能,支持物理动画效果,点击圆盘即可掷骰子
- 强制竖屏:在手机横屏时强制旋转界面,保持竖屏布局,方便放置在麻将桌中央
- 设置原点:支持为每个玩家设置起始分数,适合不同规则的麻将游戏
- 手动缩放:支持通过顶部栏的 +/- 按钮手动调整界面元素大小,适应不同屏幕和观看距离
- 操作说明:顶部问号按钮打开独立“操作说明”弹窗,随时查看完整使用指南
- 锁定/解锁:顶部锁形按钮可一键锁定界面,锁定时除锁定按钮本身外的所有元素(包括菜单栏其他按钮、玩家卡片、转盘、底部操作栏)点击和拖拽均无效,防止误触
- 悬浮提示(Tooltips):顶部所有图标按钮在桌面端支持鼠标悬浮提示,快速了解各自功能
- 自定义动作面板:针对移动端优化的底部弹出式键盘,彻底解决软键盘遮挡问题。
- 纯数字键盘:内置计算器风格的大号数字键盘,输入金额更快更准。
- 拖拽结算:拖动玩家A到玩家B,直接弹出数字键盘快速结算(推荐方式)。
- 双重输入:支持触屏点击和物理键盘盲打(电脑端)。
- 实时反馈:结算后显示分数增减动画,带有半透明拖拽分身效果。
- 自动记录:每次结算完成后自动记录到历史。
- 指定初始庄家:游戏开始前(未坐满时),拖动"下一局"按钮到任意位置指定初始庄家
- 拖拽换庄/连庄:游戏中,拖动"下一局"按钮到玩家身上:
- 拖到当前庄家:连庄,连庄次数+1,局数+1
- 拖到其他玩家:换庄,连庄次数归零,局数+1
- 点击自动换庄:点击"下一局"按钮,自动换庄到下一家(顺时针),局数+1
- 连庄标记:庄家座位右上角显示连庄标记(第一次为皇冠👑,连庄显示次数)
- 历史记录:查看所有结算历史,包括时间、局数、交易详情
- 数据持久化:所有数据自动保存到浏览器本地存储
- 清空数据:支持清空所有数据,重新开始
本项目推荐托管于 GitHub Pages 或任何静态 Web 服务器。
由于采用了 ES Modules 模块化开发(为了更好的代码维护性),不再支持直接双击 index.html (file:// 协议) 打开。
如果你需要在本地运行,请启动一个静态文件服务器:
Python:
python3 -m http.server
# 然后访问 http://localhost:8000Node.js (http-server):
npx http-server .
# 然后访问 http://localhost:8080VS Code:
安装 "Live Server" 插件,右键 index.html 选择 "Open with Live Server"。
index.html:入口文件css/:样式文件js/:逻辑代码(ESM 模块)
- 线下麻将游戏计分
- 放在麻将桌中央供四人同时查看
- 需要记录多局游戏分数
- 数据保存在浏览器本地存储中,清除浏览器数据会丢失所有记录
- 建议定期查看历史记录,确认分数正确
- 清空数据操作不可恢复,请谨慎操作
- 现代浏览器(Chrome、Safari、Firefox、Edge等)
- 支持移动端浏览器
- 需要支持localStorage的浏览器
- 新手引导系统:
- 新增交互式教程,首次进入时自动展示
- 高亮引导核心功能:座位添加、庄家设置、分数结算、骰子功能等
- 支持"上一步"、"跳过"和"重新展示教程"(设置中)
- 玩家管理升级:
- 新增"下座"功能,可将玩家从当前座位移除
- 优化座位点击交互
- 加载体验优化:
- 新增应用启动加载动画
- 显示加载进度条,提升首屏等待体验
- 文案与细节优化:
- 优化教程文案,明确多人计分与庄家轮换规则
- 调整教程 UI 布局,防止遮挡目标元素
- 界面缩放优化:
- 最大缩放限制从2.5x提升到3.5x(增加40%),支持更大的显示比例
- 玩家卡片分数字体从28px增大到40px(增加约40%),数字更清晰醒目
- 玩家卡片宽度从160px增加到200px,确保长数字(如-106000)能完整显示
- 优化左右玩家卡片位置,更好地利用屏幕空间
- 结算面板优化:
- 优化结算分数面板布局,减小按钮、输入框和标题的尺寸
- 模态框最大高度从85vh增加到90vh(移动端95vh)
- 所有元素动态适配当前高度,无需滚动即可查看完整内容
- 移动端进一步压缩各元素间距,充分利用屏幕空间
- 庄家视觉增强:
- 庄家玩家卡片采用金色主题,与普通玩家显著区分
- 金色渐变背景、金色边框和发光效果(白天/黑夜模式自适应)
- 庄家分数数字显示为金色,更加醒目
- 操作说明完善:
- 新增"局数与连庄"说明:解释中间风盘数字和庄家连庄标记的含义
- 优化说明文字,更清晰易懂
- 图表优化尝试:
- 优化分数走势图图例样式,减小间距和颜色框尺寸
- 修复锁定功能:
- 修复锁定按钮在锁定状态下无法点击解锁的问题
- 完善锁定逻辑,确保锁定时只有锁定按钮可用,其他所有交互全部被禁用
- 缩放与视图体验优化:
- 重写自动缩放算法,同时考虑横向与纵向空间,保证在不重叠、不出界的前提下尽可能放大元素
- 调整自动缩放安全系数,让初始缩放更贴近"刚好铺满又不碰撞"的效果
- 禁用移动端浏览器的双击缩放,避免与顶部 +/- 缩放按钮冲突
- 顶部栏与设置重构:
- 顶部新增"操作说明"问号按钮,打开独立帮助弹窗,随时查看操作指引
- 顶部新增"锁定/解锁"按钮:锁定时屏蔽除锁定按钮外的所有交互(包括菜单栏其他按钮),防止误触
- 顶部保留"统计图表"和"历史记录"按钮,方便高频访问;相关入口从设置中移除,避免重复
- 主题切换移动到设置中,并改为类似 iOS 的拨动开关样式
- 交互细节调整:
- 顶部所有图标按钮支持鼠标悬浮提示(Tooltips),清晰展示"缩小 / 放大 / 统计图表 / 历史记录 / 操作说明 / 设置"等功能
- 删除东风方向的发光动画,仅保留红色高亮,避免与骰子模式的高亮效果叠加造成干扰
- 全局禁用文本选择和选区拖拽,避免在拖拽玩家或操作按钮时误选文字
- 新增手动缩放功能:
- 在顶部栏添加 +/- 按钮,支持手动调整界面元素大小
- 智能边界检测:自动防止元素重叠或溢出屏幕
- 按钮状态反馈:达到最大/最小缩放时按钮自动变灰禁用
- 适应不同屏幕尺寸和观看距离,提升使用体验
- 优化拖拽体验:
- 修复电脑端拖拽"下一局"按钮指定庄家功能
- 优化拖拽分身旋转动画,消除电脑端卡顿问题(改用 dragover 事件)
- 修复拖拽时玩家栏意外旋转的 bug
- 优化骰子功能:
- 使用 SVG 矢量图替换骰子点数,更清晰美观
- 骰子背景改为纯白色,消除黑边问题
- 调整提前解锁时间从 0.5 秒到 0.8 秒,体验更自然
- UI 视觉优化:
- 移除左上角"第几局"显示,顶部按钮居中布局
- 增强毛玻璃效果:提升模糊度和阴影深度,添加玻璃边缘高光
- 空座位样式优化:虚线边框、悬停高亮效果
- 庄家标记脉冲动画:红色发光呼吸效果
- 东字方向标记呼吸动画:增强视觉反馈
- 按钮尺寸统一:36x36px,提升点击体验
- 简化 transform 逻辑,提升性能
- 代码重构:
- 将 CSS 和 JavaScript 代码独立出来,分别放在
css/和js/目录 - 提升代码可维护性和组织结构
- 将 CSS 和 JavaScript 代码独立出来,分别放在
- 结算分数页面优化:
- 优化结算分数页面的用户体验
- 玩家选择列表从 2x2 布局改为一行四列布局
- 选择框提示文字显示为灰色,真实玩家名字显示为白色
- 点击确认时,未填写的选择框会标红并闪烁提示
- 移除所有"钱"、"¥"相关字样,统一改为"分数"
- 新增设置原点功能:
- 支持为每个玩家设置起始分数(原点)
- 玩家显示的分数 = 当前分数 + 原点
- 在设置页面可以统一管理所有玩家的原点值
- 图表统计功能已适配原点设置,正确显示分数走势
- 交互优化:
- 点击选择框时高亮显示,选中玩家后自动移除高亮
- 优化错误提示动画效果
- 重构 UI 交互:
- 彻底移除会导致手机键盘遮挡的原生输入框。
- 引入全屏/半屏动作面板(Action Sheet),体验类原生 App。
- 引入自定义数字键盘,支持点击和物理键盘输入。
- 统一结算流程:合并"快捷结算"与"普通结算",拖拽头像现在直接呼出统一的数字键盘。
- 工程化重构:弃用单文件模式,拆分为 ES Modules 结构,便于维护。
- 新增打骰子功能:
- 3D 物理效果:真实的骰子旋转动画
- 状态反馈:红光表示正在掷骰子,绿光表示结果已出
- 随机停顿:模拟真实的掷骰子体验,两个骰子停顿时间随机(1-2.5秒)
- 优化交互:未掷骰子前点任意位置退出,掷骰子过程中交互锁定
- 优化体验:修复部分动画效果,提升流畅度
- 新增拖拽结算功能:拖动玩家卡片到另一玩家上快速结算,支持桌面和移动端
- 新增拖拽指定庄家功能:拖动"下一局"按钮到玩家身上进行换庄/连庄
- 新增连庄标记:庄家右上角显示连庄次数(第一次显示皇冠👑,连庄显示数字)
- 优化庄家管理:
- 支持在未坐满时拖动指定初始庄家位置
- 点击"下一局"自动换庄到下一家
- 移除了换庄/连庄选择弹窗,简化操作
- 优化风盘旋转:始终逆时针旋转到正确的庄家位置,计算最短路径
- 优化拖拽动画:半透明分身效果,根据屏幕位置动态旋转
- 优化图表显示:Y轴只显示整数,图例样式优化
- 优化模态框交互:支持点击外部关闭,按钮样式统一
- 新增操作说明:在设置中添加详细的操作说明
- 修复触摸事件警告:移除可能导致控制台警告的 preventDefault 调用
- 重新实现背景自定义功能,支持预设颜色和HEX输入
- 优化默认背景色,明亮模式为浅灰,暗黑模式为深灰
- 重构代码,使用 Vue 3 框架
- 优化 UI 设计,增加毛玻璃效果
- 优化横屏体验,强制旋转保持竖屏布局
- 优化统计图表,支持显示连续局数和中文标签
- 新增统计图表功能,可视化分数走势
- 新增暗黑模式,支持自动跟随系统或手动切换
- 新增数字滚动动画
- 优化 UI 细节
- 新增撤销功能,可回滚最近一次结算
- 新增防息屏功能 (Wake Lock),保持屏幕常亮
- 优化界面交互
- 初始版本
- 支持多玩家、分数结算、历史记录等基础功能
- 横屏优化,适合手机使用