Question

我制作了一个小脚本，使图像上下跳动（这很好）。

现在我试图在我的画布上添加更多图像（该对象的更多实例），但由于某些原因，它仍然只显示一个。

如果有人能够发现我失踪的东西，我们将不胜感激。

var img = function() {

    this.props = {
        x: Math.floor(Math.random() * W + 1),
        y: 50,

        radius: 40,

        // Velocity
        vy: 1,

        // angle
        angle: 0,
        direction: 1
    };

    var self = this;

    this.draw = function() {
        ctx.drawImage(im, self.props.x, self.props.y);
    },

    this.update = function() {
        ctx.clearRect(0, 0, W, H);

        self.draw();

        self.props.y += self.props.vy;
        self.props.vy += gravity;

        if(self.props.y + self.props.radius > H) {
            self.props.y = H - self.props.radius;
            self.props.vy *= -bounceFactor;
            self.props.direction *= -1;
        }
    };

};

// my instances
var el = new img();
var el2 = new img();
var el3 = new img();

function main() {
    el.update();
    el2.update();
    el3.update();
}

setInterval(main, 1000/60);

以下是完整代码： FIDDLE

Answer 1

您清除所有车辆的时间画布，因此只能显示最后一个只需在main（）函数中清除一次。

Answer 2

你在DOM中使用单个图像实例...你的小提琴正在使用来自关闭范围的src来引用单个图像实例。

编辑：在您的代码中im实际上并未引用某些内容，但它在img()的所有实例之间共享。

画布上的几个对象实例

2 个答案: