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

使用Createjs为HTML5游戏编写PreloadJS和SoundJS方法:

先不说createJs的起源，基础什么的，直接说createJs的用法。先从官网的createJs下载。createJs分为四个部分:easelJs(图形动画)、preloadJs(文件加载)、soundJs(音频控制)和tweenJs(补间动画)。下载时，建议下载两个文件，一个是压缩文件，供项目中参考，一个是源文件，用于查看用法、API、demo等。

接下来，开始分析代码:首先，介绍js文件

？功能？init(){stage？=?新的？createjs。阶段(“cas”)；C_W？=?stage . canvas . width；C_H？=?stage . canvas . height；var？清单？=?[{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:"币" }]加载器？=?新的？createjs。load queue(false)；loader . addevent listener(" complete "？,?handle complete)；loader . load manifest(manifest)；draw loading()；？}上面用preloadJs中的方法实例化一个加载器，把要加载的镜像文件放到manifest中，加载，加载完成后调用回调handleCompelete函数:

？功能？HandleComplete(){//当图片素材被加载时，执行这个方法var？manImage？=?loader.getResult("man ")，lowground？=?loader.getResult("ground ")，高地？=?loader.getResult("high ")，bgImage？=?loader.getResult("bg ")，币？=?loader . get result(" coin ")；天空？=?新的？createjs。shape()；sky.graphics.bf(bgImage)。drawRect(0，0，C_W，C _ H)；sky.setTransform(0，？0,?1?,?c _ H/bgimage . height)；stage.addChild(天空)；男人？=?createMan(200，326，man image)；//这个框就是裁判区匡？=?新的？createjs。shape()；Kuang . graphics . begin stroke(" rgba(255，0，0，0.5)")。drawRect(0？,?0?,?man.size()。w？,?man.picsize()。h * 1.5)；//?stage.addChild(匡)；mapHandle(lowground？,?高地？,?硬币)；createjs。Ticker.timingMode？=?createjs。Ticker . RAF//设置循环方法，可以是requestAnimationFrame或者settimeoutcreatejs . ticker . setfps(30)；//舞台帧率控制createjs . ticker . addevent listener(" tick "，打勾)；//绑定逻辑生成函数窗口。addeventlistener ("keydown "？,?函数(事件){事件？=?event | | window.eventif(event . key code = = = 32 & amp；& ampman.jumpNum & ltman . jump max){ man . jump()；}})?}加载后得到后端的图像数据，直接用loader.getResult就可以得到，跑酷游戏需要背景，所以我们实例化一个天空，然后画一个位图。bf方法是beginBitmapFill的缩写，就是开始绘制位图。后面的drawRect是位图的绘制区域，区域当然是整个画布，所以是drawrect (0，0，c _ w，c _实例化sky后，直接添加到舞台上就可以了。下一步是实例化一个角色，该角色被自己封装，稍后在createMan方法中会提到。然后设置舞台循环。