使用Createjs来编写HTML5游戏PreloadJS和SoundJS方法：
createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。 首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。
接下来开始分析代码： 首先引入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方法后面有说，是自己封装的。 然后进行舞台循环设置。
CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。一个简单的tick动画看起来是这样的：<pre t="code" l="js">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()
}
