HTML5遊戲開發引擎-初識CreateJS的詳解（圖文）-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5遊戲開發引擎-初識CreateJS的詳解（圖文）

黄舟

Mar 21, 2017 pm 02:57 PM

CreateJS為CreateJS函式庫，可以說是為HTML5遊戲開發的引擎。打造 HTML5 遊戲，建立新遊戲，提供建立最新 HTML5 的技術、你可以透過這個網站學習如何建立跨平台和跨終端遊戲。這個資源庫還會告訴你如何建立多人線上遊戲。 CreateJS 是一套可以建立豐富互動體驗的 HTML5 遊戲的開源工具包，旨在降低 HTML5 專案的開發難度和成本，讓開發者以熟悉的方式打造更具現代感的網路互動體驗。

1.進入createjs首頁：

首頁有幾個tab頁，有EASEJS、TweenJS 、SoundJS、PrloadJS、ZOE五種.(最新的官網好像沒有ZOE的tab頁了）

EASEJS：用來處理HTML5的canvas
#TWEENJS：用來處理HTML5的動畫調整和javascript屬性
#SOUNDJS：用來幫助簡化處理音訊相關的API
# PRELOADJS：管理和協調程式加載項的類別庫
ZOE：將SWF動畫匯出為EaseIJS的sprite的工具

基於這些函式庫，可以非常快速地開發出基於HTML5的遊戲、動畫和互動應用程式。運行環境請使用Safari, Chrome, Firefox 或 IE 9+ 。 HTML5遊戲開發引擎-初識CreateJS的詳解（圖文）

2.首頁解析：

3.進入下載頁

HTML5遊戲開發引擎-初識CreateJS的詳解（圖文）
因為這篇部落格主要介紹HTML5遊戲開發的引擎canvas,所以我們下載EASEJS就可以了。

4.幫助文件：

HTML5遊戲開發引擎-初識CreateJS的詳解（圖文） #
幫助文件裡有很多類別的介紹，還有對應類別的方法、屬性、事件的介紹。不過是英文版的，暫時還沒有找到比較好的中文的版本。 ps:如果英文比較差的園友，那就只能用web工具強硬翻譯了。具體web工具翻譯頁面的方法可以看我之前的一篇部落格：Google/微軟/必應web頁面免費翻譯外掛程式

#5.引入主要JS：

HTML5遊戲開發引擎-初識CreateJS的詳解（圖文）
這個檔案是我們需要引進的js檔案。

v簡單demo

1.html程式碼：

<!DOCTYPE html>
<html xmlns=" 
<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.運作效果：

HTML5遊戲開發引擎-初識CreateJS的詳解（圖文）

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.運作效果：

HTML5遊戲開發引擎-初識CreateJS的詳解（圖文）

以上是HTML5遊戲開發引擎-初識CreateJS的詳解（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼：可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構，提高SEO。 2.ARIA屬性如aria-label增強可訪問性，輔助技術用戶可順利使用網頁。

H5與HTML5相同嗎？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的，但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準，包含新標籤和API。 2."h5"通常是HTML5的簡稱，但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5的功能是什麼？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五個版本，它為開發者提供了更強大的工具集，使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括：1）元素允許在網頁上繪製圖形和動畫；2）語義化標籤如、等，使網頁結構清晰，利於SEO優化；3）新API如GeolocationAPI，支持基於位置的服務；4）跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。

h5鏈接怎麼做Apr 06, 2025 pm 12:39 PM

如何創建 H5 鏈接？確定鏈接目標：獲取 H5 頁面或應用程序的 URL。創建 HTML 錨點：使用 <a> 標記創建錨點並指定鏈接目標URL。設置鏈接屬性（可選）：根據需要設置 target、title 和 onclick 屬性。添加到網頁：將 HTML 錨點代碼添加到希望鏈接出現的網頁中。

h5兼容問題怎麼解決Apr 06, 2025 pm 12:36 PM

解決 H5 兼容問題的方法包括：使用響應式設計，允許網頁根據屏幕尺寸調整佈局。採用跨瀏覽器測試工具，在發布前測試兼容性。使用 Polyfill，為舊瀏覽器提供對新 API 的支持。遵循 Web 標準，使用有效的代碼和最佳實踐。使用 CSS 預處理器，簡化 CSS 代碼並提高可讀性。優化圖像，減小網頁大小並加快加載速度。啟用 HTTPS，確保網站的安全性。

See all articles