CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。
一个简单的tick动画看起来是这样的：
var stage, circlefunction init(){
stage = new createjs.Stage(document.getElementById('game'))
createjs.Ticker.addEventListener("tick", handleTick)
createjs.Ticker.setFPS(60)
circle = new createjs.Shape()
circle.graphics.f("red").dc(0,0,50)
circle.x = 0
circle.y = 100
stage.addChild(circle)
circle.addEventListener("click", function(event){
createjs.Ticker.setPaused(!createjs.Ticker.getPaused())
})
}
function handleTick(event){
if(!event.paused){
circle.x +=5
if(circle.x > 1000){
circle.x = 0
}
}
stage.update()
}
CreateJSCreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。
CreateJS 中包含：
EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控），同时提供 Flash 中的“显示列表”功能。
TweenJS：一个简单的用于制作类似 Flash 中“补间动画”的引擎，可生成数字或非数字的连续变化效果。
SoundJS：一个音频播放引擎，能够根据浏览器性能选择音频播放方式。将音频文件作为模块，可随时加载和卸载。
PrloadJS：帮助你简化网站资源预加载工作，无论加载内容是图形、视频、声音、JS、数据……
以上的Createjs介绍来自百度，不过通过介绍可以知道，虽然CreateJS看起来复杂，不过四个部分各有作用，其中最主要的就是EaselJS，其余三项不过是为他服务。
一.如何使用EaselJS
首先到http://createjs.com/ 下载最新版的EaselJS，下载解压后可以在lib文件夹中找到easeljs-0.8.1.min.js,同时在压缩包中可以找到一个examples和tutorials目录，这两个目录中包含一些入门介绍和例子，有英语基础可以看看，DOC文件夹中包含easeljs所有的api。（同理，可以得到createjs包含的其他三项，其目录结构都与EaselJS相似）。
1.得到easeljs-0.8.1.min.js后，新建一个HTML5文件并导入之：
[html] view plain copy
<script src="easeljs-0.8.1.min.js"></script>
2.入口函数和创建canvas标签
[html] view plain copy
<body onload="init()">
<canvas id="game" width="1000" height="700" style="background-color: white"></canvas>
</body>
3.编写自己的javascript代码，在函数init()中首先应该使用HTML中的canvas标签来创建一个Stage，createjs中用到的所有元素，都是添加在这个stage当中的，添加后调用stage.update()方法即可使得添加的元素显示在页面上。在创建Stage时，可以直接使用Canvas的id来创建，也可以调用document.getElementById("game")，选取canvas来创建，没有区别。
[javascript] view plain copy
<script>
function init(){
var stage = new createjs.Stage("game")
.......
stage.update()
}
</script>
二.使用EaselJS创建图形和文字
最简单的游戏都是由文字和图形组成，使用EaselJS添加文字和图形非常的简单。
1.添加文字
[html] view plain copy
var txt = new createjs.Text("HELLO","20px Times","#000")
Createjs中所有的元素都通过调用new createjs.XXXXX来创建，Text包含三个参数分别是显示的字符，字体及大小，最后是颜色。当然在创建完成后可以随意改变txt的x,y坐标和对其，居中以及内容等等的属性。例如：
[html] view plain copy
txt.x = 100
txt.y = 100
txt.text = "hello, world!"
完成后记得一定要把新创建的txt添加到stage中才能正常显示
reatejs，看看你应该能懂1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//敌机与子弹的碰撞检测
function updateEnemy(){
var i, j,fire,enemy1
for(i=0i<fires.lengthi++){
for(j=0j<enemy.lengthj++){
fire = fires[i]
enemy1 = enemy[j]
var fx = fire.x
var fy = fire.y
var ex = enemy1.x
var ey = enemy1.y
var ew = enemy1.getBounds().width
var eh = enemy1.getBounds().height
if(ey>=800 || ex>=600){
enemy.splice(j,1)
stage.removeChild(enemy1)
}
if(fy <ey+eh &&fy >ey &&fx>ex &&fx<ex+ew &&ey >0){
score += 10
fires.splice(i,1)
enemy.splice(j,1)
stage.removeChild(fire)
stage.removeChild(enemy1)
createjs.Sound.play("explosion")
var exp1 = new createjs.Sprite(spriteSheet,"exp")
exp1.x = ex
exp1.y = ey
exp1.addEventListener('animationend',function(e){
stage.removeChild(e.target)
})
stage.addChild(exp1)
}
}
