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);

效果演示：

欢迎交流！