Skip to content

ShiriNmi1520/OSTB

Repository files navigation

OSTB 架構介紹

期末項目,實現前後端分離。 forthebadge forthebadge

框架

  1. 前端使用的框架
  • vue.js
  • electron
  • bootstrap-vue
  • vueSocket.io
  1. 後端
  • firebase
  • express
  • socket.io

功能

1. 登入: 👌

由前端發請求給後端,後端再請求 Firebase 做確認,確認無誤後登入。

2. 註冊: 👌

由前端發請求給後端,後端再請求 Firebase 做註冊,確認無誤後寫入資料。

3. 登出: 👌

由前端發請求給後端,後端清空該 socket 有關登入的所有資訊。

4. 創建房間: 👌

由前端發房間名字(使用者自訂)和使用者 uid 給後端後,後端使用 uid 作為資料庫路徑,往 Firebase 寫入房間資訊,再傳回該房間相關資訊到前端。

5. 獲取房間清單: 👌

由前端發請求,後端往 Firebase 調用後回傳。

6. 加入房間: 👌

由前端發使用者 uid 與房間 id 給後端後,後端將該資料往 Firebase 做檢索找到房間,並且使用使用者 uid 調用資料,寫入使用者資訊,再傳回該房間相關資訊到前端。

7. 離開房間: 👌

由前端發送使用者 uid 與判斷 創建 / 加入房間 所接受到的資訊,判斷有關自己的資訊後,將資料送到後端,後端再到 Firebase 刪除該資訊。

8. 進入遊戲: 👌

由房主發出開始遊戲的請求,後端接收到之後往這個房間的所有人發送進入遊戲畫面的訊號。再由前端檢查房內所有人的路由是否已進戰鬥畫面,再回傳給後端做判斷。(若有人無法進入戰鬥畫面,將會強制終止遊戲。

9. 主持遊戲:

後端往 Firebase 紀錄遊戲戰況,有任何變更將立即推送至前端。(血量、手卡數、死亡狀態、身份...所有與遊戲有關的事情都會被記錄。)

10. 抽卡片:

前端判斷是否是自己的回合,若是的話將往後端發送抽卡請求,後端將再次確認,無誤隨機發送卡片資訊給前端。

11. 使用卡片:

前端發送卡片ID給後端,後端將使用結果推送給在房內的所有玩家。

12. 已死亡:

前端出現選項讓玩家決定是否回到大廳,或可繼續留下來觀戰,若選擇離開大廳,將發請求讓後端從房間移除該使用者。

13. 遊戲結束:

前端使用路由將玩家全部返回房間畫面,若離開一樣使用第七點提到的離開房間。

14. 遊戲內聊天:👌

前端傳送使用者資訊、訊息內容給後端,後端發送給該房內所有使用者。

使用流程

登入

  • 前端

  • 後端

註冊

  • 前端

  • 後端

登出

  • 前端

  • 後端

創建房間

  • 前端

  • 後端

獲取房間清單

  • 前端

  • 後端

加入房間

  • 前端

  • 後端

離開房間

  • 前端

  • 後端

進入遊戲:

  • 前端

  • 後端

主持遊戲

  • 前端

    st=>start: 接收後端訊號
    op1=>operation: 推送戰鬥事件至後端
    e=>end: 有變更資訊立刻更新
    
    st->op1->e
    
  • 後端

    st=>start: 接收前端訊號
    sub=>subroutine: 常駐性的往 firebase 抓取新資訊推往前端
    e=>end: 更新至前端
    st->sub->e
    

抽卡片

* 前端

  ```flow
  con=>condition: 是自己的回合?
  st=>start: 自己的回合開始
  op=>operation: 往後端發送抽卡訊號
  e=>end: 接受後端發送回來之卡片資訊
  sub=>subroutine: 接收到該回合之玩家的手牌+1
  con(yes)->st->op->e
  con(no)->sub->e
  ```



* 後端

  ```flow
  st=>start: 接收前端訊號
  op=>operation: 隨機發送攻擊/防禦之卡片至該回合擁有者
  op1=>operation: 往 firebase 推送玩家手卡資料
  e=>end: 往 firebase 調取戰況,即時更新給所有玩家

  st->op->op1->e
  ```

使用卡片

* 前端

  ```flow
  st=>start: 接收前端訊號
  con1=>condition: 卡片使用者?
  con2=>condition: 被攻擊者?
  con3=>condition: 有防禦卡?
  con4=>condition: 使用?
  op=>operation: 將使用的卡片資訊送給後端
  op1=>operation: 往後端發送攻擊成功,自己的防禦卡不更動
  op2=>operation: 往後端發送攻擊失敗,自己的防禦卡-1
  op3=>operation: 即時更新狀況
  op4=>operation: 往後端發送攻擊成功。
  e=>end: 結束
  con1(yes)->op->e
  con1(no)->con2
  con2(yes)->con3
  con2(no)->op3->e
  con3(yes)->con4
  con3(no)->op4->e
  con4(yes)->op2
  con4(no)->op1->e
  ```



* 後端

  ```flow
  st=>start: 接收前端訊號
  con1=>condition: 是攻擊卡?
  con2=>condition: 攻擊對象是否有防禦卡
  con3=>condition: 使用防禦卡?
  e1=>end: 戰鬥成功,往 firebase 將對象血量 -1,更新戰況給所有玩家
  e2=>end: 戰鬥失敗,往 firebase 將對象防禦卡 -1,更新戰況給所有玩家
  e3=>end: 戰鬥失敗,往 firebase 將該使用者防禦卡 -1,更新戰況給所有玩家
  st->con1
  con1(yes)->con2
  con1(no)->e3
  con2(yes)->con3
  con2(no)->e1
  con3(yes)->e2
  con3(no)->e1
  ```

1### 已死亡

* 前端

```flow
st=>start: 檢測到自己的血量已歸零
con1=>condition: 是否離開房間
e1=>end: 發送個人資訊到後端,並且回到房間清單
e2=>end: 回合自動被跳過,可觀戰

st->con1
con1(yes)->e1
con1(no)->e2
```

* 後端

  ``` flow
  st=>start:
  con1=>condition: 是否離開房間
  e1=>end: 接收使用者個人資訊,往 firebase 內該房間之資訊移除使用者。
  e2=>end: 回合自動被跳過,仍往該使用者持續推送戰況
  con1(yes)->e1
  con1(no)->e2
  ```

遊戲結束

* 前端

  ```flow
  st=>start: 檢測到勝負已分
  e1=>end: 該房內所有玩家返回至房間畫面,遊戲結束。

  st->e1
  ```



* 後端

  ```flow
  st=>start: 檢測到勝負已分
  end=>operation: 往前端推送已結束之訊號,使其路由回到房間。

  st->end
  ```

遊戲內聊天

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •