水果忍者APP風(fēng)靡于各手機(jī)平臺，這個js版可以直接在網(wǎng)頁就可以試玩。超級酷！而且作者還提供了源代碼，有興趣的朋友可以試試看。
演示地址：http://ucren.com/demos/fruit-ninja/
github：https://github.com/ChineseDron/fruit-ninja
繪圖上，仍然是采用了 vml+svg，這是我一直比較推薦的組合，不過不要一聽 vml、svg 等就頭大，市面上針對 vml、svg 封裝的庫還是瞞多的，我用得比較順手的就 Raphael 了，她的 API 非常簡單，支持鏈?zhǔn)秸{(diào)用，瀏覽器的兼容性一直很讓人滿意。在開發(fā)水果忍者時，我手賤升級了一把 Raphael 2.1.0，發(fā)現(xiàn)性能比較低，又一直找不到原因，無奈又得降回了 1.5，值得注意的是，2.1.0 的 API 并不完全兼容 1.5，其中 rotate/scale/translate 等 API 被標(biāo)識為即將棄用而使用 transform 替代，并且 rotate/scale 這兩個接口使用 transform 代替時，不能完美支持像 rotate/scale 原有的功能（或我不知怎么用）。
搞定了繪圖，其它的都比較簡單了，因?yàn)樯婕暗絼赢嫞@里還需要兩樣?xùn)|西：那就是 tween 和 timeline，tween 提供一系列關(guān)于動畫路徑運(yùn)算的公式，在本游戲當(dāng)中，我用到哪個公式就摘抄哪個，這些公式?jīng)]有必要自己推導(dǎo)，反正最后推出來的結(jié)果跟 tween 給的是一樣的；timeline 用于做全局的時間管理，可以給它掛上無數(shù)個任務(wù)，什么時間該進(jìn)行什么事情就不用管了，timeline 會幫你處理，timeline 的實(shí)現(xiàn)原理十分簡單，我沒有在業(yè)界上找現(xiàn)成的庫，而是自己封裝了一把，大概能實(shí)現(xiàn)任務(wù)管理就行了，至于代碼，等下周開源了感興趣的同學(xué)可以去 git 上 clone 下來露一眼。
場景控制：一個專門管理場景切換的腳本，它提供類似于 switchSence 的接口，通過接口來進(jìn)行場景的切換，本游戲設(shè)計(jì)了“菜單”、“游戲界面”、“DOJO界面”以及“GameOver”等場景。
游戲采用了 commonJS 的規(guī)范來管理模塊，由于模塊之間需要通訊，除了 require 之外，message 和 state 兩個模塊也是解藕的兩大利器，message 是消息管理器，提供 postMessage 和 addEventListener 兩個接口，分別用于發(fā)送和接收消息；state 是狀態(tài)管理器，提供數(shù)個關(guān)于狀態(tài)讀寫的接口。
layer.js 在游戲當(dāng)中做為 Raphael 庫的一個補(bǔ)充，主要解決 Raphael 管理圖層不是很方便的問題，Raphael 只有 toFront 和 toBack 兩個關(guān)于圖層順利控制的接口，如果想精準(zhǔn)定位某個元素處于某個層次就不是很方便了，為了彌補(bǔ)，layer.js 中維護(hù)了一個圖層 mapping，每個圖層的 z 索引值在這個 mapping 中進(jìn)行記錄，哪些元素要放于什么層次在游戲邏輯中可以很方便地設(shè)置。
collide 模塊在游戲中專門用于做碰撞檢測運(yùn)算，這里，collide 只關(guān)心線段與橢圓之間的關(guān)系，因?yàn)榈堵愤^的痕跡與水果可以分別看成是線段的拼接和橢圓。
此外，游戲的腳本中還包括“模塊工廠”和“對象包”兩個東西，“模塊工廠”里存放著幾個模塊模型，通過這些模型可以衍生出來任意個類型相同的模塊，有點(diǎn)像模塊級別的繼承，由于是工廠模式創(chuàng)建的，所以管它叫模塊工廠；“對象包”里則放著每一個元素對應(yīng)的控制腳本，游戲主邏輯通過對象包中的對象去操縱元素。
最后，還有兩個腳本 control.js 和 main.js，control.js 主要負(fù)責(zé)管理人機(jī)交互部分的邏輯，main.js 則管理游戲主線業(yè)務(wù)邏輯。
好了，暫時就介紹這些，光讀文章，也許你會看到比較暈，有興趣的同學(xué)等我把源碼再整理整理，開源之后再拉下來讀。
原文地址：http://ucren.com/blog/archives/233