iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
1
Microsoft Azure

Azure Serverless 平步青雲,漫步雲端系列 第 6

Day 06- 尋覓上天梯:狼人殺 - 實戰前準備 - 專案規劃

https://ithelp.ithome.com.tw/upload/images/20200921/20130168gv01vizVE8.jpg
圖片來源:天黑請閉眼

狼人殺動機

由於筆者最近時常與社群好友揪團打線下的狼人殺,筆者總是在當主持人(又名法官、上帝),現在階段沒有一個好的做法來讓主持人可以很好的管控整個遊戲局面,因此筆者決定自己設計一個主持人用的狼人殺賽局,並可以讓玩家們自己知道自己的牌跟死亡狀態。可以單獨由主持人使用(自訂號碼跟身份),也可以由沒有牌組的玩家們用(全部人進小房間用)

產品規格

  1. 產品目標對象:線下打狼人殺的玩家。
  2. 產品目的:幫助線下打狼人殺的玩家們順利進行遊戲,不因為某些不擅長擔任主持人的玩家失誤導致遊戲中斷的情形。
  3. 產品平台:使用網頁,並可以在手機及平版上做管理。
  4. 產品敘述:整體規劃會是小房間制度,而小房間內最多人數為12+1人。每個人進來網頁會後,可以選擇加入房間或是創立房間(也可以透過分享房間ID的方式直接拉人進來),區分主持人模式與一般玩家模式,一個賽局只有一位主持人,主持人的決定權由創立房間的人為主持人,並可以將主持棒交由下一位玩家。

產品系統設計

https://ithelp.ithome.com.tw/upload/images/20200921/20130168tN9ulgR3df.png

由於產品是屬於線下打狼人殺,語音串流跟聊天室的部分基本上可以不用製作,而我們在整個產品的MVP設計上,則是先設計主持人可以開始新的賽局,並可以單向傳送賽局進度給玩家們,像是洗牌抽牌、抿牌等,就是要接上Websocket的概念。

使用者情境

https://ithelp.ithome.com.tw/upload/images/20200921/20130168y9iGIW1907.png
圖片來源:天黑請閉眼

我們從使用者情境開始走一次系統流程。

入口網站

今天我們13人組了賽局,於是每一個人拿起了手機,並打開了這個網頁來準備開打狼人殺。
為了完成這個目標我們需要有一個網頁可以讓所有玩家進入。

準備擔任主持人的玩家需要創立一個房間

創立一個房間這件事情需要在網頁上有一個按鈕,並按下去的時候發送一個請求到雲端,由Azure的Api-management轉由Azure Functions的創立房間函數來建立一個房間物件,並存入SQL Database,標示主持人的身份。

建立好房間邀請玩家加入。

建立好房間物件之後應該要有一個房間的ID,並可以分享給其他人直接加入,假設大家都在線等!急!,我們可以讓主持人提供房間ID給其他使用者讓他們填入尋找房間的欄位,並傳送一個加入房間請求給Azure Functions來搜尋有沒有對應的房間,沒有的話就告知沒有此房間,有的話就直接加入,並在Azure SQL Database房間物件內存入玩家編號、Websocket的ID及玩家的UUID。

由主持人開始賽局,發牌到各個玩家。

主持人可以選擇開始賽局,預設是預言家、女巫、獵人、騎士、兩隻狼王及兩隻小狼的組合。按下開始賽局之後由Azure Functions透過房間內的Websocket發送隨機角色給玩家們,並在房間物件內賽局陣列內存入每場賽局的玩家身份配置,並在房間狀態為遊玩中時只能由當場主持人存取。

由所有玩家按下準備好,主持人即可按下抿牌。

所有玩家的畫面上應該會有準備好的按鈕,並按下準備好之後,由主持人按下抿牌之後就會讓各個玩家手上的裝置顯示角色身份。這部分也是由一個Azure Functions來處理並由Websocket負責發送系統狀態。

接下來由主持人按下天黑,開始天黑賽局。

主持人按下天黑可以選擇發送或不發送聲音,並進行天黑賽局,聲音的部分涵蓋在靜態網站的Asset內,並直接從Websocket接收通知後發聲,玩家可以自己靜音,並顯示天黑。

各輪次

主持人畫面會有固定的排序按鈕,按照每輪次按下就可以觸發該輪次玩家系統狀態。並可以選擇發送不發送觸發輪次語音到所有人手機。

狼人

https://ithelp.ithome.com.tw/upload/images/20200921/20130168JYjsnL41yU.png
圖片來源:天黑請閉眼
狼人輪次會由主持人這邊決定殺的玩家牌,或是由狼人身份的玩家點選號碼。

睜眼說瞎話。

女巫

https://ithelp.ithome.com.tw/upload/images/20200921/20130168GyGAIG1ga2.png
圖片來源:天黑請閉眼
女巫輪次會由主持人這邊決定救/殺的玩家牌,或是由女巫身份的玩家點選救/不救或是毒/不毒。

毒對就是聖人,毒錯就是罪人。

預言家

https://ithelp.ithome.com.tw/upload/images/20200921/201301688HUT3v4Rg1.png
圖片來源:天黑請閉眼
預言家輪次會由主持人表示身份,或是由預言家身份的玩家自行點選號碼。

好人不長命,壞人活千年

獵人與騎士

https://ithelp.ithome.com.tw/upload/images/20200921/20130168cRe4qYEOfd.png
圖片來源:天黑請閉眼
騎士可以選擇翻牌撞人,也會直接顯示天黑或是自殺。而翻牌撞人的按鈕每一個玩家都會有,只有騎士按下去有用而已。

賭對賭神,賭錯賭爛。

系統

前端

由Angular配合Material Design並設計手機版本的視窗。這個篇章預計會帶大家做3 ~ 5篇。由於擔心素材版權問題,因此圖片部分用Fakeimg,以文字為主要表示。

後端架構

由Python配合Azure Functions來做邏輯層運算。

本日小節

今日為實戰前專案規劃,設計一個好的產品做好需求提煉、最小可行性設計很重要,並設計一個使用者情境來確保每一個基本流程都可以做到,並在每一個基本流程上面做好各種可能出現的模擬狀況如玩家斷線、主持人斷線等狀況,並可以讓大家在各種問題發生的情況下可以迅速恢復並持續進行遊戲非常重要。

隕石流開發術可以開發出很大的東西,這包含了很大的坑。


上一篇
Day 05- 百川異源,而皆歸於海:系統設計 - 彈性擴展
下一篇
Day 07- 佛要金裝,人要衣裝,我要前端:狼人殺 - 實戰 - 前端設定(Azure DevOps版)
系列文
Azure Serverless 平步青雲,漫步雲端30

尚未有邦友留言

立即登入留言