iT邦幫忙

2026 iThome 鐵人賽

DAY 23
0
JavaScript

重新拿回思考力!一起來用 JavaScript 打造 CLI 好玩遊戲區!系列 第 23 篇

Day23 RPG1:在冒險式 RPG 遊戲之前,先認識狀態機

  • 分享至 

  • xImage
  •  

歷經整整 11 天的爆爆王加上 3 天的共用入口,相信大家都等得發慌了,今天終於要來開發新的遊戲啦!!

這個遊戲就是 RPG!說到 Terminal 玩的 RPG,其實我一開始想像的是文字型的 RPG,就是藉由問題與選擇來進行遊戲的推展。

但是後來發現到既然我們前兩個遊戲都花那麼多時間練習做地圖了,應該好好善用這個經驗,所以我決定做一個可以在 Terminal 環境探索地圖的冒險式 RPG。

不過老實說我也沒有做過,到底會發生什麼事呢,希望我們可以順利完成啊!!(緊張)

練習目的與開發邊界

一樣要講一下這個遊戲練習目的以及開發邊界。

我的目的在於驗證以 CLI 開發一個有地圖的 RPG 冒險遊戲是可行的,並且藉此來練習狀態機的設計;但不在於讓這個遊戲變成一個具備完整劇情或是完整可玩的遊戲。

練習目標:

練習狀態機設計

驗收目標:

我先訂定幾個驗收目標,避免無限擴張去做其他想做的功能。

  1. 玩家可以在地圖中自由移動、切換地圖
  2. 玩家可以和 NPC 對話
  3. 玩家可以接任務
  4. 玩家可以撿拾物品放入道具箱
  5. 玩家可以以物品完成任務
  6. 玩家和 NPC 的對話隨遊戲推進而改變

至於讓這個 CLI RPG 真正具備可玩性就交給各位讀者自行來嘗試了!

狀態機是什麼

有限狀態機(Finite State Machine),也可以簡稱 FSM,太學術的理論我講不出來,讓我用前面有遇過的例子跟讀者分享一下:

https://ithelp.ithome.com.tw/upload/images/20261006/201824392nGRW7JR6U.png

敵人的生存和死亡就是兩種狀態,那觸發死亡的事件就是被炸彈炸到,假設我們加上一個當玩家超過一定時間沒有獲勝,就會復活一個敵人的機制(要逼死誰),那麼轉換回生存的事件就會是玩家超時。

這就是一個狀態機的範例,描述了以下幾件事情:

  1. state 狀態:生存、死亡,就是兩種不同的狀態。
  2. event 事件:遇到什麼事件會觸發狀態變化,例如被炸彈炸到、玩家超時。
  3. transition 轉換:從這個狀態轉換到另外一個狀態就叫做 transition。
  4. action 動作:在整個狀態機的過程中,系統在不同階段要做哪些動作。
    • entry action 進入這個狀態時的動作:當發生了被炸到的事件時,敵人要轉換為死亡了,這時候我們要做的事情就是隱藏敵人;當發生了超時的事件時,敵人要轉換為生存了,這時候我們就要顯示出敵人。
    • activity 停留在狀態期間執行的動作:死亡期間進行復活倒數 / 生存期間每秒移動一格。
    • exit action 離開時的動作:如果敵人要離開死亡、準備復活了,就會需要清除計時器,有時候離開狀態不一定有相應的動作。
    • transition action 轉換時要做的動作:敵人數目的儀表板要更新,或者我們有敵人死亡或復活的音效播放出來。

不過我覺得有時候撰寫程式不一定要硬塞這些理論進去,畢竟理論是幫助我們思考的工具,所以在我們不知道撰寫一個狀態轉換時需要有哪些動作,就可以先利用狀態機的理論來思考,真正進入撰寫程式的流程,就別再拘泥於「這個 action 到底是 entry 還是 activity」這種問題上了,重點就會擺在遊戲能不能動起來了!

總之既然狀態機的規劃是我們練習的目標,我們今天就從這裡著手來想想看遊戲中可能會有哪些狀態機。

我們的遊戲裡可能有哪些狀態機

我們可以先列出遊戲流程,再從遊戲流程中整理出會需要狀態機的部分:

  1. 玩家進入遊戲:預設出現在村莊裡好了
  2. 玩家在村莊中移動
  3. 玩家遇到 NPC ,和 NPC 進行第一次對話, NPC 請他搜集藥草
  4. 玩家移動到村莊入口
  5. 玩家切換到森林地圖
  6. 玩家在森林中移動
  7. 玩家撿拾藥草放入背包
  8. 玩家從村莊入口回到村莊
  9. 玩家和NPC進行第二次對話
  10. 完成任務

接著我們可以列出有哪些會需要狀態的「主體」,以及他們可能有哪些狀態,還沒辦法列表或畫出流程沒關係,試著用自己的話說明:

  1. 玩家:位置?現在正在和 NPC 講話嗎?還是正在探索地圖?在撿拾物品嗎?
  2. NPC:現在是要交付任務,還是等待回報?
  3. 地圖:現在是村莊還是森林?
  4. 藥草:在地上?在背包裡?
  5. 任務:尚未領取、已領取、已完成

我們還不知道這些是不是都適合做狀態機,但沒關係,我們要接著練習畫看看狀態機的流程。

試著畫出流程

我先從目前看起來最簡單的畫起XD

藥草的狀態機

https://ithelp.ithome.com.tw/upload/images/20261006/201824392dtq38AWo9.png

因為只有兩個狀態算是比較容易畫的,我用綠色便條紙代表動作。

任務的狀態機

https://ithelp.ithome.com.tw/upload/images/20261006/20182439GsEn0qgIAa.png

在任務的部分,狀態是有順序的,而且不能回溯。

今天主要認識什麼是狀態機、練習擬定有哪些可能的狀態機,至於其他比較複雜的狀態機,我想之後隨著開發的歷程,我們一起來練習繪製和實作出來!

在準備的過程中我讀到一篇文章:如何有邏輯的釐清事物的狀態?學習 FSM 有限狀態機,當中提到「我看狀態機的圖片跟流程圖很相似,這兩者有什麼差異?」,而作者的答覆是:「狀態機強調的是「狀態變化」,而流程圖則是強調『事件先後順序』。」我覺得這個答案蠻好的。

但無論是狀態機或流程圖,都是幫助我們思考、輔助開發的一種工具,所以不需要對畫狀態機或流程圖錙銖必較、在意哪些東西應該怎麼歸類才算合理,重要的是藉由工具來展開我們真正的任務:遊戲開發。

後面的時間我們就一邊練習狀態機,一邊將 RPG 遊戲完成吧!如果你想練習看看的話,可以試著把還沒完成的狀態機試著畫畫看唷!明天見!


上一篇
Day22 共用入口3:做決定還是我們的工作啊
系列文
重新拿回思考力!一起來用 JavaScript 打造 CLI 好玩遊戲區! 共 23 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言