Menu

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級,升級後攻擊力大幅提升,攻擊範圍和速度小幅提升。武器也可出售,不過金錢減半。
* 地圖全範圍開放,支持堵路技術,延長敵人行進線路。