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. Java --HashMap源码解析

    兴趣所致研究一下HashMap的源码,写下自己的理解,基于JDK1.8. 本文大概分析HashMap的put(),get(),resize()三个方法. 首先让我们来看看put()方法. public ...

  2. [转载]OSI七层模型详解

    OSI 七层模型通过七个层次化的结构模型使不同的系统不同的网络之间实现可靠的通讯,因此其最主要的功能就是帮助不同类型的主机实现数据传输 . 完成中继功能的节点通常称为中继系统.在OSI七层模型中,处于 ...

  3. ViewHolder被设计成静态内部类的作用

    当你的内部类不需要依赖于外界的属性或方法等,而又想提供给外界使用,可以采取静态内部类的方式来写 其中static的作用是可以提供给外界调用,比如说类名.内部类这种方式 而ViewHolder的实际是为 ...

  4. Quartz.NET开源作业调度框架系列(三):IJobExecutionContext 参数传递

    前面写了关于Quartz.NET开源作业调度框架的入门和Cron Trigger , 这次继续这个系列, 这次想讨论一下Quartz.NET中的Job如何通过执行上下文(Execution Conte ...

  5. [deviceone开发]-直播APP心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值. 二. ...

  6. XSS攻击的解决方法

    在我上一篇<前端安全之XSS攻击>文中,并没有把XSS攻击的解决办法说完整,而XSS的攻击又那么五花八门,有没有一招“独孤九剑”能够抗衡,毕竟那么多情况场景,开发人员无法一一照顾过来,而今 ...

  7. 轻松玩转jquery。

    一.简介 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery产生的对象时jQuery独 ...

  8. JEPF 3.1.2 发布，我们的软件机床(软件快速开发平台)

    JEPF新一代软件快速开发平台(Java Elephant Platform)是一款优秀的平台产品,它本着灵活.快捷开发.高性能.高协作性.高稳定性.高可用性.人性化的操作体验为设计宗旨历经2年研发成 ...

  9. [Android]ListView的Adapter.getView()方法中延迟加载图片的优化

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4139998.html 举个例子吧,以好友列表为例 ListVi ...

  10. 我的Android第四章：Android的adb命令使用以及SQlite数据库运用

    adb是什么?:adb的全称为Android Debug Bridge,就是起到调试桥的作用.      adb有什么用?:借助adb工具,我们可以管理设备或手机模拟器的状态.还可以进行很多手机操作, ...