本文目录一览：
- 1、如何使用Createjs来编写HTML5游戏EaselJS简介
- 2、如何使用Createjs来编写HTML5游戏使用EaselJS中的制作Sprite类制作
- 3、如何使用Createjs来编写HTML5游戏完成一个简单的打飞机游戏
如何使用Createjs来编写HTML5游戏EaselJS简介
createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。
首先到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
,
,
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===32man.jumpNumman.jumpMax){
man.jump();
}
})
}
获得加载完成后端的图片数据就直接用loader.getResult就可以获取了，跑酷游戏需要一个背景，所以，我们实例化一个sky，然后进行位图绘制，bf方法是beginBitmapFill的缩写，该方法就是开始绘制位图，后面的drawRect是位图的绘制区域，区域当然是整个画布啦，所以就是drawRect(0,0,C_W,C_H)。实例化出来sky后就直接添加到舞台stage里面就行了。接下来是实例化一个角色，createMan方法后面有说，是自己封装的。
然后进行舞台循环设置，上面有注释了，就不说了。
如何使用Createjs来编写HTML5游戏使用EaselJS中的制作Sprite类制作
createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。
首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs，所以暂时就只说这两个，其实就这两个已经非常够用了。
如何使用Createjs来编写HTML5游戏完成一个简单的打飞机游戏
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();
}
原创文章，作者：CJJF，如若转载，请注明出处：https://www.506064.com/n/139751.html
微信扫一扫 
支付宝扫一扫 