iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

連線網頁卡牌遊戲(Elixir, Phoenix, Liveview)系列 第 3

3 所以要長怎樣?

聊一下更新畫面這回事

自己以前的經驗,我在出一張牌的時候,都是從前端通知後端說出了牌,更新完伺服器端的狀態,
同時也用 javascript 在前端更新畫面上的狀態來維持跟伺服器同步。有的時候會有同樣的邏輯做兩次的感覺。

以前的作法

https://ithelp.ithome.com.tw/upload/images/20210917/20141054vzeadO63tf.png

新的作法

https://ithelp.ithome.com.tw/upload/images/20210917/20141054qpCc71RFr9.png
現在使用 Liveview 的時候,伺服器端會用 websocket 與瀏覽器連結,在收到事件之後,
從更改後的狀態計算差異,並將差異傳回瀏覽器更新畫面。

所以知道這個要幹嘛?

接下來要做的遊戲畫面,都會直接跟這局遊戲的狀態同步,這代表假如我要出一張牌,
我只需要更新遊戲的狀態,Liveview 就會幫我更新畫面了。

這也延伸出,我最好大概知道畫面大概要長怎樣,我設計遊戲狀態結構的時候才不會漏東漏西,
自己有個怪習慣是在做畫面之前先用紙筆畫一下,雖然現在是單人專案,但是我常常不認識昨天的自己,所以我們要來畫個 wireframe。

https://ithelp.ithome.com.tw/upload/images/20210917/20141054VwXrLmCufe.png

上圖由左到右是模擬 1 到 3 局的狀態,好拉本來只是要用紙畫個,但是要 po 上來就不自覺的用 figma 拉了這張。我對代表目前局數的上面三個燈很不滿意,感覺不夠直覺,之後可以會改吧。

這個畫面跟大家想像的有差很多嗎?你覺得你會怎麼設計呢?


上一篇
2 遊戲規則
下一篇
4 遊戲狀態結構
系列文
連線網頁卡牌遊戲(Elixir, Phoenix, Liveview)32

尚未有邦友留言

立即登入留言