从一个随机转盘开始，我做了四个选择工具 [ 技术分享 ]

从一个随机转盘开始，我做了四个选择工具

第一个页面只有一个转盘。

输入几个选项，点击开始，指针停在其中一个结果上。

做这个页面时，我想解决的问题也很小：几个选项摆在面前，又不值得花时间分析时，给出一个随机结果。

这个页面成了现在的随机转盘。

转盘支持自定义选项。吃什么、谁先开始、抽签、分组、随机挑一个名字，都可以把内容写进去，再转一次。

功能看起来简单，页面里还是出现了不少问题。

转盘需要转起来，也需要停下来。结果需要随机，动画又不能让人产生“结果由动画决定”的感觉。选项改动后，扇区数量、文字位置、颜色和指针都要跟着更新。

一个转盘页面就这样留下了不少细节。

两个选项不需要一个大转盘

如果只有两个结果，例如：

• 去 / 不去
• A / B
• 正面 / 反面

转盘就显得有些重。

于是有了在线抛硬币。

点击一次，得到正面或反面。

页面会保留最近几次结果，也会记录总次数。连续抛几次后，页面不再只有当前这一枚硬币，还能看到前面的结果。

随机规则没有变化。

每一次仍然只有两个可能结果。

历史记录只是把已经发生的结果留下来。

骰子比我预想的复杂

第三个页面是在线骰子。

最简单的做法，是生成一个随机数字，再显示对应点数。

我没有停在这里。

现在的骰子使用 Three.js 和 Cannon-ES 做 3D 与物理模拟。骰子会滚动、碰撞、减速，再停下来。

支持：

• D4
• D6
• D8
• D10
• D12
• D20

做到多面骰以后，问题也变了。

D6 停下来以后，朝上的面很好理解。D12、D20 这种多面体需要判断最终朝向；骰子物理状态已经停止，画面却可能保持倾斜；多个骰子一起滚动时，还要处理碰撞和停止状态。

D12 就花过不少时间。

程序认为它已经停了，画面看起来却像还没站稳。数值结果没有错，但视觉状态不舒服。

这类问题不会出现在功能清单里，却会出现在每一次使用里。

第四个页面只需要三种选择

石头剪刀布的规则没有解释成本。

石头赢剪刀。

剪刀赢布。

布赢石头。

玩家选择一个手势，浏览器生成一个结果，再判断输赢。

这里没有 3D 物理，也没有很多输入选项。

页面保留快速对局和三局两胜。

这个工具让我删掉了一些原本可以加入的东西。账号、排行榜、复杂成就都能做，但一次石头剪刀布可能只需要几秒。

页面完成一次对局，就完成了任务。

四个工具解决的是同一类问题

转盘、硬币、骰子、石头剪刀布看起来不是同一种东西。

放到一起以后，它们处理的场景很接近。

选项很多，用转盘。

只有两个结果，抛硬币。

需要随机数字，掷骰子。

需要一个简单胜负，玩石头剪刀布。

这四个页面组成了现在的 WheelPage。

我没有给它加注册流程。

打开页面，使用工具，得到结果。

这几步够用了。

现在的工作也集中在这些页面本身：手机操作、动画反馈、结果记录、骰子停止状态、页面加载和一些使用细节。

一个骰子停歪了，就修骰子。

一个按钮在手机上不好点，就改按钮。

一个结果看不清，就调整显示。

WheelPage 的变化基本来自这些问题。

现在有四个主要工具。

页面还会继续改。