Online demo here

Question

我有一个简单的画布动画：两个矩形在两个不同的方向上移动。但是，我觉得这可以简化得更多。

var canvas = document.getElementById('canvas'),
    c = canvas.getContext('2d'),
    x = 10,
    y = 15,

    a = 20,
    b = 50;

function move() {
    c.clearRect(0, 0, 500, 300);

    c.fillRect(0, y, 5, 5),
    c.fillRect(b, 5, 15, 15);


    x++;
    y++;
    b++

    if (y > canvas.height || x > canvas.width) {
        y = 0;
        x = 0;
    }
}

setInterval(move, 100);

例如，如果我想创建另外三个形状会发生什么？目前，我必须为每个坐标创建更多变量：

    x++;
    y++;
    b++

有没有办法可以将每个矩形变成自己的对象？

Answer 1

您当然可以将它们变成对象，例如：

function Rect(x, y, w, h, dltX, dltY, color) {

    var me = this;

    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;

    this.deltaX = dltX || 0;       /// and deltas can be optional
    this.deltaY = dltY || 0;
    this.color = color || '#000';  /// color is optional

    this.update = function(ctx) {
        me.x += me.deltaX;
        me.y += me.deltaY;

        ctx.fillStyle = me.color;
        ctx.fillRect(me.x, me.y, me.width, me.height);
    }    
}

deltaX和deltaY是您希望每次更新移动矩形的程度。如果您将这些设置为例如1，则每次调用x时y和update()将增加1。

使用增量可以轻松创建弹跳（参见下面的演示），只需反转delta值（即delta = -delta）以及加速度，变速等内容，您可以通过三角函数将它们输入到使对象以特定角度移动等等。

如果您愿意，您可以使用固定值，但是您会发现从长远来看，增量是有益的（参考评论：它实际上是一种非常经典的方法，例如第一个Pong游戏:-)）。

Online demo here

现在我们已经定义了对象，我们可以简单地创建它的实例并将它们存储在一个数组中：

var rects = [
    new Rect(10, 10, 100, 100, 1, -2),
    new Rect(100, 1, 50, 50, 2, 1, '#f00'),
    ...
]

从这里开始，只需迭代数组来更新每个对象：

function move() {
    ctx.clearRect(0, 0, width, height);

    for(var i = 0, r; r = rects[i]; i++) {
        /// check any conditions here
        r.update(ctx);
    }
    requestAnimationFrame(move);
}

requestAnimationFrame(move); /// start loop

Answer 2

这是一个稍微简单的版本，但从长远来看，我会推荐Ken's。在我的情况下，rects仍然只是属性包，没有自己的行为。

var canvas = document.getElementById('canvas'),
    c = canvas.getContext('2d'),
    rects = [{x:0, y:15, w:5, h:5, vx:0, vy:1},
             {x:50, y:5, w:15, h:15, vx:1, vy:0}];

function move() {
    c.clearRect(0, 0, 500, 300);

    for (var i=0; i < rects.length; i++) {
        var rect = rects[i];
        c.fillRect(rect.x, rect.y, rect.w, rect.h),
        rect.x += rect.vx;
        rect.y += rect.vy;
    }
}

setInterval(move, 100);

简单的画布动画

2 个答案:

Online demo here