我做了一个随机转盘，后来它慢慢长成了四个小工具

🎡 选项多，用转盘。
🪙 只有两个选项，抛硬币。
🎲 需要一个随机数字，掷骰子。
✊ 两个人谁也不服谁，那就石头剪刀布。

我最开始其实只想做一个转盘。

没有什么宏大的产品规划，也没想过最后要做成一个“工具集合”。

只是觉得生活里经常会遇到一些很小的选择：

吃什么？去哪？谁先来？A 还是 B？

这些事情重要到值得纠结半小时吗？

好像也没有。

于是我开始做 随机转盘。

🎡 先让它转起来

第一版的目标非常简单：

输入几个选项，点击按钮，让转盘转起来，最后随机停在其中一个结果上。

听起来好像几个小时就能写完。

真正开始做以后，我才发现：

“随机选中了谁”和“转盘最后停在哪里”，其实是两个问题。

我后来更喜欢这样的处理方式：

const winnerIndex = Math.floor(Math.random() * options.length);

// 结果先确定
const winner = options[winnerIndex];

// 动画只负责把转盘转到这个结果
spinTo(winnerIndex);

也就是说：

随机逻辑负责结果，动画负责表现。

我不希望因为后来修改了旋转速度、减速曲线或者动画效果，随机结果也跟着发生变化。

这个想法后来一直留在 WheelPage 里面。

视觉可以越来越复杂。

但结果应该简单、明确，而且可解释。

🪙 但只有两个选项时，转盘好像不太合适

转盘做好以后，很快又碰到另一种情况：

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

这种时候还专门往转盘里填两个选项，多少有点杀鸡用牛刀。

于是有了 抛硬币。

它做的事情甚至可以浓缩成：

Math.random() < 0.5 ? 'Heads' : 'Tails';

但页面最后没有只留下一个“正面 / 反面”的结果。

我又加了最近几次结果和累计次数。

原因也很简单。

连续抛几次以后，人很自然就会开始在意：

“怎么又是正面？”
“刚才是不是已经连续三个反面了？”

这些记录并不会改变下一次随机结果。

但它会让一个本来只有一秒钟生命周期的小工具，多一点可以观察的东西。

🎲 然后我低估了骰子

接下来做的是 在线掷骰子。

一开始我的想法也很简单：

随机生成一个数字，然后让骰子显示那个数字。

但做到一半，我开始觉得这样没什么意思。

既然它长得像骰子，我还是希望它真的能：

掉下来、滚动、碰撞，然后慢慢停住。

所以最后用了 Three.js 做 3D，用 Cannon-ES 做物理模拟。

这也是 WheelPage 里让我花时间远超预期的一块。

D6 还比较正常。

真正开始加入：

D4 / D6 / D8 / D10 / D12 / D20

以后，问题一下变多了。

比如：

物理引擎已经判定停止，但骰子视觉上还歪着怎么办？

不同多面体朝上的那一面，应该怎么判断？

D12 停下来以后斜着站住，看起来特别别扭怎么办？

这些问题都不是什么高深算法。

甚至单独拿出来看，还有点琐碎。

但它们很像独立开发里经常发生的事情：

真正花时间的，往往不是“把功能做出来”，而是那些做出来以后才看得见的问题。

✊✌️🖐️ 做到石头剪刀布，我反而开始删东西

第四个工具是 石头剪刀布。

它可能是四个里面规则最简单的。

玩家选择一个手势。

浏览器随机选择一个手势。

判断胜负。

结束。


做到这里的时候，我开始反过来问自己：

这么简单的东西，到底还应该加什么？

排行榜？

账号？

成就？

每日任务？

分享系统？

好像都可以做。

但继续往里面塞功能以后，它还是那个“打开以后玩一把石头剪刀布”的页面吗？

最后我删掉了不少原本想加的东西。

因为我越来越喜欢一种很简单的产品逻辑：

打开 → 用一下 → 得到结果 → 离开

一个工具不一定需要想办法让用户待十五分钟。

有时候用户十秒钟解决问题然后关掉页面，反而说明它完成了自己的工作。

四个看起来完全不同的东西

做完这些以后，我才发现它们其实一直在解决同一个问题：

当一个选择不值得继续消耗精力时，给它一个随机结果。

选项很多，就转一下。

只有两个，就抛一次。

需要数字，就滚一颗骰子。

两个人谁也不让谁，就猜拳。

这才慢慢变成了现在的 WheelPage。

有一个细节，我后来越来越喜欢

随机工具还有一个很奇怪的作用。

假设转盘上有：

火锅
烧烤
拉面
汉堡

你纠结了十分钟，还是不知道吃什么。

于是点击转盘。

最后它停在：

拉面。

但结果出来的一瞬间，你脑子里突然冒出一句：

“啊……其实我更想吃火锅。”

这时候转盘好像“选错了”。

但换个角度，它又好像完成了任务。

因为在结果出现以前，你一直以为自己不知道答案。

而随机结果出现以后，你突然知道了。

所以有时候：

随机不是替你做决定。

它只是让你发现，自己其实早就做了决定。

最后

以前我容易觉得：

一个项目功能多、页面多、系统复杂，才算“认真做了一个东西”。

做 WheelPage 以后，我慢慢不这么想了。

一个页面可能只有一个按钮。

一个工具可能十秒钟就用完。

但里面依然会有：

随机逻辑、动画反馈、触摸操作、状态保存、3D、物理模拟、移动端适配，以及一堆只有真正用起来以后才能发现的小问题。

这些东西不大。

但足够具体。

而我现在越来越喜欢解决这种具体的小问题。

WheelPage 也还会继续慢慢改。

不过有一件事我暂时不想改：

需要的时候打开，用完以后离开。

就这么简单。

本作品采用《CC 协议》，转载必须注明作者和本文链接