手機 : 0987-121-908
藉由刮刮樂的每日遊戲獎勵,提升使用者對網頁的黏著度。我使用了Canvas 的重疊效果,來製造把銀漆刮去的感覺。在參考網路其他人的作品後,我發現有些還沒有刮到字,就會直接顯示結果,所以我有在這塊多做琢磨,我將條件改為刮到文字的80%,才會將其餘部分直接顯示出來,而這部分語法也是我學到較深刻的。
使用CSS中的3D效果製作翻牌,藉由兩次翻牌判斷是否一樣,結束遊戲。
核心工具:jQuery 、 CSS
Nov 2020-Nov 2021
台北文華東方酒店 Mandarin Oriental, Taipei
2015 - 2019
我是薛少康,畢業於大同大學電機系。從去年的十一月開始學習寫網頁的技術,在資策會前端班的課程中,期末專題我們做動物園網頁,而我負責遊戲部分與客服機器人。 遊戲部分我製作了每日刮刮樂、大家來找碴還有冷知識4選1。
1. 刮刮樂使用到 Canvas 的技術,選擇 globalCompositeOperation 工具,監聽使用者滑過 的地方變得透明,來創造刮去銀漆的特效。
2. 大家來找碴藉由 localStorage 存取關卡,並且有倒數計時器的功能,其中我印象較深刻的 是提示功能,利用陣列與狀態處理尚未選取的正確位置,並隨機選一個給予使用者協助。
3. 冷知識的部分,從資料庫隨機撈取10題,記錄玩家答題的選項並檢討,為了對題目有興趣 卻忘記當時答題情況的玩家,提供更好的使用者體驗,另外還有點數獎勵制度提升遊玩意 願與購物的機會。
另一個客服機器人,畫面採用模擬類似 Line 對話框的風格,功能上包括自動關鍵字回覆、快捷選單,除此之外,還有1對1專人客服。
1. 自動回覆功能取材自台北動物園的常見 QA ,並儲存在資料庫中,當使用者輸入完問題後,到資料庫撈取回答即回傳至前端對話框。
2. 快捷選單是我常看到其他網站的客服機器人最重要的地方,所以我在選單中設計幾個增進使用者體驗、讓操作更順暢的功能。其中訂票功能可以直接在選單內呼叫 Redux,把商品加入購物車。另外我撈取政府的 API 做1週天氣預報,統整了日期、圖示、降雨機率、平均氣溫,做成卡片。
3. 1對1專人客服,在老師提到 webSocket ,和參考Line的獎金獵人比賽第一名的作品後,我腦中就有這想法了。為了實現這功能我使用到 Socket.io ,因為這不包含在課程中,於是我先跟著官網的教學做,但它是不分房間的多人對話,而我想做到的是分房間的1對1的客服對話。因此仍需判斷不同使用者與客服之間傳遞的對話,不能混淆不同房間對話,其中最難的地方,怎麼把使用者與房間綁在一起,是我覺得相對具挑戰性的,也逐漸對socket的技術有更多的興趣與想法。
在三星期的專題過程,我學會自己解決困難。在遇到 Socket.io 的分房對話問題時,我利用關鍵字查詢解決方案,或是研讀官網原文文件,並大膽嘗試符合我需求的語法。漸漸成為可以獨當一面的前端工程師。