水果忍者APP風靡于各手機平臺，這個js版可以直接在網頁就可以試玩。超級酷！而且作者還提供了源代碼，有興趣的朋友可以試試看。

演示地址：http://ucren.com/demos/fruit-ninja/

github：https://github.com/ChineseDron/fruit-ninja

繪圖上，仍然是采用了 vml+svg，這是我一直比較推薦的組合，不過不要一聽 vml、svg 等就頭大，市面上針對 vml、svg 封裝的庫還是瞞多的，我用得比較順手的就 Raphael 了，她的 API 非常簡單，支持鏈式調用，瀏覽器的兼容性一直很讓人滿意。在開發水果忍者時，我手賤升級了一把 Raphael 2.1.0，發現性能比較低，又一直找不到原因，無奈又得降回了 1.5，值得注意的是，2.1.0 的 API 并不完全兼容 1.5，其中 rotate/scale/translate 等 API 被標識為即將棄用而使用 transform 替代，并且 rotate/scale 這兩個接口使用 transform 代替時，不能完美支持像 rotate/scale 原有的功能（或我不知怎么用）。

搞定了繪圖，其它的都比較簡單了，因為涉及到動畫，這里還需要兩樣東西：那就是 tween 和 timeline，tween 提供一系列關于動畫路徑運算的公式，在本游戲當中，我用到哪個公式就摘抄哪個，這些公式沒有必要自己推導，反正最后推出來的結果跟 tween 給的是一樣的；timeline 用于做全局的時間管理，可以給它掛上無數個任務，什么時間該進行什么事情就不用管了，timeline 會幫你處理，timeline 的實現原理十分簡單，我沒有在業界上找現成的庫，而是自己封裝了一把，大概能實現任務管理就行了，至于代碼，等下周開源了感興趣的同學可以去 git 上 clone 下來露一眼。

場景控制：一個專門管理場景切換的腳本，它提供類似于 switchSence 的接口，通過接口來進行場景的切換，本游戲設計了“菜單”、“游戲界面”、“DOJO界面”以及“GameOver”等場景。

游戲采用了 commonJS 的規范來管理模塊，由于模塊之間需要通訊，除了 require 之外，message 和 state 兩個模塊也是解藕的兩大利器，message 是消息管理器，提供 postMessage 和 addEventListener 兩個接口，分別用于發送和接收消息；state 是狀態管理器，提供數個關于狀態讀寫的接口。

layer.js 在游戲當中做為 Raphael 庫的一個補充，主要解決 Raphael 管理圖層不是很方便的問題，Raphael 只有 toFront 和 toBack 兩個關于圖層順利控制的接口，如果想精準定位某個元素處于某個層次就不是很方便了，為了彌補，layer.js 中維護了一個圖層 mapping，每個圖層的 z 索引值在這個 mapping 中進行記錄，哪些元素要放于什么層次在游戲邏輯中可以很方便地設置。

collide 模塊在游戲中專門用于做碰撞檢測運算，這里，collide 只關心線段與橢圓之間的關系，因為刀路過的痕跡與水果可以分別看成是線段的拼接和橢圓。

此外，游戲的腳本中還包括“模塊工廠”和“對象包”兩個東西，“模塊工廠”里存放著幾個模塊模型，通過這些模型可以衍生出來任意個類型相同的模塊，有點像模塊級別的繼承，由于是工廠模式創建的，所以管它叫模塊工廠；“對象包”里則放著每一個元素對應的控制腳本，游戲主邏輯通過對象包中的對象去操縱元素。

最后，還有兩個腳本 control.js 和 main.js，control.js 主要負責管理人機交互部分的邏輯，main.js 則管理游戲主線業務邏輯。

好了，暫時就介紹這些，光讀文章，也許你會看到比較暈，有興趣的同學等我把源碼再整理整理，開源之后再拉下來讀。

原文地址：http://ucren.com/blog/archives/233