3D网页抛硬币小工具

3D 网页抛硬币小工具 · 项目深度解析

📖 项目概述

抛硬币（Coin Flipping）是概率论、统计学以及博弈决策中最经典、最直观的伯努利二项试验模型。无论是在日常决断、游戏先手决定，还是在计算机随机性算法教学与大数定律（Law of Large Numbers）演示中，抛硬币都扮演着重要角色。

传统网页抛硬币工具往往仅展示静态文字结果或简易 2D 轮播图，缺乏真实的物理三维翻转质感与逼真的声学反馈。

3D 网页抛硬币小工具 是一款基于现代 Web 前端技术构建的高性能概率模拟与可视化试验室。集成了纯 CSS 3D 空间动力学翻转、Web Audio 声学合成引擎、千次多轮批量模拟器以及大数定律概率收敛折线图。

---

🏗️ 系统架构设计

项目采用纯前端无后端单页架构，所有三维旋转、音频合成、随机数生成与统计计算均在浏览器本地主线程与渲染管线中执行，杜绝了网络延迟并实现了 100% 离线可用。

系统架构由三大核心子系统构成：

1. 3D 动力学表现与交互层：

• 基于 CSS preserve-3d 与多重物理关键帧，模拟硬币腾空、高速轴向旋转、重力加速下落与地面微小弹性二次震颤。

• 地面扩散光影与径向模糊联动，随着硬币飞行高度动态变化。

• 黄金、白银、青铜三种金属材质与光泽质感即时切换。

• 支持点击硬币、主操作按钮与键盘空格键 (Space) 交互。

2. 随机发生器与声学合成引擎：

• 严格基于独立同分布（i.i.d.）的随机采样逻辑生成正反面状态。

• Web Audio 物理合成：无需加载 mp3/wav 外部文件，利用 Web Audio API 的 OscillatorNode 纯代码实时调制高频旋转破风声与多频正弦金属落地清脆撞击声。

• 提供 10/50/100/1000 次批量高频快速模拟器。

3. 统计分析与收敛图谱层：

• 大数定律实时折线：Canvas 2D 实时跟踪正面概率随试验次数的变化，直观展示随机波动向 50.00% 理论基准线逐步收敛的过程。

• 误差度量：实时呈现样本概率与理论值的绝对偏差值。

• 极值记录：连续最长连正与最长连反计数。

---

💡 核心特性与创新亮点

• 极致沉浸的三维与物理音效体验：纯原生前端技术实现媲美 3D 引擎的质感与零资源加载的实时声效。

• 理论与实践结合的可视化教学工具：通过高频模拟与动态走势图，将抽象的概率收敛过程直观呈现。

• 极致轻量与零依赖：单 HTML 文件即可独立运行，加载时间小于 50ms。

• 纯本地运行：无需网络连接与云端存储，安全可靠。

---

🛠️ 技术栈与实现细节

• 动画与样式：CSS3 3D Transforms / Tailwind CSS

• 音频引擎：Web Audio API (OscillatorNode & GainNode)

• 图表绘制：HTML5 Canvas 2D Context

• 核心逻辑：原生 ES6+ JavaScript