CreateJS為CreateJS庫，可以說是一款為HTML5游戲開發的引擎。打造 HTML5 游戲，構建新游戲，提供構建最新 HTML5 的技術、你可以通過這個網站學習如何構建跨平台和跨終端游戲。這個資源庫還會告訴你如何構建多人在線游戲。CreateJS 是一套可以構建豐富交互體驗的 HTML5 游戲的開源工具包，旨在降低 HTML5 項目的開發難度和成本，讓開發者以熟悉的方式打造更具現代感的網絡交互體驗。
v准備工作
1.進入createjs首頁：
首頁有幾個tab頁，有EASEJS、TweenJS、SoundJS、PrloadJS、ZOE五種.(最新的官網好像沒有ZOE的tab頁了，不過在http://createjs.com/downloads下載頁面的最下面還是可以找到下載的。)
- EASEJS：用來處理HTML5的canvas
- TWEENJS：用來處理HTML5的動畫調整和javascript屬性
- SOUNDJS：用來幫助簡化處理音頻相關的API
- PRELOADJS：管理和協調程序加載項的類庫
- ZOE：將SWF動畫導出為EaseIJS的sprite的工具
2.首頁解析：
3.進入下載頁：http://createjs.com/downloads
因為這篇博客主要介紹HTML5游戲開發的引擎canvas,所以我們下載EASEJS就可以了。
4.幫助文檔：
幫助文檔里有很多類的介紹，還有對應類的方法、屬性、事件的介紹。不過是英文版本的，暫時還沒有找到比較好的中文的版本。ps:如果英文比較差的園友，那就只能用web工具強硬翻譯了。具體web工具翻譯頁面的方法可以看我之前的一篇博客： 谷歌/微軟/必應web頁面免費翻譯插件
5.引入主要JS：
這個文件是我們需要引入的js文件。
v簡單demo
1.html代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>First Canvas for CNBlogs</title> <script src="EaselJS-0.8.1/lib/easeljs-0.8.1.min.js"></script> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script src="Scripts/Index.js"></script> </body> </html>
2.js代碼：
var canvas; var stage; var txt; var count = 0; window.onload = function () { canvas = document.getElementById("canvas"); // 創建一個舞台對象 stage = new createjs.Stage(canvas); txt = new createjs.Text("Hello CNBlogs->", "20px Arial", "#ff7700"); stage.addChild(txt); createjs.Ticker.addEventListener("tick", tick); } function tick(e) { count++; txt.text = "Hello CNBlogs->" + count + "☺"; stage.update(); }
3.運行效果：
v鼠標經過特效
1.html代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>First Canvas for CNBlogs</title> <script src="EaselJS-0.8.1/lib/easeljs-0.8.1.min.js"></script> </head> <body> <canvas id="canvas" style="border:1px #000 solid;" width="1000" height="500"></canvas> <script src="Scripts/Flash.js"></script> </body> </html>
2.js代碼：
var canvas; var stage; var img = new Image(); var sprite; window.onload = function () { canvas = document.getElementById("canvas"); // 創建一個舞台對象 stage = new createjs.Stage(canvas); stage.addEventListener("stagemousedown", clickCanvas); stage.addEventListener("stagemousemove", moveCanvas); var data = { images: ["cnblogsLogo.png"], frames: { width: 20, height: 20, regX: 10, regY: 10 } } // 關於EaselJS的一些屬性或者方法大家可以根據對應的api文檔熟悉熟悉。 //例如Sprite可以在這里找到 // file:.../EaselJS-0.8.1/docs/EaselJS_docs-0.8.1/classes/Sprite.html sprite = new createjs.Sprite(new createjs.SpriteSheet(data)); createjs.Ticker.setFPS(20); createjs.Ticker.addEventListener("tick", tick); } function tick(e) { var t = stage.getNumChildren(); for (var i = t-1; i >0; i--) { var st = stage.getChildAt(i); // 設置單位幀的位置 st.vY += 2; st.vX += 1; st.x += st.vX; st.y += st.vY; // 設置大小變形 st.scaleX = st.scaleY = st.scaleX + st.vS; // 設置透明度 st.alpha += st.vA; if (st.alpha <= 0 || st.y > canvas.height) { // 如果超標則移除當前的 stage.removeChildAt(i); } } // 每做一次操作，需要對舞台一次更新 stage.update(e); } function clickCanvas(e) { // 設置鼠標點擊出現的圖案多 addS(Math.random() * 200 + 100, stage.mouseX, stage.mouseY, 2); } function moveCanvas(e) { // 設置鼠標經過出現的圖案少 addS(Math.random() * 2 + 10, stage.mouseX, stage.mouseY, 1); } // addS方法中所有小數或者隨機數都是可以根據具體需求隨意設置的， function addS(count,x,y,speed) { for (var i = 0; i < count; i++) { // 關於sprite.clone方法文檔的介紹是，返回的是序列的實例， // 所以每個實例對象都可以用這個方法控制 var sp = sprite.clone(); // 設置圖標出現位置 sp.x = x; sp.y = y; // 利用隨機數控制圖標隨機亮度 sp.alpha = Math.random() * 0.5 + 0.5; // 設置大小 sp.scaleX = sp.scaleY = Math.random() + 0.3; // 設置曲線 var a = Math.PI * 2 * Math.random(); //設置速度 var v = (Math.random() - 0.5) * 30 * speed; sp.vX = Math.cos(a) * v; sp.vY = Math.sin(a) * v; sp.vS = (Math.random() - 0.5) * 0.2; // scale sp.vA = -Math.random() * 0.05 - 0.01;// alpha stage.addChild(sp); } }
3.運行效果：
4.源碼下載：
v博客總結
對於HTML5優秀的JS類庫或者是引擎框架還有很多，如果你有什么好的可以拿出來分享一下。
作 者：請叫我頭頭哥
出 處：http://www.cnblogs.com/toutou/
關於作者：專注於基礎平台的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角【推薦】一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！