用 KineticJS 改寫 Shadow Maze 2D

Shadow Maze 2D 是 AS3/starling 寫的 app, 試著用 KineticJS 改寫, 感覺上跟 starling 作法差不多。由於是 web app, 所以把儲存和記錄的功能拿掉了。圖片素材都一樣, 改寫起來還算快。

shadow_maze 是完成的結果, 在桌機上用鍵盤的方向鍵操作, 在手機上用 device orientation 功能操作。

測試過 Chrome、IE 11、Safari 和 iOS 7 Safari 是可以正常執行, 但 Firefox 25/26 會當掉, 關掉大部份的 Firefox plug-in 之後, 執行 20秒左右也當了, 殘念。Firefox 執行 KineticJS 做的 app 似乎有不少人遇到麻煩, 不知道是 Firefox 的問題還是 KineticJS 的問題 ... 我懷疑前者的支援度不佳 ...

條列筆記:

• Sprite 圖形是之前用 Flash CS6 功能輸出的。
• 類別使用 createNew 的方式實作。
• Kinetic.Layer 在 DOM 裡是 <canvas> 元素。
• toImage() 類似 AS3 的 cacheAsBitmap。
• 將 Kinetic.Node 做 toImage() 時, 該物件必須已經放在 Layer 上面。
• 做 toImage() 時, protocol 需是 http 不能是 file。
• toImage() 得到的是 JS Image 物件, 不是 Kinetic.Image 物件。
• 裝置方向參考 Using Device Orientation。
• 裝置方向事件處理, 若先 remove 再 add, 可能會拿到先前的舊值, 造成 bug。
• 上述動畫進行中, 可用一變數去忽視裝置方向事件。
• 善用 Group。
• 按鈕可以寫成 Component。
• JS 合併縮小用 UglifyJS。