開發動機

以希望能夠讓最大量的賓客皆能一起參與的互動遊戲為出發點,而開發的網頁小遊戲。

開發方法

  • 前台

    使用 NextJS 作為開發框架,在狀態管理的部分使用 MobX 來代替 Redux。

  • 後台

    Ant Design 提供的 component 來開發系統。

  • 後端

    使用 Express 開發,DB 部分使用 MongoDB。

功能介紹

  • 遊戲房主

    遊戲主能快速的開啟遊戲房間、儲存開獎連結供日後開獎使用,並透過QRcode與連結分享遊戲給玩家。

  • 玩家

    透過點擊的方式設置賓果號碼,或者利用拖曳的方式交換修改號碼位置。
    當開獎時,能夠進入原本的賓果盤,觀看即時連線狀態。
    中獎號碼與連線動態會同步顯示於玩家的手機,增加參與者沉浸式的遊戲緊張感並炒熱氣氛。

  • 婚禮網站後台

    可透過婚禮網站後台瀏覽玩家資訊與玩家賓果盤。

開發工具

React

TypeScript

NextJS

MobX

styled-components

React DnD

影片

圖片

demodemodemodemodemodemo