如何使用Createjs来编写HTML5游戏PreloadJS和SoundJS

JavaScript024

如何使用Createjs来编写HTML5游戏PreloadJS和SoundJS,第1张

使用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, circle

function 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()

}