[分享] 宴客玩 [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