一个聚会小游戏，纯前端无后端代码的实现

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2149 天前的主题，其中的信息可能已经有所发展或是发生改变。

无意间在抖音发现一个 Angry Ojisan，还有一个中文版叫做愤怒大叔（玩法设计素材来看算是同一款游戏）的有点火，玩法简单但是很魔性。然后去小程序搜了下聚会类的小程序，发现大家做的产品太敷衍简陋，我又无聊的做了一个，哈哈哈哈哈哈哈。

规划：还是基于简单快速出产品的心态，把基本功能做出来后，提交到微信审核，测试相关类目是否 OK，主要担心是这种玩法会不会给划分到小游戏类目中，而小游戏提交需要软件著作的证明。大概草图和点击效果做完选择个人类目中的工具-效率提交，第二天被拒说类不符，我对比了下已经上线的其它类型小程序，发现在个人类目的工具-计算类，修改类目后再次提交，第三天审核通过。接下来心就安稳了，开始修改设计和具体玩法细节。

开始优化：

参考了下愤怒大叔的玩法，发现是有头像数量选择的，可以依次单点，也可以依次多个头像同时点击，头像点击有音效，最后出现愤怒者头像。这个功能实现很简单，在网上找到免费音效素材，和简单绘制了一个逗比头像，功能只是头像排列和绑定点击事件，微信小程序 bindtap 是无法实现多指点击的，修改为 bindtouchstart 就可以了，同时可以点击多个头像，音效小程序的 API 有相应的功能，很简单，做过前端的看一眼就明白了。

因为考虑到单单点击图像的功能太单调，本身属于多人玩更有趣的性质，就随手做了一个摇骰子的，比较偏向两个人玩的类型，适合情侣（如果你有男女朋友的话）有趣的解决谁去刷锅呀，谁去洗水果，谁去倒垃圾之类的分歧。

骰子效果是用 css3 绘制的 3D 效果实现的，在点击的时候增加滚动效果的 css class 就实现 Y 轴旋转，然后触发音效，在 animationend 结束的时候停止音效，这个效果我觉得随便一个前端开发者，分分钟实现出来，没什么难度。

设计嘛没想那么多，脑子当时冒出一句话“自古红蓝多 cp ”...就采用红蓝表现

小程序起名字，当时想到了非诚勿扰里面葛大爷卖的那个产品“分歧终端机”，但是这个名字又怕一般用户 get 不到梗，后来考虑这既然是偏向聚会的，就叫做“聚会谁买单”，简单明了

这个小程序从有想法到上线，除了三天的测试类目是否适用的审核时间，加上 3 个小时的开发和设计时间，到最后提交上线，真正占用时间只有一天，另外三天自己还是要完成公司工作的。第四天完成版审核通过，然后也提交到知晓程序的小程序商店，没想到知晓给了一个精品推荐，不过昨天看了下导流不算多。

总结，技术方面来讲，这是一个纯前端就可以完成的，没有任何后端接口什么的，纯前端代码。一个图像排列，加上点击事件，解决所有问题。因为是个人开发，推广什么的也没多想，只是上传到小程序商店，不过以导流数据来看不算多，毕竟才上线第二天，后续看结果吧。说个开心的事情吧，我上次 2 小时开发的“ AI 宠物颜值测试”在不知情的情况下被某个公众号推荐了，流量还不错，蛮开心的

最后还是上传所有小程序图片