Day01 - 緣起：怎麼了？為什麼？如何掌握過於自由的程式碼？

13th鐵人賽 #state management #finite state machine

Ken Chen

團隊Web 實驗室

2021-09-16 00:21:09

1678 瀏覽

分享至

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler

程式碼是自由的、彈性的、靈活多變的～

在 JavaScript 的世界尤其是

但隨著商業邏輯、應用場景越來越複雜，程式碼逐漸龐大

除了能運作之外，我們需要考量的東西越來越多，如系統可靠度、信心（意思是不怕壞掉、不怕bug），系統安全性、系統效能等

以整體軟體工程要考量的維度，越來越多。

思考看看以下一些問題

以電商交易舉例

電商的訂單階段，買家提交訂單（給賣家先確認庫存），賣家確認有貨可成立點選同意，訂單進入等待付款，付款完成收帳後進入等待發貨倉儲人員配貨、安排物流，送達目的地後等待取件，取件完成後訂單交易完成

簡單歸納

提交 → 待付款 → 待發貨 → 待取件 → 交易完成

實務考量

上述一系列流程，用文字敘述看似單純，但在程式碼實作的過程中，需要考量的東西很多，最直接可以想到的就是一些簡單的防禦。比如說我們要確保還沒付款時，程式碼沒辦法接觸到等待發貨相關的通知、操作與執行。或賣家還沒確認成立訂單，不能進行扣款等。

以遊戲開發舉例

舉實際應用場景，假設我們今天要設計一個2D RPG遊戲，我們必須撰寫玩家操縱角色的行為

開發角色移動模組

規格

按下 ⇦、⇨ 可控制玩家移動
按下 B 是跳躍
長按 ⇩ 是匍匐前進 → 放開 ⇩ 是起身

1.實作跳躍

if(input == PRESS_B){
  // 「實作」計算、畫出跳躍的畫面，圖片從站立換成跳躍
}

發現 bug 了嗎（或許對你的遊戲設計不是）？假如角色現在已經是正在跳躍，如果再按一次 B ，就會在空氣中再繼續往上跳

1.1 加入防禦 - 空氣跳躍（連續跳躍）

因此我們勢必要加入一個 flag 來判斷是不是正在 跳躍中 ( isJumping )

if(input == PRESS_B){
  if(!isJumping){
    isJumping = true // 將 flag 跳耀中，轉為 true
    // 跳
  }
}

2. 實作匍匐前進

長按 ⇩ ，進入匍匐前進

if (input == PRESS_DOWN){
  // 匍匐前進，換成匍匐前進的圖片
}

2.1 加入防禦 - 跳躍不能直接變匍匐前進

接著，因為跳躍中不能匍匐前進

 if (input == PRESS_DOWN){
  if(!isJumping){
    // 匍匐前進，換成匍匐前進的圖片
  }
}

2.2 與前面跳躍整合，這裡從 if 改接 Jump 後的 `else if`

if(input == PRESS_B){
  // 跳
} else if (input == PRESS_DOWN){
  if(!isJumping){
    // 匍匐前進，換成匍匐前進的圖片
  }
}

2.3 加入判斷 - 匍匐及站立

放開 ⇩ ，為了恢復站立（我們怎麼知道是不是匍匐中），是不是又要加一個flag 匍匐中( isCrawling )

if(input == PRESS_B){
  // 跳
} else if (input == PRESS_DOWN){
  if(!isJumping){
     isCrawling = true
    // 匍匐前進，換成匍匐前進的圖片
  }
} else if (input == RELEASE_DOWN){
  if(isCrawling){
     isCrawling = false
    // 恢復站姿
  }
}

這裡是完整的嗎、正常的嗎？看到這我己經心累了QQ 看得出有 Bug 嗎？

2.4 加入防禦 - 匍匐不能直接變跳躍

假如我們在匍匐前進時，按下 B 跳躍，因為 isCrawling 還是 true ，我們會看到主角是俯臥的樣子飛到空中，所以我們跳躍的logic 判斷勢必又要回去加點預防

if(input == PRESS_B){
  if(!isJumping && !isCrawling){
    isJumping = true // 將 flag 跳耀中，轉為 true
    // 跳
  }
} else if (input == PRESS_DOWN){
  if(!isJumping){
     isCrawling = true
    // 匍匐前進，換成匍匐前進的圖片
  }
} else if (input == RELEASE_DOWN){
  if(isCrawling){
     isCrawling = false
    // 恢復站姿
  }
}