開發動機
以希望能夠讓最大量的賓客皆能一起參與的互動遊戲為出發點,而開發的網頁小遊戲。
開發方法
-
前台
使用 NextJS 作為開發框架,在狀態管理的部分使用 MobX 來代替 Redux。
-
後台
Ant Design 提供的 component 來開發系統。
-
後端
使用 Express 開發,DB 部分使用 MongoDB。
功能介紹
-
遊戲房主
遊戲主能快速的開啟遊戲房間、儲存開獎連結供日後開獎使用,並透過QRcode與連結分享遊戲給玩家。
-
玩家
透過點擊的方式設置賓果號碼,或者利用拖曳的方式交換修改號碼位置。
當開獎時,能夠進入原本的賓果盤,觀看即時連線狀態。
中獎號碼與連線動態會同步顯示於玩家的手機,增加參與者沉浸式的遊戲緊張感並炒熱氣氛。 -
婚禮網站後台
可透過婚禮網站後台瀏覽玩家資訊與玩家賓果盤。
開發工具
React
TypeScript
NextJS
MobX
styled-components
React DnD
影片
圖片





