Matter.js 如何不断向 canvas 添加机构

Matter.js How to keep adding Bodies to the canvas

var ball = Bodies.circle(400, 20, 23, {
    density: 0.0005,
    frictionAir: 0.06,
    restitution: 0.3,       
    friction: 0.01,
    render: {
        sprite: {
            texture: 'face2.png',
        }
    }
});

$('.add').on('click', function() {
    World.add(engine.world, ball);
})

这对我有用,它增加了一个圆圈。但是当我再次点击时没有任何反应。

我猜我不是在创建新对象。

我的目标是能够按下按钮 ( .add ),并且每次我按下它时,它都会向世界添加一个新的圆圈。

"ball" 似乎是从身体创建的实例。您应该为要添加到世界中的每个球创建一个实例。

var ball = function () {

    return Bodies.circle(400, 20, 23, {
        density: 0.0005,
        frictionAir: 0.06,
        restitution: 0.3,
        friction: 0.01,
        render: {
            sprite: {
                texture: 'face2.png',
            }
        }
    });
}

$('.add').on('click', function () {
    World.add(engine.world, ball());
})