iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
1
自我挑戰組

三十Early副本攻略系列 第 22

Day22-生日快樂吹蠟燭

直接上DEMO
https://birthcard-d41ef.web.app

最一開始的想法,當然是希望讓壽星感到驚喜,而且要跟一般的生日祝福不一樣

想來想去,那就拿著自己會的東西,拼拼湊湊一下看有沒有什麼有趣的辦法

後來想到,除了大家最常見的在壽星的 FB 牆上留言

如果可以讓他看到蛋糕、吹蠟燭、許願,應該會滿好玩的

所以就開始著手進行啦!既然人不在壽星旁邊要怎麼讓他看到蛋糕、吹蠟燭、許願呢?

這時候身為一個碼農,還是有一些些好處的,最簡單的方式就是可以做個網頁啦!

所以這裡就準備了幾個會用到的東西

  1. 一個網頁
  2. 一張卡片
  3. 一張蛋糕的圖片
  4. 一個許願的許願池
  5. 一個可以吹的蠟燭

簡單交代一下用到的工具,就是 ionic, firebase and p5js,用這些東西拼出我需要的網頁

其中最關鍵的事情,就是到底要怎麼吹蠟燭啦!這是耗費我不少心力

我是透過麥克風的音量,讓大家來吹蠟燭,所以不同手機的麥克風支援狀況還不一樣,真是讓人頭疼!!

後來還衍伸出了一個秘技,就是遠端開關蠟燭

(突然就變成一個整人玩具了)

所以就算他吹不熄,我也可以偷偷把它弄熄,或是吹熄了再把它點燃 XDDDD

辛苦了這麼久,總算要拿來出去見人了

滿意外的,沒想到壽星都很開心,當然啦,生日的那天有人祝福,心情應該都不會差到哪裡去吧

即便是蠟燭壓跟就吹不熄,他們也會當作你把整人的APP拿給他,逗他開心(但明明就不是整人玩具啊)

看到大家開心的樣子,心裡也覺得很踏實呢

回顧一下這次的經驗,要挑戰把東西給 5 個以上的人用,就可能會遇到各種沒預料到的情況,真的是很可怕...

副本卡片

https://ithelp.ithome.com.tw/upload/images/20190923/20103854KxcOKyAdI3.png


上一篇
Day21 — Hack-door
下一篇
Day23-程式碼拼圖
系列文
三十Early副本攻略30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言