GitHub - kb274483/Vue-Firebase-tictactoe-game

tictactoe

一開始為了複習一段時間沒使用的 VUE 3 試作了一個井字( TicTacToe )遊戲的小DEMO,

這個過程並沒有遇到太多的問題,在習慣了 VUE 2 後

幾乎都是 VUE 3 的語法有點忘記 (常常忘了要 import 或是 .value 😅 ) ,

在完成之後我分享給某個群組試玩,因為其中的圖案是來自於該群組。

就在這時候突然有個想法是不知道能不能作成連線版本,這樣也可以跟其他人一起玩。

這時候第一個想到了 Firebase 的即時資料庫,雖然在這之前沒有使用過的經驗,

但一直有想說要找個機會來用用看,畢竟這個服務對前端來說是個方便的存在,

所以這次就使用了即時資料庫來讓兩邊資料同步,並達成建立連線配對的感覺,


一開始先在 Firebase建立資料庫,並定義我認為需要用到的資料格式,

68dbc48ba93aa59f8c276af44ef670f7.png

gameset.png

playerList.png

這部分我是以自己方便操作來定義的,

playerList 代表著目前上線的人數,若有人加入遊戲就轉為True,

gameSet 則表示一組配對中遊戲的進度與玩家暱稱,

至於實作過程待我將思緒整理清楚再來慢慢紀錄。😌