[分享] 宴客玩 [email protected] 开发的小游戏抽大奖

楼主: ga009900 (Lienfa)   2020-01-07 01:55:09
小弟在 2018年 也毕业啦,转眼间就来到了 2020年 了
本来想要在一年内分享的,但实在太懒才拖到现在,哈哈
刚好最近在整理一些资料,顺便把这一篇也打一打吧
废话结束,正文开始
以前参加过几场喜宴,如果有抽奖的环节,觉得宾客们很没参与感或惊喜感
于是乎身为肥宅工程师的我何不写点小程式来玩玩呢
刚好先前有参加过 第一届 LINE Taiwan TechPulse 大会有了一些启发
其中有 Session 提到 在台湾拥有 LINE 的比率相当高
当年数据好像 87% 以上还多少的,有点忘了
如果自己开发一个 APP 还要宾客下载有点不切实际
而且也参加 婚礼博览会,实际用了厂商做的 APP 也觉得没做的那么好
所以就开始构思可以来做点什么
虽然想到满多东西可以做的,想了半年的 scope 越来越大
但是实际开工却是在宴客的前三天才开始进行开发
工程师不到 deadline 不开工啊,拖延症又发作起来
但这次的是完全不能 delay 的啊啊啊
所以到前一晚都弄到半夜三四点才睡
一早新娘在化妆了,婚摄来拍照的时候我还修改 (大家不要学R
https://i.imgur.com/bjJXSIC.png
主持人也来了,她也很紧张,因为我有设计功能让她用
但她也还没看过实际是怎么运作的,她整个非常慌张,事后表示腋下都湿啦
第一次遇到这么高科技的场控,而且直到宴客即将开始都还没操作过
简单来说,我写了一个网页,可以透过 LINE 来操控,进行场景的切换
然后没有再拨放影片的时候,默认是照片轮播模式,用网页满容易实现的
这样也不用特别制作影片只有几分钟就看腻了
而且我还可以准备一堆照片随机轮播还能有转场的效果
重点是不用请专人守在电脑前面,而且看过很多状况是那个人不会用那一台电脑
在前面弄老半天还要别人帮忙,甚至放到不该放的影片那就糟了
https://i.imgur.com/vo7Jkv8.png
我只要帮主持人加入权限,就可以由她来控制场景的切换
找到唯一一张有拍到影片的画面 XD
https://i.imgur.com/RPs09JH.png
当我 11点 去架设环境的时候,一投影发现竟然网页跑版了
macbook 投影就很容易这种状况 QQ
立即开启 live coding 模式赶快修好
原本 11点 要和主持人彩排的,只能简单的口说一下
我可以感受到主持人万分无奈,还好之后就都满顺利的
简单介绍一下什么是 [email protected]
各位应该加过 LINE 的 官方帐号
可以透过程式来接收用户一对一传送的讯息
或推送讯息给给单一用户或全体发送讯息
我们在桌上附有 QR Code 或 ID 让大家方便加入
这张图刚好被卡掉了 XD
https://i.imgur.com/YUBuge2.png
https://i.imgur.com/GIUuhOY.png
设计的第一个活动是 给新人祝福的话
然后 新娘 会从中挑选 最受她中听的话
而且有表明不能透漏自己是谁,否则新娘就不会选
所以新娘也不知道每一句话是谁写的
虽然有些话还是很明显是谁写的啦 XD
https://i.imgur.com/ofIkx8N.png
新娘就趁著在准备二进梳妆时一边看累积的祝贺词
https://i.imgur.com/lO4j1PR.png
接着进场后就可以公布得奖名单啦
我这边就输入对应的 id 进去就会公告得奖者啦
https://i.imgur.com/TllsFAP.png
原本只要送一位,忘了怎么会变成二位 XD
接下来就是重头戏的时候,这游戏是在 LINE TechPulse 玩到的
当时觉得紧张又刺激,所以也就来仿造一样的游戏来玩
游戏规则是: 每为宾客选择一个正整数,只要是全场最小且唯一者赢得奖项
如果是赠送小礼物那肯定大家兴致缺缺,所以我们准备了 iPhone 和 iPad 来送
这样大家肯定会卯起来玩,而且会动脑筋思考策略,每一桌也可以互相讨论
程式这边当然会挡好不符合规则的数字,一定要通过这个正规表达式才行
^[1-9]+\d*$
先让大家试玩个几场熟悉一下,顺便验测系统有无问题
为了增加游戏刺激感,输入 0 显示即时战况,目前最多人选择的五个号码
在时间终止前,每个人都可以任意调整自己的数字
而且经过几场的磨练,可能选择的数字会根据前几场影响
你要先想一般人可能会选什么样的数字,然后自己要避开其他人
iPhone 得主回合:
https://i.imgur.com/5aTHjJR.png
iPad 得主回合:
https://i.imgur.com/EsZ4XHj.png
本来一开始构想是要把战情即时动态更新在投影机上的
如 LINE TechPulse 做个 Bubble Chart 越大颗表示该数字越多人选择
但时间不允许,只好应急用这种简单的方式做
当然,带这活动得我自己来主持了,还好都没出包
毕竟,程式写完都只有自己本机测试过,真的是心脏够大颗
https://i.imgur.com/hujG00S.png
整场有好几个时段大家都变成低头族了,是也满有趣的现象
https://i.imgur.com/ml4NIy4.png
https://i.imgur.com/PCTJc8N.png
跑了这一连串的活动,让宾客更有参与感,也能让长辈们接触这些技术应用
而且 L[email protected] 应该也可以做出满多应用的,像是一些简单的问题或互动资讯
https://i.imgur.com/eBYgCBt.png
由于这程式是临时赶工出来的,所以品质就60分会动而已
也不知道 LINE 的 API 是不是也有改了,源码先不放出来丢人现眼啦
附上当初赶工的纪录,那几天几乎没什么睡
一边准备结婚的东西,下班还要赶程式,大概三四晚弄出所有的东西
还好大家的反应都是满棒的,也圆满结束 ^_^
https://i.imgur.com/DYUlJlS.png
提一下我当时使用到的技术
1. ASP .Net MVC + Web API (LINE WebHook)
2. SignalR
3. jQuery
4. 网站架设在 Azure 微软云端上
有点没有打文章了,可能有点跳或词不达意还请大家见谅
另外要提一下这一篇不是 [email protected] 的业配,只是刚好和小弟的活动使用
感谢各位收看~
PS: 最后大家可以说说各位会怎么选择数字呢? 会采用什么什么策略吗?

Links booklink

Contact Us: admin [ a t ] ucptt.com