用flutter編寫炸彈人小遊戲同時支援web和移動端

flutter_BananaMon是我學習dart/flutter的時候開發的一個練手專案，他不依賴第三方遊戲框架，是一個從零開始的專案，現在已經開源在github。

簡介

google主導的Dart對標微軟主導的TypeScript，但是在web端一直屈居下風，Google能否藉助flutter這款框架鹹魚翻身？總體來講flutter是一個設計用於app開發的跨平臺ui框架，它用dart在android和iOS端實現了對底層圖形庫進行了封裝，並不像react native依賴於平臺的ui框架去實現一個元件，所以flutter更底層、更高效、也帶來了更多可能，跨平臺的遊戲就是其中之一。

框架

為了探索dart/flutter的能力，在設計這個專案的時候就考慮到了要同時支援web和flutter。這樣專案經過很小的修改就可以在三端執行，實踐證明這是可行的。它最初是一個基於dart的web專案，可以直接在瀏覽器中執行，同時還包含一個簡單的關卡編輯器，使用者可以用圖形介面中編輯自己的關卡，匯出匯入關卡等。

1. 主迴圈
2. canvas封裝
3. 資源管理
4. 觸控控制
5. 音訊
6. 其他

主迴圈

和app一樣每個遊戲都有一個主迴圈，在flutter上實現主迴圈的關鍵程式碼

SchedulerBinding.instance.scheduleFrameCallback(_tick);
複製程式碼

而在web上是通過操作dom實現的，為保證跨平臺性，需要做一層抽象，把實現隱藏起來

canvas封裝

遊戲需要做大量的canvas操作，在android平臺flutter對skia影象庫進行了封裝，在web平臺我們只要操作H5 canvas 就可以了，同樣為了保持跨平臺性，對canvas進行了封裝，詳細程式碼都在CanvasWrapper類中，為了偷懶，只封裝了用到的api。

資源管理

2d遊戲使用了一些雪碧圖和音訊資源。這些資源的載入在不同平臺上不同： flutter：現在ubspec.yaml中宣告 H5：通過fetch在後臺載入,解析成對應資源 在ResourceProvider類中進行了封裝，同時對雪碧圖進行了建模

觸控控制

通過TapGestureRecognizer和 ImmediateMultiDragGestureRecognizer在fluter中實現了觸控式螢幕點選和手勢的監聽，在H5端比較簡單，就像寫js一樣監聽按鍵事件就可以了

音訊

音訊播放在H5上比較簡單，因為是基於dom的一切都是水到渠成。而在flutter上好像框架並沒有支援？只能藉助第三方外掛，希望以後能完善吧。目前選擇的是audioplayers的開源外掛，不得不說，第三方外掛可能是一個大坑，因為質量很難保證，要同時支援android 和Ios就更難了

其他

其他東西都在程式碼中，無法展開詳說

感受

總體來說dart這門語言有驚喜，也有些地方不那麼讓人愉悅，例如數字型別轉換報錯、沒有匿名類，這讓java程式設計師非常抓狂

在web端追溯出錯很困難，因為報錯都在迴圈體中，而這些報錯資訊被編譯成js後很難在找到原始碼中到底是哪裡錯了。

flutter不支援反射，官方團隊態度堅決，他們有他們的理由，然而很多優秀的庫依賴於反射這一特性,如果不支援，是否會阻礙futter生態鏈的發展呢？