人事小姐姐是我的饭搭子，跟我说年会要搞抽奖，问我有没有好用的在线转盘。
我随手发了几个链接给她，结果她一个个试完来吐槽：
- Wheel of Names：不能同时转多个轮子，她想一边抽人一边抽奖品
- 某国产转盘：广告太多，界面丑，领导看了要皱眉
- 随机数生成器：太干了，没有仪式感
总之就是不体面，我说行吧，周末我给你写一个。
结果这一写，失控了。
刚开始想的很简单，就一个 Canvas 画个轮子，Math.random 选个结果。但写着写着开始较真：
- Math.random 不够随机。查了下发现如果要"公平抽奖"，应该用 crypto.getRandomValues()，这是密码学安全的随机数生成器。既然都做了，那就做对。
- 她要同时抽人+抽奖品。那就支持多轮盘吧，最多 6 个同时转。转完自动记录中奖历史。
- 中奖了的不能重复中。加了淘汰模式，中一个自动移除。
- 另外还加了绿幕模式，一键全屏纯绿底。
- 做了短链，方便分享或者保存自己定制好的转盘，用 Cloudflare Worker 写了个 API ，转盘配置存起来生成短链，发个链接别人就能用。
做完发现功能有点多了：
- 多转盘同时旋转
- 权重设置（买 5 张票的人权重设 5 ）
- 淘汰模式
- 倒计时模式（ 3 、2 、1 开始！）
- OBS 绿幕
- 导入导出 JSON
- 8 种语言
- 本地自动保存
UI 也花了点心思，年会现场投屏效果挺好。暗色模式是青绿色系，亮色是橙粉系，看着挺舒 服的。
技术栈是 Next.js + React + TailwindCSS ，整了个 monorepo 用 Turborepo 管理，状态用 Nuqs 存 URL 参数方便分享。分享功能单独拆了个 Cloudflare Worker ，响应挺快的。
对了，快过年了，除了年会抽奖，其实过年聚会也能用：
- 真心话大冒险：一个轮子选人，一个轮子选"真心话/大冒险"，再来一个轮子选具体问题或任务
- 谁洗碗：吃完年夜饭，全家人名字往里一扔，转
- 今晚吃啥：火锅/烧烤/日料/随便，选择困难症救星
- 该谁发红包了：下一个谁发？转盘决定，公平公正
- 喝酒游戏：转到谁谁喝，配合淘汰模式，喝过的自动移除，雨露均沾
反正我过年准备拿这个整活了，投屏到电视上效果应该不错。
有什么建议欢迎提，毕竟本来只是帮人事做个小工具...
1
Tumblr 4 天前 hmm 。。。看了一下，我的英文名字在上面，随手转了一下，然后抽到了我自己。。。
|
2
zhw2590582 4 天前
你们的这种场景，Math.random 完成完全没问题
|
3
corcre 4 天前
还有一个功能是点击开始然后老板在上面 bb 半天再次点击才开始停下来
如果还能设置奖项然后记录每次抽奖的奖项并且限定奖项的数量的话应该就是我老东家想要的了(但是我已经领大礼包了🐶 |
4
needpp 4 天前
很好，刚好有个域名 下班了鞭策 ai vibe 一个
|
5
pol 4 天前 失控你，我以为在年会上出 bug 炸了，白高兴你
|
6
myarsenal 4 天前
中奖后生成的图片应该能显示奖品是什么。所以你应该增加选项在抽奖前输入本次奖品。
|
7
bobox 4 天前
交给 ai ，几分钟就写好了
|
8
iddddg 4 天前 域名江苏跳反诈了
|
9
cheng812 4 天前
十几年前给某前十市电视台写过一个类似的抽奖玩意，可以提前设置中奖人，那时候流行楼盘开盘时电视直播抽奖😩
|
10
liushengxian1230 4 天前
功能太多了 需要砍一砍需求。。
|
11
tutouguai 4 天前
佬 想问下音频文件去哪里整呢
|
12
lxqxqxq 4 天前 |
13
daybreakfangyang 4 天前 本来进来想吃瓜🍉
|
15
94nb 4 天前
不是，这都不重要，重要的最后你中奖了嘛。。。。
|
16
rekulas 4 天前 还有一点,特等奖一定不能抽中技术员工-特别是你
要真中了可有得你解释的 |
17
hi2hi 4 天前
我们 60 个人抽奖，最低有阳光普照奖，还有部分人玩游戏赢了多抽一次；
|
18
pingdog 4 天前 via iPhone
软件实现的随机算法都是称为伪随机，真随机要专用硬件
|
19
itenyh 4 天前
小姐姐的魅力果然大
|
20
abc0123xyz 4 天前
op 在本贴抽个奖😘
|
21
imik 4 天前
标题成功
|
22
guiys 4 天前 via Android 对开发者来讲，功能很全面。
对使用者来讲，太难用了。 |
23
Fechin OP PRO @zhw2590582
确实，用 Math.random 谁也挑不出毛病 |
24
pulutom40 4 天前 via iPhone
以前我们部门干活这活，老板让我们写一个年会的抽奖程序，后面大家一听是我们写的，纷纷完全开源，大家一起 review
|
25
Fechin OP PRO |
26
seatifa 4 天前
需要增加一个导入 excel 或者 word 名单的功能，不然几百人的公司用起来，人事小姐姐要累死。
|
27
muchun 4 天前
以前也给公司写过抽奖程序，后台可以配置必中奖人和必不中奖人😁
|
29
white1222 4 天前
你这地址链接已经失控
|
31
19cm 4 天前
还少了后门功能啊, 不管咋滴大奖得留给研发部啊
|
32
eratpfus7 4 天前
怎么点开到了江苏反诈网
|
33
Robot9527 4 天前
年会现场代码 review
|
34
ovtfkw 4 天前 via iPhone
给公司做的工具为什么不先排期再做？
|
35
luxin325 4 天前
看得晃眼，在线的不要圆圈转盘了，换个形式
|
36
killva4624 4 天前
@muchun 笑死，真的有黑幕
|
37
NickX 4 天前
“人事小姐姐是我的饭搭子”
这关系感觉不简单 |
38
sssfff 4 天前
+1 但是我直接拒绝了，因为我写的没有公信力，万一我抽中了大奖怎么办
|
39
sssfff 4 天前
话说你的导入导出居然是 json ，肯定得用 excel 啊
|
40
ovovovovo 4 天前
更关心人事小姐姐怎么反馈
|
42
scyuns 4 天前
没有指定谁中奖的程序 不是好程序
|
43
bearbest PRO @killva4624 确实，我也搞过，一般还需要配置外包员工不能中一二等奖，总监之类的也不能中奖，某些奖项抽给某些工作组之类的
|
44
lswlray 4 天前
真实需求：
1 、某人必须中； 2 、某人必须抽不中； |
45
sumeoy 4 天前
奖品能增加图片显示就好了。
|
46
94 4 天前
看到 OP 的描述，抽奖细节、权重、淘汰、倒计时，突然感觉自己回到 2020 年之前。
当时前司营收爆表，年年都搞超大规模的年会，抽奖程序就是自己搞的。各种 3D 的抽奖画面、扫码签到动画、互动小游戏发红包什么的。 |
47
haidaomihuan 4 天前
目测是编的故事
|
48
t822876884 4 天前 跳反诈了
|
49
rainfox 4 天前
|
51
Cyron 4 天前 via iPhone
体验不错，以后就用你这个了
|
52
mrfunnypiggy11 4 天前
好好玩哈哈，谢谢啦
|
53
safari9 4 天前
有点意思奥，五颜六色的
|
54
ft99 4 天前
是随机的吗？ 抽了 7 次 小陈-小陈-小明-小杨-小陈-小张-小陈
小陈出现了 4 次...... 只看结果 好像并不随机 |
55
flytsuki 4 天前
我也做过抽奖,不过是用户信息表有个字段中奖金额,我直接拿了出来就行了
|
56
tonytonychopper 4 天前
可以做成 3d 的，这样还能把头像放进去，有代入感
|
57
windmoonwind 4 天前
比较关注 饭搭子有没有失控变成床搭子？
|
58
nuomi196500 4 天前
不要自己写，功能不好用怪你，没有被抽中的所有人都骂你，抽中你自己别人会觉得有猫腻，费力不讨好，淘宝上买一个几十块钱的事，出任何事不用担责
|
59
PeiXyJ 4 天前
https://imgur.com/wH7fgsc
我做了一个球球大作战的抽奖程序,抽完后到还有个大决战模式，最后胜家还能得到个红包。 |
60
csoarx 4 天前
倒计时模式连点空格有 bug
|
61
lchkid 4 天前
测试了一下，首先人数过多转盘显示效果就不行了，其次最后出结果有一次很明显的偏移
|
62
Dispatcher 4 天前
一边抽人一边抽奖品
———————————————— 不许打人啊…… |
63
dfourc 4 天前
@haidaomihuan #47 不用怀疑，就是
|
64
tangping 4 天前
老板问 可以加 指定中奖吗 😄
|
68
Fechin OP PRO |
70
liuidetmks 4 天前
人一多，就转盘就太密了
|
71
windowlife 4 天前
这个技术是很好的，可是不实用，
|
73
windowlife 4 天前
一是大奖不能是技术人员，二是要能指定奖品指定人员
|
74
RandomJoke 4 天前
这东西，AI 应该能干的很好了吧。。。
|
76
Exia 4 天前
赞一个～
|
77
MarsMTC 4 天前
轮盘名称怎么编辑呢
|
78
lizhizhuangb 4 天前
|
79
Hoothin 4 天前
这很容易被举报啊，人家创建一个打倒 xxx 或者 xxx 新葡京创建短链，然后举报这个页面，域名就没了。最好加个密码保护吧。
|
80
hahiru 4 天前 产品：现实中轮盘是动态摩擦随机，跟目前随机数先确认结果再模拟动画不是一个概念。
是不是可以设置一个公式。初始随机一个动能，然后随机毫秒随机衰减，最后停止。 要有角速度、加速度、摩擦力、转动惯量、空气阻力。 辛苦熬夜改一下，明天早上给我看一下初版。 |
81
shaozelin030405 4 天前
小姐姐好看不
|
82
wosilusheng 4 天前
访问 https://gospinwheel.com/zh-Hans/about 报 500 错误了
|
83
SakuraYuki 4 天前
还以为失控是指年会出 bug 了，大家全都摇到了一等奖
|
84
Fechin OP PRO |
85
Fechin OP PRO |
86
panlista 4 天前
我还以为给所有人都抽到了一等奖呢，原来不是 bug
|
87
Cassius 4 天前
obs 不用绿幕 obs 自己引用浏览器源就是直接去除 background 透明化 主流的 web 包装都这样的
|
88
teasick 4 天前
当轮中奖的结果最好也显示在转盘边上
以及可以配置背景图、奖品图 |
89
cheese 4 天前
好的别人夸，我做坏人挑挑刺。
右边的配置面板太繁琐。转盘的阻尼感太假，动画太生硬，特别是转起来的时候。 整体的配色 UI ，AI 味太浓，像科技网站 UI ，不太像年会那种气氛。 |
90
onecookie PRO 这帖子标题写得挺好👍🏻 让我失控了体验了一把，感受是首页像产品+落地页的杂糅，有一点奇怪。
另外好奇怎么盈利？还是不考虑，纯兴趣吗 |
91
Tink PRO 牛逼
|
92
felixwang 4 天前
马克，也许能用到
|
93
RexKang 4 天前
数年前，年会抽奖，要求一定要公平，一定要公平……
现场，要求指定谁谁中奖…… 但是必须看起来是公平的…… |
94
Crystal8899 3 天前
@Tumblr 我感觉哪里不对，我也是改成自己名字，然后就抽到了
|
95
HankAviator 3 天前
建议加点喜庆的音效，像是空气喇叭或者当季鲜梗
|
96
darkengine 3 天前
妖，我还以为年会抽奖抽飞了呢
|
97
CRH 3 天前
转轴不在圆盘的正中心……转起来晃来晃去的
或者是故意做的这个效果？ |
98
fortitudeZDY 3 天前
@iddddg 本来没打算点,结果看了你这个,忍不住测试了一下,竟然看到了传说中的反诈网站,楼主这不会是用了 http 吧...
|
99
kinghly 3 天前 via iPhone
这些功能都比较简单，给 ai 讲明白就可以了，最后再打磨提下 UI 交互就差不多了
|
100
TixXie 3 天前 via iPhone
巧了，人事小姐姐说年会想要个小程序扫码签到抽奖，我们老大让我来写，我没有写过小程序然后让 AI 两个小时就写完了。从开发工具下载到云函数调用到最后上传体验版两个小时，用的就是 Math.random ，AI 说年会几百人完全没有问题。
反转来了，今天人事给我说：老板说今年先不用自己开发的了，用她们找的一个免费网页版的。 得了，刚好我担心万一我后面中奖了不知道怎么解释😅 |