[分享] 宴客玩 LINE@ 開發的小遊戲抽大獎

[ga009900 (Lienfa)]

  小弟在 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點 要和主持人彩排的，只能簡單的口說一下

  我可以感受到主持人萬分無奈，還好之後就都滿順利的



  簡單介紹一下什麼是 LINE@

  各位應該加過 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



  跑了這一連串的活動，讓賓客更有參與感，也能讓長輩們接觸這些技術應用

  而且 LINE@ 應該也可以做出滿多應用的，像是一些簡單的問題或互動資訊

  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 微軟雲端上


  有點沒有打文章了，可能有點跳或詞不達意還請大家見諒

  另外要提一下這一篇不是 LINE@ 的業配，只是剛好和小弟的活動使用

  感謝各位收看~


  PS: 最後大家可以說說各位會怎麼選擇數字呢? 會採用什麼什麼策略嗎?

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.116.145.99 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/GetMarry/M.1578333311.A.A5B.html
推 newsnotti   : 超猛......
推 cutelayin   : 強到爆炸
推 amyyu851009 : 超猛的
推 moonpie     : 這好厲害！
推 cathyee     : 太猛了 請收下我的膝蓋
推 lovebyqq    : 超強大（跪
推 icePtt      : 資訊人的婚禮XDDD~
推 icePtt      : 我覺得我會選擇平時自己就滿喜歡的1
→ icePtt      : 0以內數字，然後除非在測試場跟贏家
→ icePtt      : 差太多，不然就是不改了。
推 computer833 : 太棒了，筆記，結婚我也寫一個出來
→ computer833 : 玩
推 IMOnly      : 看完這篇立馬打開自己寫一個
推 sophena1990 : 好強啊！！果然工程師什麼的最棒了X
→ sophena1990 : D
推 tear225     : 好厲害唷
推 imyujia     : 遊戲超猛 禮物也好猛
推 iriswing412 : 好強大！但文組完全看不懂XD
推 ninie403    : 看不懂+1 哈哈哈 不明覺厲
※ 編輯: ga009900 (122.116.145.99 臺灣), 01/08/2020 00:41:12
推 sunycat     : 太厲害 我們本來要玩wedding spy on
→ sunycat     :  line
→ sunycat     : 但考量到國外親友沒有line以及怕系
→ sunycat     : 統不穩
→ sunycat     : 最後就放棄了。
推 doris1016   : 推～數字遊戲好有趣！