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的工具

基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。运行环境请使用Safari, Chrome, Firefox 或者 IE 9+ 。

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/

关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！

HTML5游戏开发引擎,初识CreateJS的更多相关文章

  1. HTML5游戏开发引擎Pixi.js新手入门讲解

    在线演示 本地下载 ​这篇文章中,介绍HTML5游戏引擎pixi.js的基本使用. 相关代码如下: Javascript 导入类库:(使用极客的cdn服务:http://cdn.gbtags.com) ...

  2. HTML5游戏开发引擎Pixi.js完全入门手册（一）框架简介及框架结构分析，作者思路剖析

    前言: 最近无聊在淘宝弄了个小店,打算做一个兼职.遇到一个客户,要我帮忙拷贝一个html5游戏.. 我这人有一个习惯,拿到自己没见过的东西.都会去研究一番.去网上查了下发现,资料都是英文版.感觉极度不 ...

  3. HTML5游戏开发引擎Pixi.js完全入门手册（二）元素对象属性解析

    下面,我们来解释下PIXI里面对象的各个属性.. 首先我们来看看这个各个元素对象里面到底长啥样.. alpha Number 整个舞台对象的透明度. buttonMode Boolean 渲染是否作为 ...

  4. CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎

    CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5  2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...

  5. HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）

    HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...

  6. HTML5游戏开发,剪刀石头布小游戏案例

    剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友. ...

  7. 【转】HTML5游戏开发经典视频教程、电子书汇总

    HTML5游戏开发经典视频教程.电子书汇总 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某 ...

  8. HTML5游戏开发技术基础整理

    随着HTML5标准终于敲定.HTML5将有望成为游戏开发领域的的热门平台. HTML5游戏能够执行于包含iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是眼下跨平台应用开发的最佳实 ...

  9. html5游戏开发--"动静"结合用地图块拼成大地图 & 初探lufyl

    一.前言   本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏.   首先让我们来了解了解如何用html5实现动画 ...

随机推荐

  1. kFreeBSD有活过来的迹象？UbuntuBSD

    那些年追过的FreeBSD分支,有debian系的kFreeBSD,arch系的archBSD现在叫pacBSD,gentoo系的gentooBSD:但基本上在虚拟机环境很难成功安装http://ww ...

  2. 轻量级权限管理系统(renren-security)

    renren-security是一个轻量级权限管理系统,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.使用renren-security搭建项目,只需编写30%左右代码,其余的代码交给系统自动生 ...

  3. Openwrt笔记-IPv6与启动顺序

    之前使用了nat6方案和x3c8021x实现了校园网上网和IPv6连接:但实际使用时经常出现莫名奇妙的问题.IPv6状态要么是无法连接网络,要么是无法连接Internet:经过研究,发现大概是自启动项 ...

  4. Linux命令速查手册，超详细Linux命令教程

    一.常用命令速查 ls cd pwd cat more less tail head cp scp mv mkdir rmdir touch rm ps kill top free clear tre ...

  5. 【JAVA并发编程实战】2、对象的组合

    1. 设计线程安全的类 1.找出构成对象状态的所有变量 2.找出约束状态变量的不变性条件 3.建立对象状态的并发访问管理策略 package cn.xf.cp.ch04; /** * *功能:JAVA ...

  6. FilterDispatcher已被标注为过时解决办法 >>> FilterDispatcher <<< is deprecated!

    一些struts2的教程都是比较早的,当我们基于较新版本的struts2来实现代码的时候,往往会出现一些问题.比如这个警告:FilterDispatcher isdeprecated! 在web.xm ...

  7. C# RSA 分段加解密

    RSA加解密: 1024位的证书,加密时最大支持117个字节,解密时为128:2048位的证书,加密时最大支持245个字节,解密时为256. 加密时支持的最大字节数:证书位数/8 -11(比如:204 ...

  8. Atitit.atiRI  与 远程调用的理论and 设计

    Atitit.atiRI  与 远程调用的理论and 设计 1. 怎么做到透明化远程服务调用?1 2. 2  怎么对消息进行编码和解码1 2.1.  确定消息数据结构dsl1 2.1.1. 消息里为什 ...

  9. 多平台下Modbus通信协议库的设计（一）

    1.背景 1.1.范围 MODBUS 是 OSI 模型第 7 层上的应用层报文传输协议, 它在连接至不同类型总线或网络的设备之间提供客户机/服务器通信. 自从 1979 年出现工业串行链路的事实标准以 ...

  10. 记一次CSR上线及总结

    终于到上线的时候了,可以好好休息了.放松了,但在没有经过用户确认之前,一切皆有可能发生...... 经历: 项目终于完成,上线文档已准备就绪,等待上线时刻. 在上线之前,忘记了解目前环境的部署架构,注 ...