V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Deathminip
V2EX  ›  分享创造

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

  •  
  •   Deathminip · 2019-01-09 13:17:37 +08:00 · 2340 次点击
    这是一个创建于 2144 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    开始优化:

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

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

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

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

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

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

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

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

    7 条回复    2019-01-11 17:26:09 +08:00
    uTuw2C6uf964Kx6o
        1
    uTuw2C6uf964Kx6o  
       2019-01-10 12:11:44 +08:00
    ui 搞的不错,很流畅
    fcten
        2
    fcten  
       2019-01-10 14:31:53 +08:00
    为什么点数一样也会显示一个大一个小
    Deathminip
        3
    Deathminip  
    OP
       2019-01-10 14:43:26 +08:00
    @fcten 哈哈哈,其实是个 bug,之前考虑要不要有平局,后来决定不要平局,如果有相同数其中一个会改变数字,但是现在的问题是数字改变了,展示面显示的不对,后面会修改
    Deathminip
        4
    Deathminip  
    OP
       2019-01-10 14:44:00 +08:00
    @mrant 谢谢,有待加强啊
    li27962278
        5
    li27962278  
       2019-01-11 09:50:01 +08:00
    周末朋友聚会有场景可以试试哈哈
    Deathminip
        6
    Deathminip  
    OP
       2019-01-11 10:47:41 +08:00
    @li27962278 谢谢支持啊
    Deathminip
        7
    Deathminip  
    OP
       2019-01-11 17:26:09 +08:00
    刚才把 bug 处理了,不会出现点数一样的情况,顺便告诉大家一个小技巧,先手会比后手多一点几率胜出,祝大家周末玩的开心
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1553 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 17:08 · PVG 01:08 · LAX 09:08 · JFK 12:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.