HTML5 Canvas 開發框架:CasualJS Framework
CasualJS Framework是根據ActionScript3.0的架構開發的一套適用於HTML5 Canvas的面向對象的開發框架。目的是讓你無縫的從AS3開發過渡到HTML5 Canvas開發。雖然Canvas提供了強大的繪圖功能,但滿足不了高級開發的需要。利用CasualJS的顯示對象架構及渲染機制,你可以輕鬆的在Canvas中操控各種位圖、圖形、影片剪輯等顯示對象,就如同在用AS3開發一樣愉快。
框架特性:
- 類似AS3的顯示對象列表結構封裝
- 基於幀的顯示對象渲染機制
- 基於幀的MovieClip動畫片段實現
- 內置簡單的事件模型
演示和示例:
API文檔:
* API在線文檔:http://www.riaidea.com/html5/casualjs/doc/
下載:
* 完整版本:casualjs v0.1 (包括源碼、API文檔和示例)
* 源碼也可到google svn下載:http://code.google.com/p/casualjs/
項目主頁:
* http://code.google.com/p/casualjs/
* www.html5idea.com
這是一個開源框架並且剛剛起步,如果你有興趣參與,請聯繫: Flashlizi (Alex.li) MSN: flashlizi@hotmail.com
HTML5嘗鮮:用HTML5 Canvas開發的遊戲Demo – Field Runner
一直從事Flash相關開發,但也一直在關注HTML5及相關技術。最近基於HTML5 Canvas並按照AS3的架構開發了一個JS遊戲框架CasualJS(此框架正在開發完善中,編程方式也跟用as3開發非常類似,如果有朋友有興趣的話以後可以考慮開源)。
不知道大家對ipad下的經典塔防遊戲Field Runner有沒有印象,下面就是我用Field Runner的一些素材(版權歸原著所有,只是借用而已)以及這個框架做的一個簡單的遊戲demo,以此檢驗HTML5 Canvas做遊戲的能力,有興趣的可以到這裡來體驗一下:http://www.riaidea.com/html5/runner/ (因需加載近2M的圖片資源,稍微有點慢),請用支持HTML5的瀏覽器瀏覽,如Firefox3.6,Safari5,Chrome等。
遊戲功能更新:
* 單一敵人兵種步兵,可4方向行進及自動尋路。
* 單一防禦武器格林機槍,可360度旋轉瞄準射擊。
* 消滅敵人可獲得相應的金錢,可用來製造新的防禦武器。
* 敵人逃跑會降低生命值,生命值為0則遊戲失敗。
* 遊戲是無限模式,敵兵一波接一波源源不斷,不過中途可暫停和繼續。
* 簡單的敵人升級系統,敵兵每2波增強一次,生命值大幅提升,金錢和積分小幅提升。
* 簡單的武器升級系統,武器可升級共10級,升級後攻擊力大幅提升,攻擊範圍和速度小幅提升。武器也可出售,不過金錢減半。
* 地圖全範圍開放,支持堵路技術,延長敵人行進線路。