首先到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.width
C_H
=
stage.canvas.height
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.event
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方法后面有说，是自己封装的。
然后进行舞台循环设置，上面有注释了，就不说了。
我从百度知道上了解了很多轻松的网页休闲游戏。
1.贪吃蛇与方块
参加人数：全员参加
游戏规则：贪吃蛇与方块是一款休闲益智的游戏，通过移动贪吃蛇的位置来获得食物并加长贪吃蛇的长度，然后通过方块障碍物，通过的障碍物越多，积分排名越高呢，一起来比一比吧！
2. tomegame水果英雄
参加人数：全员参加
游戏规则：水果英雄是一款反应类的游戏，通过滑动手指切各种水果，但是要注意躲避炸弹哦，不小心滑到炸弹是会扣除积分的，积分清零游戏就结束啦，大家加油！
3. 兔子快跑
参加人数：全员参加
游戏规则：兔子快跑是一款跑酷类的游戏，通过手指左右滑动来获得宝石，上下滑动跳过障碍物，在这里千万要注意躲避障碍物呀，不然就提前结束游戏啦！
