主要的職責是 切版 、 canvas 遊戲 、圖表製作 等功能

主要使用到的技術為 vue2 、 Chart.js 、 html2canvas

— 整體框架使用 vue2

— 懷舊遊戲使用 canvas 繪製

— 使用 Chart.js 繪製圖表

— 使用 html2canvas 製作壓圖

— 串接表單 api

✨ 部分 API 已不再維護

遊戲流程

使用者操作流程

1. 選擇角色頭像
2. 點擊 READY GO 進入遊戲
3. 移動角色吃白點會展開問題，答題結束後繼續移動
4. 最後一題答完後顯示抽獎表單
5. 送出表單後，最後顯示遊戲結果

遊戲邏輯 / 動態設計

• 題目的白點「‧」位置為固定，題目則是隨機
• 遊戲進行時鎖定滾輪上下滑動，避免影響遊戲體驗
• 鍵盤支援角色上下左右移動

選擇角色再開始遊戲

共六個白點六個問答題目

最後會產生結果圖

留言跑馬燈

填寫欄位送出後，立即看到留言出現在留言牆上

✨ 動畫製作參考：吳哲宇 - 動畫互動網頁特效入門（JS/CANVAS）