CreateJs系列教程之 EaselJs_3_绘制移动矩形（Shape）

核心Js代码：

var canvas,
stage,
container,
w = window.innerWidth,
h = window.innerHeight,
s,
dt = '';

function init() {
//设置canvas属性
canvas = document.getElementById('game');
canvas.width = w;
canvas.height = h;
//创建舞台
stage = new createjs.Stage(canvas);
container = new createjs.Container();//绘制外部容器
stage.addChild(container);

//创建矩形
s = new DrawPillars();

//注册事件
s.on('click', function () {
alert();
});
//PS：Shape 类是没有getBounds这个方法，可以通过setBounds来获得
var bounds = s.getBounds();

//右下角控制矩形位置
s.x = w - bounds.width;
s.y = h - bounds.height;

//加入场景
container.addChild(s);
stage.update();
}

//绘制矩形 类
function DrawPillars() {
createjs.Shape.call(this);//继承Shap类
this.graphics.beginFill("#ff0000").drawRect(0, 0, 50, 50);
this.setBounds(0,0,50,50);//设置矩形的边界属性，这样可以获得width和height属性
}
DrawPillars.prototype = new createjs.Shape();//获得原型方法

createjs.Ticker.setFPS(60);//设置游戏帧率
createjs.Ticker.on("tick", tick);

function tick() {
if (s.x > 0 && s.x <= 10 && s.y > 0 && s.y <= 10) {//左上角
dt = 3;
} else if (s.x > 0 && s.x <= 10 && s.y > h - s.getBounds().height - 10 && s.y <= h - s.getBounds().height) {//左下角
dt = 2;
} else if (s.x > w - s.getBounds().width - 10 && s.x <= w - s.getBounds().width && s.y > 0 && s.y <= 10) {//右上角
dt = 1;
} else if (s.x > w - s.getBounds().width - 10 && s.y > h - s.getBounds().height - 10 && s.y <= h - s.getBounds().height) { //右下角
dt = 0;
}

switch (dt) {
case 0:
s.x -= 5;
break;
case 1:
s.y += 5;
break;
case 2:
s.y -= 5;
break;
case 3:
s.x += 5;
}
stage.update();
}

说明讲解：

1：外部容器类

container = new createjs.Container();//绘制外部容器

一个容器是一种可嵌套的显示列表,允许您处理复合显示元素。例如你可以组的胳膊,腿,躯干和头部位图实例连接成一个容器,并把他们作为一个群体,同时还能够将各个部分之间的相互关系。

2：注册事件

//注册事件
s.on('click', function () {
alert();
});

可以在显示对象上面绑定一个事件：可以用 on 或者addEventListener 注意大小写！包含（click,, mousedown,mousemove,mouseover）好像不支持，touchstart等！

3：创建一个矩形绘制类

//绘制矩形 类
function DrawPillars() {
createjs.Shape.call(this);//继承Shap类
this.graphics.beginFill("#ff0000").drawRect(0, 0, 50, 50);
this.setBounds(0,0,50,50);//设置矩形的边界属性，这样可以获得width和height属性
}
DrawPillars.prototype = new createjs.Shape();//获得原型方法

4：PS：Shape类不拥有 getBounds方法，所以必须手动 setBounds ，边界，然后就可以获得 width|heigt属性；

5：游戏动画设置

createjs.Ticker.setFPS(60);//设置游戏帧率
createjs.Ticker.on("tick", handleTick);

效果演示：

欢迎交流！