PreloadJS的基础使用PreloadJS是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源，例如图片文件音频数据其他它使用了XHR2来提供实时的加载进度信息，如果不支持则使用标签式的简化进度来实现进度展示。支持多队列，多连接，暂停队列等等功能在PreloadJS中，LoadQueue是主要来API用来预加载内容。LoadQueue是一个加载管理器，可以预先加载一个文件或者一个文件队列。&TweenJS的基础使用TweenJS类库主要用来调整和动画HTML5和Javascript属性。提供了简单并且强大的tweening接口。支持数字对象属性和CSS样式属性，允许你使用链式语法来生成复杂的过程设置一个Tween，你需要调用Tween(target, [props], [pluginData]构建器，参数如下：target - 调整属性的对象props - 相关属性的配置，例如({loop:true, paused:true})， 所有属性缺省为false。支持的属性如下：loop: 设置循环useTicks: 使用ticks来设置持续而不使用毫秒ignoreGlobalPause: 设置忽略全局暂停override: 如果为true，Tween.removeTweens(target) 将会被调用来移除其他同一个对象上的tweenpaused: 设置是否启动暂停的tweenposition: 设置出示的tween位置onChange: specifies a listener for the &change& event.pluginData - 一个包含安装插件数据的对象SoundJS的基础使用SoundJS提供了简单而强大的API来处理音频，大多数情况下这个类库都静态方式使用（无需创建实例）。通过插件来执行实际的音频实现，无需学习平台相关的知识，简单直接的处理声音使用SoundJS，可以使用Sound类的公开API：安装回放插件登记声音创建和播放声音处理音量，静音，控制暂停播放声音创建SoundInstance实例，可以单独控制，例如：暂停，继续，查找和停止控制音量，静音等监听声音实例的相关事件并且当播放完毕，循环或者失败时得到提示课程库地址：&
所有评价（0条）
登录后才能评价哦……
在职课程：简老师
就业课程：魏老师
周一至周日 9:00-21:00
400-058-0010Html5游戏框架createJS组件--EaselJS
来源：it-home
CreateJS库是一款HTML5游戏开发的引擎，是一套可以构建丰富交互体验的HTML5游戏的开源工具包，旨在降低HTML5项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。
掌握了CreateJS可以更方便的完成HTML5的游戏开发。
CreateJS提供了EaselJS、TweenJS、SoundJS和PreLoadJS四款工具：
EaselJS:简化处理HTML5画布TweenJS:用来帮助调整HTML5和Javascript属性SoundJS:用来简化处理HTML5 audioPreLoadJS:帮助管理和协调加载中的一些资源复制代码
可以在官网的下载页面进行下载JS文件，或者使用直接官方的CDN 链接
EaselJS 库给画布提供了保留图形模式，其中包括一个完整的分层显示列表、一个核心的交互模型以及一个让2D图形在画布上更容易实现的助手类。
最开始我们需要创建一个Stage对象来包装一个画布（Canvas）元素，并且添加一个DisplayObject对象实例作为子类。EaselJS支持：
* 使用 Bitmap 创建图像
* 使用 Shape 和
Graphics 创建矢量图形
* 使用 SpriteSheet 和 Sprite 创建动态的位图
* 使用 Text 创建简单的文本
* 使用 Container 创建保存其他显示对象的容器
所有的显示对象都可以作为子类被添加到舞台（stage）上，或者直接在画布（canvas）上绘制出来。
当使用鼠标或者触摸交互时，除了DOM 元素，所有的显示对象都可以调度事件。EaselJS 支持悬停、按压、释放事件，以及一个容易使用的拖放模块。点击 MouseEvent 可以获得更多信息。
1. 使用 Bitmap 创建图像
首先，我们需要引用 EaselJS 文件：
&script src="js/easeljs-0.8.2.min.js"&&/script&复制代码
接着，我们需要在HTML文档中创建一个 canvas 元素：
&canvas id="imageView" width="560" height="410"&您的浏览器版本过低，请更换更高版本的浏览器&/canvas&复制代码
然后，我就可以在 Javascript 代码中创建图像：
// 通过画布ID 创建一个 Stage 实例var stage = new createjs.Stage("imageView");// 创建一个 Bitmap 实例var theBitmap = new createjs.Bitmap("imgs/testImg.jpg");// 设置画布大小等于图片实际大小stage.canvas.width = theBitmap.image.naturalWstage.canvas.height = theBitmap.image.naturalH// 把Bitmap 实例添加到 stage 的显示列表中stage.addChild(theBitmap);// 更新 stage 渲染画面stage.update();复制代码
这样，图像就创建成功了，源码见 easeljs-image.html 。
2.使用 Shape 和
Graphics 创建矢量图形
和上面一样，我们需要添加对 EaselJS的引用以及在HTML文档中，创建canvas元素。然后就是我们自定义的js文件代码:
//Create a stage by getting a reference to the canvasvar stage = new createjs.Stage("circleView");//Create a Shape DisplayObject.var circle = new createjs.Shape();circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,40);//Set position of Shape instance.circle.x = circle.y = 50;//Add Shape instance to stage display list.stage.addChild(circle);//Update stage will render next framestage.update();复制代码
这样我们就创建了一个深天蓝色，圆心为（50.50），半径为40像素的圆形（源码见 easeljs-shape-circle.html）：
渲染前的画布如下（宽高为100像素）：
我们还可以添加简单的交互事件：
stage.addEventListener("click",handleClick);function handleClick() {
console.log("The mouse is clicked.");}stage.addEventListener("mousedown",handlePress);function handlePress() {
// A mouse press happened.
// Listen for mouse move while the mouse is down:
console.log("The mouse is pressed.");
stage.addEventListener("mousemove",handleMove);}function handleMove() {
// Check out the DragAndDrop example in GitHub for more
console.log("The mouse is moved.");}复制代码
当我们点击圆的事件，控制台会显示：
The mouse is pressed.The mouse is clicked.复制代码
我们还可以通过 tick 事件进行图形的移动等动画效果（源码见 easeljs-shape-circle-move.js）：
// Update stage will render next framecreatejs.Ticker.addEventListener("tick",handleTick);//添加一个Ticker类帮助避免多次调用update方法function handleTick() {
var maxX =
stage.canvas.width - 50;
var maxY =
stage.canvas.height - 50;
//Will cause the circle to wrap back
if(circle.x & maxX && circle.y == 50){
// Circle will move 10 units to the right.
circle.x +=10;
}else if(circle.x == maxX && circle.y &maxY){
circle.y +=10;
}else if(circle.x & 50 && circle.y == maxY){
circle.x -=10;
}else if(circle.x&= 50){
circle.y -=10;
stage.update();}复制代码
3.使用 SpriteSheet 和 Sprite 创建动态的位图
同样，先对 EaselJS 进行引用，然后创建 canvas HTML元素：
&canvas id="view" width="80" height="80"&&/canvas&复制代码
需要使用到的图片：
接下来在 JS 文件中对资源进行引用加载：
var stage = new createjs.Stage("view");container = new createjs.Container();var data = {
// 源图像的数组。图像可以是一个html image实例，或URI图片。前者是建议控制堆载预压
images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],
// 定义单个帧。有两个支持格式的帧数据：当所有的帧大小是一样的（在一个网格）， 使用对象的width, height, regX, regY 统计特性。
// width & height 所需和指定的帧的尺寸
// regX & regY 指示帧的注册点或“原点”
// spacing 表示帧之间的间隔
// margin 指定图像边缘的边缘
// count 允许您指定在spritesheet帧的总数；如果省略，这将根据源图像的尺寸和结构计算。帧将被分配的指标，根据他们的位置在源图像（左至右，顶部至底部）。
frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},
// 一个定义序列的帧的对象，以发挥命名动画。每个属性对应一个同名动画。
// 每个动画必须指定播放的帧，还可以包括相关的播放速度（如2 将播放速度的两倍，0.5半）和下一个动画序列的名称。
animations:{
}}var spriteSheet = new createjs.SpriteSheet(data)var instance = new createjs.Sprite(spriteSheet,"run")container.addChild(instance);stage.addChild(container);createjs.Ticker.setFPS(5); //设置帧createjs.Ticker.addEventListener("tick",stage);stage.update();复制代码
这样，简单走路的效果就出来了（源码见 easeljs-sprite-01.html）：
如果想通过按钮控制动画的变换的话使用 gotoAndPlay(action) 方法调用对应的动画效果就行了。
我们修改HTML文档代码如下：
&canvas id="view" width="80" height="80"&&/canvas&&div class="buttons"&
&input id="goStraight" value="Go Straight" type="button" /&
&input id="goLeft" value="Go Left"
type="button"/&
&input id="goRight" value="Go Right"
type="button"/&
&input id="goBack" value="Go Back"
type="button"/&&/div&复制代码
然后修改JS代码如下：
var stage = new createjs.Stage("view");container = new createjs.Container();var data = {
images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],
frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},
animations:{
run1:[0,3],
run2:[4,7],
run3:[8,11],
run4:[12,15]
}}var spriteSheet = new createjs.SpriteSheet(data)var instance = new createjs.Sprite(spriteSheet,"run1")container.addChild(instance);stage.addChild(container);createjs.Ticker.setFPS(5);createjs.Ticker.addEventListener("tick",stage);stage.update();document.getElementById('goStraight').onclick =
function goStraight() {
instance.gotoAndPlay("run1");}document.getElementById('goLeft').onclick =
function goLeft() {
instance.gotoAndPlay("run2");}document.getElementById('goRight').onclick =
function goRight() {
instance.gotoAndPlay("run3");}document.getElementById('goBack').onclick =
function goBack() {
instance.gotoAndPlay("run4");}复制代码
效果就出来了（源码见 easeljs-sprite-02.html）：
4.使用 Text 创建简单的文本
这个就比较简单了，直接看代码：
&canvas id="View" width="300" height="80"&&/canvas&&script&
var stage = new createjs.Stage("View");
var theText = new createjs.Text("Hello,EaselJS!","normal 32px microsoft yahei","#222222");
stage.addChild(theText);
stage.update();&/script&复制代码
这里有设置背景色为粉红：
#View { background-color: #}复制代码
显示效果为：
5.使用 Container 创建保存其他显示对象的容器
其实这个在前面已经用过了。不过还是单独写个例子，这个比较简单：
&!DOCTYPE html&&html lang="en"&&head&
&meta charset="UTF-8"&
&title&使用 Container 创建保存其他显示对象的容器&/title&
&script src="js/base/easeljs-0.8.2.min.js"&&/script&&/head&&body&&canvas id="view" width="300" height="300"&&/canvas&&script&
var stage = new createjs.Stage("view");
container = new createjs.Container();
//先来绘制个正方形
var square = new createjs.Shape();
square.graphics.beginFill("#ff0000").drawRect(0,0,300,300);
container.addChild(square);
//先来绘制个正方形
var square2 = new createjs.Shape();
square2.graphics.beginFill("orange").drawRect(50,50,200,200);
container.addChild(square2);
//然后我们来绘制个圆形
var circle = new createjs.Shape();
circle.graphics.beginFill("blue").drawCircle(150,150,100);
container.addChild(circle);
//最后我们再绘制个圆形
var circle2 = new createjs.Shape();
circle2.graphics.beginFill("white").drawCircle(150,150,50);
container.addChild(circle2);
stage.addChild(container);
stage.update();&/script&&/body&&/html&复制代码
效果如下：
相关源码地址：Demo4CreateJS
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动原文链接：
本译文地址：
转载请保留。。
《》译文（以下的“我”是指原作者）：
我一直在找一个Html5 canvas库，可以让我创建可交互的、带动画的UI界面。我的要求是：
良好的文档，支持与维护，因为我想在以后的项目里还能重用它
可以轻松的创造复杂的图形对象（我的工程比较复杂，可不是一个简单的按钮那样的活儿），最好能支持分组和多层
能帮我处理用户交互
支持触摸设备
提供用于作动态图形的工具
我搜了一些适合的库，想和你分享我的搜索成果。在可用的库的名单后面，我调查了这些库：EaselJS,fabric.js,Paper.js,processing.js和Kinetic.js，希望能帮你做出你自己的选择。
我找到的库
这儿是一些迄今为止看起来还有人维护的Canvas库：
这儿还有一些我没有研究过的库，因为他们没有架在Github上，或者看起来没人更新了：
在Github上的对比
jCanvaScript
Kinetic.js
processing.js
最小体积对比
代码量 (kb)
Kinetic.js
不过jCanvaScript,Paper.js和processing.js在Github是没有压缩版
在Stackoverflow的比较
# 被标记的问题
# 搜索到的问题
jCanvaScript
Kinetic.js
processing.js
processing.js
gury库在stackoverflow上没找到，我用N/A标识了没找到的。
对文档，教程和其他资源的研究
在选择框架时，我更看重Github的比较。他能提供库的开发状态概览以及正在用这个库的社区。在我并不想变成某领域的专家时，我希望能依靠社区（解决问题）。
但是，StackOverflow(SO)太有用了，尤其在已经有人问了比较问题的时候，比如：
于是，我打算就文档，教程和其他资源，给出一个深入的评论。对比：EaselJS, fabric.js, Paper.js, processing.js 以及这个外来者：Kinetic.js,来做个选择。
EaselJS, fabric.js, Paper.js, processing.js可以看作是4个领头者，他们有很明确的庞大用户社区，也架设在Github上，文档完善，大量的引用（就是在SO上的问题，以及论坛），更好的是，根据SO上他们之前的问题，他们是有单元测试的。
Kinetic.js是个后来者，最近才上线Github，还有很多变数，但受到了的（Fabric.js的作者）热烈欢迎。
这4个库都有Github地址，都基于MIT许可发布。
这个库是CreateJS 套件的一部分，是一个全功能的用来创建先进html5交互与动画图形库。
特别的是，结合动画库（TweenJS），可以创建很复杂的动画！如果你打算开发游戏，你还可以用SoundJS库和资源预载入库（PreloadJS）搞定。
这个网站提供了一些漂亮的示例，源码可以和Github宝库上找到。
这个库看起来也能和其他库协同工作，比如Box2d和TexturePacker.
内置对触摸设备的支持
查看发现，此库貌似偏向建立“矢量图形编辑工具”。主要特色有：
创建和操作（移动，缩放，旋转…）矢量图形和文本对象
导入/导出成SVG或反过来
总结起来就是“一个在canvas上的可交互对象模型”。
如果你的目的是建立复杂场景，动态对象，在我看来他不是正确选择。
这个库是Scriptographer库的一部分。他有个特长是其Paperscript语言，基于一个提供了对点和图形精妙进行精妙数学操作的Javascript扩展——但是，他仍然没有文档。
这个库的强大在于，他在建立复杂矢量对象和管理鼠标交互上出类拔萃。然而，他没有实现对移动设备的支持，而且其动画能力貌似被 onFrame() 这个方法限制了——每秒被调用60次，也允许你改变canvas的内容。
processing.js
这个库的核心目标是建立可视化交互
这个库有个独特的历史——他是著名的Processing库的一个接口。我说著名，不是因为我自己知道，而是因为他在多媒体艺术社区非常知名，用来进行交互式艺术创造。
请看这,看起来此库打算降低在canvas上创建交互式图形动画的学习曲线。他提供了易用的循环，和一个 draw() 方法，你可以简单的建立你的可视化交互。
我认为，因为其学习曲线低，对没有开发能力的艺术家们是完美的，但并不是建立面向对象组件的最佳工具。
Kinetic.js
Kinetic.js本是这次比较的门外汉，因为在他的Github上看起来，他离最多人使用的那个还很远。然而，如果搜索”canvas library”的话，他的html5教程是排在第一位的，而且，他在SO上也有很多不错的提问。
这个名字是个很好的线索，但这个库在处理大量对象的时候蛮快的，因为使用了多canvas技术。
他提供了很好的文档讲解和教程，包括系统的html5 canvas应用，详细的Kinetic.js和Three.js文档。他也提供了些好用的小提示——不是针对这个库的，有的是对于canvas。
基于本篇评论，我认为我应该用EaselJS或Kinetic.js。Paper.js也不错但是不支持触摸设备，我敢肯定要集成这个功能并不复杂，但我更喜欢库中本来就有的。
最后，我决定用Kinetic.js，因为：
我觉得示例代码不错
作者本身写了一个优秀的
文档和例子都很清晰易懂
我要的库里都有了（我并不觉得在我做到20%的时候却需要引进另一个大库比如TweenJS来解决个小问题会让我高兴）
请不吝分享你的评论，或者我没提到的库，谢谢。
—————————————————-
译者的总结：
翻译完了觉得这文章有点像Kinetic.js的软广告。不过，上面的所有库功能都是非常强大的，日常应用毫无问题。Kinetic.js是综合来讲比较合理的一个——功能中等，体积中等。
个人觉得fabric.js最强大，体积也最大；Paper.js其次。
另外，在对比了国外的教程和我写的教程后，不知道我写的教程还有人看吗？——虽然，我也是完全原创的，但我的技术可比不上外国作者，唉
关于十年灯
Javascript工程师。好想转Nodejs，好想用es6　　声明：本文为原创文章，如需转载，请注明来源，谢谢！
　　楼主记忆力不好，最近刚好用了一下createJs框架，怕以后一段时间没用后会忘记，所以在此做个记录，或许以后用得着。
　　createJs网上的中文教程挺少的，以前UC有个Xcanvas的论坛有createJs的详细教程，但是随着XCanvas团队的解散，那个网站也关闭了。。网上的大部分都是非常基础的教程，有点千遍一律的感觉。所以楼主就去把createJs下载下来，硬着头皮看英文文档了。凭着楼主这英语六级只考了三百多分的渣渣来说，看起来很费力啊，不过还是勉强摸索出了大概的用法。所以现在就是学了多少就记录多少，之后或许也会不定期更新一下该框架的新的学习心得。毕竟对自己以后还是有帮助的。
　　希望本文能帮到那些想学createJs的新手。因为楼主也是刚学的，所以本文或许有不正确之处，因此本文仅当参考，若有不正之处欢迎斧正。
　　闲话说到这，直接进入主题。
　　楼主用createJs写了个简单的跑酷游戏DEMO，就拿它做例子吧。&。
　&createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。
　　首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs，所以暂时就只说这两个，其实就这两个已经非常够用了。
　　接下来开始分析代码：
　　首先引入js文件
&script src="easeljs-0.7.1.min.js"&&/script&
&script src="preloadjs-0.4.1.min.js"&&/script&
　　然后进行舞台初始化操作：
function init(){
stage = new createjs.Stage("cas");
C_W = stage.canvas.
C_H = stage.canvas.
var manifest = [
{src:"image/man.png" , id:"man"},
{src:"image/ground.png" , id:"ground"},
{src:"image/bg.png" , id:"bg"},
{src:"image/high.jpg" , id:"high"},
{src:"image/coins.png" , id:"coin"}
loader = new createjs.LoadQueue(false);
loader.addEventListener("complete" , handleComplete);
loader.loadManifest(manifest);
drawLoading();
上面就用到了preloadJs中的方法，实例化一个loader，把需要加载的图片文件放在manifest里面，进行加载，加载完成后调用回调handleCompelete函数：
function handleComplete(){
//当图片素材load完后执行该方法
var manImage = loader.getResult("man"),
lowground = loader.getResult("ground"),
highground = loader.getResult("high"),
bgImage = loader.getResult("bg"),
coins = loader.getResult("coin");
sky = new createjs.Shape();
sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);
sky.setTransform(0, 0, 1 , C_H/bgImage.height);
stage.addChild(sky);
man = createMan(200,326,manImage);
//该框为判定角色的判定区域
kuang = new createjs.Shape();
kuang.graphics.beginStroke("rgba(255,0,0,0.5)").drawRect(0 , 0 , man.size().w , man.picsize().h*1.5);
// stage.addChild(kuang);
mapHandle(lowground , highground , coins);
createjs.Ticker.timingMode = createjs.Ticker.RAF;//设置循环方法，可以是requestAnimationFrame或者是setTimeout
createjs.Ticker.setFPS(30);//舞台帧率控制
createjs.Ticker.addEventListener("tick", tick);//绑定舞台每一帧的逻辑发生函数
window.addEventListener("keydown" , function(event){
event = event||window.
if(event.keyCode===32&&man.jumpNum&man.jumpMax){
man.jump();
获得加载完成后端的图片数据就直接用loader.getResult就可以获取了，跑酷游戏需要一个背景，所以，我们实例化一个sky，然后进行位图绘制，bf方法是beginBitmapFill的缩写，该方法就是开始绘制位图，后面的drawRect是位图的绘制区域，区域当然是整个画布啦，所以就是drawRect(0,0,C_W,C_H)。实例化出来sky后就直接添加到舞台stage里面就行了。接下来是实例化一个角色，createMan方法后面有说，是自己封装的。
　　然后进行舞台循环设置，上面有注释了，就不说了。
　　舞台设置中，mapHandle是地图数据的初始化：
var mapIndex = 0,
//地图序列
//地图数组的索引
allStones = [],
//存放所有的石头
allCoins = [],
//所有金币
showSt = [];
//存放显示出来的石头
function mapHandle(lowground , highground , coins){
//初始化地图
allStones.length = 0;
var stoneImage = {"A":lowground , "B":highground},kind = null;
for(var i=0;i&30;i++){
//把需要用到的石头预先放入容器中准备好
switch(i){
case 0:kind="A";break;
case 10:kind="B";break;
case 20:kind="C";break;
var st = createStone(C_W , kind , stoneImage);
allStones.push(st)
for(var i=0;i&10;i++){
//把需要用到的金币预先放入容器中
var coin = createCoin(coins);
allCoins.push(coin);
Mix = Math.floor(Math.random()*mapData.length);
//随机地图序列
for(var i=0;i&8;i++){
setStone(false)
function setStone(remove){
//添加陆地的石头
var arg = mapData[Mix].charAt(mapIndex),
coarg = coinCode[Mix].charAt(mapIndex),
cc = null;
if(coarg==="#"){
for(var i=0;i&allCoins.i++){
if(!allCoins[i].shape.visible){
cc = allCoins[i];
cc.shape.visible = true;
for(var z=0;z&allStones.z++){
if(!allStones[z].shape.visible&&allStones[z].kind===arg){
var st = allStones[z];
st.shape.visible = true;
st.shape.x = showSt.length===0?0:showSt[showSt.length-1].shape.x+showSt[showSt.length-1].w;
cc.shape.x = showSt.length===0?allStones[z].w/2-cc.size().w/2:showSt[showSt.length-1].shape.x+showSt[showSt.length-1].w+allStones[z].w/2-cc.size().w/2;
cc.shape.y = arg==="C"? C_H-loader.getResult("high").height-50 : allStones[z].shape.y-cc.size().h/2-50;
if(remove) showSt.shift();
showSt.push(st);
mapIndex++;
if(mapIndex&=mapData[Mix].length){
Mix = Math.floor(Math.random()*mapData.length)
mapIndex=0;
　　下面是人物模块的封装
(function(w){
var FRAME_RATE = 13,
//精灵表播放速度
SCALE_X = 1.5,
SCALE_Y = 1.5,
GRAVITY = 3,
//重力加速度
JUMP_SPEED = 2.6,
//垂直速度
WIDTH = 40,
HEIGHT = 96,
PICWIDTH = 64,
PICHEIGHT = 64,
PROPORTION = 150/1;
//游戏与实际的距离比例
var Man = function(x , y , img){
this.endy =
this.vx = 0.5;
this.vy = 0;
this.ground = [];
this.state = "run";
this.jumpNum = 0;
this.jumpMax = 1;
this.init(img);
Man.prototype = {
constructors:Man,
init:function(img){
var manSpriteSheet = new createjs.SpriteSheet({　　//实例化精灵表绘制器
"images":[img],
"frames":{"regX":0,"height":PICWIDTH,"count":45,"regY":1,"width":PICHEIGHT},
"animations":{
frames:[21,20,19,18,17,16,15,14,13,12],　　　　//精灵表每一帧的位置
next:"run",　　　　　　　　　　　　　　　　　　　　//当精灵表循环完后的下一步动作
speed:1,　　　　　　　　　　　　　　　　　　　　　　//精灵表播放速度
frames:[34,35,36,37,38,39,40,41,42,43],
next:"run",
frames:[8,7,6,5,4,3,2,1,0],
next:"die",
this.sprite = new createjs.Sprite(manSpriteSheet , this.state);　　//实例化精灵
this.sprite.framerate = FRAME_RATE;　　　　　　//精灵表绘制速率
this.sprite.setTransform(this.x, this.y, SCALE_X, SCALE_Y);　　//设置精灵的位置
stage.addChild(this.sprite);　　　　//添加到舞台
update:function(){
var sprite = this.
var time = createjs.Ticker.getInterval()/1000;　　　　//获取当前帧与上一帧的时间间隔
if(this.state==="run"){　　　　　　　　　　
if(sprite.x&this.x){
sprite.x +=this.
sprite.x = this.x
if(this.endy&sprite.y||this.state==="jump"){　　//角色的动作处理
var nexty = sprite.y+time*this.vy*PROPORTION;
this.vy += time*GRAVITY;
sprite.y += time*this.vy*PROPORTION;
if(Math.abs(sprite.y-this.endy)&10&&this.vy&0){
this.state = "run";
sprite.y=this.
this.vy = 0;
if(sprite.x+(PICWIDTH*SCALE_X-WIDTH)/2&0||sprite.y&C_H+200){
this.die();
createjs.Ticker.reset();
alert("you are Die!");
switch(this.state){
case "run":
this.jumpNum = 0;
case "die":
if(sprite.currentFrame===0){
sprite.paused = true;
run:function(){
this.sprite.gotoAndPlay("run")
jump:function(){
this.vy = -JUMP_SPEED;
this.state = "jump";
this.sprite.gotoAndPlay("jump");　　//让精灵表播放特定的动画
this.jumpNum++;
die:function(){
this.state = "die";
this.sprite.gotoAndPlay("die")
size:function(){
picsize:function(){
w:PICWIDTH,
h:PICHEIGHT
w.createMan = function(x , y , img){
return new Man(x , y , img)
})(window)
人物模块封装就是简单的在createJs的封装之上进行进一步的封装，封装很简单，就是用createJs实例化一个精灵类，再绑定精灵表，上面的代码中也有注释，基本上都说的很明白了。
下面贴出封装的石头以及金币模块，简单说下背景的循环，预先实例化一堆石头和金币，然后移动响应的石头，当石头移动到超出舞台区域时，把他的visible属性置为false，再重新添加一个石头在最后的位置进行新的一次移动。金币也一样。地图数据则是通过预先定义好的字符串来实现。
(function(w){
var SPEED = 4,
COIN_STAY_X = 20,
COIN_STAY_Y = 20,
COIN_STAY_WIDTH = 30,
COIN_STAY_HEIGHT = 30,
COIN_SCALE_X = 0.08,
COIN_SCALE_Y = 0.08;
//地上的石头类
var Stone = function(x,kind,allImage){
this.kind =
this.allImage = allI
this.init();
var sp = Stone.
sp.init=function(){
this.shape = new createjs.Shape();
if(this.kind!=="C"){
this.h = this.allImage[this.kind].
this.w = this.allImage[this.kind].width*2;
this.y = C_H - this.h;
this.shape.graphics.beginBitmapFill(this.allImage[this.kind]).drawRect(0, 0, this.w, this.h);
this.shape.setTransform(this.x, this.y, 1, 1);
this.h = -1000;
this.w = 170;
this.y = C_H - this.h;
this.shape.graphics.beginFill("#000").drawRect(0, 0, this.w, this.h);
this.shape.setTransform(this.x, this.y, 1, 1);
this.shape.visible = false;
this.shape.cache(0 , 0 , this.w , this.h);
stage.addChild(this.shape);
sp.update=function(){
this.shape.x -= SPEED;
var Coin = function(image){
this.sizeX = COIN_SCALE_X;
this.sizeY = COIN_SCALE_Y;
this.isget = false;
this.init = function(){
this.shape = new createjs.Shape();
this.shape.graphics.beginBitmapFill(image).drawRect(0, 0, image.width, image.height);
this.shape.setTransform(0, 0, COIN_SCALE_X, COIN_SCALE_Y);
this.shape.visible = false;
stage.addChild(this.shape);
this.init();
this.update = function(){
if(this.isget){
this.sizeX = this.sizeX + ((COIN_STAY_WIDTH/image.width) - this.sizeX)*0.1;
this.sizeY = this.sizeY + ((COIN_STAY_HEIGHT/image.height) - this.sizeY)*0.1;
this.shape.setTransform(
this.shape.x + (COIN_STAY_X - this.shape.x)*0.1,
this.shape.y + (COIN_STAY_Y - this.shape.y)*0.1,
this.sizeX,
this.sizeY
if(Math.abs(this.shape.x-COIN_STAY_X)&0.5&&Math.abs(this.shape.y-COIN_STAY_Y)&0.5){
this.shape.visible = false;
this.isget = false;
this.sizeX = COIN_SCALE_X;
this.sizeY = COIN_SCALE_Y;
this.shape.setTransform(0,0,this.sizeX,this.sizeY);
this.shape.x -= SPEED;
if(this.shape.x&-image.width*COIN_SCALE_X){
this.shape.visible = false;
this.size = function(){
w:image.width*COIN_SCALE_X,
h:image.height*COIN_SCALE_Y
w.createCoin = function(image){
return new Coin(image)
w.createStone = function(x,kind,allImage){
return new Stone(x,kind,allImage);
})(window)
封装方法跟上面的人物模块封装差不多，不过人物是用精灵类，石头金币则是用形状类了。就是通过位图的绘制，来绘制位图的图片，原理都一样。
最后是舞台逐帧处理的tick方法：
function tick(event){
//舞台逐帧逻辑处理函数
man.update();
kuang.x = man.sprite.x+(man.picsize().w*1.5-man.size().w)/2;
kuang.y = man.sprite.y;
man.ground.length=0;
var cg = stoneHandle();
if(man.ground[0]&&!cg) {
man.ground.sort(function(a,b){return b.h-a.h});
man.endy = man.ground[0].y-man.picsize().h*1.5;
allCoins.forEach(function(cc , index){
if(cc.shape.visible){
Math.abs((kuang.x+man.size().w/2) - (cc.shape.x+cc.size().w/2)) &= (man.size().w+cc.size().w)/2&&
Math.abs((kuang.y+man.size().h/2) - (cc.shape.y+cc.size().h/2)) &= (man.size().h+cc.size().h)/2&&
cc.isget = true;
countCoin.innerHTML = parseInt(countCoin.innerHTML)+1
cc.update();
document.getElementById("showFPS").innerHTML = man.endy
stage.update(event)
在每一帧的处理，就像自己写游戏一样啦，就是把舞台里的所有对象逐个进行逻辑运算，进行相应处理。&
基本上createJs的用法还是相对比较简单并且强大的。比自己去造轮子能省很多功夫。
源码地址：
阅读(...) 评论()}